Step one
Installing the plugin Quasar Variable Attributes (or Quasar Variable Attributes Pro). Free version can be installed from the WordPress plugin database: admin panel for your website -> plugins section -> Add New -> write the plugin’s name Quasar Variable Attributes in the search box -> install.
Write the name of the plugin in the search Quasar Variable Attributes
Step two
You need to add attributes that you want to style. All non-styled attributes will appear as a dropdown list. The screenshot shows how to add attributes.
After adding an attribute, click on it and the design settings menu will open.
Please note that the design of attribute styles has individual settings for categories and archives. This is necessary for you to make the attributes small for categories and large for the product card where you can find a lot of free space.
Step three
Go to the “Settings” section. Here, the main thing you should decide is whether you need to show a block with a choice of variations in categories and archives, as well as in related products. Also pay attention to the adaptability settings – choose the configurations that are suitable for your site.
Step four
Go to the “Design” section. Here you customize the appearance of the block in which variations will be displayed. Set the necessary indents and other parameters. Please note that the design settings for the product card and for categories are set in different sections
You can also check the “Localization” section, here you can set text translations for block with variables in categories and archives.
Attributes with images (PRO)
If you have purchased the Pro version, the plugin will have a “Checkbox img” style for attributes. This style has 2 working modes:
1) you set unique images in each product. To do this, a new tab will be displayed in the product settings, see screenshot:
To make this mode work, leave the shortcode [img-attr] for attribute values.
2) you can remove the [img-attr] shortcode and add a link to a fixed image instead of it, then this attribute value will have the same image on all products.
These 2 modes can be combined for different attribute values, see screenshot:
For categories, it is recommended to set a smaller image size, and for a product card, a larger one.
Problems and solutions
It often happens that you have installed a plugin, but in your theme, the new variation selection is not displayed correctly. To solve this problem, the plugin has a special setting – priorities.
The priority affects where the block with variations will be displayed. Typically, display issues are due to poor theme architecture.
Changing the priority allows you to avoid overlapping the new block with the selection of variables and other blocks. Different topics may require different priority values. Therefore, if you encounter problems, go through all the priority values band select the appropriate one.
Please note that categories and product cards have different priorities. If you have a problem in the product card, then you change the value priority for the product cards. If the problem is in the categories, change the priority for the categories.
If changing the priority values did not help and you have a paid version of the plugin, write to support: support@quasar-form.com