Add An “Add To Cart” Button To A WooCommerce Shop Module

Last modified Oct 21, 2020
Difficulty Beginner
Language PHP

If you have an online store, it’s essential to pay attention to your website’s user experience. You should ensure that your customers can find and purchase items quickly and that there aren’t too many steps involved in the purchase process.  

The WordPress eCommerce suite WooCommerce pairs perfectly with the Divi theme. Not only can you create unique and attractive product page layouts with Divi, but you can also use several WooCommerce modules included in the Divi builder pretty much anywhere on your site. 

One incredibly popular WooCommerce module in the Divi theme package is the Shop module. By simply adding this module to a page, post or project layout, you can turn any section of your site into an eCommerce-ready portion, primed to make sales. 

One of the biggest complaints is that the Divi WooCommerce store has no Add to Cart button. By default, the Divi Shop module only displays the product’s featured image, name or title, and the price. It does not display an Add to Cart button, so, for a site visitor to make a sale, they’ll need to click into an individual product page first. 

If you’d like to remove this extra step and display an Add to Cart button directly in the Divi Shop module, this Divi tutorial is for you. 

In this snippet, you’ll learn how adding a short line of PHP code can help you display a WooCommerce Add to Cart button in your Divi Shop layout. 

Looking for the code? Jump ahead to grab the snippet. 

For this tutorial, we’ll be adding custom code to your Divi site. Before you start editing your site, we recommend making a backup of your site in case any mishaps occur. Here is a helpful guide for backing up your WordPress site

How to add an “Add To Cart” button to the WooCommerce Shop module

When you add a Shop module to a page, post or project, by default, it will display as such:

Divi Shop module default display

By default, the Divi Shop module only displays the product title and price

In our child theme, Divi eCommerce, we’ve added this feature, of including an easy-to-use Add to Cart button to the Shop module. You can see this in action in our demo

In this tutorial, you will:

  • Add a line of PHP to the functions.php file in your child theme. 

 

If you haven’t already got one set up, we recommend installing and activating a child theme. The code we are about to add will override the code in the parent theme (Divi theme), so you’ll need a child theme to protect your work. If you’re new to the concept of child themes, read our guide. If you’re looking for a child theme for your site, you can download a free Divi child theme here.

Once your child theme is set up and running, navigate to Appearance > Theme Editor and open the functions.php file of your child theme. 

Your child theme should display by default. If not, select it from the drop-down menu and click Select. 

WordPress Theme Editor Divi child theme selection

Select the child theme to edit the functions.php file

Copy and paste the following code into the functions.php file. Remember you click Update File when complete. Make sure that you add the code before the closing ?> tag.

/* Display Add to cart button on archives */ 

add_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10);

When you return to the front-end of your site, you’ll see that each product in the Divi Shop module now includes an Add to Cart button. 

 

Ending thoughts

By using a bit of PHP and CSS, you can achieve some incredible layouts for your Divi website. We hope that you enjoyed this Divi tutorial. 

If you want more code snippets, please post your snippet requests in the comment section below!

PHP

/* Display Add to cart button on archives */ 

add_action('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10);

 

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.6.5 of the Divi Theme.
If you think this code saved you time, we will be happy to receive a comment!

___

License: This snippet contains code from the WooCommerce, copyright Automattic modified by Divi Space, October 5, 2020. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

3 Comments

  1. Alison

    Worked perfectly as of 15 Oct 2020. Thank you, this is a brilliant tip.

    Reply
  2. Octavio

    Also, any CSS to make it look even better?

    Reply
  3. Octavio

    Hello Divi Space Team. The code worked wonderful. I was looking for this since long time ago. The ability to implement this button without a third party plugin.

    Thank you so much!!

    Reply

Submit a Comment

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

Receive notifications about our new blog posts.