Setting Up Product Label and Variation Swatches for WooCommerce

Configuration of Product Label and Variation Swatches for WooCommerce

Styling the Product Attributes Globally

Go to WooCommerce > Settings > Color Label Variations for WooCommerce.

Adjusting the Basic Variation Label

Under General Settings, you’ll find options to customize the appearance of your variation labels.

• Border Width (px): Set the width of the border around your variation labels in pixels. Enter the desired pixel value in this field.
• Border Style: Choose the style of the border from the dropdown menu. Options include:
  • Dotted
  • Dashed
  • Solid
  • Double
  • Groove
  • Ridge
  • Inset
  • Outset 
• Short Name: Choose to display a shortened version of the attribute name by toggling this option.
• Name Length (Chars): Specify the maximum number of characters to display for each attribute.

Customizing Label Attributes

• Font Color: Choose the color of the text for your label attributes.
• Background Color: Set the background color behind the label text.
• ‎Border Color: Define the color of the border surrounding the label.
• Box Radius (%): Adjust the roundness of the corners of the label box as a percentage.

Customizing Color Attributes

• Font Color: Select the color of the text for your color attributes.
• Background Color: Set the background color for the color attribute boxes.
• Border Color: Define the color of the border around the color attribute boxes.
• ‎Box Radius (%): Adjust the roundness of the corners of the color attribute boxes.

Configuring Attributes

• Select Font Color: Choose the font color for the attribute selection options.
• Select Background Color: Set the background color for the attribute selection boxes.
• ‎Select Border Color: Define the border color for the attribute selection boxes.

Customizing Radio Type Attributes

• Font Color: Select the color of the text for radio type attribute options.
• ‎Background Color: Set the background color behind the radio type attribute options.
• ‎Border Color: Define the color of the border surrounding the radio type attribute options.
• ‎Box Radius (%): Adjust the roundness of the corners of the radio type attribute option boxes.

Customizing Image Attributes

• Height (px): Specify the height of the image for image attributes in pixels.
• Width (px): Define the width of the image for image attributes in pixels.
• Border Color: Set the color of the border surrounding the image attribute.
• Box Radius (%): Adjust the roundness of the corners of the image attribute box as a percentage.

After customizing your desired attributes, click the “Save changes” button to apply the changes to your WooCommerce settings.

Adding Multiple Custom Attributes

Go to Products > Attributes.

View a table displaying a complete list of attributes that have been previously created.

Fill in the following details for the new attribute:

Name: Provide a name for the attribute. This name will be displayed on the front-end of your store.

Slug: Enter a unique slug or reference for the attribute. It should be no more than 28 characters long.

Enable Archives?: Check this box if you want this attribute to have product archives in your store.

Default Sort Order: Choose how the terms of this attribute will be sorted on the frontend shop product pages. You can either use the default sort order or set a custom order by dragging and dropping the terms.

• Custom Ordering: If you choose custom ordering, you can rearrange the terms by dragging and dropping them within the attribute. 
• Name 
• Name (Numeric)
• Term ID

Type: Select the type of attribute from the following options:

• Select 
• Color 
• Image 
• Label 
• Radio 

After entering all the necessary details, click on the “Add Attribute” button to create the new custom attribute.

Configuring Color Label Variations on a Product Level

Navigate to Products and either click on “Add New” to create a new product or choose an existing product to edit.

Once in the product editor, locate the “Product Data” section.

From the dropdown menu within “Product Data,” select “Variable product” to indicate that your product will have variations.

Within the “Product Data” section, click on the “Attributes” tab.

You have two options here:

• Adding a Custom Product Attribute: If you want to add a new attribute, click on the “Add” button. Specify the following details:
  • Name: Enter the name of the attribute (e.g., Color).
  • Value(s): Enter the possible values for this attribute, separating each value with a “|” (e.g., Red|Blue|Green).
  • Visible on the Product Page: Checkmark this option to ensure the attribute is visible to customers on the product page.
  • Used for Variations: Checkmark this option to indicate that variations will be based on this attribute.
• Selecting an Existing Attribute: If you have already created the attribute, select it from the dropdown list. Ensure that both “Visible on the Product Page” and “Used for Variations” are checked.

After adding or selecting the attribute and providing the necessary details, click on the “Save Attributes” button to save your changes.