We are using the Astra theme now, and we are opening one of the products.
woocommerce product variants:
When we publish our products, we use Woocommerce to build an independent website. Some products are simple. They may not have specifications, that is, no SKU, but some products, such as our clothes, cosmetics, etc., including our shoes, are colored, and this color is the specification. We need to add variable products or different colors.
Among variable products, we can add their color, including their size and specifications, etc., to the product.
For example, when we see cosmetics now, it adds a specification. This specification adds a color. The default non-hole door variant uses this method, which is a drop-down. For example, we can select through the drop-down. For his products, check the specifications of the products in different colors. Of course, you can ignore this picture. I am just giving you a demonstration. However, this drop-down method is not very obvious. We want this color to be displayed directly as one color. The small squares are called color blocks. To achieve this function, we need to install a plug-in.
Here, we have prepared a variant plug-in specifically for the variant color palette of our product attributes. In the same way, we enter our backend, find plugins, then install and select our plug-in.
Variation Swatches For WooCommerce plugin installation:
Of course, what we provide you here is a PRO version, and to use this plug-in, you must install a free version, so the two must be used simultaneously. We first install the Pro version, click to open and install it. After the installation is successful, activate the plug-in. It will prompt us that we are currently using a PRO version, which must depend on its free version, so we click to install the free version and then install it directly. After the installation is successful, we need to refresh this page, and then we can see that the free version is installed, and then we activate it.
woocommerce color block display effect:
After activation, there will be an additional module called Getwooplugins in the function button on our left called Getwooplugins. After we click on its sub-item to enter, its default state will have been activated for us, so let’s refresh it now. Our product will have an extra color block.
Woo Variation Watches Pro plugin settings:
Of course, you need to set this color block, so when we enter the interface of this plug-in, we first activate the default style. We must check it and not worry about it.
The second one is a reminder. When we hover the mouse, it will remind us of the attribute name. We usually turn it on normally. Then, if you don’t like this kind of square, you can set it to It is round, and the tutorial for this plug-in is very good. For example, if we click on the question mark, it will use animations to tell us what it is for, and then what the display effect is on the front desk, so it’s very convenient.
Then the other one is to cover our previous drop-down button and just change the drop-down this way.
woocommerce setup product variants:
Then the next one is for our pictures. If what we display here is not color, for example, if we set the picture specifications of the product, it will display the effect of the picture by default. Of course, this is also set according to our attributes. , we can just check it here.
The following item is if we enter the product when we release it.
We can see that it is a variant of a variable product, and then we see in the attributes this is the attribute, and below it are the variables. In the variables, we can upload some pictures, which will be displayed as pictures of this specification. Of course, our current color is a color, but we can set it to a picture in the properties later. This is Blue. Then we see that there is also a picture in red. If we don’t want it to be displayed, How do we operate if the color block is displayed as a picture instead?
Go to the attributes in our products and find the name of the attribute we use, Color.
Now, it uses Color. We can modify the color by clicking Edit. Here, we can choose its method. For example, we select it as a picture and then click Update. Now we can refresh our product. Then, he will call the pictures we added to the published products.
Woo Variation Watches Pro Advanced Settings:
According to your own needs, for example, if there are some pictures you need to select, but if there are too many, the displayed color may be clearer.
Then, let’s take a look at its advanced settings. The first one in the advanced settings is clear. Now, let’s select its attributes. It does not have a clear. Of course, there is also a clear below, and you can clear it. What is said here is that if you filter again, all the previously filtered attributes will be cleared. You can add them or not, and you can also see its effect. If you check this module, it will clear all properties instead of just one.
The next one is to disable some out-of-stock items. For example, if you use specifications and inventory in your SKU, it will be hidden if it is out-of-stock. Of course, you can also set it to other content, such as it is said that it is displayed as having a poor status. Let’s take a look at some instructions here. If it is an out-of-stock attribute, it will be displayed as a poor out-of-stock status. Then, the following is the size of our picture display, which is 50×50 by default.
We can display it slightly larger and then refresh our product. We hover the mouse over the attribute. We see the module where red is above becoming a larger one. Here, We modify the prompt’s content and size, and then we can exclude some categories. For example, there are some product categories. We don’t want it to display this color block, so we can exclude it. Here, You can choose some categories.
The following is to modify its style. For example, the color of our prompt, including the x shown in red if we are out of stock, and some of the following sizes, such as the size of the color block displayed on our Accessories page, The width, height, and font size of our products can all be adjusted. We won’t set them up for you here. Then, we continue to look at the product page, which refers to our product. The main modification on the details page is the text reminder above. We can see whether the text reminder is enabled in the first one. After you select the above reminder, there will be an attribute change, and then you can also change the separator in the middle. You can modify it.
You can display the last one as a list. We are displaying it horizontally now. Normally, it is displayed horizontally. The current attributes are from left to right. If you display it horizontally, you can also display it vertically.
woocommerce product category variations display:
We enter the consumption page for our shop page, including our product category catalog page. If there are specifications on the consumption page, it will also be displayed because we have activated it here. If you turn it off If it is off, it will no longer be displayed. Then, whether to display one of our reminders. Now we hover the mouse over it, and it also has a reminder.
The next one is about whether to display a reminder on our category directory page and then whether to display it as a label. That is, we have a description above to tell him that this is our color or the name of some other attributes. Generally, we can default to it. You have the defaults for some of the following, including its sorting method. You can center it. Now we see that it is left-centered. Then we refresh it, and it is centered.
Finally, there are some other special settings. The first one is on our category directory page. The product category page only displays one specification. For example, if it has multiple specifications, some products may have both colors. blocks, there are also size color blocks, so by default, it will display these two color blocks at the same time;
We generally let it display one; for example, it only displays the color or only displays one other attribute here. By default, only the color is displayed. Then, it will change when we hover the mouse over this image. Do you click to change or hover to change?
The number of woocommerce product category variants to display:
What this means is that if we want to choose another specification now, we click on the picture above, and it will change accordingly. But now these pictures all look exactly the same, so there is no effect. Normally, there is a change. We can just use On Click by default.
Then, the other one is the number of your attributes displayed. If your product has multiple specifications, for example, more than a dozen, the display here will be ugly and inconsistent with other modules. At this time, You can limit it, for example, we only limit the display to two, then we save it, and now we refresh it. Of course, we just turned on only color and selected this color as another attribute of its specifications. We mainly look at this Several products, now we see that there are more than two, it adds a more, if there are more than one, it adds other numbers, and then after you click it, you can enter the product.
The other one is when we click on this specification, will our product image change? It will change under normal circumstances. Of course, this is also for our product details page. We can default to it. It is not necessary. Whatever.
The next one is the size of our attribute module. We just adjusted the module size of the reminder above. If we want to make this box larger, then modify it here. For example, we adjust it to be larger. For example, its color is now one color, and then we adjust it to 80*80, then save it, and now we refresh our product, and it becomes larger to be more obvious to the user.
The last one is Group. You can build attributes into groups. We don’t need to worry about it here; it is useless. The last one is our activation code. Currently, this plug-in is not activated, but it does not affect its use. It is a GPL version, so don’t worry about it. Below is his tutorial, as well as some other plug-ins he provides, which we will not use for the time being.
Woo Variation Watches multiple variant styles:
This is about our color block, but in addition to modifying its display style on our settings page, we need to use it in other places. For example, when we just released the product, then here, how can attributes be used to call the content here? There is an attribute button for every attribute in our products, whether it displays colors or pictures. Then, we return our attributes here, add some attributes, and modify its display specifications and methods for the added attributes.
The same is true when adding. For example, we set the name of an attribute for it. The most important thing is type. The default physical controls only have one default state, a drop-down, but here, an extra one can be displayed. As a picture, displayed as a color module, displayed as a button, etc.
Here we re-modify this color to color and then save it. After saving, we refresh our product, which will be displayed as a color block.
But the color block’s color is not that when you enter blue, it will be displayed as blue, but in our attributes. We see that we have found the attribute. We need to find the option in it. After finding the option.
Then we edit it. When editing, select the color you want here. For example, I changed blue to purple now and saved it. After saving, we refresh the product, and the color blue will be displayed as purple so you can define this color yourself. This is how to use the product attribute variation color block plug-in Woo Variation Swatches Pro.