# How do I show Product Variations on the product listing page?

**URL:** <https://forum.shopware.com/t/how-do-i-show-product-variations-on-the-product-listing-page/102234>\
**Category:** Shopware 6 (English)\
**Tags:** programming\
**Created:** [10. Dezember 2023 um 07:46 UTC](https://forum.shopware.com/t/how-do-i-show-product-variations-on-the-product-listing-page/102234 "2023-12-10T07:46:57Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![sumeet](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sumeet/32/18329_2.png) [@sumeet](https://forum.shopware.com/u/sumeet)\
**Post date:** [10. Dezember 2023 um 07:46 UTC](https://forum.shopware.com/t/how-do-i-show-product-variations-on-the-product-listing-page/102234/1 "2023-12-10T07:46:57Z")

</div>

How do I show Product Variations on the product listing page?

## Product Variation - ProductListingSubscriber

I have created the ProductListingSubscriber.php in the Subscriber folder.

```auto
<?php declare(strict_types=1);

namespace Prateeksha\HelloWorld\Subscriber;

use Shopware\Core\Content\Product\Events\ProductListingCriteriaEvent;
use Shopware\Core\Content\Product\SalesChannel\Sorting\ProductSortingCollection;
use Shopware\Core\Content\Product\SalesChannel\Sorting\ProductSortingEntity;
use Shopware\Core\Framework\Uuid\Uuid;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;

class ProductListingSubscriber implements EventSubscriberInterface
{

    public static function getSubscribedEvents()
    {
        return [
            ProductListingCriteriaEvent::class => 'onProductListingCriteria'
        ];
    }

    public function onProductListingCriteria(ProductListingCriteriaEvent $event)
    {
        $criteria = $event->getCriteria();
        
        // Add associations to load variants
        $criteria->addAssociation('options');
        $criteria->addAssociation('children');
        $criteria->addAssociation('variation');
    }
}

```

1. I have added this in the services.xml

```auto
<service id="Prateeksha\HelloWorld\Subscriber\ProductListingSubscriber">
            <tag name="kernel.event_subscriber"/>
        </service>

```

1. in this file views/storefront/component/product/card/box-standard.html.twig

```auto
{% sw_extends '@Storefront/storefront/component/product/card/box-standard.html.twig' %}

{% block component_product_box_content %}
    {{ parent() }}

    {# Check if the product has children (variants) #}
    {% if product.children and product.children.count > 0 %}
        <div class="product-variants">
            <select class="variant-selector" onchange="location = this.value;">
                {# Loop through each child (variant) #}
                {% for child in product.children %}
                    {% set variantOption = '' %}
                    {% for option in child.options %}
                        {% set variantOption = variantOption ~ option.group.translated.name ~ ': ' ~ option.translated.name ~ ' ' %}
                    {% endfor %}
                    <option value="{{ seoUrl('frontend.detail.page', {'productId': child.id}) }}">
                        {{ variantOption }}
                    </option>
                {% endfor %}
            </select>
        </div>
    {% endif %}
{% endblock %}

```

kindly guide me..