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.

Preview:

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.

functions.php

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.

Conclusion

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.

More About BodyCommerce

9 Comments

Mohammed on April 15, 2023 at 9:32 am

I’m not sure this works anymore, is there any updated version or another tutorial that give this result ?
Log in to Reply
Andi on February 28, 2023 at 8:57 am

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.
Log in to Reply
Saad on September 17, 2022 at 2:36 pm

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
Log in to Reply
Ghislain on October 4, 2021 at 3:42 pm

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.
Log in to Reply
- Zack on November 16, 2021 at 4:00 pm
  
  Same here!
  Log in to Reply
vietadobe on July 30, 2021 at 1:02 pm

awesome ! Can we custom button add to cart by cart icon like above on BodyCommerce settings ??
Log in to Reply
- Divi Engine on August 3, 2021 at 11:16 am
  
  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!
  Log in to Reply
Andrew on July 19, 2021 at 2:59 am

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.
Log in to Reply
- Divi Engine on July 20, 2021 at 11:09 am
  
  Great, thanks so much for commenting – glad it was helpful 😀
  Log in to Reply

Submit a Comment Cancel reply

You must be logged in to post a comment.

Explore more from Divi Engine

Divi Form Builder

From simple contact forms to complex frontend post or product creation, Divi Form Builder has you covered.

Find out more

Divi Machine

Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.

Find out more

Divi BodyCommerce

A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.

Find out more

Divi Handoff

Let clients update content without touching the Divi Builder. Design layouts once, connect them to Flexible Content fields, and give editors simple forms for text, images, and sections.

Find out more

Divi Loop Extender

Unlock the Full Power of Divi 5 Loop Builder Add advanced sorting, filtering, and relationship logic right inside the Visual Builder.

Find out more

Divi Membership

Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.

Find out more

Divi Machine Accounts

Build an account area for your customers to edit their details, access wishlist, submitted posts and more. *Note: Requires Divi Machine installed and active