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:

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.

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.

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.