Skip to main content

Product Variations

This section will tell you how the product variations work in the application.

Dynamic Attributes#

As of version v1.6.0 WooStore Pro supports Dynamic Attributes. This means that you can use any attribute you want to create your variations and they will be displayed in the application elegantly.

The name of the attribute will become the title of the attribute section in the application.


If you are using

  • WooStore Pro application version v1.11.0 or above
  • WooStore Pro Api wordpress plugin version v2.1.0 or above

you can install the Variation Swatches for Woocommerce wordpress plugin to add color and image type of attributes for your products. If you follow the above, you can skip the following color settings as the colors will be fetched from Variation Swatches for Woocommerce color type attribute settings.

Follow the guide from here: Variation Swatches for WooCommerce


This attribute which you can use to make your variations in the application. There are some things that you need to keep in check while creating variations with the color attribute.

The application compares the value of the color attribute that you put in the product data with the color values defined in the colors.dart file. You can locate this file in woostore_pro / lib / constants / colors.dart. There are a lot of colors available in that file.

How to add new colors for variations ?#

To add new colors to the colors.dart file you need to have both the Color Name and its associated Hex Value.

For example:

'black': '#000000',
'night': '#0C090A',
'darkslateblue': '#2B3856',
'midnightblue': '#151B54',
'navyblue': '#000080',
// You can also use them like below
'Black': '#000000',
'Night': '#0C090A',
'Dark Slate Blue': '#2B3856',
'Midnight Blue': '#151B54',
'Navy Blue': '#000080',

Just make sure that the color attribute name that you enter in the product dashboard is present with the same name and the corresponding Hex Value in the colors.dart file.

Finally save the file. If you edit the colors.dart file while running the application, you will need to hot restart or completely stop and re-run the application for the changes to take effect.