How to Auto Select First Child Product of a Configurable Product in Magento 2?

Today, we’re going to teach you guys how to auto-select the first child product of a configurable product in your Magento 2 store.

This solution is considered to be the best for attracting customers and increasing sales by always showing a child product that is most tempting and popular.

Besides, if you don’t make your Magento 2 store automatically select a child product, visitors may get confused with the options. 

In addition, the auto-selection of a child product also minimizes the number of clicks for the potential customers, improving the overall shopping experience of your store.

And the best part is, it is easy to make your Magento 2 store auto select a child product of a configurable product.

In this post, we’ve shared the complete method to auto-select the first child of a configurable product in a Magento 2 store.

Method to Auto Select First Child Product of Magento 2 Configurable Product

In order to make your Magento 2 store auto-select the first child product of a configurable product, you need to first override the vendor\magento\module-swatches\view\frontend\web\js\swatch-renderer.js to your theme.

Your theme will be located at app/design/frontend/Vendor/themename/Magento_Swatches/web/js/swatch-renderer.js

In the swatch-renderer.js file, you need to locate change _RenderControls() function and paste the following code.

var swatchLength = $(‘.swatch-attribute’).length;

if(swatchLength >= 1){

    if($(‘.swatch-attribute’).hasClass(“size”)){

        $(‘.swatch-option’).first().trigger(‘click’);

    }

}

Example:

Conclusion

And that’s about it!

This is the best way to auto-select the first child of a Magento 2 configurable product.

We hope that you found this tutorial helpful. If you have any questions, please ask them in the comments below.

And if you need our professional assistance, feel free to contact us at any time.