I want that the swatches display only in the product detail, but not on the product listing.

I'm looking for the option to do not display the swatch options on product list, but I only find how to do it in magento 1.x, and I need to do it in magento 2.1.3

Where is the option to hide the swatch options in magento 2?

Edit: I should say that I was looking for the 'option to hide swatch options' in the admin menu, hide the whole block doesn't work for what I needed.

  • Have you create your theme in magento 2? Commented Apr 27, 2017 at 8:27
  • yes, I have a theme. But I do not find the swatch options...
    – Alex
    Commented Apr 27, 2017 at 8:29
  • are you want to remove swatches from listing page? Commented Apr 27, 2017 at 8:29
  • Your question and comments seems to be unclear. Do your current theme is showing swatches anywhere(on product list or view page)? OR its showing but you just want to hide?
    – arushi
    Commented Apr 27, 2017 at 8:48
  • I want to remove size swatches, but not color swatches for product list. In magento 1.x there was an option in admin to do it, but I don't find any option in magento 2.1 to do it.
    – Alex
    Commented Apr 27, 2017 at 8:50

4 Answers 4


Finally I found the answer to my question, and I'm going to share it because maybe it helps somebody in the future:

1.- Enter to admin panel

2.- Stores (left menu)

3.- Product (under attribute section)

4.- Select the attribute you want to edit, for example color

5.- Storefront Properties (in the Attribute Information menu on the left)

6.- Look for Used in product listing option and set it to NO

And then you will hide this concrete attribute in the product list. Not very intuitive, but quite easy.


Make sure in your theme you have a directory & file inside of your theme, this will overwrite the core code. Like so.


Once you have this file add the following referenceBlock

<referenceBlock name="category.product.type.details.renderers" remove="true"/>

To the body section like so:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="category.product.type.details.renderers" remove="true"/>

This will allow you to remove the specified block from the category list view.

  • It works, so I upvote you, but that's not the answer I was looking for. Thank you ;-)
    – Alex
    Commented Apr 28, 2017 at 6:30
  • How can I also remove the swatch from catalog search results?
    – paj
    Commented Sep 4, 2019 at 12:51

First you have to copy core file to your theme,


to your theme,


Now you can uncomment the line,

/* echo $block->getProductDetailsHtml($_product); */

Clear Cache.

  • It works, so I upvote you, but that's not the answer I was looking for. Thank you ;-)
    – Alex
    Commented Apr 28, 2017 at 6:30
  • This is a way to remove it, however because its called in via a block you should be using xml @S H Patel is the correct way to remove.
    – andy jones
    Commented Apr 28, 2017 at 7:05
  • removing the whole block remove all swatch options, if I have a swatch option for color and another for size and I want only the color option on the listing, remove the whole block is not a solution for me. The way I did instead I can remove one swatch option and display the other one in the product list. I see now that I didn't make the question very well and clear, sorry for that.
    – Alex
    Commented Apr 28, 2017 at 9:34

Man, you can set "display:none;" or "visibility:hidden;" to the class or ID of the swatch, in the CSS file.

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.