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.


Posted

in

by

Comments

84 responses to “Adding the cart button to your Divi shop pages.”

  1. Terrance Hale Avatar
    Terrance Hale

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

      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. Leif Ottosson Avatar
    Leif Ottosson

    Thank you! It’s working perfectly. Very helpful of you.

    1. Jonathan Avatar
      Jonathan

      Always a pleasure Leif.

  3. Joe Knapton Avatar

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

      Hi Joe, I’m not sure myself.

      I will try and check and get back to you.

      1. Willy Avatar

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

          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. Adrian Plessin Avatar
    Adrian Plessin

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

    1. Jonathan Avatar
      Jonathan

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

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

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

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

      hugs!

  5. Adrian Plessin Avatar
    Adrian Plessin

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

  6. Steve Avatar
    Steve

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

    1. Jonathan Avatar
      Jonathan

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

    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. Nikki Kostyun Avatar
    Nikki Kostyun

    Do you have a solution for Divi 3.0?

    1. Jonathan Avatar
      Jonathan

      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.

    2. Jon Avatar
      Jon

      Actually this DOES work with Divi 3.0

      No issues here. https://gyazo.com/e56c4f32a5e6e8fb4a8d73a34eb7bd8d

  9. Misha Avatar
    Misha

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

  10. Barry Avatar

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

    1. Jonathan Avatar
      Jonathan

      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. Michael Rurup Andersen Avatar
    Michael Rurup Andersen

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

      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. Michael Rurup Andersen Avatar
        Michael Rurup Andersen

        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. Xosé Avatar
    Xosé

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

    Thanks!!!

    1. Jonathan Avatar
      Jonathan

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

      1. Xosé Avatar
        Xosé

        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.

        1. Jonathan Avatar
          Jonathan

          Hi Xosé

          If you need to translate WooCommerce strings, they have documentation on how do to so on their site.

          https://docs.woocommerce.com/document/woocommerce-localization/

          1. Xosé Avatar
            Xosé

            Thanks for the document.

      2. Xosé Avatar
        Xosé

        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.

    2. radiocastvps Avatar
      radiocastvps

      add_filter( ‘woocommerce_loop_add_to_cart_link’, ‘add_product_link’ );
      function add_product_link( $link ) {
      global $product;
      echo ‘get_permalink( $product->id ).’” class=”button”>’ . __(‘Your Spanish language’, ‘woocommerce’) . ‘‘;
      }

  13. Bank Avatar
    Bank

    Thank you Jonathan . It works perfectly.

    🙂

  14. Daan Avatar

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

      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.

    2. Peter Avatar

      Hi Dan, I would love to know how I add a quantity filed as well to the the divi shop module on the shop page. I have tried many php snippets that I found online. A quantity snippet appears on the page, but if I press the add to card button it will always add one product. No matter how much I type in the quantity field. Do you Dan or Jonathan have a solution for that issue? Would be very nice to know

  15. Matias Avatar

    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. Samuel Femi Avatar

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

  17. Sven Avatar

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

    Thanks for raising my CTR on external products 😉

  19. Joe Pierce Avatar

    This works great – thank you!!!

  20. Jodi Solbrig Avatar

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

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

        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. Jodi Solbrig Avatar

          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. Jodi Solbrig Avatar

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

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

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

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

            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. Jodi Solbrig Avatar

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

          7. Jodi Solbrig Avatar

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

  21. Debbie Avatar
    Debbie

    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. Jodi Solbrig Avatar

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

        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 🙂

  22. Oliver Avatar

    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!

  23. Gilly Avatar
    Gilly

    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

    1. Jonathan Avatar
      Jonathan

      Hi Gilly, I’m glad it worked for you. However you also shouldn’t be adding it to your Divi functions.php. Rather you should be using/creating a child theme and adding the code to your child theme’s functions.php. I wrote a series on child themes, which you can read here https://jonathanbossenger.mystagingwebsite.com/tag/child-theme-series/

  24. Armando Dominguez Avatar
    Armando Dominguez

    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/

  25. Ryan Berg Avatar

    Thank you!! Worked like a charm. I really appreciate it!

  26. Peter Nouwens Avatar

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

      You could probably combine it with something like this to conditionally output the button for simple products only

      https://gist.github.com/patrickgilmour/9d4a28b4a2f0c1dcecbf

  27. Jonathan Avatar
    Jonathan

    Thanks Jonathan

  28. Gustavo Venancio Avatar

    Muito Obrigado Jonathan. Me ajudou muito.

    1. Jonathan Avatar
      Jonathan

      O prazer é meu.

  29. stefanny Avatar

    sensacional….funcionaaaaaaaaaa muito obrigada!

  30. Nikola Avatar
    Nikola

    THANKS!

  31. Marcial Rojo Avatar

    Hi Jonathan,

    Thanks for sharing the code, it worked for my site (https://abc-onlinelearningcenter.com). However the Add to cart button text is showed in english (“Add to cart”). How can the button be showed in local Spanish terms (“Anadir al carrito”)?

    1. Marcial Rojo Avatar

      Hi Jonathan,

      Did you have the chance to review my post of June, 13?

      Thanks!

      1. Jonathan Avatar
        Jonathan

        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/

  32. blue Avatar

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

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

  33. Eric Avatar

    When we click on the button, nothing happen with microsoft edge. Any fix for that?

  34. Simon H Avatar
    Simon H

    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

  35. bigmaxsstudio Avatar

    Hi Jonathan,

    Hope all is well.

    It works great except I’d like to change the gray to the gold color I use. https://terralsole.com/wines. Thanks

    1. Jonathan Avatar
      Jonathan

      Hey Patti, all well thanks.

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

  36. vretechs Avatar
    vretechs

    How to make these add to cart button AJAX?

  37. Ahmad Azimi Avatar
    Ahmad Azimi

    Hello Jonathan,
    It Is Awesome, But I Have Just One Question How Can I Make An Add To Cart Button Like The One In This Link?
    https://nimb.ws/LHasDr
    Thanks

    1. Jonathan Avatar
      Jonathan

      That looks like a custom button, so you would need more HTML and CSS knowledge to build that, which is a little out of scope for this article.

  38. Bijal Avatar

    The snippet works great. Question: when the button is clicked, “visit cart” text appears to the right of the button – can this be disabled or not removed? Maybe just continue showing the “check” mark on the button that the product was added to cart ?

    Thanks, very helpful piece of code.

  39. thimy292 Avatar

    Hello Jonathan,

    does your javascript code still work? Because I tried to implement it and the cart does not update on my website.

    1. Jonathan Avatar

      This could be because the code is PHP, and not JavaScript

Leave a Reply to Leif OttossonCancel reply

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