Variation Buttons for WooCommerce

This plugin enables you to replace WooCommerce variation dropdowns with customizable buttons on single product pages only. Includes color pickers for variation attribute values, button size and style options, and per-product/variation color settings.

Description

Variation Buttons is a WordPress plugin that enhances the WooCommerce variable product experience by replacing standard dropdown selects with intuitive, customizable buttons. The plugin offers:

• Global and Per-Product Settings: Enable variation buttons globally or on a per-product basis
• Color Picker Integration: Assign colors to attribute values, with automatic color picker support for color attributes
• Variation Single Product Integration: Seamlessly integrate with the Variations as Single Products plugin to link buttons to individual variation pages
• Customizable Styling: Dynamic color application with automatic text color adjustment for readability

Configuration

Global Settings

Navigate to WooCommerce > Variation Buttons to configure global settings that apply to all variable products by default.

Enable Globally

• Enable variation buttons globally for all variable products: When checked, variation buttons are enabled for all variable products by default. You can still disable them per product if needed.
• When unchecked, variation buttons are disabled globally and must be enabled per product.

Color Attribute

• Select the attribute that represents colors: Choose which product attribute represents colors (e.g., “Color”, “Colour”, “Shade”).
• The dropdown includes both:
• Product-specific attributes (created on individual variable products in Product Data > Attributes)
• Global taxonomy attributes (created in WooCommerce > Products > Attributes)
• Once selected, color pickers will automatically appear for all unique values of this attribute found across all variable products.

Color Display Mode

• Always Display Color: Colors are always visible on color attribute buttons. Selected buttons use the hover color for visual distinction.
• Display on Hover & Selection Only: Buttons show default background until hovered or selected, then display the color.

Color Attribute Hover Effect

• None: No hover effect on color attribute buttons.
• Darker Shade: Automatically darkens the color by 20% on hover.
• Lighter Shade: Automatically lightens the color by 20% on hover.
• Custom Color: Use a specific custom color for hover state (requires setting Custom Hover Color below).

Custom Hover Color

• Select a custom hover color: Only visible when “Custom Color” is selected above.
• This color will be used as the hover color for all color attribute buttons globally.

Attribute Colors

• Set colors for each attribute value: Color pickers appear for each value of the selected color attribute.
• These colors are applied globally to all products unless overridden at the product or variation level.

Button Size

• Select the size for variation buttons: Choose from Small, Medium, or Large.
• Small: Compact buttons with 6px vertical and 12px horizontal padding, 12px font size.
• Medium: Standard buttons with 10px vertical and 20px horizontal padding, 14px font size (default).
• Large: Larger buttons with 14px vertical and 28px horizontal padding, 16px font size.

Round Buttons

• Make buttons round: When checked, variation buttons will have fully rounded corners (border-radius: 50px).
• When unchecked, buttons use the default border-radius of 4px.

Per-Product Settings (General Tab)

Edit a variable product and go to the General tab in Product Data to configure product-specific settings that override global settings.

Enable Variation Buttons

• Enable variation buttons:
• When global setting is enabled: Variation buttons are enabled globally for all variable products. Uncheck this box to disable variation buttons for this specific product only.
• When global setting is disabled: Enable variation buttons for this product. The global setting is currently disabled, so you must enable buttons per product.

Color Attribute

• Select the attribute that represents colors for this product: Overrides the global color attribute setting for this product only.
• Leave as “Use Global Setting” to use the global setting.
• Select a specific attribute to use a different color attribute for this product.

Color Display Mode

• Choose when to display colors on color attribute buttons: Overrides the global color display mode for this product.
• Options:
• Use Global Setting: Uses the global setting
• Always Display Color: Colors always visible, selected buttons use hover color
• Display on Hover & Selection Only: Colors only show on hover/selection

Hover Color

• Choose how color attribute buttons should appear on hover: Overrides the global hover effect setting for this product.
• Options:
• Use Global Setting: Uses the global setting
• None: No hover effect
• Darker Shade: Darkens color on hover
• Lighter Shade: Lightens color on hover
• Custom Color: Use custom hover color (requires Custom Hover Color below)

Custom Hover Color

• Select a custom hover color: Only visible when “Custom Color” is selected above.
• Overrides the global custom hover color for this product only.
• Only applies when “Custom Color” is selected in the Hover Color setting above.

Variation-Specific Settings (Variations Tab)

In the Variations tab, you can set colors for individual variations that override both global and product-level colors.

Variation Color

• Variation Color: A color picker appears for each variation that uses the color attribute.
• The color attribute value (e.g., “Orange”, “Blue”) is shown in parentheses next to the label.
• Set a custom color for this variation: This color will override:

1. Global attribute colors
2. Product-level attribute colors
3. Any other variation colors for the same attribute value

• This allows you to have different colors for different variations even if they share the same attribute value.

Color Priority Hierarchy

Colors are applied in the following priority order (highest to lowest):

1. Variation-specific color (set in Variations tab) – Highest priority
2. Product-level attribute colors (set in General tab) – Medium priority
3. Global attribute colors (set in plugin settings) – Lowest priority

This means if a variation has a specific color set, it will always use that color regardless of global or product settings.

Features

Color Attribute Support

When you select a color attribute in the global settings, color pickers will automatically appear for each value of that attribute. The plugin supports:

• Product-specific attributes: Attributes created on individual variable products (Product Data > Attributes)
• Global taxonomy attributes: Attributes created in WooCommerce > Products > Attributes
• Automatic value detection: Collects all unique attribute values from all variable products
• Three-level color hierarchy:
• Global colors (set in plugin settings)
• Product-level colors (set in product General tab)
• Variation-specific colors (set in Variations tab – highest priority)
• Automatic text contrast: Colors are automatically applied to buttons with proper text contrast adjustment
• White-to-black hover fix: Special handling for white buttons with black hover colors to ensure text visibility

Color Display Modes

• Always Display Color: Shows colors on all buttons. Selected buttons use hover color for visual distinction.
• Display on Hover & Selection Only: Shows default background until hovered or selected, then displays the color.

Hover Effects

• None: No hover effect
• Darker Shade: Automatically darkens the color on hover
• Lighter Shade: Automatically lightens the color on hover
• Custom Color: Use a specific custom color for hover state