{"id":371,"date":"2019-04-10T03:53:24","date_gmt":"2019-04-10T03:53:24","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2019\/04\/10\/auto-select-first-child-product-of-magento-2-configurable-product\/"},"modified":"2025-05-22T16:59:02","modified_gmt":"2025-05-22T11:29:02","slug":"auto-select-first-child-product-of-magento-2-configurable-product","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/auto-select-first-child-product-of-magento-2-configurable-product\/","title":{"rendered":"How to Auto Select First Child Product of Magento 2 Configurable Product"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">However complex are the Magento 2 configurable products, there is no way out to sell complex products with multiple attributes!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But there are some ways out to make it simpler for particular cases. For example, you can implement the solution given here to <i><strong>auto-select the first child product of Magento 2 configurable product<\/strong><\/i>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Other benefits are the minimized number of clicks for the visitors interested in the auto-selected combinations and improved customer experience!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Solution to auto select first child product of Magento 2 configurable product:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Override <strong><strong>vendor\\magento\\module-swatches\\view\\frontend\\web\\js\\swatch-renderer.js<\/strong><\/strong>&nbsp;to your theme<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Your theme file location is:<br><strong>app\/design\/frontend\/Vendor\/themename\/Magento_Swatches\/web\/js\/swatch-renderer.js<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Locate <strong>change _RenderControls()<\/strong> function<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Place the below code at the end of this function:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var swatchLength = $('.swatch-attribute').length;\nif(swatchLength >= 1){\n    if($('.swatch-attribute').hasClass(\"size\")){\n        $('.swatch-option').first().trigger('click');\n    }\n}<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/04\/meetanshi_How-to-Auto-Select-First-Child-Product-of-Magento-2-Configurable-Product.png\" alt=\"meetanshi_How-to-Auto-Select-First-Child-Product-of-Magento-2-Configurable-Product\" class=\"wp-image-4802\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Implement the above solution and the task is done!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-371","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=371"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/371\/revisions"}],"predecessor-version":[{"id":15475,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/371\/revisions\/15475"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}