Code Snippets - Display Variations for the Current Product on the Single Product Page
You can use WooCommerce Product Table to list the current product's variations in a table on the single product page. The table layout is a nice alternative to the variation dropdown lists that comes with WooCommerce itself. For example, customers can select multiple variations at once, and add them to the cart in a single click. You can also add extra information about each variation, such as the attributes, variation image and description to the table. This allows customers to compare the options more easily.
The simplest way to do this is using the non-technical solutions described in our article about adding product tables to the single product page. Alternatively, keep reading for some code snippets that will allow you to do it automatically.
The following code snippets will dynamically add a table listing the variations for the current product after the short description, and hide the default variation dropdowns (which are no longer needed).
The code snippets are aimed at developers. If you feel comfortable using them you may place them in your functions.php file in your theme/child theme. However, if you don't feel comfortable using them, then you should ask your developer. If you don't have one then we recommend posting a job on Codeable, who we have partnered with to provide plugin customization services for our customers. Codeable developers are vetted WP specialists from around the world.
Code snippets
The following code snippet uses the woocommerce_short_description filter to show the WooCommerce Product Table after the short description on the single product page. In most themes, this will add the table immediately after the short description and above the add to cart section.
We have expanded the [product_table] shortcode in the code snippet to show variations for the current product, with each variation on its own row in the table. We have also hidden elements such as the search box and page length, which aren't generally relevant when showing variations on the single product page. You can edit the shortcode in the code snippet using any of the shortcode options that are built into the plugin.
Add product table after short description
/**
* Outputs WooCommerce Product Table shortcode after short description - place in functions.php
* @param string $short_description - the original short description being passed into the filter
* @return string $short_description including WooCommerce Product Table shortcode
**/
function barn2media_product_table_after_short_desc($short_description) {
global $product;
if (!is_single() || !is_callable(array($product, 'get_id'))) {
return $short_description;
}
$product_id = $product->get_id();
$shortcode = "[product_table include='{$product_id}' variations='separate' lazy_load='false' columns='name,price,stock,buy' cart_button='checkbox' quantities='true' links='none' page_length='false' search_box='false' reset_button='false' totals='false']";
return $short_description . $shortcode;
}
add_filter( 'woocommerce_short_description', 'barn2media_product_table_after_short_desc', 1 );
Note that the code is using a high priority of 1 on the hook, because it will make sure the other filters running on this text for sanity and sanitization - including do_shortcode - will run after the WooCommerce Product Table shortcode is added.
Disable standard WooCommerce Add to Cart
The code above will use WooCommerce Product Table to list the variations for the current product under the short description, but with the normal WooCommerce add to cart functionality below - including the variation dropdowns. This can cause duplication, as the variations and add to cart buttons will appear twice (once in each layout). To avoid this, you can use the following code to disable the standard add to cart functionality.
This uses the woocommerce_single_product_summary hook to disable the add to cart elements for whichever type the main product is.
/**
* Remove the add to cart functionality for the product
* By hooking into the woocommerce_single_product_summary before
* the woocommerce_template_single_add_to_cart function is attached
* we can remove the add_to_cart functionality for whatever product type
* is being used in the shortcode
* @return void
**/
function barn2media_remove_standard_add_to_cart() {
global $product;
$type = $product->get_type();
remove_all_actions( 'woocommerce_' . $type . '_add_to_cart' );
}
add_action('woocommerce_single_product_summary', 'barn2media_remove_standard_add_to_cart', 1);
The code above hooks in early again, as it is a thorough way to make sure we remove all add to cart related hooks. Note: if you wanted to use the first snippet only for variable products then you could use the code below to remove the standard add to cart.
remove_all_actions( 'woocommerce_variable_add_to_cart' );
Troubleshooting
As stated, the code above is aimed at developers. That said, if you do have problems running it, then the most likely problem is that you may be using an older version of WooCommerce:
- In WC3.0, Automattic introduced a new CRUD system allowing the use of functions used above like
$product->get_id(). In older versions of WooCommerce,$product->idwould be used instead. - The same goes for
$product->get_type()vs$product->type.
To make your code future-proof, you can use the is_callable() function from PHP. For example, this would make the function from the first snippet like so:
function barn2media_product_table_after_short_desc($short_description) {
global $product;
$product_id = is_callable(array($product, 'get_id')) ? $product->get_id() : $product->id;
$shortcode = "[product_table include='{$product_id}' variations='separate' lazy_load='false' columns='name,price,stock,add-to-cart' cart_button='checkbox' quantities='true' links='none' page_length='false' search_box='false' reset_button='false' totals='false']";
return $short_description . $shortcode;
}
Case study - how MAS use the code snippets on their product pages
They designed the website using the Flatsome theme. To add extra features, they added plugins from the WooCommerce Product Table compatibility list including WooCommerce Wholesale Prices and several YITH plugins.
Omas also use WooCommerce Product Table to create a data sheet library elsewhere on their site, so they have found multiple uses for their product tables.