How To: Add a Block with Variations to Product Pages

CS-Cart and Multi-Vendor allow you to show all the existing product variations on the page of that product. Previously customers had to select different variants of options on the product page to see what was available and in stock. With the list of all variations on the product page, a customer will be able to:

  • See what variations a product has, and which of these variations are in stock.
  • Add the necessary variations to cart or to the wish list right away.

Important

The Product Variations add-on first appeared in version 4.6.1, but the ability to show all the existing variations on the product page wasn’t available until version 4.7.1.

The list of variations on the product page.

To add a block with variations on the product page:

  1. Go to Design → Layouts.

  2. Switch to the Products tab.

  3. Click the + button of the necessary grid and choose the Add block action.

  4. A pop-up window will open. Switch to the Create New Block tab and choose Products.

  5. Choose Variations as the block’s template. If you’d like to hide the Add to wish list button for variations, just click the Settings link and tick the corresponding checkbox.

    The Variations template.
  6. Switch to the Content tab and choose Variations as the filling. Specify the limit (the maximum number of displayed variations) and choose whether you’d like to show only the variations that are in stock.

    Important

    If you’d like all variations of a product to appear in the block (regardless of how many variations the product has), set the value of the Limit field to 0 (zero).

    The Variations filling type.
  7. Switch to the Block settings tab and choose whether or not to hide the Add to Cart button in the block with variations.

  8. Click the Create button. Now, if a product has variations, the list of these variations will appear on the product page.

  9. (optional) If you’d like the list of variations to be displayed on a separate tab or in a pop-up window, create a product tab and put a block with variations into that tab. If you do so, remember to disable the block that you added to the product page in step 4 of this tutorial.

    The Variations block as a pop-up.

Big CS-Cart Update is Here Experience the New Admin Panel with Dark Theme