I want to callout my configurable options of a configurable product on category page. Respectively these are the attribute values of the simple products included within its configurable product.

Standard use case:

Callout configurable options e.g. as a simple string (or advanced as fieldset) to have a teaser for the customer which options he can then choose on product page.

On product page configurable options appear automatically as "select fieldset":

 <div class="field configurable required">
        <label class="label" for="attribute154">
        <div class="control">
            <select name="super_attribute[154]"
                                <option value="">Option auswählen...</option>
                                <option value="52" selected="selected">2.5</option>
                                <option value="53">5</option>
                                <option value="56">10</option>
                                <option value="58">15</option>

How to get configurable options on product page (!) using jQuery:

            $(".super-attribute-select option:eq(1)").attr('selected', true);
            initial_size = $(".super-attribute-select option:eq(1)").text();

My question: How to get configurable options on CATEGORY PAGE?

Is there any attempt to get those configurable options elsewhere than on product page?

Within my special use case I want to take for example the first option content –

<option value="52" selected="selected">2.5</option>

– and do a simple calculation with my product price.

My Status right now:

I know how to callout product attributes (like color, size,..) if values have been entered in e.g. admin but NOT if product attributes have been used for configurable options.

Further comments:

  • I am using Magento 2.1.3
  • Do you have any idea or hint guys?
    – eskaliert
    Commented Jan 6, 2017 at 16:03

1 Answer 1


To get the configurable attribute and their options value for specific product you can use the following code.

// In construct or fist loaded method
// Magento\ConfigurableProduct\Helper\Data $helper;
// $this->helper              = $helper;
                $options     = $this->helper->getOptions($product, $this->getAllowProducts());
                $attributes  = [];
                foreach ($product->getTypeInstance()->getConfigurableAttributes($product) as $attribute) {
                    $attributeOptionsData = $this->getAttributeOptionsData($attribute, $options);
                    if ($attributeOptionsData) {
                        $productAttribute         = $attribute->getProductAttribute();
                        $attributeId              = $productAttribute->getId();
                        $attributes[$attributeId] = [
                            'id'      => $attributeId,
                            'code'    => $productAttribute->getAttributeCode(),
                            'label'   => $productAttribute->getStoreLabel($product->getStoreId()),
                            'options' => $attributeOptionsData,
print_r($attributes); exit(); // Here you will get the all array to do it in html.

For get the products options method is called in above code

public function getAllowProducts()

    $skipSaleableCheck = $this->catalogProduct->getSkipSaleableCheck();

    $products = $skipSaleableCheck ?
    $this->getProduct->getTypeInstance()->getUsedProducts($this->getProduct, null) :
    $this->getProduct->getTypeInstance()->getSalableUsedProducts($this->getProduct, null);

    return $products;

And for last where you will get its options method called above

   protected function getAttributeOptionsData($attribute, $config)
        $attributeOptionsData = [];
        foreach ($attribute->getOptions() as $attributeOption) {
            $optionId               = $attributeOption['value_index'];
            $attributeOptionsData[] = [
                'id'       => $optionId,
                'label'    => $attributeOption['label'],
                'products' => isset($config[$attribute->getAttributeId()][$optionId])
                ? $config[$attribute->getAttributeId()][$optionId]
                : [],
        return $attributeOptionsData;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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