Remove Magnify Glass and Add to Cart Icons

As a general answer to this, you need to learn the right-click trick. When viewing your site in a browser, you can right-click on the item you want to change CSS for, and select ‘Inspect’ (if using Chrome) to see the html and CSS related to the item.

In the CSS, you can experiment by adding or changing code and see the results immediately.

Then copy the code and add it to custom css or to a css file in your child theme.
For example, try this css code to hide the ‘.estore-cart-views’ element:
.estore-cart-views {
display: none;
}

And try:
.user-wrapper.search-user-block {
display: none;
}

You discover the css name of the element (eg. ‘.estore-cart-views’) by the right-click trick described above.

You can also hide an element for all except a defined page. For example, to get a full-width hero image on my home page but not on other pages, I can hide it on all other pages with code like:
body:not(.home) .header-image-wrap {
display: none;
}

Similarly you can hide shop-type items on pages that are not part of your shop with code like:
body:not(.shop) .wcppec-checkout-buttons {
display: none;
}

When doing the right-click trick described, and you change CSS code to see the change, but when inserting it as custom css it does not make the change:
– make sure you have cleared your browser’s cache and your css cache
– if that does not work you can add ‘!important’ to your css code to stop other code over-riding it. For example:
.my-cart {
color: #eeeeee !important;
}

Hi @antipodesaudio!

Thank you for your detailed reply. I had been using the ‘inspect” page technique and went around in circles, and had tried some PHP code… But for some reason when someone else says “do this” it works! I had forgotten about the !important” and when I added that, it worked! I found both classes of icons and disabled them. Finally, I googled how to make the images clickable in my theme, and saw all I had to do for that is check a box under WooCommmerce Archive Page Layout. THANK YOU FOR YOUR HELP, YOU ROCK!

For anyone who may have the same problem, here’s the “additional CSS” code:
—————–
/* Shop Page – hide magnifier icon */
a.zoom {
display: none !important;
}

/* Shop Page – hide cart icon */
a.button.product_type_variable.add_to_cart_button {
display: none !important;
}
————————————
To make the archive photo (shop page images) clickable, go to
Appearance-> Customize-> WooCommerce Settings-> Archive Page Layout, and check the box “Check to hide hover effect on Product Images in WooCommerce Archive Pages”.

Hi @andreagall,

To make the image clickable and hiding the icon on hovering over the product in the shop page, go to Appearance-> Customize-> WooCommerce Settings-> Archive Page Layout and check the Check to hide hover effect on Product Images in WooCommerce Archive Pages. This will do the trick and additional CSS won’t be necessary.

Thanks.

Hi Rajesh,

Thank you for your reply. Geeze, I spent so much time trying to track down how to remove those icons and all I had to do was check a box. Now I know, huh? ?? Thank you!

Hi @andreagall,

Glad to know your issue is resolved. Feel free to ask again if you get any issue regarding the theme.

Thanks.