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
[css]
/*** 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 */
}
[/css]
0 Comments