2

I am using magento 2.2. I've both color and size attribute and I want to display on frontend

enter image description here

I tried and colors are showing in left side: enter image description here

  • Go to Stores -> Product (under attribute section) -> Select the attribute color and size -> Storefront Properties -> Used in Product Listing option and set it to Yes . – Ylgen Guxholli Oct 11 '18 at 20:01
  • I tried but it's not showing size and color – kiran Oct 11 '18 at 20:23
  • Did you flushed cache ? Are the attributes assigned to the products ? – Ylgen Guxholli Oct 11 '18 at 20:25
  • i did. yes, attributes are assigned to the products . – kiran Oct 11 '18 at 20:51
  • So it is working now ? Try a reindex and cache flush. – Ylgen Guxholli Oct 11 '18 at 21:38
1
+50

Visual swatches & text swatches visible on the storefront at the listing page (below the product name) is possible only with the configurable products so make sure that the product You have created is a configurable product & you have also created the sub-products(child-products) for it, and used the size/color attributes as variation options for the child products (You can use any as per your requirement).

Please refer these images

  1. https://www.screencast.com/t/lZbVFd8j
  2. https://www.screencast.com/t/bCE0d9gAv4NC

Now secondly make sure that the attributes you have used for the variations are of type visual/Text Swatch (in the property section) & are visible on the store front on the listing page (In the Storefront properties section).

Please refer these images

  1. https://www.screencast.com/t/C1HVMrA0
  2. https://www.screencast.com/t/SgID2exBI
  • if type is simple product then we can't display color and size. – kiran Dec 6 '18 at 14:26
  • You need to do hard code for it but it doesn't makes any sense as because the swatches are given there to show the variety you have into the single product that is to show the single kind of product in multiple size/color/designs etc. – Abhishek Tripathi Dec 7 '18 at 4:45
  • It directly/indirectly links multiple simple products on the basis of there variation (single/multiple) & the similarities. – Abhishek Tripathi Dec 7 '18 at 4:48
  • i tried with configurable products but now add to cart is not working. Configurable product is not added to cart in catalog page. prntscr.com/ls48uf – kiran Dec 7 '18 at 19:56
  • Configurable products can't be added into the cart they are just made to show the variations of a same kind of products. On the reference of that configurable product end users are buying the simple products.For eg. you have a shirt which has size = L but you have that shirt available in 3 colors so you will create a single configurable product & it's 3 child products (Simple products) with all the 3 different colors. – Abhishek Tripathi Dec 8 '18 at 5:05
0

In order to make an attribute selectable in the list you need to mark it with "Visible on Catalog Pages on Storefront" as "Yes".
Just to be safe put the flag "Used in Product Listing" to "yes" also.
In order to make it visible as a color swatch you need to set its type (Catalog Input Type for Store Owner) as "Visual swatch".
Make sure you rebuild your indexes when you are done.

  • I did, but it's not working – kiran Dec 7 '18 at 17:52
0
  1. Change the Settings -> Go to Stores -> Product
    -> Select the attribute color and size -> Storefront Properties -> Used in Product Listing option and set it to Yes -> Used in Product Listing" to "yes"

  2. Then try cache clean

  3. Try a reindex and cache flush
  • What new you have suggested except @marius answer ? – Murtuza Zabuawala Dec 6 '18 at 13:05
  • I did, but it's not working – kiran Dec 7 '18 at 17:51
0

Try this code in list.phtml

<?php if($_product->isConfigurable()): ?>   //get attributes   <?php $attributes = $_product->getTypeInstance(true)->getConfigurableAttributes($_product) ?>   <?php if(count($attributes)): ?>
    <ul>
    <?php foreach($attributes as $att): ?>
      <?php $pAtt=$att->getProductAttribute();
        //get the child products
        $allProducts = $_product->getTypeInstance(true)->getUsedProducts(null, $_product);
        $frontValues =array() ?>
      <li><?php echo $pAtt->getFrontendLabel() ?>
       <ul>
       <?php foreach($allProducts as $p): ?>
         //check stock, status, ...
         //do not show unsaleable options
         <?php if(!$p->isSaleable()) continue; ?>
         <?php $out=$p->getAttributeText($pAtt->getName()); ?>
         <?php $frontValues[$out]=$out; ?>
       <?php endforeach ?>
        <li><?php echo implode('</li><li>', $frontValues) ?></li>
       </ul>
      </li>
    <?php endforeach ?>
    </ul>   <?php endif ?> <?php endif ?>
  • This code is not working. – kiran Dec 7 '18 at 19:53

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.