Adding the cart button to your Divi shop pages.

As is always the case with these code snippets, this one comes from a question by a user in the Divi Theme Users group on Facebook.

Leif Ottosson asked about the ‘Add to Cart’ button on the Divi/WooCommerce shop page. When adding the Divi Shop Module to a page via the Page Builder, the list of products on that page does not include an ‘Add to Cart’ button. The idea being that the user should first view the product before adding it to their cart.

Sometimes, however, it may be quicker or better (from a UX  perspective) to allow your user to add to their cart, straight from the product list page.

This can be achieved by using the following PHP code snipped, either in the functions.php file of your child theme, or in a plugin.


// register add to cart action
function dac_add_cart_button () {
    add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10 );
}
add_action( 'after_setup_theme', 'dac_add_cart_button' );

Replace the ‘dac’ prefix with any prefix of your own and you should now see the ‘Add to Cart’ button underneath the products on any page where you have used the Shop module.

Buy my Divi Plugins from
Elegant Marketplace.

22 Replies to “Adding the cart button to your Divi shop pages.”

  1. Very nice, Jonathan! Having an “Add to cart” button does indeed help the UX as well as conversions. Thanks for the post, this is actually something I need to implement on a current site! 🙂

    1. Awesome, I help someone else and inadvertently help an old friend at the same time. Man I love blogging ! 😉

      Thanks Terry. As a developer/programmer I have no idea what works for the user or conversions, that’s someone else’s job, my job is to just make it happen 😉

  2. Hi Jonathan, would this work with the current version of DIVI?
    The coding in the functions.php folder seems to have changed since I updated, and the ‘add to cart’ option appears to be wrapped up in an if command.

        1. Hi Willy

          If you have added this to the functions.php of your active child theme and it’s not working, I can only assume there is a conflict somewhere. I would have to debug further to determine the problem.

          Try adding the following to the top of the dac_add_cart_button function (before anything else)

          die(‘this is working’);

          If you refresh your shop page and see the text ‘this is working’ then the snippet is working, and perhaps something else is hooked to the woocommerce_after_shop_loop_item_title that fires after your hook does. Try updating the priority to a larger number so that yours fires later.

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

          If either of these don’t work, you may need to hire a developer to assist.

          Regards

    1. Hi Adrian

      If I remember correctly you have to style the injected button to have the same CSS attributes as a Divi add to cart button. In this example the button being injected doesn’t have the same classes as the default Divi Add to Cart button.

    2. You have to add this css code into Divi > Theme Options > General > Custom CSS field.

      .woocommerce .button::after {
      font-family: ‘ETmodules’;
      }

      hugs!

    1. Hi Steve, that code snippet was shared with me by a developer of WooCommerce so I’m fairly sure it wouldn’t cause any issues with images. All it does is enable the Add to cart button on your shop pages, if they are disabled.

  3. Hello,
    Nice post! I have a small question though. I am trying to put an Add-to-cart button in the main divi slider. Now divi slider only gives an option to input a URL for the default slider button. But i was wondering is there a way to modify that button and convert it into a WooCommerce Add_to_Cart button?

    Any advice would be greatly appreciated! 🙂

    Regards

    1. Hi Nikki, thanks for the question.

      I wasn’t aware that this doesn’t work on 3.0, which is strange because it must mean that Divi is overriding the same WooCommerce action hook. I’ll investigate and see if there is an updated solution.

    1. Hi Barry. The only reason I can think this is happening is because something else is overriding the action hook for the woocommerce loop used to add the add to cart button. Are you using any plugins or themes that could be doing this?

Leave a Reply

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