Hide css :before element during woocommerce loading class

Rate this post

On my woocommerce add to cart button, i have hidden the text and changed it into an icon using the following css

.single_add_to_cart_button:before {
font-family: eicons;
font-size: inherit;
font-weight: 700;
font-style: normal;
font-variant: normal;
line-height: 1;
text-rendering: auto;
-webkit-font-smoothing: antialiased;

content: “\e8e7”;


when clicking the add to cart button, its given a class by woocommerce of loading, which shows an animated cog and dims the button. However my original icon stays there and is still visible, and looks weird with the cog ontop of it.

i was wondering, is it possible to hide the original icon whilst the loading class is added and then show it again when the loading class is removed?



If the loading class is being added to the button itself, you could do something along the lines of:

.single_add_to_cart_button.loading:before {
    visibility: hidden;

Leave a Reply

Your email address will not be published.

Back to top button