How to add default value for attribute of configurable product

Question

My configurable product have 2 attributes (size, color). When customer visit product detail page, I want to set default value (first value) for size and color.

Example: Product1: size(X,M, L), color (RED, BLUE, WHITE).

Customer access to product detail page -> Size M and color RED are selected.

Answer 1

swatch-renderer.js is responsible for swatches in configurable product.

You have to override swatch-renderer.js file to achieve your things.

For override swatch-renderer.js follow below step.

1. Add requirejs-config.js file with given below path.

   app/code/Namespace/ModuleName/view/frontend/requirejs-config.js

   var config = { config: { mixins: { 'Magento_Swatches/js/swatch-renderer': { 'Namespace_ModuleName/js/swatch-renderer': true } } } };

2. Add `swatch-renderer.js file with given below path.

   app/code/Namespace/Modulename/view/frontend/web/js/swatch-renderer.js

   define([ 'jquery', 'mage/url' ], function ($, url) { 'use strict';

   return function (widget) {
       $.widget('mage.SwatchRenderer', widget, {
   
           // Add your custom logic
   
       });
       return $.mage.SwatchRenderer;
   }
   });
   </script>
   

I hope it helps!