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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
<?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): ?> <?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 = \Magento\Framework\App\ObjectManager::getInstance(); $connection = $objectManager->get('Magento\Framework\App\ResourceConnection')->getConnection('\Magento\Framework\App\ResourceConnection::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('\Magento\Store\Model\StoreManagerInterface'); $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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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.
1 2 |
- 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.
[crayon-63d68dadd0fd5278021166/] Using above fucntion Images can be imported directly from...
Override view block using di.xml and add the below code...
You can check a list of called layout XML for...
Follow the below steps to install and set up PWA...
If you want to remove all leading zero's from order,...
Let our Magento expert connect to discuss your requirement.
We offer Magento
certified developers.
Our Magento clientele
is 500+.
We sign NDA for the
security of your projects.
We’ve performed 100+
Magento migration projects.
Free quotation
on your project.
Three months warranty on
code developed by us.