Menu Close
    Start a Project Request quote Reading list Switch to dark mode
    magento-hyperlocal-marketplace-guide

    Product-wise swatches in Magento 2

    In this blog, I’ll show you how to display swatches product wise that means different images for same attribute option for different products. In Magento 2, the swatches are common for all products. That means the swatch of the attribute option will be common across all the products which are using it.

    Let’s say we create a configurable product Shirt which has two variations Blue and Black and added the swatches according to the shirt,

    Now this will look great for the shirt on product page,

    But what if we create another product, let’s say Jeans. In that case these won’t be a good image swatch because these are shirts.

     

    Magento 2 does not have any easy way deal with this. However we can override some classes and show our own images.

    First create di.xml under app/code/Webkul/CustomSwatch/etc/ folder,


     

    Then create Configurable.php under app/code/Webkul/CustomSwatch/Block/Product/Render/ folder,


    In this we have changed the swatches only for product with id 19 (which is jeans) and attribute id 93 (which is color) but you get the idea. Here we have replaced swatch thumbnails and swatch images with our own.

    Now we will see our own images as swatch for jeans,

     

    Note:- Do not use Object Manager instead use Dependency Injection

    You can find the code on GitHub.

    Thank you for reading. Feel free to comment if you face any issue.

    . . .

    Comment

    Add Your Comment

    Be the first to comment.

    Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close