I need to display the only Size attribute drop-down on a category page listing. Size is a configurable option & Catalog Input Type for Store Owner value is Dropdown.

I have enabled Used in Product Listing property enable.

2 Answers 2


This All depends if your looking to have swatches or dropdowns the answer for dropdowns is not so easy.

First create a custom module. And add the following to your di, file this class stops configurable products getting the correct add to cart.

<type name="Magento\ConfigurableProduct\Model\Product\Type\Configurable">
        <plugin name="remove_possible_by_from_list" type="GremlinTech\CategoryConfigurable\Plugin\Configurable" sortOrder="1"  disabled="false"/>


Then create a custom php class Under Plugin called configurable


namespace GremlinTech\CategoryConfigurable\Plugin;

class Configurable

    public function afterIsPossibleBuyFromList(\Magento\ConfigurableProduct\Model\Product\Type\Configurable $subject, $result)
        return true;


Next step is to overwrite the Magento_Catalog::templates/list.phtml and add the following under the hidden input fields that are already there.

<input type="hidden" name="selected_configurable_option" value="" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
<input type="hidden" name="item"  value="<?= /* @noEscape */ $postParams['data']['product'] ?>" />

Also you need to modify the form element itself to look like below

      <form data-role="tocart-form"
                      id="product_addtocart_form-<?=$_product->getId(); ?>"
                      data-product-sku="<?= $block->escapeHtml($_product->getSku()) ?>"
                      action="<?= $block->getAddToCartUrl($_product) ?>"
                      <?php if ($_product->getOptions()) :?> enctype="multipart/form-data"<?php endif; ?>

Now your list view has its actual fields, you need to add a catalog_category_view.xml layout either in the theme or in the module created above, and add the following. This will call the product view configurable template into your list.

  <referenceBlock name="category.products.list">
            <block class="Magento\ConfigurableProduct\Block\Product\View\Type\Configurable" name="category.product.configurable" as="configurable_options"  template="Magento_Catalog::product/list/view/type/options/configurable.phtml" />

You will need to do the same for catalogsearch_result_index.xml as the xml is different for search results though uses the same catalog list template

 <referenceBlock name="search_result_list">
            <block class="Magento\ConfigurableProduct\Block\Product\View\Type\Configurable" name="category.product.configurable" as="configurable_options"  template="Magento_Catalog::product/list/view/type/options/configurable.phtml" />

Now we have this you need to overide the Magento_Catalog::product/list/view/type/options/configurable.phtml template again in the theme or module, you then need to make it look like the below.

 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.

/** @var $block \Magento\ConfigurableProduct\Block\Product\View\Type\Configurable*/
$_product    = $block->getProduct();
if($_product->getTypeId() === 'configurable') :
$_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<?= $block->escapeHtmlAttr($_attribute->getAttributeId()) ?>">
                <span><?= $block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) ?></span>
            <div class="control">
                <select name="super_attribute[<?= $block->escapeHtmlAttr($_attribute->getAttributeId()) ?>]"
                        data-selector="super_attribute[<?= $block->escapeHtmlAttr($_attribute->getAttributeId()) ?>]"
                        id="attribute<?= $block->escapeHtmlAttr($_attribute->getAttributeId()) ?>"
                    <option value=""><?= $block->escapeHtml(__('Choose an Option...')) ?></option>
    <?php endforeach; ?>
    <script type="text/x-magento-init">
            "[data-role=priceBox][data-price-box=product-id-<?= $block->escapeJs($_product->getId()) ?>]": {
                "priceBox": {}
    <script type="text/x-magento-init">
            "#product_addtocart_form-<?=$_product->getId(); ?>": {
                "configurable": {
                    "selectSimpleProduct" : ".cart-price.product-<?=$_product->getId(); ?> [name=selected_configurable_option]",
                    "priceHolderSelector" : ".cart-price.product-<?=$_product->getId(); ?> > .price-box",
                    "spConfig": <?= /* @noEscape */ $block->getJsonConfig() ?>,
                    "gallerySwitchStrategy": "<?= $block->escapeJs($block->getVar(
                    ) ?: 'replace'); ?>"
            "*" : {
                "Magento_ConfigurableProduct/js/catalog-add-to-cart": {}
<?php endif;?>
<?php endif;?>

What has changed from default configurable.phtml

We added the below init script this makes the prices dynamic on the grid itself, without the below prices fail to inizalize and configurable options with static prices would fail.

 <script type="text/x-magento-init">
            "[data-role=priceBox][data-price-box=product-id-<?= $block->escapeJs($_product->getId()) ?>]": {
                "priceBox": {}

We have also modified the paramatersin the configurable x-init to make them more specific to the grid inidviual items otherwise all prices would change on each item and so would the hidden configurable_selected hidden item.

Final Thing to do is to call the options in the loop in your list.phtml again, within the scope of the form,

  <?= $block->getChildBlock("configurable_options")->setData('product', $_product)->toHtml(); ?>

What we are doing is getting our child block and setting the specific list item as the product on the block otherwise it would try and use the registry like it does on product view.

Thats it hope this helps.

  • This also works within a product page for when you have additional products listed such as related products; you just have to be wary of the "selectSimpleProduct" and "priceHolderSelector" to ensure it's targeting the correct element. However I did come across an issue where only the dropdowns for the first product worked; for that I had to use unsetData(), so in this case it's $block->getChildBlock("configurable_options")->unsetData()->setData('product', $_product)->toHtml(). My guess is that once data has been set against a block, Magento caches it, so it has to be explicitly cleared.
    – Smithee
    Aug 4, 2020 at 16:29
  • 1
    I have not updated this in a while but yes i found this to be the case i never thought of using unsetData i just created the block on the fly instead but ye thanks for the tip :D Aug 4, 2020 at 16:47
  • where does the final part go? <?= $block->getChildBlock("configurable_options")->setData('product', $_product)->toHtml(); ?>
    – gazZz
    Oct 6, 2020 at 16:05
  • It doesnt show on the category page as a drop down for me i followed all the steps although ifi log <?= $block->getChildBlock("configurable_options")->setData('product', $_product)->toHtml(); ?> then i can see the attribute is in there
    – gazZz
    Oct 6, 2020 at 17:00
  • Same here. The dropdowns are empty.
    – Greg
    Oct 7, 2020 at 9:08

In the latest Magento version, seems like Magento will add configurable options on the Listing page only if there is at least one Swatch type attribute used in the configurable product. In case if you want to show the dropdowns as options on PLP where only attributes of type dropdown used in a configurable product please follow the below-mentioned steps: Add preference on vendor/magento/module-swatches/Block/Product/Renderer/Listing/Configurable.php Override method _toHtml Add another condition to check if it's swatch and dropdown.

if ($this->isProductHasSwatchAttribute()) { $output = parent::_toHtml(); }

That's all, it should work fine now.

Your Answer

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

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