Skip to main content
12 votes

Execute JavaScript code after swatches are displayed in category view

I used the event 'swatch.initialized' to fire a function after swatches are loaded in the product page: $(document).on('swatch.initialized', function() { // do something }) The event is triggered ...
Guillem Lorman's user avatar
11 votes
Accepted

Create Visual Swatch Attribute

Disclaimer: Parts of this code were taken from Magento_SwatchesSampleData core module. Also you might not need colorMap but I just put it there. This code was tested on Magento 2.1.4. I assume you ...
Konstantin Gerasimov's user avatar
10 votes
Accepted

How to display swatches on homepage Magento 2

Create simple module for display swatches in configurable product in homepage. You have to follow below steps to get swatches on homepage product collection, app/code/Test/Homeslider/registration....
Rakesh Jesadiya's user avatar
9 votes
Accepted

Don't display swatches on product listing in Magento 2

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 ...
Alex's user avatar
  • 811
8 votes

Magento 2: How to change image size of swatches?

1) Copy and create template vendor/magento/module-swatches/etc/view.xml into your theme app/design/frontend/[Vendor]/[Theme Name]/Magento_Swatches/etc/view.xml 2) Clear cache : php bin/magento cache:...
Sondre's user avatar
  • 353
8 votes

Magento 2 replace a core javascript

The code works for me on Magento 2.1.5 var config = { map: { '*': { 'Magento_Swatches/js/swatch-renderer':'Vendor_Module/js/swatch-renderer' } } };
Bhupendra Jadeja's user avatar
8 votes

Don't display swatches on product listing in Magento 2

Make sure in your theme you have a directory & file inside of your theme, this will overwrite the core code. Like so. Vender/Theme/Magento_Catalog/Layout/catalog_category_view.xml Once you ...
Suresh Chikani's user avatar
8 votes
Accepted

Stop simple product images overriding main product gallery after clicking swatches

By adding the following code to the theme's view.xml the image from the simple product is now added to the product gallery rather than replacing the one associated with the configurable product. <...
SilkSpin's user avatar
  • 302
7 votes
Accepted

Magento 2: Get image from the swatch id

You can get swatch Image from this, $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); $swatch = $objectManager->create('Magento\Swatches\Helper\Data')->...
Keyur Shah's user avatar
  • 18.1k
6 votes
Accepted

Magento 1.9 preselect of configurable options (swatches)

Assuming you are using rwd theme, it can also be achieved by adding below jQuery code to your catalog/product/view.phtml file. <script type="text/javascript"> jQuery(document).ready(function(){ ...
Jaimin Sutariya's user avatar
6 votes
Accepted

How to add swatch data in Layered navigation aggregations in graphql?

I have override aggregations GraphQL API. Below code is working for me File:-Custom/Module/registration.php use Magento\Framework\Component\ComponentRegistrar; ComponentRegistrar::register( ...
Devidas's user avatar
  • 3,358
5 votes
Accepted

Configurable product image not switching with swatch change

After another day of digging I did get this working. I was on the right path to finding out what was broken, I was just in the wrong file. In the end, the JS that drives the image swap is the object ...
circlesix's user avatar
  • 4,323
5 votes

Magento 2 create custom swatch attribute programmatically

This is similar to Magento 1, with a few differences. Step 1 Start by creating a basic setup script for it, if you don't already have one. <?php namespace Package\Module\Setup; use Magento\...
mimarcel's user avatar
  • 340
5 votes

Visual swatches for attribute with input type multiselect

Let me preface this by saying the solution below is far more invasive than I initially thought it would have needed to be. Most notably the total overwrite of Magento_Swatches/js/product-attributes. ...
Pmclain's user avatar
  • 2,648
5 votes

How to get visual swatch image from attribute_id?

Use Below code to get swatch image. <?php $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); $swatchHelper=$objectManager->get("Magento\Swatches\Helper\Media"); $...
Dinesh Yadav's user avatar
  • 6,465
5 votes
Accepted

How to display Swatches into product list page into custom modules with add to cart functionality

Solution : Vendor/Module/registration.php put below code. <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, '...
Charvi Parikh's user avatar
4 votes

Magento 2: How to change image size of swatches?

I have investigated this issue. In file: Magento\Swatches\Helper\Media, we have this method: vendor/magento/module-swatches/Helper/Media.php /** * Merged config from view.xml * * @return array */...
De Nguyen's user avatar
  • 401
4 votes

Change configurable swatches order in Magento 2

You have to edit configurable product, in configurable tab (product edit page) you can view option for Edit Configurations. Click on Edit Configurations, you can see select attribute screen, go to ...
Suresh Chikani's user avatar
4 votes

Magento 2 create custom swatch attribute programmatically

Recently tried below code for creating visual swatch attribute options pro-grammatically. Created file within root "import-visual-swatch.php" with below code: Place your all image into &...
deepakd's user avatar
  • 123
4 votes

How to handle click event on configurable product attribute swatch on product page?

Please replace your code below code. If possible add code in /var/www/html/mage2/vendor/magento/module-catalog/view/frontend/templates/product/view/options/wrapper.phtml <script type="text/...
Nits's user avatar
  • 2,506
4 votes

Extend Swatch rendered js file

This one is through mixin. Inside your requirejs-config.js var config = { ... config: { mixins: { 'Magento_Swatches/js/swatch-renderer': { 'js/swatch-renderer-mixin': true ...
Cotton's user avatar
  • 121
4 votes
Accepted

Magento 2 : Display dropdown attribute with its label in product listing page

For that, you need to override renderer.phtml file and need to change onlySwatches and enableControlLabel attributes value. Go to app/design/frontend/<VendorName>/<themeName>/...
Rohan Hapani's user avatar
  • 17.5k
3 votes

Configurable Swatches not working after 1.9.3 Upgrade

To expand upon the previous answer, you are probably overriding catalog.xml in your theme and there was a change to catalog.xml in this update. They removed some functionality from varien/product.js ...
Mike's user avatar
  • 81
3 votes

RWD swatches not changing images

The reason behind this is the function ConfigurableMediaImages.arrayIntersect. The problem here is that the function must take in two already sorted arrays. Unfortunately the theme does not guarantee ...
David Manners's user avatar
3 votes

Magento 2 replace a core javascript

There is an Easy way out for that when you do that changes while creating a custom Theme, Firstly override the template File in which the Js is being called i.e module-swatches/view/frontend/...
Shashank's user avatar
  • 248
3 votes

how to get swatches attribute option in magento 2

You Can get all the swatches attribute option data with below code. <?php $attributes = $_product->getTypeInstance(true)->getConfigurableAttributesAsArray($_product); foreach ($...
Dinesh Yadav's user avatar
  • 6,465
3 votes

Magento 1.9 preselect of configurable options (swatches)

There are two ways you can avhieve this thing. First way 1) use ready extension , Marius Has created one extension you can use his extension ,and you can easily set predefault simple product https:...
Murtuza Zabuawala's user avatar
3 votes

How to create text swatch programmatically?

Try to use my code, Basically you'd need to add a select type, then convert it to Text Swatch like SwatchesSampleData module this used some functions from this module InstallData.php <?php ...
Tuyen Nguyen's user avatar
  • 1,312
3 votes
Accepted

Change configurable product price on Listing Page

To solve your request, create new module Custom_Swatches with these files. etc/module.xml <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:...
Quan Le's user avatar
  • 1,698
3 votes

Want to display label or respected value on the visual swatch attribute at Layered navigation?

If you want to add text in swatches then you should use "Text Swatch" instead of "Visual Swatch". Refer below screenshot:
Chintan Kaneriya's user avatar

Only top scored, non community-wiki answers of a minimum length are eligible