How to Configure and Display Product Variations in WooCommerce

Looking to streamline the product selection process for your WooCommerce customers? Imagine a world where customers can effortlessly compare variations with a glance, leading to faster purchases and happier shoppers. Well, this dream can become a reality with the Product Variation Table plugin for WooCommerce.

This guide dives deep into the world of product variation tables for WooCommerce. We'll hold your hand through every step, from installation and configuration to customization. 

Using WooCommerce Variations Table Plugin

WooCommerce Attributes Table replaces those confusing menus with a crystal-clear table showcasing all product variations directly on the page. This empowers your customers to effortlessly compare options, find the perfect fit, and breeze through checkout with a smile

Let’s explore the plugin to customize and display product variation table in WooCommerce

Installation

To get started, follow these steps

1. Get the Product Variation Table for WooCommerce .zip file.
2. Navigate to the WordPress admin panel.
3. Go to the Plugins section and click ‘Add New’.
4. Upload the .zip file to proceed with the installation.

Wait for the installation to complete and then activate the plugin. This will make the plugin ready for configuration.

Configurations

In configuration, you will find the settings to configure the plugin like general settings, display settings, customize table design, export button design settings, list design settings, and product level settings.

General Settings

Here in general settings, you can configure the following settings

Enable the Plugin

Go to WooCommerce > Settings > Variation Table.

Enable the variation table plugin for all variable products. This ensures that the variation tables will be displayed across your store.

Select Data to Display

Choose from options like Checkbox, Thumbnail, Variation Title, Short Description, SKU, Price, Stock, Length, Weight, Height, Quantity, and Add to Cart Button. This allows you to control what information is shown in the variation table.

Reorder Columns

Rearrange the selected columns with a simple drag-and-drop interface to create custom product variation tables.

Pagination

Select the number of product variations to display per page for better navigation and usability.

Exclude Specific Products

Choose to exclude specific products and categories if needed, providing more control over which products display variation tables.

 

Display Settings

Here in display settings, you find the settings related to display settings like

Elementor Integration

Enable the checkbox if your page is built using the Elementor builder to ensure compatibility.

Short Code

Add a shortcode to display the variation table on page builders like Elementor.

Ajax Action

Enable or disable Ajax action or choose page refresh for a smoother user experience.

Display Position

Decide whether to display the variation table before or after the single product summary.

Customize Add to Cart Button Text

Customize the text for the “Add to Cart” button to better fit your store's tone and style.

Hide Default Variations Display

Check this option to hide the default display of variations on the product page.

Success Message Popup

Enable a popup for added to cart success messages and customize the title and messages for single and multiple add to cart actions.

Table Design

In table settings, you will find the following settings

Table Header Customization

Adjust the background color, text color, text alignment, and padding for the table header.

Table Body Customization

Set the background color, hover color, border color, text color, and padding for the table body.

Cart Button Customization

Customize the background color, hover background color, and text color for the multiple add to cart button.

Export Button Settings

Enable Export Buttons

Choose which export buttons (Copy, Print, Excel, PDF, CSV) to display on the product page for user convenience.

List Design Settings

Enable List Design

Enable list design to display product variations in a list format.

Redirect After Add to Cart

Enable this option to redirect customers to the cart page after adding products to the cart.

Set Page to First on Sorting

Ensure the page resets to the first when sorting variations.

Choose Layout

Select the preferred layout for the list design: Smart, Medium, or Full Width.

Theme Selection

Choose a theme for the list design: Light or Dark.

Custom Colors

Use custom colors to override default theme colors for the list design.

Product Level Settings

Product-Specific Configurations

1. Go to Products in the WooCommerce admin panel and add or edit any variable product.
2. In the Product Data section, click the Variation Table tab.
3. Choose to use general settings or product-specific configurations for each product.
4. Display variation data such as Title, Price, Image, Short Description, Stock, etc., at the product level.

Shortcode for Variation Table

Use the specified shortcode in the Variation Shortcode tab to display the table anywhere on the product page.

Why Display Product Variations in WooCommerce?

Product Variation is your solution. By displaying a clear and organized table showcasing all product variations directly on the product page. This translates to several benefits:

• Enhanced customer experience: Lets customers to compare options like size, color, and features easily, leading to faster and more informed purchasing decisions.
• Increased sales: Clear product variation presentation reduces confusion and encourages customers to explore all available options, potentially leading to higher sales.
• Improved store navigation: A well-organized table simplifies product exploration, keeping customers engaged and focused on buying.

Final Words

Confused customers lead to lost sales. But fret no more! By implementing a clear and organized product variation table directly on your product pages, you can transform the shopping experience.

This guide has empowered you to take control with a step-by-step approach to installing, configuring, and customizing the WooCommerce Product Variation Table plugin

FAQs

How to add a product variation table in WooCommerce?

After installing the WooCommerce variable product table plugin, go to WooCommerce > Settings > Variation Table. From the general settings section, enable the product variation table for all products or exclude specific products as needed.

How to customize the product variation table?

In the general settings section of the WooCommerce attributes table, select from multiple columns to display, including Checkbox, Thumbnail, Variation Title, Short Description, SKU, Price, and more. Arrange the position of these columns using a simple drag-and-drop method.

Can I display the variation table on builders like Elementor?

Yes, the WooCommerce variation table plugin enables you to display the product variation table on most common page builders by simply adding a shortcode.

Have more Questions? Don’t hesitate to reach out to us