1. Knowledge Base
  2. WooCommerce Bulk Variations
  3. Getting Started

3. Creating variation grids

There are 3 ways to create variation grids using the WooCommerce Bulk Variations plugin:

  1. Enable them globally for all variable products that have 1 or 2 variation attributes.
  2. Enable them individually for specific products. This replaces the standard variation dropdowns on the single product page.
  3. Use a shortcode to insert a variations grid anywhere on your site.

If you have enabled or disabled the variations grid globally, then you can override this for each individual product.

Enabling the variations grid for specific products

WooCommerce Bulk Variations Edit Product page tab with hide default add to cart

You can configure the variations grid for each individual product. To do this, go to the Edit Product screen and find the ‘Bulk Variations’ tab in the ‘Product Data’ section. (Note: This tab only appears for variable products that have 1 or 2 variation attributes. If you can’t see it, please see our separate article on how to set up your variable products.)

By default, the options in the ‘Bulk Variations’ tab will match the global options on the plugin settings page. You can override these individually for each product.

Enable variations grid

This option replaces the default variation dropdowns on the single product page with a bulk variations grid.

The grid will appear wherever the variation dropdowns normally appear on the single product page – this is determined by your theme. If you wish to add the variations grid elsewhere on the page (for example, to the main product description), then you should disable this option. Instead, use the shortcode method to insert the grid manually.

Hide default add to cart

This option is only available when the variations grid is disabled. It hides the default add to cart button, quantity picker and variation dropdowns that your theme normally adds to the single product page.

You might want to tick this option if you are using the shortcode to manually add the bulk variations grid elsewhere on the page (for example, to the main product description or to a separate tab created using the WooCommerce Tabs Manager plugin).

WooCommerce Bulk Variations disable default add to cart
This product page has the 'Hide default add to cart' option ticked, and uses a shortcode to add the variations grid to the description instead

Disable purchasing

This option transforms the bulk variations grid into a read-only price matrix. It removes the quantity boxes and add to cart button, and simply displays the product variations with prices.

You can use this option on its own, or in combination with other ways of displaying product variations. For example:

  • If you don’t want people to be able to purchase the variations, then you can click the ‘Enable variations grid’ option along with ‘Disable purchasing’. Customers will be able to see the variation prices, but they won’t be able to order online.
  • Some stores like to display a price matrix for their variations, in addition to displaying the variations for purchase elsewhere on the page – either via the default variation dropdowns, or the variation grid with quantity boxes. You can do this by combining the different methods for listing variations, for example by activating the ‘Enable variations grid’ option and also using the shortcode.

Horizontal columns

This dropdown will list all the product’s attributes which are used for variations. Select the attribute that you wish to use for the horizontal/X axis of the variations grid.

The attribute will be listed in the top row of the grid.

Vertical rows

This dropdown will list all the product’s attributes which are used for variations. Select the attribute that you wish to use for the vertical/Y axis of the variations grid.

The attribute will be listed vertically in the left column the grid (or the second left column, if you are displaying variable images).

Display variation images

Enable this option to add an image column to the left hand side of the variation grid.

This will display the variation image, for variations where you have added a specific image. If a variation does not have an image, then the main product image will appear instead.


Use a shortcode to insert a variations grid

You can add variation grids anywhere on your site using the [bulk_variations] shortcode.

For example, you can use the shortcode to insert the grid to other parts of the single product page such as the main product description; to blog posts; or to other pages. You can also use it to insert grid onto custom parts of the single product page, for example if you are using the WooCommerce Tab Manager plugin to create additional tabs.

WooCommerce Bulk Variations shortcode product description
Example of a shortcode added to the main product description

By default, the shortcode inherits the options from the plugin settings page – or if you have configured the variations grid for a specific product on the ‘Edit Product’ screen, then these are used instead. You can override these by adding the following options directly to the shortcode:

include

The ID of the variable product. You can find this by going to the main Products list in the WordPress admin, hovering over a product name, and looking for the ID.

WooCommerce find product ID
This product has an ID of 12166

Example: [bulk_variations include="12166"]

horizontal

The slug of the attribute to be used for the horizontal axis/columns. You can find the attribute slug by going to Products → Attributes and looking at the ‘Slug’ column:

WooCommerce find attribute slug

Example: [bulk_variations horizontal="color"]

horizontal

The slug of the attribute to be used for the horizontal axis/rows.

Example: [bulk_variations vertical="size"]

images

Show or hide the variation images from the grid. The options are true or false.

Example: [bulk_variations images="true"]

disable_purchasing

If set to “true”, the quantity boxes and add to cart buttons are removed and only the price is displayed for each variation. The options are true or false.

Example: [bulk_variations disable_purchasing="true"]

Combining shortcode options

You can combine the shortcode options as required. For example:

[bulk_variations include="12166" vertical="length" horizontal="width" images="false" disable_purchasing="true"]

Still need help?
If searching the knowledge base hasn't answered your question, please contact support.

Related Articles