Hello Magento Friends,
In this tutorial, I am going to explain How to Hide the Configurable Parent Product Image when any Swatch is selected in Magento 2.
Magento default supports various product types to help store merchants manage their catalogs. One of them is configurable products. You can create configurable products in Magento 2 with the help of the following two ways:
Configurable products have one parent product and various child products. Configurable products have swatches to provide different color or size options to users. Configure Color Swatches in Magento 2
By default, the parent product image is displayed when no swatch is selected. But when a user selects any swatch, it will also show the parent product along with the related swatch images.
To hide parent product image of configurable products from the product details page when the swatch is selected, follow the below steps
Contents
Steps to Hide Configurable Parent Product Image when Swatch is Clicked in Magento 2:
The Luma Theme default value is prepend.
Replace “prepend” with “replace” for gallery_switch_strategy
For that move to the below path
app\design\frontend\Themes\Yourtheme\etc\view.xml
Then, modify the code as follows
|
1 2 3 |
<vars module="Magento_ConfigurableProduct"> <var name="gallery_switch_strategy">replace</var> </vars> |
Conclusion:
Thai way you can hide parent configurable product image when the user selects any swatch option in Magento 2. If you have any doubt, feel free to reach me via the comment section. Share the blog with others and stay tuned for more.
Happy Coding!
it will hide all thumbnail images not only default parent images
Kindly confirm the code does not conflict with others like any third party extensions.
How can we do on Magento 2.3.5?
It is applicable for Magento 2.3.5 too
Hi Dhiren!
Does this work with any kind of swatch? “Swatch text” type, for instance?
Thanks in advance
Silvana,
Not sure about other type, but you can try this way