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.
Filed under: Development, Divi, WordPressTagged with: ,

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

  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.


Add a Comment

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

Comment *

Name *
Email *
Website