How to activate ‘Add to cart’ buttons in WooCommerce archives/shop page?

Hello WordPress developers. This is one of the most common question I have come across the internet while developing an E-commerce website using one of the best plugin ‘WooCommerce – Excelling ecommerce’ by WooCommerce. Unfortunately WooCommerce haven’t provided any visible option to activate this handy feature to show ‘add to cart’ on homepage, shop page or archives whatever you want to call it. This is how it looks without ‘Add to cart’ buttons.

Without Add to cart buttons

 

And this is how it will look after adding ‘add to cart’ buttons. Looks cool ‘eh?

With add to cart buttons

 

Trust me its really easy to do, no rocket science involved. Many professional coders write their own snippets to add this function but guess what, WooCommerce themselves has added this feature but its hidden or not mentioned. Now you must be thinking where it is hidden? Let me show you where it is.

If you go into your WordPress dashboard and then to the Appearance > Editor and select your theme from the option ‘Select theme to edit:’, you have now all core files of your theme with so much code in it. Don’t worry you don’t really need to mess up with much of them but only a single file. If you are using WooCommerce plugin compatible theme then the plugin itself add functions automatically to your theme files to function properly. Like I’m using Divi theme from Elegant themes, its amazing.

1. Find ‘functions.php’ and click on it.

Functions.php

 

2. Press Ctrl + F (Command + F for Mac users) and find this piece of code.

remove_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );

Read:  How to Create Push Notifications for Posts in WordPress

remove_action

 

3. Simply delete ‘remove_action’ and replace it with ‘add_action’ or you can also just replace by copying the whole code given below.

add_action( ‘woocommerce_after_shop_loop_item’, ‘woocommerce_template_loop_add_to_cart’, 10 );

 

And it should look like this:

add_action

 

It should fix your problem. Happy WordPressing. 😉

Share on RedditShare on StumbleUponShare on FacebookTweet about this on TwitterDigg thisShare on Google+Pin on PinterestShare on LinkedInShare on VK
The following two tabs change content below.

shayde

Php, CMS, SEO,SMM, CPC, PPC, Blogging, WEB 2.0 and Internet Marketing geek set on a mission to make earning online as easy and as automated as humanly possible.. Follow: https://twitter.com/ShadabDurrani

  • Keir Paterson

    Hi

    This is a great tutorial. I do have one issue though. When i hover over the “add to cart” button, i get a number 5 appearing next to this. Why is this?

  • Marcelo

    Thank you very much !!