How To Add “Free Shipping” Text/Image To Woocommerce Single Product Page

 

If you want to show a “Free Shipping” text caption or image on Woocommerce single product page then you have come to the right place. It is easier than you think! You can see it in action from a website that we find demonstrates this extremely well: Luxury Chandeliers UK. We have attached a screenshot above.

Preparing the work area

We highly advise you to create a child theme before making any modifications if you haven’t done so already. This is common practice as your customizations will not be lost or affected whenever the themes and plugins are updated. We will be using the functions.php file and styles.css file extensively in this post, so please make sure you understand how to create/access those files for your child theme.

Editing functions.php

For this particular example, we are going to be inserting the “Free Shipping” text/image at the end of the “Meta Data” area. The “Meta Data” area consists of meta information such as the SKU, Category and Tags (these will only show up if they are populated).

Begin by opening up functions.php, and copy/paste the function after_product_meta(). All this function does is output HTML that produces the text “Free Shipping!” and give it a css class so that you can manipulate how it looks. Below is the code that you will need to paste in between the “<?php” and  “?>” tags:

 

If you want to produce an image instead of text, you can copy/paste the following function instead. Please make sure to change “<YOURWEBSITEDIR>/freeshipping.png” on line 4 to the location of your free shipping image:

 

Next you will need to add an action for the function you created above “after_product_meta()”, into the “woocommerce_product_meta_end” hook. In simple terms, the hook “woocommerce_product_meta_end” gets called whenever the site has just finished displaying the “Meta Data” such as SKU, Category and Tags. We are essentially telling WordPress to process our code whenever the “woocommerce_product_meta_end” hook is activated. Paste the below code just under the function you pasted earlier to add an action to the target hook:

 

This is what should be newly in your functions.php file in tota after following the above 2 steps:

 

Editing styles.css

Now that we have gotten the HTML to output the “Free Shipping” content, we shall show you how to style what you just outputted. All you need to do is edit styles.css and add code to create css for the “SingleProductPostMetaIcon” class. Here is an example of how you can edit the text version:

And here is an example of how you can edit the image version:

 

That’s it for this simple tutorial! Don’t forget to leave any questions or comments below.

You may also like

Leave a Reply

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