getVariants( )

Gets a product's available variants based on the specified product ID and either option choices or variant IDs.

The getProductVariants() function returns a Promise that is resolved to an array of VariantItem objects when the product variants with the specified choices or variant IDs are retrieved.

Method Declaration
Copy
function getVariants(
  productId: string,
  options: ProductVariantOptions,
): Promise<Array<VariantItem>>;
Method Parameters
productIdstringRequired

ID of the product whose variants are being retrieved. Pass only this field to retrieve all of the specified product's variants.

optionsProductVariantOptions

Variant options to return. If not specified, all the product's variants are returned.

Returns
Return Type:Promise<Array<VariantItem>>
JavaScript
import { product } from "wix-stores-frontend";

const productId = "91f7ac8b-2baa-289c-aa50-6d64764f35d3";
const options = {
  choices: {
    Weight: "500g",
  },
};

product
  .getVariants(productId, options)
  .then((variants) => {
    const firstVariant = variants[0];
    const firstPrice = firstVariant.variant.price;
    const numberOfReturnedVariants = variants.length;
  })
  .catch((error) => {
    console.error(error);
  });

/*
 * Example of returned variants:
 *
 *  [
 *    {
 *      "_id": "00000000-0000-003f-0005-a316e6ba5b37",
 *      "choices": {
 *        "Weight": "500g",
 *        "Ground for": "Stovetop"
 *      },
 *      "variant": {
 *        "currency": "USD",
 *        "price": 65,
 *        "discountedPrice": 60,
 *        "pricePerUnit": 0.24,
 *        "formattedPrice": "$65.00",
 *        "formattedDiscountedPrice": "$65.00",
 *        "formattedPricePerUnit": "$0.24",
 *        "weight": 0.5,
 *        "sku": "10002",
 *        "visible": true
 *      }
 *    },
 *    {
 *      "_id": "00000000-0000-0040-0005-a316e6ba5b37",
 *      "choices": {
 *        "Weight": "500g",
 *        "Ground for": "Filter"
 *      },
 *      "variant": {
 *        "currency": "USD",
 *        "price": 70,
 *        "discountedPrice": 65,
 *        "pricePerUnit": 0.26,
 *        "formattedPrice": "$70.00",
 *        "formattedDiscountedPrice": "$70.00",
 *        "formattedPricePerUnit": "$0.26",
 *        "weight": 1,
 *        "sku": "10004",
 *        "visible": true
 *      }
 *    }
 *  ]
 *
 */
Did this help?