I am trying to disable a swatch, once after it has been selected. So it should not be deselected...

How to do it in Magento2.2.x ?

  • I improved my answer slightly as was trying to figure out something about mixins hope this helps. – harri Apr 10 '18 at 8:30

I managed to stop the swatch being unselected by overriding part of the core swatch-renderer.js. I use Amasty's Color Swatches Pro so I made the change to the swatch-renderer.js in that module.

I copied the widget...

_OnClick: function ($this, $widget) {

and changed this section...

if ($this.hasClass('selected')) {
} else {
    $parent.attr('option-selected', $this.attr('option-id')).find('.selected').removeClass('selected');

You could do this with modifications to the swatch-renderer.js. Adding a couple of lines of code to the _OnClick event within here like below will disable pointer events and drop the opacity so the user knows it's disabled:


I would prefer to do this with a mixin which wraps the original function to maintain all original functionality from the call and only minor additional functionality is added.

Create a Mixin to Overide Swatch Rendering

  1. Create a new JS file to override the default _OnClick method within swatch-renderer.js. You could put this in your theme or module. Here i have put it within a theme.

    ], function ($, wrapper) {
        'use strict';
        return function(swatchRenderer){
            var OnClickWrapper = wrapper.wrap(swatchRenderer.prototype._OnClick, function(originalSwatchRenderer){
                var result = originalSwatchRenderer();
                /*Custom code start*/
                /*Custom code end*/
                return result;
            swatchRenderer.prototype._OnClick = OnClickWrapper;
            return swatchRenderer;


  1. Add a requirejs-config.js file to initalise the new mixin file:

    var config = {
    config: {
        mixins: {
            'Magento_Swatches/js/swatch-renderer': {
                'Magento_Swatches/js/swatch-renderer-mixin': true


  • This disabled the whole swatches. – Prathap Gunasekaran Apr 16 '18 at 11:29
  • 1
    In your situation the selector must be disabling the parent of all the swatches. Maybe try taking out .parent(). I did test this worked fine for me so should just be some minor tweaking required here. – harri Apr 16 '18 at 14:29
  • I tried that too but all the swatches is disabled, if i click the any swatch then rest of the swatches should enabled. @harri and thank you so much the response. will keep on checking for it. – Prathap Gunasekaran Apr 16 '18 at 16:18
  • Assume there is two swatches, first one is always selected when the page gets rendered and yes that is disabled now and the only option for us to select is second swatch but when i click that both is in disabled state, since because the first already have been disabled. Isn't it..?? hope u get the scenario correctly. – Prathap Gunasekaran Apr 17 '18 at 6:37
  • Ok from what i can tell then the issue seems to be that the first one is disabled as it is automatically selected on page load and you want to remove this behavior (the autmoatic selection of first swatch)? For me nothing is selected by default for swatches within Magento is this some functionality that has been added? – harri Apr 17 '18 at 11:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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