Can I move the bulk variations grid?
If you enable the bulk variations grid - either globally or for individual products - then it will appear wherever your theme normally displays the default variation dropdowns and add to cart column. If you'd prefer to display it in a different location then there are several ways to do this.
Use the shortcode
Instead of enabling the variations grid automatically, you can use a shortcode to insert a variations grid anywhere on your site. For example, you can add it to the main product description, or within a blog post.
Do it programatically
For a more automated solution, you can edit the single-product.php template file in your theme or child theme to insert the bulk variations grid elsewhere. There are a couple of options for doing this, which are outlined before. Please note that this is a developer-level task and we are only providing guidance to point you in the right direction. If you don't know how to implement the guidance then you need to ask your developer or post a job on Codeable, who we have partnered with to provide plugin customizations.
1. Move the add to cart section
If you are modifying the single product page template then you can move the bulk variations grid by moving the entire add to cart element within the template. The bulk variations grid appears wherever the template displays the usual variations dropdowns and add to cart button, so if you move those then the variations grid will change location too.
2. Add the shortcode to the template and hide the standard add to cart section
Alternatively, you can add the bulk variations shortcode directly to your template file, and dynamically populate the 'id' shortcode parameter with the ID of the current product. For example: [bulk_variations id="{$product_id}"]
If you do this then you will probably want to disable the standard WooCommerce add to cart section, which contains the usual variation dropdowns, quantity picker and add to cart button. You can do this with the following code, which 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, as it is a thorough way to make sure we remove all add to cart related hooks. This will disable the add to cart area for all product types. If you just hide it for variable products then you can use this instead:
remove_all_actions( 'woocommerce_variable_add_to_cart' );
Troubleshooting
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;
}