Adding WooCommerce to your Divi website means there are a lot more buttons you’ll want to style. Divi does add some styles to your WooCommerce buttons, but that said, they won’t look great out of the box for several reasons. Based on your color selections in the theme customizer, you’ll often see WooCommerce buttons disappear on hover, or they have arrow icons that look terrible because they aren’t vertically center.

WooCommerce buttons are the workhorses of your Divi eCommerce site. They convert you visitors into customers, so it’s essential that they mesh with the rest of your Divi theme.

To find the WooCommerce buttons, it’s easiest to go through the shop process from start to finish and find them on each page. We’ll have some suggestions for hooks and CSS on each page.

Try Out Some Examples Below

Here are WooCommerce Buttons per each page and how to style them by adding CSS taken from the video above. Be sure to add :hover whenever you want to style the button on mouse over.

The Product Page WooCommerce Buttons

– Add to Cart

button.single_add_to_cart_button.button.alt {
	color: white !important;
}
button.single_add_to_cart_button.button.alt:hover {
	color: purple !important;
}

– View Cart

a.button.button.wc-forward {
	color: white !important;
}

The Cart Page

– Apply Coupon (if coupons are enabled)

 button.button {
	background: #b8621b !important;
	color: #fff !important;
}

– Update Cart

 button.button {
	background: #b8621b !important;
	color: #fff !important;
}

– Proceed to Checkout

 a.checkout-button.button.alt.wc-forward {
	background: transparent !important;
	color: #b8621b !important;
	padding: 5px 30px !important;
border: 4px double #b8621b !important;
	max-width: 70% !important;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1.4px;
}
a:hover.checkout-button.button.alt.wc-forward {
	background: #b8621b !important;
	color: #fff !important;
}

– Return to Shop

a.button.wc-backward {
		color: #fff !important;
		padding: 5px 30px !important;
	text-transform: uppercase;
}

The Checkout Page

– Apply Coupon

 button.button {
	background: #b8621b !important;
	color: #fff !important;
}

– Place Order

button#place_order.button.alt {
	color: red !important;
}

Hide the Divi hover arrow icons:

 .woocommerce #content input.button.alt:after, .woocommerce #content input.button:after, .woocommerce #respond input#submit.alt:after, .woocommerce #respond input#submit:after, .woocommerce a.button.alt:after, .woocommerce a.button:after, .woocommerce button.button.alt:after, .woocommerce button.button:after, .woocommerce input.button.alt:after, .woocommerce input.button:after, .woocommerce-page #content input.button.alt:after, .woocommerce-page #content input.button:after, .woocommerce-page #respond input#submit.alt:after, .woocommerce-page #respond input#submit:after, .woocommerce-page a.button.alt:after, .woocommerce-page a.button:after, .woocommerce-page button.button.alt:after, .woocommerce-page button.button:after, .woocommerce-page input.button.alt:after, .woocommerce-page input.button:after {
	content: none !important;
}