WooCommerce Tutorials Wordpress Theme Tutorials

How To Add Corner Graphics To Products In The WooCommerce Flatsome Theme

As mad as it sounds, one of the most time-consuming processes when creating a new WooCommerce website can be deciding which theme to use! If you are anything like me you will never find exactly what you need, but instead, find something close from which you can tweak and build upon.

I have lost count as to the number of different WooCommerce themes I have worked with over the years, but after trying so many there has always been one that stands out, Flatsome. I won’t get into the specifics of the theme in this tutorial, but if you have not heard of it before, and want to create professional-looking results with ease, then I fully encourage you to take a look.

In this article, we are going to show you how to enhance the single product page design of Flatsome by introducing an eye-catching call to action graphic in the corner of your product images.


Making The Most Of Your Product Pages


Above is a picture of the Flatsome product page in the default setup, not bad by all means, but I definitely think we can offer something more enticing in place of the ‘Sale’ bubble to engage customers, for me, this does not stand out quite as well as it could.

In the world of online retail, your single product page should always be as refined and effective as possible, why? because this is where the customer will browse and ultimately make the decision whether to purchase a product or not. Every inch of space must be used effectively, too much information can become overwhelming, whilst too little can leave your customer with unanswered questions.

As standard, your product page should always answer the following questions:

  • What is the product?
  • How much does it cost?
  • How much is shipping?
  • When will I receive it?

All successful online stores will answer those questions, but those who really convert well will go that one step further to add simple and definitive ‘call to actions’ to entice their customers to make their purchase.

For the purposes of this tutorial, we will be adding a number of different messages to help try and convert our customers. One way in which we could achieve this is by adding it to the product information already on the right-hand side, but as we mentioned previously, too much information here could easily overwhelm the customer, so lets put our message in place of that sale bubble instead.


How Would We Like The Final Solution To Work?

WooCommerce Corner Image Final Design

Above is a picture of how we would like our product page to look after we have added our brand new corner messaging.

As with any feature implementation like this, there are always many different ways in which it can be achieved. The easiest solution here would be to override a template file and add our corner overlay graphic directly, but what if you only want to show the message on a handful of products? Or perhaps you would like to add a number of different graphics that vary depending on the product?

Instead, let’s think long term flexibility here and create a nice looking select dropdown within your WooCommerce admin that will let you select a corner message per product! Our message options will include:

  • On Sale
  • Best Price
  • Free Delivery
  • Free
  • Limited Stock

Building The Admin Corner Graphic Selector

First, we need to find a nice place within the product admin area to place our drop-down selector. WooCommerce generally offers most of the finer product detail options within the ‘Product Data‘ panel tabs, so let’s put it there.


WooCommerce Product Data Tabs

There are three individual processes involved here that we will need to handle with code:

  • Creating the admin tab
  • Adding the tab content
  • Saving the selection when a product is updated

Creating The Admin Tab

Creating the tab itself is fairly straightforward, WooCommerce thankfully offers a dedicated filter titled ‘woocommerce_product_data_tabs‘ in which all tabs are passed through as an array, we can simply hook in and add our own tab data to the existing array before returning it back.


function wpcodetips_corner_image_tab ( $product_data_tabs ){
    $product_data_tabs['wpcodetips_prod_image_corner_tab'] = array(
        'label' => __( 'Corner Image' , 'woocommerce' ),
        'target' => 'wpcodetips_corner_image_tab_data'
    );
    return $product_data_tabs;
}
add_filter( 'woocommerce_product_data_tabs' , 'wpcodetips_corner_image_tab' );

Do not worry too much if this code does not make sense to you, the two lines that will probably be of most interest are 3 and 4 in which we set label and target values. The label is the title displayed on the tab, and the target value is a div element id which will be used as the tab content, more on that shortly.

Add the code above to your Flatsome child theme functions.php file and you should hopefully see your brand new tab introduced into the list, important to remember that clicking it will currently have no effect until we add content.


WooCommerce Custom Product Tab

Adding The Tab Content

When we click on the newly created tab we will want to access a dropdown selector allowing us to pick which graphic we would like to overlay in the corner of the product image.

It may be a little confusing, but the way in which you create the tab and then add content to that tab is handled by entirely different hooks. As you saw above, we first used a filter to add in our own tab element, but next, we will use the action ‘woocommerce_product_data_panels‘ to add the actual content.

Next we can add the following code to the existing block above from which you should magically see your admin interface start to take real shape!


function wpcodetips_cornerimage_tab_data() {
    global $woocommerce , $post; ?>
    <div id="wpcodetips_corner_image_tab_data" class="panel woocommerce_options_panel">
        <div class="options_group">
        <?php
        woocommerce_wp_select(array(
            'id'          => 'wpcodetips_prod_corner_image_select',
            'label'       => __( 'Product Corner Image', 'woocommerce' ),
            'description' => __( 'Please select the product corner image you would like to display.' , 'woocommerce' ),
            'desc_tip'    => true,
            'options'     => array (
                ''        => __( '' , 'woocommerce' ),
                'prod_corner_on_sale'    => __( 'On Sale' , 'woocommerce' ),
                'prod_corner_best_price'    => __( 'Best Price' , 'woocommerce' ),
                'prod_corner_free_delivery'    => __( 'Free Delivery' , 'woocommerce' ),
                'prod_corner_free'    => __( 'Free' , 'woocommerce' ),
                'prod_corner_limited_stock'    => __( 'Limited Stock' , 'woocommerce' )
            )
        ));
    ?>
        </div>
    </div>
    <?php
}
add_action( 'woocommerce_product_data_panels' , 'wpcodetips_cornerimage_tab_data' );

Quite a lot of code to look at here for those who are unfamiliar, but I have highlighted what I believe the be the most relevant lines so that we can go over what they are doing. If you want to understand the real depths of what is happening then I advise you to read up on the woocommerce_wp_select function.

  • On line 3 we create the div element to hold our select input box, but the most important value here is the id of ‘wpcodetips_corner_image_tab_data‘ which relates back to the first code block we added when creating the tab. It is this value that connects the tab to the content.
  • Line 7 we set an id value for the dropdown select input, this will be used as a reference when we come to save the data.
  • Lines 12 – 17 are where we actually create the drop-down options, the first being just a blank value, and the following being the images choice we would like, note that the values of these selects here are extremely important as this is the value we will be storing and using to reference an image on the frontend later.

I do hope you are still with me here! All being well you should hopefully now be able to see the following within your product admin editor.


WooCommerce Corner Image Options

Saving The Selection Choice

We now have a very pretty admin interface to select a corner image per product but currently, the value will not remain when the products are saved or updated, let’s look at saving it to the database, thankfully this is very straightforward.


function wpcodetips_save_cornerimage_selection( $post_id ) {
    $cornerImage = $_POST['wpcodetips_prod_corner_image_select'];
    update_post_meta( $post_id , 'wpcodetips_prod_corner_image_select' , esc_attr($cornerImage) );
}
add_action( 'woocommerce_process_product_meta' , 'wpcodetips_save_cornerimage_selection' );

When a product is saved within WooCommerce it triggers all product meta to be processed in an action labeled ‘woocommerce_process_product_meta‘, we use that very action to grab the select value and store it in the database as an additional piece of product metadata, simple.

We now have a fully functioning admin interface to use for our corner graphic feature, change the value, save the product and you should find the value is stored.

Everything we have done so far may seem a little excessive, but when it comes to adding more options down the line you will be pleased you made the extra effort to make it very easy to manage.


Image Preparations

With the back-end side of our feature complete, we can now move onto how we show that graphic to our customer.

Before we can start on any code to present our image, we need the image itself! Generally speaking the graphic you use can be whatever you like, we have opted to use a 500 x 500 pixel square png in which one half is the red-backed message and the other half is transparent. Feel free to download our example graphics for use within your own project.

What is extremely important at this stage is the naming of your graphics. You will need all files to be of a PNG format and to be titled exactly the same as the value stored within the product meta. For example, the graphic we wish to show for our ‘On Sale’ option should be named:

prod_corner_on_sale.png

Now that we have the graphics ready, we need to upload them to our server for access, for this tutorial let’s place the images in the following folder:

your-website/wp-content/uploads/corner_images/

Our image preparation is good to go!


Completing The Frontend Display

In simple terms we want to achieve the following frontend flow when a product is viewed by a customer:

  • Does this product have a meta value for a corner image?
  • If yes then get that value
  • Grab the image that is relevant to that value (metavalue.png)
  • Display the image in the corner of our product image as an overlay

What makes the next process so straightforward is the hook offered by the Flatsome theme to completely overwrite the content of the existing sale bubble. Let’s get stuck in.


function wpcodetips_prod_corner() { 
    // Check if a corner image selection exists
    $cornerBanner = get_post_meta( get_the_ID() , 'wpcodetips_prod_corner_image_select' , true );
    // Make sure the value is not empty and that we are on the single product page
    if( isset($cornerBanner) && !empty($cornerBanner) && is_product() ){
        $cornerImgPath = wp_upload_dir()['baseurl'] . '/corner_banners/' . $cornerBanner . '.png';           
?>
    <img class="wpct-corner-banner" src="<?php echo $cornerImgPath; ?>">
<?php   
    } 
}
add_action( 'flatsome_sale_flash' , 'wpcodetips_prod_corner' );

So as you can see we are using the Flatsome hook ‘flatsome_sale_flash‘ to add in our additional content. We first check for a ‘wpcodetips_prod_corner_image_select‘ meta value (as we saved earlier on), if the value exists, it isn’t empty, and we are on a single product page then we create the image path to match the directory we created earlier on and add the HTML to display it.

Believe it or not, if all has gone well you should see the following when you refresh your product page, do not be alarmed as this is technically correct for the moment!


WooCommerce Corner Image Penultimate Step

Finishing Up With Styling

It’s been a long road, but do not worry we are almost there! Whilst the image above might look like an absolute disaster, we are just a few lines of styling away from the final result! The following code will need to be added to your theme’s style.css file.

First we need to hide the original sale bubble we were looking to replace.

.badge-container{
    display: none;
}

Now we just need to correct the display of our new triangle graphic. The two main things we need to fix here are the fact that currently our image sits above the product image, and secondly the size. Not much work required here to finish the job off.

.wpct-corner-banner {
    position: absolute;
    z-index: 10;
    width: 150px;
}

You can tweak the width value here to adjust the size of your corner graphic.

Add the above code, refresh your product page and all being well you should see the result we have been working hard to achieve, Good work!


WooCommerce Product Corner Image Final Design

Conclusion

Quite a complicated tutorial here, but I am sure you will agree the final feature is well worth your time investment! Now it is up to you as to which messages you wish to add to your Flatsome based WooCommerce store. For even more product page manipulation within Flatsome, you may want to read up on the Flatsome custom product page.

If you have added the feature to your website I would love to take a look! Leave your URL in the comments below. Alternatively, if you have struggled with a particular section of the guide then please let me know below and I will try my very best to help you, after all this website was designed to do just that!

Buy Me a Coffee?Buy Me a Coffee?
Gary

Hi, my name is Gary, I hope to share some of my real-world programming experiences and code solutions to help you develop your Wordpress and WooCommerce skills.

Leave a Reply

Your email address will not be published. Required fields are marked *