0

I'd like to COMPLETELY REMOVE Choose an Option… line from the dropdown menu in the configurable product page as in the pic and select the first option by default.

Choose an Option

What I already tried:

I already overrode the app/design/frontend/MyTheme/default/Magento_ConfigurableProduct/templates/product/view/type/options/configurable.phtml file with my custom code:

<?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;?>

and this allowed me to select the first option by default (as discussed here and here) but Choose an Option line is still there.

Any ideas?

Your Answer

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

Browse other questions tagged or ask your own question.