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.

77 thoughts on “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 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

        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

  3. Thanks! Though the new button displays the number “5” in hover after the “add to cart” string?!

    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.

      1. Hello, yesterday i did this manipulation and aswell added the css to divi, but then i’ve changed my mind and just wanted to display the basic shop module from divi.

        I’ve deleted the snippet, deleted the code css in divi, went to the functions.php to check it out, nothing there but i don’t know why, when i refresh my broswer or create a new shop module with divi, the quantity and the add to cart are still there.

        I even tried to do a back up from 2 days ago and it won’t go away lol

        Any infos about that please ?

        Thanks a lot

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

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

      hugs!

  4. Thanks! Would you mind giving me a small gibt on how to achieve that? Thanks in adcance!

    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.

  5. 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?

  6. 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

    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).

      1. Hi Jonathan

        The initial error was probably in my child theme. Anyhow the problem was created by my own doing.

        I’ve fixed it, and your code works perfectly.

        I was hoping though you could help me to a code snippet where the add to cart button will be shown after the short description.

        Here’s how it looks now: http://take.ms/3CeJl ; here’s how I want it too look: http://take.ms/HlLhq

        This is the .php I’ve used to generate the short description

        // add short describtion for shop module
        function show_product_description_et_shop() {
        if(class_exists(‘WooCommerce’)) {
        $output = get_the_excerpt();
        echo ‘
        ‘.$output.’
        ‘;
        }
        }

        function load_function_after_wc(){

        add_action( ‘woocommerce_after_shop_loop_item_title’, ‘show_product_description_et_shop’, 100 );
        }

        add_action(‘wp_loaded’, ‘load_function_after_wc’);

        ———-

        P.s. I’ll style the add to cart button later – so it doesn’t look so crazy 😀

        Hope you can help?

  7. How can I change the languaje of button?? I want to use the button in spanis languaje.

    Thanks!!!

    1. Hi Xosé, do you want a solution related to this blog post, or just Divi buttons in general?

      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.

      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.

  8. 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?

    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.

  9. 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.

  10. Hello, I tried your code on Divi 3.0 and it does add the products to the cart. HOWEVER, the items in cart count at the top right DOES NOT CHANGE. It only shows the actual number of items in the cart when I access another page.

  11. Hey, this worked great for me, with one exception. The add to cart buttons work, but because the page doesn’t reload, the et_show_cart_total(); function in header.php isn’t refreshed, so the cart display at the top of the page isn’t updated. Any tips on how to update it? I’m wondering if there’s a way to update just that function’s cart total in a legit fashion. I could use a javascript to update it I suppose, but I’d rather it was based on the real cart total without having to reload the page.

    1. Hi! I have the same situation and I don’t know how can I fix this issue. I try to deactivate the Ajax button from woocommerce, and It works, but It is not that I want to see. Any idea to solve this? Does it exist some plugin to solve it?

      1. I thought I had stumbled across a fix, but it hasn’t worked for me. If you’re more php savvy than me though, maybe you can make it work for you. (It mentions “wootheme” in the code, so I’m wondering if it’s specific to this theme – I’m using Divi child theme). Here is the link – https://www.themelocation.com/how-to-display-number-of-item-in-cart-and-cart-total-amount/. If anyone can advise why this isn’t working for me, please let me know! I copied the Divi header.php file over to the child theme and added the first bit of code, then I added the second it to my functions.php file, but it was coming up with an error.

        1. I implemented the following Javascript into my Divi theme, using the integrations Body section:
          I don’t know how portable this script is, but it works great for our implementation.
          Basically, it adds a listener to the add to cart buttons that checks the cart total and increments it as needed immediately.
          The issue with using PHP, is that PHP only execute on page load, so you have to reload the page to get a new cart total. This code basically doesn’t reload the page, just increments the total. Somehow it’s always right though, because the php code is increasing the backend, while the javascript is increasing the visible cart total.

          Hope this helps!

          var addToCartButtonList = document.querySelectorAll(“.woocommerce ul.products li.product .button”);
          var incrementAllCartsOnTopBar = function() {
          var listOfCarts = document.querySelectorAll(‘.et-cart-info span’);
          for (var i = 0; i < listOfCarts.length; i++) {
          var cartCurrentInnerHtml = listOfCarts[i].innerText;
          var cartNewInnerHtml = null;
          var cartNumberOfItems = cartCurrentInnerHtml.substring(0, cartCurrentInnerHtml.length – 5);
          if (cartNumberOfItems == 0) {
          cartNewInnerHtml = "1 Item";
          } else {
          cartNumberOfItems++;
          cartNewInnerHtml = cartNumberOfItems + " Items";
          }
          listOfCarts[i].innerText = cartNewInnerHtml;
          }
          }
          for (var i = 0; i < addToCartButtonList.length; i++) { addToCartButtonList[i].addEventListener('click', incrementAllCartsOnTopBar, false); }

          1. the posting of this removed the open and closing html script tags., just FYI, you’ll need to put those at beginning and end of the code.

          2. Could you also try updating the element (you may need to update the target class and/or the HTML code):

            // Ensure cart contents update when products are added to the cart via AJAX (place the following in functions.php)
            add_filter( ‘woocommerce_add_to_cart_fragments’, ‘woocommerce_header_add_to_cart_fragment’ );
            function woocommerce_header_add_to_cart_fragment( $fragments ) {
            ob_start();
            ?>
            <a class="cart-contents" href="” title=””>cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> – cart->get_cart_total(); ?>
            <?php

            $fragments['a.cart-contents'] = ob_get_clean();

            return $fragments;
            }

          3. Thanks Jodi, but unfortunately that still doesn’t work for me. I’ll ask Divi support, but I suspect they’ll tell me it’s nothing to do with them as it’s a WooCommerce thing! So close! 🙂

          4. SUCCESS! I wasn’t happy leaving it there! I used a very helpful code checker online to test your Javascript and it highlighted that the quote marks should all be double quotes and that some of them were not the right font! And the hyphen on the 6th VAR should be an en, not an em. All sorted now. Can’t thank you enough for your help Jodi and you of course Jonathan for the original post.

          5. Me again! Just come across another issue. If you make a change to the basket and click “Update Basket”, the header cart does not update until a page refresh. Do you have any more amazing code for that issue Jodi?

          6. Going to work on this some more, but hitting end of day, and this is working so far. I’m going to work on handing the cart removal buttons tomorrow I think. Don’t forget it needs to be implemented properly with script tags before and after.

            var incrementAllCartsOnTopBarForCart = function() {
            var cartElements = document.querySelectorAll(“.woocommerce .quantity input.qty”);
            var cartTotalItems = 0;
            for (var inc = 0; inc < cartElements.length; inc++){
            cartTotalItems = cartTotalItems + parseInt(cartElements[inc].value);
            }
            var cartNewInnerHtml = null;
            if (cartTotalItems == 1) {
            cartNewInnerHtml = "1 Item";
            } else {
            cartNewInnerHtml = cartTotalItems + " Items"
            }
            var listOfCarts = document.querySelectorAll(".et-cart-info span");
            for (var i = 0; i < listOfCarts.length; i++) {
            listOfCarts[i].innerText = cartNewInnerHtml;
            }
            }
            document.querySelector('body').addEventListener('click', function(event) {
            if (event.target.name === 'update_cart') {
            incrementAllCartsOnTopBarForCart();
            }
            });

  12. Wow, Jodi, thank you so much. I ran it through javascript checker and tweaked it again and it works perfectly. Really really appreciate you working this out for us. AMAZING 🙂

    1. No worries! I had to do the work for my own site anyway, so why not share! The tough part this time was I had to learn about delegated event listeners, took me an hour or so to wrap my head and code around that. (that’s the last code block where it does the .addEventListener). I was using a standard event listener, and the event listener kept disappearing because AJAX was reloading the cart frame. It’d work once, then stop working. It drove me crazy for a solid hour. 🙂

      1. You lost me at delegated event listeners!! Ha! I’m not a coder, but understand the general concept and that it is VERY sensitive … I’ve broken my website many times! It’s a great feeling when you crack it though. I’m just super lucky to have stumbled across this forum (and you)! I’m going to be stalking you now Jodi, you do realise?! Thanks again 🙂

  13. Hello, the button works very fine for me. Thanks for that!! But (why is there always a but?) on my site, the button is displayed above some further informations like tax, delivery time and so on. Is there a way to get the button to the last line of each product? Thanks in advance!

  14. Finally a fix! I came across this fix in a YouTube tutorial over two weeks ago which said the code must be added to the functions.php file in *Divi/core/ directory. I had tried on my local XAMPP installation and that didn’t work. I uploaded the site to my hosting to try (thinking it haf something to do with my local setup since everyone else says it works) and that didn’t work either.
    Finally, at which point I was willing to break my site and probably go in for another theme, I looked in the Divi/ directory and there was another functions.php file. I added the code and it worked like magic.

    In summary: if this code isn’t working for you, you’re probably adding it to the wrong functions.php file. Be sure you’re adding it to THIS file */Divi/functions.php and NOT */Divi/Core/functions.php

  15. Hi Jonathan! I’m using your snippet and another snippet to also add the short description of the product on divi theme shop modules, so far i’ve gotten both codes working, yet, i get the button displayed before the description, and not after, any idea how to make them display on the right order? I’m more a designer than a developer so im a bit lost.

    this is the page im working the customizations: https://allisonkirschbaum.com/training-systems

    the other snippet im using you canb find it here: https://divi.tutsdirectory.com/listing/display-the-product-short-description-under-the-product-title/

  16. Hi,

    Thank you. I’ve been searching for that answer! In my site, I have Simple and External products in the same category. With the php function in place, buttons are being shown for both types (The button text for External products is different, which is great). Is it possible to show the button for only Simple products?
    The URL points to my work-in-progress page. Products are tests and css hasn’t been altered…

      1. According to the WooCommerce documents, the function being called “woocommerce_template_loop_add_to_cart” gets the add to cart template for the loop which renders the shop items.

        So my assumption is that you would need to either install a translation for WooCommerce so that the Add to Cart text is translated, or, if you have done this already, override the add to cart template, ideally in a child theme. You can read more about WooCommerce template overrides here – https://docs.woocommerce.com/document/template-structure/

  17. I have checked both settings in WooCommerce > Settings > Products – Add to Cart Behavior. It not working brought me here.

    So are you saying that Divi consciously removed support for this in the Divi theme and the only way to get it back is to override their override with functions.php code?

    As another user pointed out from an example about languages not working correctly, this seems to be fraught with all types of trickle down problems.

    There isn’t a better way to let WC handle this as it had originally been designed by WC?

    1. I can’t speak for Elegant Themes as to why they have chosen to display the cart module the way they did, you’d have to ask them.

      All this post does is show you how to re enable the Add to Cart button on your shop page, as you put it, “to let WC handle this as it had originally been designed by WC”.

  18. Yes, great article. Problem for me is that nearly all my products have 1 or 2 variations. It would be great to have the opportunity to select these too without leaving the shop page, and being able to add to cart once the variations have been selected

    1. Hey Patti, all well thanks.

      You should be able to add some custom css to the
      .woocommerce a.button
      selector to change that.

Leave a Reply to stefanny Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.