3. Creating variation grids
There are 3 ways to create variation grids using the WooCommerce Bulk Variations plugin:
- Enable them globally for all variable products.
- Enable them individually for specific products.
- 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.
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).
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.
-
- Purchasing enabled
-
- Purchasing disabled
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).
-
- Size is horizontal, color is vertical
-
- Size is vertical, color is horizontal
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.
Tip: If you need to add images for more than one variation at once, then you can save time with the bulk editing feature.
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.
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.
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:
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"]
lightbox
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"]