Using Codazon Fastest theme, I have created ~/fastest/fastest_child/Magento_Catalog/web/css/source/_extend.less which contains the following CSS extensions:

.catalog-category-view.product-item-photo {
  display: none
.action.tocompare.show-tooltip {
  display: none

I have also tried defining class more specifically, like this to remove it only from 'List' view:

.products-list.product-item-photo {
      display: none

Images and compare button are removed when I apply these styles from a Firefox style editor, but after compilation the website still displays them. Other styles in the same _extend.less are applying properly.

Is there something I am missing that would tell this style to override others, or is there somewhere else I should be creating .less?

Edit: I have run upgrade, deploy static content, and flushed cache. Other CSS changes from this same file are successful. These two specific classes are not applying.

I did try to remove the compare button via default.xml using Magento 2: Safe and easiest way to disable Compare products & Wishlist Module but this did not remove the compare buttons in category view.

  • after changing in less file, did you run all commands like deploy or upgrade etc ? Commented Jun 15, 2023 at 5:50
  • Yes. Updated question, thank you. Commented Jun 15, 2023 at 15:54

2 Answers 2


Go to terminal and run following command from magento root directry

rm -rf generated/*  var/cache/* var/page_cache/* var/view_preprocessed/*
php bin/magento s:up
php bin/magento s:s:d -f
php bin/magento c:f

Hope this will help you.

  • Updated question, thank you. These steps were completed but these two classes are still not applying. Commented Jun 15, 2023 at 15:57

Find the image and compare button code: Within the template or file, search for the code that generates the image and compare button for each product in the category view. This code may involve HTML markup, CSS classes, and possibly JavaScript.

Hide the image: To hide the images, you can add CSS styles to hide the image elements. This can be achieved by adding a CSS class or inline style with the display: none; property. Locate the image code and apply the necessary CSS changes to hide the images.

Hide the compare button: Similarly, locate the code that generates the compare button and apply CSS styles to hide it. You can use the same approach as with the images, adding a CSS class or inline style to hide the compare button element.

Save and test: Save the changes to the template or file and preview the category view in List mode. Verify that the images and compare button are now hidden as intended.

  • This is what I have done already. My question contains the CSS you are describing. Commented Jun 15, 2023 at 15:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.