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.

34 Comments

  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! 🙂

    Reply

    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 😉

      Reply

  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.

    Reply

      1. Hi there,

        Still wondering how it works. I placed the PHP code snipped in the functions.php file but it didn’t work… Any help please

        Thanks a lot

        Reply

        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

          Reply

    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.

      Reply

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

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

      hugs!

      Reply

    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.

      Reply

  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

    Reply

    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.

      Reply

    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?

      Reply

  4. Hi Jonathan

    the ‘dac’ prefix what exactly am I suppose to replace this with ? 🙂

    It’s not working for me now, so I guess that’s hat I’m doing wrong.

    p.s. I’m not very php-savvy

    Reply

    1. Hi Michael, the ‘dac’ prefix is just a string, relevant to your site. WordPress documentation recommends prefixing all functions with a unique string, so that anyone else trying to register that function won’t cause conflicts.

      I’ve had some users report issues with this solution, but I’ve never been able to replicate it. If you’re prepared to send me wp admin access to your site I’d be happy to take a look and see why it doesn’t work. (contact details on my about page).

      Reply

      1. If you know how can I change the languaje of “add cart button” and “select option” button etc for woocommerce It’s really good for me if not please said me how I change language for this post.

        Thanks a lot.

        Reply

      2. Sorry for this cuestion, the problem It’s that I work in the backend with the english language if I change to spanish language in the front-end change the language.

        Sorry to bother you.

        Reply

  5. Hi Jonathan,

    The snippet works great, I just hope that you can help me with 1 more thing. I also added a woo commerce snippet so that I can add a quantity field. Unfortunately the button is now on top of the quentity field and I have been trying my best to get them side by side. Do you have a tip for me?

    Reply

    1. Hello Daan

      You can try applying the following css to the quantity div that is appearing after the button

      display: inline;

      That should put the quantity next to the button.

      Reply

  6. This Dont Work .. i mean .. the snippet works and add the buttons, but .. when im trying to edit the page, cause a conflict and the page builder dissapear … i cant edit the page .. the page dont show.

    Reply

Leave a Reply

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