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
I need this type of
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this communityOverride 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.....!
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:
configurable.js
and replace _fillSelect
method rather than override the whole file I think.