2

How to remove "choose an option" in configurable products drop down and in the drop-down menu have the first attribute value be the top choice please if anyone idea reply me enter image description here

I need this type of

enter image description here

1

Override following file in your theme,

/var/www/html/magento23/vendor/magento/module-configurable-product/view/frontend/templates/product/view/type/options/configurable.phtml

Under following path

/app/design/frontend/[YOUR CUSTOM THEME]/Magento_ConfigurableProduct/templates/product/view/type/options/configurable.phtml

Write the following code under this file,

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>

<?php
/** @var $block \Magento\ConfigurableProduct\Block\Product\View\Type\Configurable*/
$_product    = $block->getProduct();
$_attributes = $block->decorateArray($block->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
    <?php foreach ($_attributes as $_attribute): ?>
        <div class="field configurable required">
            <label class="label" for="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>">
                <span><?= $block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) ?></span>
            </label>
            <div class="control">
                <select name="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"
                        data-selector="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"
                        data-validate="{required:true}"
                        id="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>"
                        class="super-attribute-select">
                    <option value=""><?= /* @escapeNotVerified */ __('Choose an Option...') ?></option>
                </select>
            </div>
        </div>

<script type="text/javascript">
            require(['jquery'], function ($) {
                $(document).ready(function () {
                    setDefaultConfigurableOptions();

                    function setDefaultConfigurableOptions() {
                        var super_attribute_select_id = '<?php echo $_attribute->getAttributeId() ?>';
                        if($('#attribute'+super_attribute_select_id+' option').length > 1 && $('.fotorama__img').length > 0)
                        {
                            var first_option = $('#attribute'+super_attribute_select_id+' option:eq(1)').val();
                            $('#attribute'+super_attribute_select_id).val(first_option);
                            $('#attribute'+super_attribute_select_id).change();                            
                        }
                        else
                        {
                            setTimeout(setDefaultConfigurableOptions, 100);
                        }
                    }

                });
            });
        </script>


    <?php endforeach; ?>
    <script type="text/x-magento-init">
        {
            "#product_addtocart_form": {
                "configurable": {
                    "spConfig": <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>,
                    "gallerySwitchStrategy": "<?php /* @escapeNotVerified */ echo $block->getVar('gallery_switch_strategy',
                        'Magento_ConfigurableProduct') ?: 'replace'; ?>"
                }
            },
            "*" : {
                "Magento_ConfigurableProduct/js/catalog-add-to-cart": {}
            }
        }
    </script>
<?php endif;?>

After that run following command to flush cache,

php bin/magento c:f

And see the Magic.....!

10
  • not working i am using this code
    – Rv Singh
    Jan 17 '19 at 9:41
  • It is working fine for me, have added that script on document ready? Check in private window. Jan 17 '19 at 9:44
  • For me, this code is keeping "Choose an Option..." in the dropdown, however, the first actual option is selected. I'm looking to remove "Choose an Option..." from the list.
    – NotJay
    Aug 12 '20 at 17:55
  • @Naumanm.Mansuri it just simply selects the first option but "Choose an Option" is still there.
    – KaMZaTa
    Sep 12 '20 at 15:24
  • @KaMZaTa did you find any solution?
    – Fena shah
    Nov 6 '20 at 12:07
0

Override configurable.js in your custom module/theme and find this.options.spConfig.chooseText under _fillSelect function and change it as below:

You will get attribute name instead of Choose an Option... text.

this.options.spConfig.chooseText = 'Select';
var attributeElement = this.options.spConfig.attributes[attributeId];
element.options[0].innerHTML = (typeof attributeElement != 'undefined' 
                                 && attributeElement.label != '')? 
                                 'Select ' +                 
                 attributeElement.label:this.options.spConfig.chooseText;

Output:

image description here

3
  • Thanks but this doesn't remove it, this just replace it. Am I wrong? Furthermore, you should extend configurable.js and replace _fillSelect method rather than override the whole file I think.
    – KaMZaTa
    Nov 11 '20 at 11:09
  • @KaMZaTa yes i override the _fillselect function only and no, its not just replace it, you can pass blank value to ChooseText value. it was my requirement to display attribute label.
    – Fena shah
    Nov 12 '20 at 3:26
  • Ok, I can pass an empty value but the option will not be removed.
    – KaMZaTa
    Nov 13 '20 at 15:26
-2

@Rv Singh, You increase the setTimeout() value from 100 to 200 or 300

0

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.