Do you use Divi and want to customize your shop pages? In this tutorial, you will learn how to include the Add to Cart button in Divi shop pages.

If you are planning to start an online shop, WooCommerce is the easiest and fastest way to do so. Even if you’re not a developer, some excellent WooCommerce themes can help you get started and enhance the features of your store. One of the best options out there is Divi.

Why include an Add to Cart button in the Shop Pages?

Divi theme is one of the most popular options for WooCommerce shops. It’s a very flexible theme that comes with plenty of powerful features. However, one drawback is that the products in the shop pages don’t have an Add to Cart button. This adds a step in the purchase funnel and can affect conversions. The good news is there’s a way to fix that.

In this guide, we are going to show you how you can easily add the Add to Cart button in Divi shop pages.

How to Add the Add to Cart Button in Divi?

Here, we are going to show you the simplest and most effective ways to include the Add to Cart button in Divi. Even though we’ll do some changes to the theme’s core files, these methods are very easy to follow even for beginners.

The main two methods to add the Add to Cart button in the shop pages are:

1. Modifying the functions.php file
2. Using Code Snippets plugin

Both methods are beginner-friendly and will allow you to add the Add to Cart button in no time.

Before we start

Before we start, we recommend you:

• Generate a complete backup in case something goes wrong.
• Create a child theme: We don’t recommend modifying the theme’s files directly. Instead, you can create a child theme and make changes to it. There are different methods to do so. In this tutorial, we will use a plugin.

1) Include Add to Cart button from functions.php

Create a Child Theme

Before we add the Add to Cart button in Divi, you need to create a child theme. To do that, we will use a free WordPress plugin called Child Themify. So, first, you need to install Child Themify on your site.

Then, activate it.

After that, you will see the plugin’s settings under the Appearance section.

From the dropdown, you will need to select a parent theme. In our case, we are going to create a child theme for Divi. Then, name your new child theme.

There are also some advanced options, but you don’t need to use them for this.

After selecting the parent theme and naming the child theme, press the Create Child Theme button.

After that, go to Appearance > Themes section and you will see the new child theme. Activate it.

Now, check the shop page of your store. In our case, we have created a demo shop using some sample products.

As you can see in the screenshot above, there’s no Add to Cart button. So, when a user wants to add a product to the cart, they can’t do it directly from the shop page. Instead, they have to go to the specific product pages and add the items to the cart from there.

The good news is that there’s an easy way to include an Add to Cart button on the shop page. To do this, you will need to add a few lines of code to your child theme.

Change the functions.php file

To include the Add to Cart button on the shop page in Divi, go to the theme editor, and select the functions.php file. Copy the code below and paste it on your functions.php file.

// This code adds "Add to Cart" buttons to a page displaying shop loop
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

After pasting the code, click Update File. And if you check the shop page frontend, you will see the changes.

You have added the Add to Cart buttons to the shop page!

2) Code Snippets Plugin

Alternatively, instead of updating the functions.php file, you can include the Add to Cart button in Divi using a plugin. In our experience with WordPress and customization, Code Snippets is one of the best tools for this task.

First of all, you need to install and activate the Code Snippets plugin on your site.

Then, you will need to add a new snippet to your website.

Simply name your snippet for identification purposes, copy the code from below and paste it on the Code field.

// This code will include "Add to Cart" buttons to a page displaying shop loop
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

Then, save and activate the snippet.

Once again, you will see the Add to Cart buttons on your shop page.

As you see, both methods are very simple and effective. If you’re a beginner, we recommend you use Code Snippets. It is a free tool that lets you easily modify the core files and it won’t break your website.

How to Customize the Add to Cart Button?

Now that you have successfully included an Add to Cart button in the Divi shop pages, you need to customize the button.

To do that, you have to specify a custom CSS class for your button. A simple PHP code will do the job. Then, you can add a bit of CSS and customize the button.

So, to do it, paste the below PHP code on the Code Snippets section as a new one.

add_action( 'woocommerce_after_shop_loop_item', 'quadlayers_woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'quadlayers_woocommerce_template_loop_add_to_cart', 10 );

function quadlayers_woocommerce_template_loop_add_to_cart(){
   woocommerce_template_loop_add_to_cart(array('class'=>'button product_type_simple add_to_cart_button ajax_add_to_cart my_class_here')); 
}

Then, you can use CSS to modify the button. In this code, we have mentioned the button’s default CSS classes like: button product_type_simple add_to_cart_button ajax_add_to_cart. Additionally, you can add your custom CSS class by replacing my_class_here.

When you include additional CSS to your theme, you can use something like: .my_class { option:value !important; }. Make sure you will replace my_class with your CSS class.

For example, you can use a CSS code like this:

.woocommerce-LoopProduct-link + a {
    /* Your custom CSS here */
}

The Divi theme comes with a custom CSS editor, and you can paste all the CSS code there. On the other hand, you can use the additional CSS section through your WordPress customizer. We recommend using the Customizer because it lets you see what you are doing in real-time.

Conclusion

So, this is how you can easily include an Add to Cart button in the Divi shop pages. This way, you can improve the purchase process, provide customers with a better experience, and increase your conversions. Additionally, it will help you reduce cart abandonment in your store.

Another interesting option to increase conversion on your store is to include direct checkout links on your store. This way, you shorten the purchase process and reduce the chances of users dropping off. For more information about this, check out our guide on how to create WooCommerce direct checkout links.

Additionally, if you want to customize your store, we recommend you check out the following tutorials:

• How to customize the WooCommerce Shop Page?
• Add to cart function programmatically in WooCommerce
• How to implement the AJAX add to cart button in WooCommerce?
• How to customize the WooCommerce checkout page?

Finally, to make the most of Divi Theme, you can have a look at our guides:

• How to Hide and Remove Footer in Divi?
• Divi Contact Form Is Not Working? Here’s How To Fix It!

If you found this article helpful, please consider sharing this post with your friends on social media. It will help others customize the Divi shop pages.

For more information on how to improve conversions, check out the best WooCommerce quick buy plugins.