In Webflow, is it possible to delete specific variants of a product that are not available in certain options, such as size small and color blue? If not, is there a workaround to achieve this?

Published on
September 22, 2023

In Webflow, it is not possible to delete specific variants of a product based on the availability of certain options, such as size or color. However, there is a workaround to achieve this by filtering the variants on the front-end using custom code. Here's how you can do it:

  1. Create a Collection: First, create a Collection in Webflow that includes all the product variants. Each variant should have its own Collection Item.
  2. Add Filters: Add filters to your Collection List on the front-end using custom code. You can use JavaScript to loop through each variant and check for the desired options (e.g., size small and color blue).
  3. Hide Variants: After filtering the variants, hide the ones that don't meet the desired options using CSS. You can use the display: none; property to hide them.
  4. Update Availability: If the visibility of a variant is based on its availability, make sure to update the available quantity or status dynamically. You can use JavaScript to update the availability based on the selected options.

By following the above steps, you can effectively filter and hide specific variants of a product that are not available in certain options. It is important to note that this workaround requires some knowledge of coding, specifically JavaScript and CSS. You may need to consult with a developer or Webflow expert to implement this solution effectively.

To summarize, here's a step-by-step guide to deleting specific variants in Webflow:

  1. Create a Collection in Webflow with all product variants.
  2. Add filters to the Collection List using JavaScript.
  3. Hide variants that don't meet the desired options using CSS.
  4. Update availability dynamically if necessary.

Additional Questions:

  1. How do I create a Collection in Webflow?
  2. Can I use conditional visibility in Webflow to hide specific product variants?
  3. Is it possible to create custom product options in Webflow?