Search the site:

Home / Blog / How to add a trust seal in WooCommerce after Add to Cart button

How to add a trust seal in WooCommerce after Add to Cart button

In the last post, we saw how to add custom HTML above the short description on the product page. Today, we will see how we can add content after the ‘Add to Cart’ button on the product page. There can be many things that you want to add after the button. One such idea is to add a security seal to your website so as to increase the trust factor.

A trust badge or security seal will increase the buyer’s confidence. Customers are more likely to buy from your website if they have confidence in your checkout process. These badges or seals also help in increasing your conversion rate.

As we know, WooCommerce comes with lots of hooks & filters. In order to add content after ‘Add to Cart’ button, we have an action hook called ‘woocommerce_after_add_to_cart_button‘. This action hook can be found in all single product templates like simple.php, variable.php, external.php & grouped.php.

As always, let’s start with a simple example. We will display a simple “Hello World” message below the button. Let’s create a function called show_content_after_add_to_cart() where we will just echo some content.

The message won’t be displayed on the product page as we haven’t added our hook yet. We need to attach this function to our ‘woocommerce_after_add_to_cart_button‘ hook.

Now, you can see the message displayed on the product page, below our ‘Add to Cart’ button.

Add trust seal in WooCommerce

This was just an example to see how we can use the hook to display contents on the product page below the Add to Cart button.

Now we will see where we can actually use this hook in our eCommerce website. Many online stores contain some type of security seal to increase their trust factor. A security seal can be an image which displays the type of checkout methods available for the store. Let’s add an image of the seal on our product page. The method to add an image will be same as we saw in the last post.

 

Add trust seal in WooCommerce

The image will now show up on the product pages below the button. You may want to add this image to particular categories, a particular product or for particular tags.

Grab 40% discount on our Premium Plugins this Black Friday and skyrocket your WooCommerce store sales. Use coupon code BFCM17 to save upto $100. Sale ends on Nov 30 2017.

Show image below Add to Cart button by Category ID

Let’s create a product category called ‘Men’ and display the image for the products belonging to the Men category. We can do this by fetching the categories from get_the_terms() method and looping over them. The get_the_terms() function takes two arguments – post ID and taxonomy name.

The taxonomy name for product categories is ‘product_cat’. The categories have a property called term_id which defines our category ID. We check each ID against the ‘Men’ category ID (which in this case is 15), and if it matches we display the image.

Show image below Add to Cart button by Category Slug

Another method to display the image by category is by checking the category slug. The method is same as category ID, we loop over the categories and check each category slug against the Men category slug (which is ‘men’ in this case).

Show image below Add to Cart button by Product ID

We can display the image on selected products too. Select the product IDs where you want to display the image. Loop over them and see if the current product is in it. If it is, then display the image.

Show image below Add to Cart by Product Tag

We can also display the image based on the product tags. The method is same as category. We get all the tags from get_the_terms() function with two arguments – post ID and taxonomy name. The taxonomy name for product tags is product_tag. Let’s say we want to display the seal for the products with the tag called ‘shirts’. If there are no tags defined, we just return back from the function.

Add trust seal in WooCommerce by Product Tag

Show image below Add to Cart from an HTML file

Our code currently contains HTML & PHP in one file. But you may want your views to be separate from your logic. In that case, move all the HTML code in the separate .html file. Include the file in your main PHP file using include() or include_once() function. In this case, if we put our HTML in ‘after-add-cart-html.html‘ file, we include it in the PHP file where we want to display it.


We can also show multiple seals below the Add to Cart button.

Add trust seal in WooCommerce from HTML file

The woocommerce_after_add_to_cart_button hook places content inside the cart form. As you can see our image is placed just below the button with no space in between. Of course, we can add some spacing in between them with some CSS styling.

There’s one more hook which can help us with this  –  ‘woocommerce_after_add_to_cart_form’.  The woocommerce_after_add_to_cart_form hook places content outside the cart form. This means that the HTML we created for our content will be placed after the form on the product page. Here’s an example –

Add trust seal in WooCommerce after add to cart form

As you can see, the image is placed after the form and it has created some spacing in between them.

We learned about two hooks :
woocommerce_after_add_to_cart – places content inside the form below the add to cart button, woocommerce_after_add_to_cart_form – places content after the add to cart form.

If you just want to add an image, the woocommerce_after_add_to_cart_form hook is a much better choice.

Many sites have different kinds of badges like – a ‘Limited Quantity’ seal, an ‘Assured’ seal, or any seal which increases the trust of the buyer on the product and the store. If you don’t have one on your WooCommerce store, you should be adding it right away!

9
Leave a Reply

avatar
7 Comment threads
2 Thread replies
6 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
RichardemyDomenicoed yyNani Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest
Notify of
David
Guest
David

Hi,
That another great post, great value.
By the way, I am using the Storefront theme and I would like to hide the short product description on Archive/Shop. But I want it to appear on single product page. Can you please share with me any CSS to do that. I’ve tried some other lines of code which does not work.
Thanks in advance!

Davauhn
Guest

Hello great post, but I am not that good at coding and was wondering could you tell me exactly where to put all of those code. Meaning the exact locations because I am using storefront and when I go in editor I do see where I should place them. Thanks in advance.

Nani
Guest

Hi, I manage to put the code for an image. However, there’s an error in displaying the image. Only text is display. I already uploaded the image in the correct directory. I insert the url for the page i tested.

ed yy
Guest
ed yy

could you please make a more begginer-friendly tutorial, with a more step-by-step approach?
this feels really oversimplified, and so many steps left out.

Domenico
Guest
Domenico

I tried this code and work, but when a product has variation there are two time same text, how can I fix it?

Thanks

Subscribe Now