Color Swatches & Size Selectors for WooCommerce Variations

This plugin for WooCommerce enables you to display variations for your color attribute in swatches and size variations as buttons with individual quantity selectors.

Important Note About Prices

All variations must have prices set or they cannot be added to cart

This includes:

1. Every color and size combination must have a price.
2. Prices must be set for all pages of variations (not just the first page).
3. If a variation is missing a price, it will not be selectable.

How to Set Prices for All Variations

1. Go to your product in the WordPress admin
2. Click on the “Variations” tab
3. Make sure “Show all variations” is selected in the dropdown
4. Set prices for each variation
5. Click “Save changes”

Features

• Beautiful color swatches with customizable size and shape
• Intuitive size selector with quantity input
• Customizable swatch size (small, medium, large)
• Customizable swatch shape (circle, square)
• Option to show/hide labels
• Option to show/hide attribute names
• Per-product settings override
• Match color selection to selected size background color

Configuration

Global Settings

• Swatch Size : Choose between small, medium, or large swatches
• Swatch Shape : Choose between circle or square swatches
• Show Labels : Enable/disable labels under color swatches
• Show Attribute Label : Enable/disable attribute names (e.g., “Color”, “Size”)
• Enable Size Quantity : Enable/disable quantity selection for sizes

Per-Product Settings

Each variable product can override the global settings:

1. Edit a variable product
2. Go to the “Variation Options” tab
3. Enable “Override Global Settings”
4. Configure the settings as needed

Usage

Setting Up Variable Products

1. Create a variable product in WooCommerce
2. Add color and size attributes
3. Create variations for each color and size combination
4. Set prices for all variations
5. Configure the display settings in the Variation Options tab
6. Leave default form values for variations as none.

Color Swatches

• Colors are displayed as clickable swatches
• Each swatch shows the actual color
• Optional labels can be shown under each swatch
• Swatches can be customized in size and shape

Size Selector

• Sizes are displayed as radio buttons
• Each size can have its own quantity input
• Sizes are clearly labeled and easy to select
• Quantity can be adjusted per size

Video Demo

Shows the use of both global and single product settings to customize the output for color and size variations.