Remove Divi Hover Icons from WooCommerce Buttons

Jul 2, 2018

Updated Jan 2024

Above is an image of the WooCommerce cart page with all buttons in hover state. I’m using icons on the Divi buttons but I’ve changed my icon to be a different arrow than the default. As you can see not only are two of the icons in the wrong position, but the ‘apply coupon’ and ‘update cart’ buttons aren’t even using my preferred icon (??).

This CSS code removes all icons on WooCommerce buttons. It’s far more likely that your visitors will notice funky buttons than they will notice these particular buttons have no icons like other buttons on your site.

Notes

If you’re using icons on buttons in all button states (not just on hover) or if you’re using them on the left and not the right you’ll probably need different code. Let me know in the comments (live link required).

CSS Code

/*** REMOVE ICONS FROM WOOCOMMERCE BUTTONS ON HOVER ***/
.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;
}
/*** ADJUST WOOCOMMERCE BUTTON PADDING ***/
.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 Divi default button padding */
}

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.