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.
If you’re looking for a quick and easy way to customize WooCommerce, have a look at the Divi Shop Builder plugin. This incredibly handy tool lets you customize the WooCommerce Add To Cart button using the Divi Builder, without touching a line of code.
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:
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.
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.
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!