1

How to display dropdown type product attribute in product listing page and I also want to display that label name?

How to display that drop-down attributes? I created in admin. But, it's not displayed on listing page. But, it's proper display in product view page.

enter image description here

2
  • 1
    You should read the question propely and then duplicate question. Your duplicate questions and my question both are different. Jul 30 '19 at 9:36
  • Please read the question's description once again dear Jul 30 '19 at 10:19
4

For that, you need to override renderer.phtml file and need to change onlySwatches and enableControlLabel attributes value.

Go to

app/design/frontend/<VendorName>/<themeName>/Magento_Swatches/templates/product/listing/rederer.phtml

Replace this below code

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<?php
/** @var $block \Magento\Swatches\Block\Product\Renderer\Listing\Configurable */
$productId = $block->getProduct()->getId();
?>
<div class="swatch-opt-<?= /* @escapeNotVerified */ $productId ?>"
     data-role="swatch-option-<?= /* @escapeNotVerified */ $productId ?>"></div>

<script type="text/x-magento-init">
    {
        "[data-role=swatch-option-<?= /* @escapeNotVerified */ $productId ?>]": {
            "Magento_Swatches/js/swatch-renderer": {
                "selectorProduct": ".product-item-details",
                "onlySwatches": false,
                "enableControlLabel": true,
                "numberToShow": <?= /* @escapeNotVerified */ $block->getNumberSwatchesPerProduct(); ?>,
                "jsonConfig": <?= /* @escapeNotVerified */ $block->getJsonConfig(); ?>,
                "jsonSwatchConfig": <?= /* @escapeNotVerified */ $block->getJsonSwatchConfig(); ?>,
                "mediaCallback": "<?= /* @escapeNotVerified */ $block->getMediaCallback() ?>",
                "jsonSwatchImageSizeConfig": <?= /* @noEscape */ $block->getJsonSwatchSizeConfig() ?>
            }
        }
    }
</script>

<script type="text/x-magento-init">
    {
        "[data-role=priceBox][data-price-box=product-id-<?= /* @escapeNotVerified */ $productId ?>]": {
            "priceBox": {
                "priceConfig": {
                    "priceFormat": <?= /* @escapeNotVerified */ $block->getPriceFormatJson(); ?>,
                    "prices": <?= /* @escapeNotVerified */ $block->getPricesJson(); ?>
                }
            }
        }
    }
</script>

Clean cache and check the output.

Output :

enter image description here

2
  • i have done thew same thing but nothing chang label name is coming but dropdown is not coming Nov 19 '19 at 8:55
  • only drop-down display any idea
    – Himanshu
    May 22 at 10:35

Not the answer you're looking for? Browse other questions tagged or ask your own question.