Product Variations | CodeConfig Skip to Main Content
CodeConfig Banner
CodeConfig Summer Banner
CodeConfig Summer Banner
CodeConfig Summer Offers
00
Days
00
Hours
00
Min
00
Sec
CodeConfig Summer Banner

🎨 Product Variation

The Product Variation feature lets you create and style product options like color, size, and custom swatches in your WooCommerce store. Improve product presentation and make it easier for customers to choose variations visually.

General Options

Enable Variations: Activate to allow variations on your products.

Enable Single Product Variation: Useful when you want to display only one variation clearly.

Convert Dropdown to Label: Replace default dropdowns with clickable labels or swatches for a more visual selection experience.

Manage Variations

Variation Name: Add a descriptive name, such as “Color” or “Size”.

Variation Type: Choose how customers select variations:

  • Color Swatch
  • Image Swatch
  • Button/Label
  • Radio Button

Add New Term: Add specific options under each variation (e.g., Blue, Medium).


Settings

Label Styles

Shape: Select the shape for label buttons — Square is default with a border radius and size note for consistency.

Enable Tooltip: Show helpful tooltips when customers hover over a label swatch.

Color Styles

Shape: Choose between Round or Square for color swatches. Rounded and square shapes follow predefined width/height ratios for a neat look.

Enable Tooltip: Show tooltips on hover for color options.

Image Styles

Shape: Pick Round or Square shapes for image swatches.

Enable Tooltip: Display a tooltip on hover for image swatches.

Lazy Load Images: Activate this to load swatch images only when they enter the viewport, improving page performance.

Save Settings

After configuring your product variations and style settings, click Save Settings to apply them across your WooCommerce store.