Magento – Show Product options in pop up

As we need to override below file

From:

magento\vendor\magento\module-catalog\view\frontend\templates\product\list.phtml

To:

magento\app\design\frontend\Custom\YourTheme\Magento_Catalog\templates\product\list.phtml

Content:

 <?php foreach ($_productCollection as $_product): ?>
        <?php echo($iterator++ == 1) ? '<li class="item product product-item">' : '</li><li class="item product product-item">' ?>
        <div class="product-item-info" data-container="product-grid">
            <div class="your-custom-class">
            <?php
            // START DISPLAY ATTRIBUTE
            $attributeName = $_product->getResource()->getAttribute('your_attribute_name');
            if ($attributeName) {
                $labelValue = $attributeName->getFrontend()->getValue($_product);
            }
echo $labelValue;
            // END DISPLAY ATTRIBUTE
            ?>
            </div>
        </div>
    <?php endforeach; ?>    

Please check from Main File & U can display your thing as needed & adjust as per your design.

Thanks.

You can take as an example the module Magento_Swatch.

The block Magento\Swatches\Block\Product\Renderer\Listing\Configurable is added to the block with name category.product.type.details.renderers.

As in here: https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/layout/catalog_category_view.xml

The template initialises the JS used on swatches: Magento_Swatches::product/listing/renderer.phtml

https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/templates/product/listing/renderer.phtml

And everything important is done into the swatch JS. https://github.com/magento/magento2/blob/develop/app/code/Magento/Swatches/view/frontend/web/js/swatch-renderer.js Like functions: _RenderControls, _RenderFormInput, _EventListener, _UpdatePrice and other. The JS looks big. But it has a lot of code around rendering swatches images that are fetched via AJAX. You probably don't need it, it's easier to implement.

Here, the options (super attributes and associated products) html tags (swatches divs) are created and manipulated. The price is handled here too. In your case you'll have dropdowns.

You'd need to write your own module to implement all above. Theoretically you can add any options from all type of products (bundle, grouped, ..). The cost is performance, since you'd need to load more data into models to every product on a category page that has options.

As an alternative, you can try to set to the configurable/simple associated products non-visual swatches (without images).