How to replace WooCommerce Product Gallery Trigger icon using PHP/CSS?

How can I modify the hook to change the glass icon to zoom? Or is there a way to do that via CSS avoiding replacing content via JS?

Topic woocommerce-offtopic Wordpress

Category Web

1
answered at

Its more of a hack than actual solution. But, I am using it in a lot of themes without any issues.

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    visibility: hidden;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::before {
    visibility: visible;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after {
    visibility: visible;
}

Please note I have removed the my styling from these psudo elements. You can now use any of the ::before or ::after psudo elements to make your own styles.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.