WooCommerce button style issues with Divi Theme
Don’t lose sales because of not so great WooCommerce button styles on your Divi Theme. The default WooCommerce button styles on Divi Theme is average. You can end up with simple issues, like contrasting colour, when you style your button.
The WooCommerce Add To Cart button is the first thing your customer will see on a product page. Being presentable when making a sale is a must. So why be any different when it comes to your WooCommerce button styles?
Styling the button background and font is the least you should do. And it’s not that difficult.
The Fix for WooCommerce Button Styles Issue
We have created a CSS snippet for this fix. Click here to view it on GitHub.
Add the above snippet to your child theme’s stylesheet file.
Also, don’t forget to watch the video above.
A Simpler Fix – Free Divi WooCommerce Tweaks Plugin
- Don’t want to create and maintain a child theme?
- Don’t want to write custom CSS for each of your WooCommerce Divi projects?
We hear you! Presenting the Divi WooCommerce Tweaks Plugin.
This plugin allows you to change the WooCommerce button’s background and font styles using the Theme Customizer.
Go to WordPress Admin > Divi > Theme Customizer > Divi WooCommerce > Add To Cart section.
You will find 3 fields.
- Enable: Check this field to enable styling for WooCommerce button.
- Background: Select the background colour.
- Font: Select the font colour, line height, letter spacing, text alignment and text transformation
This plugin is FREE. By installing and configuring this plugin, you can receive future updates automatically. It has a dependancy on Kirki plugin. Our dependancy manager will guide you to the installation in the WordPress admin once you install and activate the Divi WooCommerce Tweaks plugin.