Variable Products

Seamlessly link WooCommerce variable attributes (such as color or dimensions) to customizer layers. This allows customers to select product variations and see the customizer update accordingly.

Configuring Attribute Mapping

For items with color variables, map color attributes in the WooCommerce variations settings to swap out the Base Layer asset in the customizer background automatically as the client alters selections.

Color Attribute Mapping

  1. Create a WooCommerce variable product
  2. Add color attributes (e.g., Red, Blue, Green)
  3. Create variations for each color
  4. In the KIT Customizer tab, map each color to a base layer image
  5. Save the product

Size Attribute Mapping

For size-based variations:

  • Map size attributes to different print area dimensions
  • Adjust mask layer boundaries per size
  • Configure different pricing per size
  • Set size-specific design constraints

Advanced Attribute Features

Dynamic Pricing

  • Set different base prices per variation
  • Configure variation-specific customization fees
  • Apply bulk discounts per variation
  • Enable variation-based feature pricing

Asset Swapping

Automatically swap assets based on attribute selection:

  • Base Layer: Different garment images per color
  • Print Area: Different mask sizes per size
  • Overlay: Different overlays per material
  • Pattern: Different patterns per style

Conditional Logic

Show/hide customizer options based on selected attributes:

  • Show certain cliparts only for specific colors
  • Enable text warping only for large sizes
  • Restrict upload types per material
  • Adjust design limits per variation

Variation Configuration

Per-Variation Settings

Configure customizer settings for each variation:

  • Enable Customizer: Toggle customizer per variation
  • Pricing Strategy: Different pricing per variation
  • View Count: Different number of views per variation
  • Asset Set: Different asset set per variation

Default Variation

Set a default variation for the customizer:

  • First variation is loaded by default
  • Customer can change variation in designer
  • Design updates when variation changes
  • Pricing updates dynamically

Best Practices

  • Keep asset naming consistent with attribute names
  • Test all variations before publishing
  • Use clear attribute names for customers
  • Provide visual swatches for color attributes
  • Document attribute mappings for reference