Snippet: Adding a Divi WooCommerce Add-to-Cart Icon Button on Shop Pages

One question we often get is how does one do some fancy things with Add-to-Cart buttons. Or, more specifically, how do I make the button just an icon that is displayed next to the quantity field on the shop pages of my Divi WooCommerce site. Well, we are back again with an awesome code snippet you can use to add a creative Add-to-Cart Icon Button right next to the quantity field for your Divi WooCommerce site.

Let’s take a look at what the snippet does exactly.


Divi WooCommerce Add-to-Cart Icon Button with Quantity
Pretty cool stuff, right? We can see that we will be adding the quantity field to our Divi WooCommerce shop page and then adding an Ajax-powered Add-to-Cart Icon Button right next to it.

Now that we know what it will look like, let’s take a look at the code you’ll be adding to make this magic happen.


Copy and paste this code into the functions.php file of your child theme. Be sure to place it between the PHP tags.

NOTE: Be careful editing the functions.php file as it is easy to break your site if you do not know what you are doing. Also, make sure you are using Divi child theme. If you are not using one, download one for free that can be found in this post on How to set up a Divi Child Theme with Dynamic CSS.

Divi Settings Custom CSS

Copy and paste this code into the Custom CSS box in the Divi Theme Settings.

PRO-TIP: Feel free to play around with the CSS to change things like the color and hover effects of the button.

BodyCommerce Users

Because of the way BodyCommerce works, we need to use some CSS that looks a little bit different. Please use the CSS below instead of the CSS above if you are using BodyCommerce.

Boom, all done! If you browse to your shop page now, you will see both the quantity fields and new add-to-cart icon buttons added to the page.


That was a rather large and awesome change with very little code. We hope you found this snippet helpful, and if there are any other topics you would like us to cover, please leave a comment below.

Until next time!

Order Another fantastic way to enhance your Divi WooCommerce sites is to use BodyCommerce. BodyCommerce literally has 100’s of customizations on both front and backend hand crafted to make your sites stand out and convert.


  1. I’m not sure this works anymore, is there any updated version or another tutorial that give this result ?

  2. Hi, unfortunately, the //Changes basked icon to tick when product is already in the cart part of the code causes fatar error on Divi pages, if we try to edit some Woo related pages. Thank you anyway.

  3. how to make it on hover the add to cart icon only without the quantity box shows on the center of the product instead of the + icon that shows on hover please help me

  4. Thank you very much ! Very helpful…
    I have a problem, though.
    The basket icon doesn’t change to tick in private navigation, and I’d like the customers to be able to purchase the products without being logged in…
    Is there a way to fix this ?
    Thanks by advance.

  5. awesome ! Can we custom button add to cart by cart icon like above on BodyCommerce settings ??

    • Hi there! Thank you so much for your reply 😁

      Unfortunately, this code will not work with BodyCommerce without some modification, but we are considering adding it as a feature in a future update.

      Stay tuned!

  6. I found this after two days of messing with different options. So cool and easy.

    I’m very novice in wordpress, and this was beyond helpful.

    • Great, thanks so much for commenting – glad it was helpful πŸ˜€

Submit a Comment

Explore more from Divi Engine