Magento – Magento2 how to remove “choose an option” in configurable products drop down

configurable-productfrontendmagento2option

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

Best Answer

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.....!

Related Topic