WooCommerce Bulk Variations is simple to set up. Once installed and activated, go to WooCommerce > Settings > Bulk Variations to update your settings.
Display mode
Firstly, select your Display mode:
- Grid: choose this option if you’d like to display quantity fields for each variation in a single grid view
- Standard: choose this option if you want to be able to grey out / disable out of stock variations
Grid mode
Grid mode allows you to display a grid or table of quantity fields for each variation so that customers can order multiple variations more easily.
Grid mode settings
Mobile layout
Choose between ‘Scrollable’ and ‘Responsive’. The ‘Responsive’ setting will format tables in a single column on mobile devices. The ‘Scrollable’ setting will retain the grid layout and allow the user to scroll up and down on a mobile device.
Enable images
Select this option to display image swatches for each attribute term. To add images to terms, go to Products > Attributes. Select ‘Configure terms’ for the attribute you wish to add image to, then edit each attribute.
Automatic thumbs by row
If you have ‘Enable images’ turned on, you can use this setting to automatically generate a thumbnail for each row of the grid from an existing variation image.
Automatic thumbs by column
If you have ‘Enable images’ turned on, you can use this setting to automatically generate a thumbnail for each column of the grid from an existing variation image.
Show price
If you’d like to show each variation’s price under its quantity field, enable this option.
Show stock
If you’d like to show each variation’s stock status under the quantity field, enable this option.
Enable filtering
Allow shoppers to use the attribute dropdowns to filter the grid to a matching row/column (can be overridden per attribute or per product)
Display total number
Enable this to display a count of the items selected
Display total price
Enable this to display the total price of items selected
Combine cart notices
Show a single “added to cart” notice listing all variations, instead of one notice per variation
Display grid full width
Enable this option to move the grid below the main product image so that it can span the full width of your product page.
Button text
If you’ve enabled the option to use the grid at full width, a ‘Select options’ button will appear in the product’s short description. Update the text using this option.
Set grid view for specific products
If you only want the grid layout for some products, not all, you can override the global setting in the ‘General’ tab of the ‘Product data’ section using the ‘Display Mode’ setting.
Alternatively, you can use a snippet to set multiple products’ display mode:
| <?php | |
| /** | |
| * Enable/disable the grid for specific product IDs | |
| */ | |
| function prefix_enable_variations_grid( $enable, $product_id ) { | |
| // Only enable these products | |
| if( in_array( $product_id, array( 123, 456, 789 ) ) ) { | |
| return true; | |
| } | |
| // Don't enable these products | |
| if( in_array( $product_id, array( 987, 654, 321 ) ) ) { | |
| return false; | |
| } | |
| return $enable; | |
| } | |
| apply_filters( 'wcbvp_enable_variations_grid', 'prefix_enable_variations_grid', 10, 2 ); |
Standard mode
Standard mode allows you to disable out-of-stock variations. It also allows you to add extra styles like colours to in-stock and out-of-stock variations. You can see an example in the screenshot below, where the 40mm variation is out of stock and therefore greyed out.
Standard mode settings
Disable out of stock options
Check this field to disable (grey out) any variations that are out of stock.
Show unavailability text
Check this field to include text after out of stock variations.
Unavailability text
Enter the text that you’d like to appear after out of stock variations, e.g. ‘Sold Out’.
Show Back in Stock date
If you’d prefer to show the date that the variation will be back in stock, you can check this field.
Back in Stock text
Add some optional text to precede the date that the variation will be back in stock, e.g. ‘Back in stock on’
Hide dates in the past
If you want to ensure that dates that have already passed are not displayed, just check this field.
Enable stock management for variations
For this to work, you need to ensure that your variations have stock management enabled.
Select2 – styling variations
If you’d like to add some extra styles to your variations, check the ‘Enable Select2’ option. You can find more information about styling variations in this article.