WooCommerce Better Variations is amazingly simple to set up. Once installed and activated, go to WooCommerce > Settings > Better Variations to update your settings.
Display mode
Firstly, select your Display mode:
- Standard: choose this option if you want to be able to grey out / disable out of stock variations
- Grid: choose this option if you’d like to display quantity fields for each variation in a single grid view
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.
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.
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.
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
Set grid view for specific products
If you only want the grid layout for some products, not all, you can use this snippet:
| <?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 ); |