Let’s take a look at what the snippet does exactly.
Preview:
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
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.
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.
I’m not sure this works anymore, is there any updated version or another tutorial that give this result ?
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.
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
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.
Same here!
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!
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 😀