Table View for Product Variants

Learn how to use product variants in conjunction with the Table View add-on.

Olga Tereshina avatar
Written by Olga Tereshina
Updated over a week ago

This article applies to the specific software versions: X-Cart with Variants Table View Add-on.


The add-on Variants Table View modifies the product details page to enable convenient browsing and bulk add to cart for product variations. All available product variants are displayed in the table view on the same page, with quantity specification fields for each variant. As a result, shoppers can specify each variant's desired quantity and add them to the shopping cart all at once with a single click of the Add to cart button - without going back to the product page and adjusting the options numerous times to add each variant separately.

storefront.png

Add-on Functionality Overview

The "Variants Table View" add-on does not imply the functionality of creating and configuring product variants. Instead, it just changes the visual representation of product variants on the storefront. It means that to use the "Variants Table View" add-on functionality, you need the add-on Product Variants installed and enabled.

You can obtain the "Variants Table View" add-on from the X-Cart App Store.

To install the add-on, follow the instructions from Installing Add-ons from the X-Cart App Store.

Variants Table View Add-on Setup

Once you have installed the add-on, proceed to the settings page to configure it.

The add-on settings page provides tools to specify which parameters (quantity, SKU, image, weight) need to display in the variants table.

  1. Enable the respective toggle to display a variant property in the storefront.

    • Show Qty column

    • Show SKU column

    • Show Image column

    • Show Weight column

  2. Configure the variant image size setting the values in the following fields:

    • Variant image max-width

    • Variant image max-height

  3. Click "Save" to make the settings active.

Configuring Variants Table View for Products

You can use table view for all products with variants or just some of them.

If the number of products with variants in your store is not that large, you can enable variants table view for them on a per-product basis:

  1. On the product listing page, locate the product with variants and open the details for viewing/modification.
    โ€‹


    The product should already have variants configured. If not, configure product variants, as described in Configuring Variants for Products.


  2. In the "Info" tab of the product details page, locate the "Display variants as a table" setting and enable it.

    product-details.png

  3. Save the changes.

That's it! Your online store will now display the product's variants in table mode.

If the number of products with variants is considerable, editing them one by one to enable table view for variants may not be that convenient. In this case, you may use the built-in import tool.

To enable table view for some or all of your products via product import, you will need to import the products whose variants need to display in the table with the "variantsAsTable" field value set to "Yes."

Related pages:

Did this answer your question?