Variable Product Tables for WooCommerce

Dynamically Reconfiguring the Tables

Use the vpt_table_options filter to reconfigure how the product tables are rendered on the WooCommerce Single Product page.

// Override the variations table on a product page.
$options = apply_filters('vpt_table_options', array $options, int $product_id);

The $options parameter is an associative array that looks like this:

$options = array(
	// Is the table enabled or not
	'enabled' => true,

	// An array of product IDs to include in the table. Usually this is a single
	// value - the product ID of the variable product. Child variations are
	// added automatically.
	'product_ids' => array(),

	// If the table contains any radio buttons, should we try to auto-select
	// valid product variations on page load.
	'auto_select_on_load' => true,

	// Automatically convert all product attributes to radio buttons.
	'all_attributes_as_pills' => false,

	// Automatically convert (only) the first product attribute to radio buttons.
	// This has a higher priority than all_attributes_as_pills.
	'first_attribute_as_pills' => false,

	// If there are radio-button product attributes, merge them into a single
	// on-screen column.
	'single_pills_column' => false,

	// Move the price field into the add-to-cart column
	'is_price_in_addtocart_column' => $settings->get_bool(OPT_IS_PRICE_IN_ADDTOCART_COLUMN),

	// You explicitly pass product parameters that you want to see as radio
	// buttons, like "pa_colour", "pa_size", etc.
	'pill_attributes' => array(),

	// Hide or show the inc/dev +/- buttons by the Quantity input fields.
	'show_inc_dec_buttons' => $settings->get_bool(OPT_SHOW_QTY_INC_DEC),

	// A list of columns you want to "switch off", such as "sku" or "image".
	'disable_columns' => array(),
);

Example usage

You can set the defaults so the product tables render with each row representing a single variation. The following snippet will always render the size (pa_size) attribute as radio buttons. The snippet will not cause an error if the product does not have the size attribute.

/**
 * Variable Product Table options
 */
function custom_vpt_table_options($options, $product_id) {
	// Add the "pa_size" attribute to the array of attributes that get
	// converted into radio/pill buttons.
	$options['pill_attributes'][] = 'pa_size';

	return $options;
}
add_filter('vpt_table_options', 'custom_vpt_table_options', 10, 2);

Notice how radio buttons cause the table to be pivoted, so we only need two rows to show all the data instead of four.

More examples

Change the options based on a product’s category.

function custom_vpt_table_options($options, $product_id, $location) {
	// Products in the "clothing" category should have the "pa_size" attribute
	// rendered as radio buttons, and we don't need to see SKU in there.
	if (has_term('clothing', 'product_cat', $product_id)) {
		$options['pill_attributes'][] = 'pa_size';
		$options['disable_columns'][] = 'sku';
	}

	return $options;
}
add_filter('vpt_table_options', 'custom_vpt_table_options', 10, 3);

Disable product tables for every product in the “electronics” category.

function custom_vpt_table_options($options, $product_id) {
	// Disable product variation tables for all electroics products.
	if (has_term('electronics', 'product_cat', $product_id)) {
		$options['enabled'] = false;
	}

	return $options;
}
add_filter('vpt_table_options', 'custom_vpt_table_options', 10, 2);

If you want per-product control of how the tables look, you can use Advanced Custom Fields (ACF). In this example, we’ve created a true/false field called “all_attributes_as_buttons”. The following PHP snippet will pick up on this and reconfigure the table for all products where it’s set to true.

function custom_vpt_table_options($options, $product_id) {
	// If a product has the ACF Field (post_meta_ "all_attributes_as_buttons"
	// set to "true" then show all product attributes as radio buttons and hide
	// the Quantity column
	if (filter_var(get_post_meta($product_id, 'all_attributes_as_buttons', true), FILTER_VALIDATE_BOOLEAN)) {
		$options['all_attributes_as_pills'] = true;
		$options['first_attribute_as_pills'] = false;
		$options['disable_columns'][] = 'quantity';
	}

	return $options;
}
add_filter('vpt_table_options', 'custom_vpt_table_options', 10, 2);