Remove Divi Hover Arrows from All WooCommerce Buttons

Jul 2, 2018 | Woo | 6 comments

Do you use the Divi hover icons (like the default arrows) on your buttons throughout your Divi online store but find that on some of the WooCommerce pages those icons don’t always look like they should when you hover?

Examples:

Also notice how the ‘update cart’ button is taller than all the other buttons, so it looks weird on hover?

Fix:

The best fix is to customize WooCommerce and get these buttons looking right with the hover icons intact, whether that’s done by someone in your company or having to hire out. If that’s not an option then taking the icons out is the next best thing.

Visitors are much more likely to notice a jumping or out-of-place arrow than a non-existent one.

The following CSS removes those icons and their hover behavior from all buttons on WooCommerce pages only (single product, cart, checkout, account, Woo widgets, etc.). It also adjusts the padding on the ‘update cart’ button as well as all disabled buttons (those are the greyed out buttons that require a field being edited).

Place all the CSS in your child stylesheet, appearance > customize > additional CSS OR Divi theme options > custom CSS box. You can try removing !important but it wouldn’t work without it for me.

 

{;} css code

/****** REMOVE ARROWS ON HOVER AND ADJUST PADDING ******/
.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;
}
.woocommerce #content input.button.alt:hover, .woocommerce #content input.button:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce a.button:hover, .woocommerce button.button.alt:hover, .woocommerce button.button:hover, .woocommerce input.button.alt:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button.alt:hover, .woocommerce-page input.button:hover, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] {
	padding: .3em 1em !important; /* this is Divis default button padding */
}