Hello Magento Friends,

Today I will discuss How to Auto Select First Child Product of Configurable Product in Magento 2.

Magento 2 allows creating a single product with several options which is known as configurable products. Learn How to Create Configurable Product Programmatically in Magento 2.

In Magento 2 when a configurable product is loaded, customers need to select combinations of the product. You can keep your most sellable products as auto-selected to increase the customer experience. With auto-select, the number of clicks for customers reduces that allows them to buy quickly.

So, let’s dive into the steps to know How to Auto Select the First Child Product of Configurable Product in Magento 2.

Steps to Auto Select First Child Product of Configurable Product in Magento 2:

For Dropdown:

Override the below Js file to your theme folder:

Vendor\magento\module-configurable-product\view\frontend\web\js\configurable.js

Paste the file in Your Custom Theme as below : 

app\design\frontend\Themes\Yourtheme\Magento_ConfigurableProduct\web\js\configurable.js

Place the below code in the function _fillSelect at the end of the function as shown in the image:

for dropdown code

With the implementation of the above step, the child product of the configurable product is auto-selected in the dropdown as shown below.

for dropdown output

For Swatch:

Override the below Js file to your theme folder

File Path to Copy from:

vendor\magento\module-swatches\view\frontend\web\js\SwatchRenderer.js

Paste the file in Your Custom Theme as below

app\design\frontend\Themes\Yourtheme\Magento_Swatches\web\js\SwatchRenderer.js

Now, open this file and place the below code in the function _RenderControls at the end of this function as shown in the image:

for swatch code

For size Attribute:

For color Attribute:

With the implementation of the above step, the child product of the configurable product is auto-selected for swatches as shown below.

for swatch output

Conclusion:

Hence, this way you can Auto Select First Child Product of Configurable Product in Magento 2. Feel free to reach me via the comment box in case of any trouble. Share the article with your friends and continue to be in touch with us!

Happy Coding!

Click to rate this post!
[Total: 9 Average: 4.7]