Loading products – advanced with global attributes

Before creating or editing a variable product, first check that the required attributes and options already exist.

The main global attributes, such as Colour and Size, should already be listed here.

Always use these existing global attributes. Do not create another Colour or Size attribute for an individual product.

Flatsome allows global WooCommerce attributes to display as colours, images or labels instead of normal dropdown selections.

For the main product attributes, use the appropriate Type:

• UX Color for product colours.
• UX Label for sizes such as Small, Medium and Large.
• UX Image when an image should represent the option.

Flatsome attribute types can be set to UX Color, UX Image or UX Label.

Under Products → Attributes, find the Colour attribute and click Configure terms.

This is where all the colours used across the website are managed.

From here you can:

• View existing colours.
• Add a new colour.
• Edit an existing colour.
• Set the Flatsome colour swatch.

Configure the individual terms available under the global Colour attribute.

When a product has a new colour that is not already available, add it under the global Colour attribute before creating the product variations.

Enter the name of the new colour and select the matching colour using the Flatsome colour picker.

For example:

Save the new colour. It will now be available for selection when editing any product on the website.

Sizes are managed in the same way as colours.

Check if the required size already exists. If it does not, add the new size before setting up the product.

Examples may include:

• Small
• Medium
• Large
• XL
• 2XL
• 3XL

Create a new WooCommerce product or open the existing product that needs variations.

Scroll down to Product data and change the product type to:

This enables WooCommerce’s Attributes and Variations options for the product.

Under Product data, go to:

Select the existing global Colour attribute.

You will now be able to select from the colours that have already been created under Products → Attributes → Colour.

Select only the colours that are actually available for this particular product.

For example, the website may have these global colours:

If this product is only available in Black, Navy and Olive Green, select only those three colours.

If a colour has already been selected but is not available for this product, remove it from the product’s selected attribute values.

Make sure Used for variations is enabled and save the attributes.

If the product is available in different sizes, select Add existing again and choose the global Size attribute.

Select only the sizes available for this product.

For example:

Enable Used for variations and save the attributes.

Once the attributes have been saved, go to:

Select Generate variations.

WooCommerce will create the possible combinations using the colours and sizes selected for this product.

For example:

• Black / Small
• Black / Medium
• Black / Large
• Navy / Small
• Navy / Medium
• Navy / Large

Open each generated variation and enter the required information.

Check the following:

• Regular price
• Sale price, if applicable
• SKU, if required
• Stock quantity or stock status
• Variation image, where required

Click Save changes once the variations have been completed.

Flatsome uses the attribute settings created earlier to turn the standard WooCommerce selections into visual swatches and buttons.

Colours can display as colour swatches, while sizes can display as easy-to-select labels.

Example of Flatsome variation swatches displayed on the product page.

Click Update or Publish, then view the product on the website.

Check that:

• Only the correct colours are displayed.
• Only the correct sizes are displayed.
• All available combinations can be selected.
• Unavailable combinations cannot be purchased.
• The correct price appears.
• The correct product image appears.
• Stock information is correct.
• The Add to Cart button works correctly.