August 18, 2020

Add To Cart Buttons On WooCommerce Shop Page

What To Expect From This post:

1) The benefits of having add to cart buttons on your shop page.

2) Where to add your code.

3) The code snippet that will insert add to cart button on WooCommerce shop page.


Please note:

The code that we are going to add to our functions.php file will get removed when you update your theme.

So you have 2 options to avoid losing your code:

1) Use a child theme and save the code there. For more info on child themes please check this website to get a free child theme and to see what a child theme is.

2) Every time you update your theme, you can just paste the code in your functions.php file by following the instructions in this post.

Let’s get you some add to cart buttons!

In this post, I am going to show you a quick and easy way that you can insert add to cart buttons on WooCommerce shop page. 

The default settings within WooCommerce is that there is no “add to cart” buttons underneath each of your products on the shop page. 

This means that if a visitor wants to add multiple items to their basket, they would need to go into each product, add it to the cart, then go back to the shop page to add other products.

Having add to cart buttons underneath each product allows the visitor to add different products to their basket from within the shop page. This is a lot more user-friendly and offers a much better user experience.

So… let’s get you some add to cart buttons!

The button will take on the style that you have set up from within the theme customizer settings.

This is what the final product will look like.

1) Navigate To “Theme Editor”

In the sidebar menu on your WordPress dashboard, navigate to the theme editor.

Appearance > Theme Editor (check image below).

2) Click on the “Functions.php” file

On the right-hand sidebar area, click on the file that’s called functions.php (look at the image below).

Once the functions.php file has loaded, scroll right down the bottom of the file. 

Add another line by pushing “ENTER” on your keyboard. This is where we’ll add our code.

3) Paste the following code


// register add to cart action

function wnc_add_cart_button () {

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

add_action( ‘after_setup_theme’, ‘wnc_add_cart_button’ );


Then click the UPDATE FILE button.


And that’s it!

Now you have add to cart buttons on WooCommerce shop page!

Need A Website?

We specialize in designing highly professional websites for small to medium-sized businesses at an affordable cost.

Only pay us for the job once you are 100% satisfied with your new website.

We offer a lifetime after-sale support service for all of our customers.

DIVI Tutorials

For more useful Divi tutorials just like this one, go check out our Blog page where you’ll find a whole bunch of awesome goodies, to help make your website friggen AWESOME!


Subscribe to our newsletter if you would like to join our mailing list where you will receive things like specials, giveaways, and news. Don’t worry, we will NEVER send you any spam.


  1. Chantelle

    Thank you very much for this post! I have been trying to figure this out for almost a week!!! Thank you thank you thank you!

    • ryan

      Hi Chantelle! That’s good to hear, I am glad that it helped you.

  2. Jean DV

    Great post thank u

  3. Sergio

    Excellent! Thanks

    • ryan

      Hi Sergio! Im glad it helped.


Submit a Comment

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