You can’t set any image & color icon image in the Magento color dropdown attribute.
If you want to set color images in the dropdown of the color attribute then follow below steps.
Step 1: Override this file in your theme and replace with the below code.
app/design/frontend/[VendorName]/[theme]/Magento_ConfigurableProduct/templates/product/view/type/options/configurable.phtml
<?php
/** @var $block MagentoConfigurableProductBlockProductViewTypeConfigurable*/
$_product = $block->getProduct();
$_attributes = $block->decorateArray($block->getAllowAttributes());
?>
<?php if ($_product->isSaleable() && count($_attributes)):?>
<?php foreach ($_attributes as $_attribute): ?>
<?php if($block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) == 'Color'): ?>
<div class="field configurable required color">
<label class="label" for="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>">
<span><?= $block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) ?></span>
</label>
<div class="control drop-down">
<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>
<?php else: ?>
<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>
<?php endif; ?>
<?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;?>
<?php
$objectManager = MagentoFrameworkAppObjectManager::getInstance();
$connection = $objectManager->get('MagentoFrameworkAppResourceConnection')->getConnection('MagentoFrameworkAppResourceConnection::DEFAULT_CONNECTION');
$records = $connection->fetchAll("SELECT * FROM color_code");
// In color_code table have 3 fields like id, color_name, image_url
// and store data something like this
// id color_name image_url
// 1 Black pub/media/catalog/swatches/2/40x40/media/black.png
// 2 Green pub/media/catalog/swatches/2/40x40/media/green.png
// 3 White pub/media/catalog/swatches/2/40x40/media/white.png
//print_r($records);
$storeManager = $objectManager->get('MagentoStoreModelStoreManagerInterface');
$base_url = $storeManager->getStore()->getBaseUrl();
?>
<script type="text/javascript">
require(["jquery"], function(jQuery) {
document.onreadystatechange = function(){
if(document.readyState=='loaded' || document.readyState=='complete') {
setTimeout(function(){
jQuery('.drop-down').append('<div class="button"></div>');
jQuery('.drop-down').append('<ul class="select-list"></ul>');
jQuery('.drop-down select option').each(function() {
var bg = jQuery(this).val();
var colortext1 = jQuery(this).text();
var colortext1_arr = colortext1.split(' +');
var colortext = colortext1_arr[0].replace(/s/g, '');
var obj = [];
<?php foreach ($records as $color) { ?>
obj['<?php echo $color['color_name']; ?>'] = '<?php echo $base_url.$color['image_url']; ?>';
<?php } ?>
jQuery('.select-list').append('<li class="clsAnchor"><span class="color-icon" style="background:url(' + obj[colortext] + ') no-repeat center center"></span><span value="' + bg + '" class="' + jQuery(this).attr('class') + '" >' + colortext1_arr[0] + '</span></li>');
});
jQuery('.drop-down .button').html('<span class="color-icon" style="background-color:' + jQuery('.drop-down select').find(':selected').val() + '"></span><span class="color-text">' + jQuery('.drop-down select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>');
jQuery('.drop-down ul li').each(function() {
if (jQuery(this).find('span').text() == jQuery('.drop-down select').find(':selected').text()) {
jQuery(this).addClass('active');
}
});
jQuery('.drop-down .select-list span').on('click', function() {
var dd_text = jQuery(this).text();
var dd_val = jQuery(this).attr('value');
var dd_color_arr = dd_text.split(' +');
var dd_color = dd_color_arr[0].replace(/s/g, '');
jQuery('.super-attribute-select option[value='+ dd_val +']').prop('selected',true).trigger('change');
var obj1 = [];
<?php foreach ($records as $color) { ?>
obj1['<?php echo $color['color_name']; ?>'] = '<?php echo $base_url.$color['image_url']; ?>';
<?php } ?>
jQuery('.drop-down .button').html('<span class="color-icon" style="background:url(' + obj1[dd_color] + ') no-repeat center center"></span><span class="color-text">' + dd_color_arr[0] + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>');
jQuery('.drop-down .select-list span').parent().removeClass('active');
jQuery(this).parent().addClass('active');
jQuery('.drop-down select[name=options]').val( dd_text );
jQuery('.drop-down .select-list li').slideUp();
});
jQuery('.drop-down .button').on('click', function() {
jQuery('.drop-down ul li').slideToggle();
});
}, 3000);
}
}
});
</script>
Step 2: Add below CSS in your style.css
.color .drop-down { position: relative; width: auto; margin-top: 0; font-family: verdana; }
.color .drop-down select { display: none; }
.color .drop-down .button { border: 1px solid #000; padding: 0px 8px; color: #333; border-radius: 6px; }
.color .drop-down .button .color-icon { display: block; width: 20px; height: 20px; float: left; border-radius: 3px; margin: 6px 10px 6px 0px; }
.color .drop-down .button a { float: right; text-decoration: none; }
.color .drop-down .select-list { position: absolute; top: 0; left: 0; z-index: 1; margin-top: 40px; padding: 0; background-color: #f0f0f0;
border-radius: 6px; width: 100%; max-height: 250px; overflow: auto; }
.color .drop-down .select-list li:first-child { margin-top: 1rem; }
.color .drop-down .select-list li { display: none; list-style: none; }
.color .drop-down .select-list li span { display: inline-block; min-height: 32px; padding: 5px 15px 5px 15px; background-position: left 10px center; background-repeat: no-repeat; font-size: 16px; text-align: left; color: #FFF; opacity: 0.7; box-sizing: border-box; color: #333; font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; font-style: normal; }
.color .drop-down .select-list li span.undefined { padding: 0px 15px !important; }
.color .drop-down .select-list li span:hover, .drop-down .select-list li span:focus { opacity: 1; }
.color .drop-down .select-list li span.color-icon { float: left; margin-left: 10px; border-radius: 5px; }
.color .drop-down .select-list li span.swatch-option { float: right; border: none; margin: 0; }
Step 3: Run below commands.
- php bin/magento setup:upgrade - php bin/magento cache:clean
That’s it.
After making these changes, you can check your product detail page. You will see color images or icons in the color select boxes.
