1. WooCommerce Bulk Variations
  2. 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.
  2. Enable them individually for specific products.
  3. Use a shortcode to insert a variations grid anywhere on your site.

When the variations grid is enabled, it replaces the default variation dropdowns on the single product page.

Enabling the variations grid for specific products

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.

Edit variation grid per product

Product-level control

By default, the product will inherit the global options from the plugin settings page. Enable the 'Product-level control' option to override these and configure the variations grid individually for the product.

Enable

Ticking this box 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

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

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).

Note: If the product has 3 or more attributes which are used for variations, then the remaining attributes will be displayed as dropdowns within each cell of the grid. 

Variation images

Use the dropdown to enable/disable images in the bulk variations grid, and to choose where they appear. The options are:

  • Do not show any images - The variation grid is created without images.
  • Show horizontally - The images appear as columns along the top row of the grid.
  • Show vertically - The images appear as rows along the left hand column of the grid.

If enabled, then an image will be displayed for variations that have one. 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"]

vertical

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

Example: [bulk_variations vertical="size"]

stock

Show or hide stock information from the grid. The options are true or false.

Example: [bulk_variations stock="false"]

images

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

Example: [bulk_variations images="true"]

Enable or disable the ability for users to click on a variation image to open a lightbox. The options are true or false.

Example: [bulk_variations lightbox="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" stock="false" images="true" lightbox="true" disable_purchasing="true"]

Related Articles

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