I have configurable product which is combination of color and size. I have to get total no. of colors for the configurable product on the listing page.

I am able to get all the child products but not getting exact total of available colors.

There are 15 colors and 3 sizes so total child products is 45. I have to get total no. of colors.

Please give me some solution.

  • Just need to confirm. you want total no of colors for particular configurable product or for all available configurable product on listing page. Oct 11, 2017 at 6:40
  • Only for particular configurable product.
    – Magecode
    Oct 11, 2017 at 6:56

2 Answers 2


You can use help of class Magento\ConfigurableProduct\Model\Product\Type\Configurable refer here

Try like this

private $productRepository; 
public function __construct(
    \Magento\Catalog\Api\ProductRepositoryInterface $productRepository
) {
    $this->productRepository = $productRepository;

public function execute()
    $product = $this->productRepository->getById(83); //Configurable Product Id

    $colorAttributeId = $product->getResource()->getAttribute('color')->getId(); // Get Color Attribute Id
    $configurableAttrs = $product->getTypeInstance()->getConfigurableAttributesAsArray($product); // Get Used Attributes with its values

        echo count($configurableAttrs[$colorAttributeId]['values']); // Gives you the count
        echo "<pre>";print_r($configurableAttrs[$colorAttributeId]['values']); // Give you values used
  • Thank you so much. :-) If i want to get hex colors code then what i need to do ? Nov 26, 2018 at 6:49

You need to override "Magento\Catalog\Block\Product\ListProduct" class to show total no of color for a particular configurable product on listing page as below.

Create a simple module with registaration.php and etc/module.xml.

step 1. create di.xml under app/[company]/[module]/etc/di.xml and write below code.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<preference for="Magento\Catalog\Block\Product\ListProduct" type="company\module\Block\Product\ListProduct" />

step 2. create ListProduct.php under app/[company]/[module]/Block/Product/ and write below code.


namespace [company]\[module]\Block\Product;

class ListProduct extends \Magento\Catalog\Block\Product\ListProduct {

public function getProductDetailsHtml(\Magento\Catalog\Model\Product $product) {
       $html = '';
       $renderer = $this->getDetailsRenderer($product->getTypeId());
        if ($renderer) {
            if ($product->getTypeId() == \Magento\ConfigurableProduct\Model\Product\Type\Configurable::TYPE_CODE) {
                $options = array();
                $productColor = array();
                foreach ($data as $attr) {
                    foreach ($attr as $p) {

                        if ($p['attribute_code'] == 'color') {
                            if (!in_array($p['option_title'], $productColor)) {
                                $productColor[] = $p['option_title'];
                $html = "Total No of colors is " . count($productColor);
             return $html . $renderer->toHtml();
         return '';


Your Answer

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

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