How to Auto Select First Child Product of Magento 2 Configurable Product
However complex are the Magento 2 configurable products, there is no way out to sell complex products with multiple attributes!
But there are some ways out to make it simpler for particular cases. For example, you can implement the solution given here to auto-select the first child product of Magento 2 configurable product.
Doing so, you can show the first combination on the frontend. Also, attract customers and increase sales by always showing the first child product that is popular and tempting!
Moreover, if no options are chosen, a visitor might get confused with the options of the configurable product. By auto-selecting the first child product, it makes it easier for the visitors!
Other benefits are the minimized number of clicks for the visitors interested in the auto-selected combinations and improved customer experience!
Solution to auto select first child product of Magento 2 configurable product:
Override vendor\magento\module-swatches\view\frontend\web\js\swatch-renderer.js to your theme
Your theme file location is:
app/design/frontend/Vendor/themename/Magento_Swatches/web/js/swatch-renderer.js
Locate change _RenderControls() function
Place the below code at the end of this function:
|
1 2 3 4 5 6 |
var swatchLength = $('.swatch-attribute').length; if(swatchLength >= 1){ if($('.swatch-attribute').hasClass("size")){ $('.swatch-option').first().trigger('click'); } } |
Implement the above solution and the task is done!
Use the Comments section below to post any doubts on the topic.
Rate the post with 5 stars if found helpful!
Thank you.
14 Comments
The above code runs in Catalog page too. How can I make it run only in Product Page?
Hello Dimitris,
You can use catalog_product_view class from body.
Thank You
It doesn’t work for me as well.
Hello,
The above code is good for the attribute named “size”.
For any other attribute, you need to make changes in the above code.
Thank you.
Hello, this is trange:
vendor\magento\module-swatches\view\frontend\web\js\swatch-renderer.js
does not exist this file on my magento 23.4 installation.
Hello,
Please check vendor\magento\module-swatches\view\base\web\js\swatch-renderer.js
Thanks.
Hi I a, facing same problem code is not working for me I am using size attribute as dropdown
kindy help me to make this code working
thank you!
Hey,
Why don’t you try executing the code again in the console?
It may happen that you are using a different class and hence you are facing the issue.
Thank you.
hello sir i have made configurable product based on size and color but after putting your code not able auto select size and color. please fix my issue.Thanks in advance
Hello Abhishek,
The above code is for the product created with a swatch attribute size.
However, if you could please give me the product page URL, I’ll be able to provide the required code.
Thanks.
code is not working
Hello,
You can use the above code if you have created the configurable product with size option.
Else, you need to modify the solution by checking the class according to the attribute.
I can help you more if I can get your store link.
Thanks.
If we have drop-down then it’s not working
Hello,
The above code is for the size attribute
It needs to be modified as per the classes added.
You need to change it according to the attribute used for the configurable product.
Thanks.