0

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

0

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

  • not working i am using this code – Rv Singh Jan 17 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 at 9:44

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.