Creating Variable Products

If you sell products that come in different sizes, colors, or styles — like a t-shirt in multiple sizes and colors — you don’t need to create separate products for each variation. Instead, you can use Variable Products in WooCommerce to handle this more efficiently.

CartFlows fully supports variable products and lets you display product options directly on the checkout page.

Example Use Case

Let’s say you sell a panda-themed t-shirt. This shirt is available in three sizes (S, M, L) and four colors. Instead of creating 12 different products, you can create one product with two attributes: Size and Color, and define variations for each combination.

How to Set Up Variable Products in CartFlows

Step 1: Create a Variable Product in WooCommerce

In your WordPress dashboard, create a new product or edit an existing one. Set the Product Data to “Variable Product”, add attributes (like Size or Color), and create your variations.

If you’re new to WooCommerce variations, here’s a helpful video tutorial that starts directly at the section on setting up variable products.

Step 2: Assign the Product to Your Checkout Step

• Navigate to CartFlows → Funnels and edit your funnel.
• Open the Checkout step and go to the Products tab.
• Select your variable product and make sure to enable the Product Options toggle.

Once enabled, your product variations will automatically display on the checkout page.

Step 3: Choose a Layout for Product Options

CartFlows offers three display layouts for variable product options:

Card Layout – A modern visual layout using cards for each option.

Classic Layout – A more traditional list-style layout.

Card Inline Layout – Offering a more modern and streamlined look.

Note: If you’re using a page builder (such as Elementor or Gutenberg), you can directly customize the design of the variation selector using CartFlows’ widget or block settings.