Magento 2 Tutorials

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

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading...Loading...
Auto Filter 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.

You may also like
Become a Full Stack Developer
How to Become a Full Stack Developer?
Add Extra CMS block to Magento Checkout
How To Add Additional CMS Block in Checkout Page Magento 2?

Leave Your Comment

Your Comment*

Your Name*