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.

Filed under: Development, Divi, WordPressTagged with: ,

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

    • 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. Thank you! It’s working perfectly. Very helpful of you.

    • Always a pleasure Leif.

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

    • Hi Joe, I’m not sure myself.

      I will try and check and get back to you.

      • 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

        • 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

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

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

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

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

      hugs!

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

  6. FYI
    The code corrupts.
    Images do not show on desktop when admin logged out.

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

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

  8. Do you have a solution for Divi 3.0?

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

  9. Is there a way to change or replace the standard woocommerce shopping cart icon in divi?

  10. I am trying this on a site I am building and cannot get it to work at all. I am in 3.0

    • 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?

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

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

      • 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?

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

    Thanks!!!

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

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

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

  13. Thank you Jonathan . It works perfectly.

    🙂

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

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

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

  16. Nice One!
    Not working in functions.php but works when I use it as a plugin…

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

  18. Thanks for raising my CTR on external products 😉

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

    • 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?

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

        • 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); }

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

          • 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;
            }

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

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

          • 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?

          • I didn’t actually catch that problem, so nice catch! I’ll post it here when I’ve fixed it.

          • 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();
            }
            });

  20. 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 🙂

    • 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. 🙂

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


Add a Comment

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

Comment *

Name *
Email *
Website