WooCommerce Product Table plugin fully supports variable products. You can display variations as dropdown lists, together with attribute and category filters. It makes the selection of the necessary products incredibly flexible and fast.
Also, the plugin comes with such options as displaying the thumbnails of the product according to the variation. “Show variation thumbnails” option allows users to swap different images and see different images of a product variation all in different colour and style.
Moreover, you can either display variations as dropdown lists, as separate rows in the table.
In order to display Variable products with images according to the attribute, you need:
- Each product should be listed as a WooCommerce product.
- Set the product attributes in Products – Attributes section:
- Add the information to Add new attribute. Set a name (f.e. colour), a slug and press the Add attribute button. The new attribute will be added to the list.
- Now, if you open a product, move down to the Product data section, and change Product data to Variable product.
- Click on the Attributes tab, and select a new attribute from the drop-down list in Values:
- Enable “Use for variation” for the attribute you want to use for product variations and be available to select in a table. Save the settings.
- Move to the Variations tab and create variations from selected or all attributes.
- Add price for every variation.
- Add the image to the variation and other data. Save changes.
How to display variations in the product table
If you are looking for building an effective WooCommerce store, then you should definitely check out the WooBeWoo WooCommerce Product Table plugin that helps you to display goods correctly! The Product Table plugin dynamically displays product variants and allows your customers to select the desired product variant to add to their cart in real-time without refreshing the page.
Display variations as separate products, you may have added your variations as options but you want to list them as separate goods. Just list them individually in the chart!
In any case, you can specify variations as separate products, even if they are actually variations of the same good. This means that you can list them along with the standard products in one table, with a separate line for each product or variant.
In order to display each option as a separate one, you need to:
–Create a table of products;
-When adding products, click “show variations” and select all the options you need;
-Click “Add” and save, now all options will be displayed in separate rows of the table.
* or just after adding products, check the “Add products variations automatically” checkbox in the table editor menu, and the variations will be added to all variable products in separate rows of the table.
Read this documentation article to find out more .
Method 2. Display options as drop-down lists in the “buy” column.
This is one of the most ideal ways to list drop-downs of options and add to cart buttons directly to product lists. It is much more flexible than displaying variations for each product. Since you significantly save space and the buyer will not scatter eyes all over the page.
Moreover, when choosing a certain option, in real-time mode, its data will also change (for example, price or image).
In order to display a selection of options in the form of drop-down lists in the buy column, you need to:
–Create a table of products.
-Add all the columns you need including “Buy”.
-Add the products you want, including variations.
– Select the checkbox with the “Show variation thumbnails” option, so that the product image would change depending on the selected variation in real-time, without refreshing the page. (settings->features)
-You can also use the Show first variation as default option .By default, products are displayed with a drop-down list of options for users to select. If you enable the Show first option as default option, the first option will be selected immediately.
Customers can buy different products faster and easier. They no longer need to go to the product detail page to view product options and prices.
If you want to hide the drop-down lists altogether, then use the Hide variation attributes option. To do this, go to the “Buy” column settings and check the Hide variation attributes option.
Method 3. Show a button for each option.
An “add to cart” button will be added for each variation. This is a great way to display options if the product doesn’t have many variations.
In order to show the button for each option, you need:
-Create a table of products.
-Add all the columns you need including “Buy”.
-Next, click on the pencil in the Buy column to open the column settings.
-Then check the box next to “Show a button for each variation”.
Now, each product variation will have its own button in the “buy” column.
Method 4 (new one). Select options in the pop-up.
Now you can let your customers choose options in a beautiful pop-up window as quickly and conveniently as possible.
Let’s say at this point you’ve already installed the WooCommerce plugin, created products, and added variations using attributes.
Now you can turn on this impressive option very easy:
1) Create a table of products.
2) Add the products you want.
3) Add the columns you want, be sure to add the “Buy” column.
4) Turn on the “Select” option in the pop-up window. To do that, click on the pencil in the “Buy” column to open the column settings. Then, select the checkbox next to “Select options in the pop-up”.
5) Enter text for the select button.
6) After enabling the option, you will see a field in which you can enter text for the option selection button, by default it is “Select Options”.
7) While customizing the popup, you can also enable the Short description option to display a short description instead of a full one.
8) The Natural order option allows sorting alphanumeric attribute names human familiar.
Now for products with variations, instead of the “add to cart” button, you will see a button to select options, after clicking it your customers will have a chance to choose variations in a pop-up window.
While the products will retain the familiar add to cart button unchanged.
Magic, isn’t it? And all that done without a single line of code.
Below you can see and enjoy the work of this option:
Read this documentation article to find out more about Select options in the pop-up.
This guide should help you understand the variable products and their settings, but if you have any questions, please contact us and we will be happy to help you.