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

Improve this question

3 Answers 3

Reset to default
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.....!

Improve this answer
10
  • not working i am using this code
    – Rv Singh
    Jan 17, 2019 at 9:41
  • It is working fine for me, have added that script on document ready? Check in private window.
    – Nauman m. Mansuri
    Jan 17, 2019 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, 2020 at 17:55
  • @Naumanm.Mansuri it just simply selects the first option but "Choose an Option" is still there.
    – KaMZaTa
    Sep 12, 2020 at 15:24
  • @KaMZaTa did you find any solution?
    – quickshiftin
    Nov 6, 2020 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

Improve this answer
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, 2020 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.
    – quickshiftin
    Nov 12, 2020 at 3:26
  • Ok, I can pass an empty value but the option will not be removed.
    – KaMZaTa
    Nov 13, 2020 at 15:26
-2

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

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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