1. Home
  2. Knowledge Base
  3. WooCommerce Better Variations
  4. Getting Started with Better Variations
  5. Getting Started with Better Variations
  1. Home
  2. Knowledge Base
  3. WooCommerce Better Variations
  4. Getting Started with Better Variations

Getting Started with Better Variations

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
better variations settings

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.

better variations standard mode

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.

WooCommerce manage variation stock

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.

better variaitions grid mode

Grid mode settings

woocommerce better variations grid 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.

add attribute term 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.

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

Was this article helpful?

Related Articles