How to set drops downs on configurable products to be set to the first option rather than please select.

I have tried below code:

require(['jquery', 'jquery/ui'], function($){ 
  $('.product-add-form .field select').each(function(i, obj) {
    $(obj).find('option:eq(1)').prop('selected', true);

However, this fails unless I time it out a bit which feels messy. It also does not update price when using this method.


Override configurable.js within the Configurable Products Module. The following code can be placed at around line 370 of configurable.js:

if (i == 0) {
    this.options.values[attributeId] = options[i].id;

This is placed at the end of options loop so that the default option is set just after the first option is created for each attribute / select.

In the case that options were set in url the code for updating defaults was needed to run again to set the values correctly which can be achieved by adding below just outside of the loop:

if (window.location.href.indexOf('#') !== -1) {this._parseQueryParams(window.location.href.substr(window.location.href.indexOf('#') + 1));}

This is placed just after the for loop for options so that it's run just once at the end of the option creation.

So _fillSelect within configurable.js now should look like below:

_fillSelect: function (element) {
        var attributeId = element.id.replace(/[a-z]*/, ''),
            options = this._getAttributeOptions(attributeId),
            index = 1,

        element.options[0] = new Option('', '');
        element.options[0].innerHTML = this.options.spConfig.chooseText;
        prevConfig = false;

        if (element.prevSetting) {
            prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];

        if (options) {
            for (i = 0; i < options.length; i++) {
                allowedProducts = [];
                if (prevConfig) {
                    for (j = 0; j < options[i].products.length; j++) {
                        // prevConfig.config can be undefined
                        if (prevConfig.config &&
                            prevConfig.config.allowedProducts &&
                            prevConfig.config.allowedProducts.indexOf(options[i].products[j]) > -1) {
                } else {
                    allowedProducts = options[i].products.slice(0);

                if (allowedProducts.length > 0) {
                    options[i].allowedProducts = allowedProducts;
                    element.options[index] = new Option(this._getOptionLabel(options[i]), options[i].id);
                    if (typeof options[i].price !== 'undefined') {
                        element.options[index].setAttribute('price', options[i].prices);

                    element.options[index].config = options[i];

                //new code here - updates the value to first option
                if (i == 0) {
                    this.options.values[attributeId] = options[i].id;
            //new code here checks if configurations are set in url and resets them if needed 
            if (window.location.href.indexOf('#') !== -1) {this._parseQueryParams(window.location.href.substr(window.location.href.indexOf('#') + 1));}


Original file:


Location when overridden in theme:


| improve this answer | |
  • Nothing happens on my magento 2.3.4 – Silver Oct 22 at 16:22

Override vendor\magento\module-swatches\view\frontend\web\js\swatch-renderer.js to your theme
your theme file location will be:

change _RenderControls() function

just wrinte below code at the end of this function

var swatchLength = $('.swatch-attribute').length;
if(swatchLength >= 1){


| improve this answer | |
  • not working on product listing page – Ketan Borada Jul 14 at 8:01

I did same thing as jigs suggestion, Thanks jigs But i need to check selected option size first and if no any option was selected then we fire click event on first element.

i follow bellow steps override / copy swatch-renderer.js from


To your custom theme


Find _RenderControls: function () and replace

$widget._EmulateSelected($.parseQuery()); $widget._EmulateSelected($widget._getSelectedAttributes());


$widget._EmulateSelected($.parseQuery()); $widget._EmulateSelected($widget._getSelectedAttributes());

if($(".swatch-opt .swatch-attribute").find(".selected").length == 0)


| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.