Greying Out Variations in WooCommerce
Managing product variations in an online store can be challenging, especially when dealing with out-of-stock items. As a WooCommerce store owner, you want your customers to have a seamless shopping experience, and that means ensuring that your product listings are accurate and up to date. One effective way to handle out-of-stock variations is by greying them out. This technique helps to avoid confusion and disappointment, ensuring that customers have a clear understanding of available options. In this blog post, we’ll show you how to grey out variations in WooCommerce that are out of stock, so you can keep your customers informed and happy.
Step 1: Enable Stock Management
Before you can grey out out-of-stock variations, you need to enable stock management in your WooCommerce settings. This feature allows you to keep track of your inventory levels and automatically updates product availability based on stock numbers. To enable stock management, follow these steps:
- Log in to your WordPress Dashboard.
- Navigate to WooCommerce > Settings.
- Click on the “Products” tab.
- Choose the “Inventory” sub-tab.
- Check the box next to “Enable stock management.”
- Save your changes by clicking “Save changes” at the bottom of the page.
Step 2: Update Product Variations
After enabling stock management, you need to update the stock status for each product variation. This process ensures that WooCommerce knows which variations are in stock and which are out of stock. To update product variations, follow these steps:
- Navigate to Products > All Products in your WordPress Dashboard.
- Find the variable product you want to update and click on the “Edit” link.
- Scroll down to the “Product data” section and click on the “Variations” tab.
- For each variation, enter the stock quantity in the “Stock Qty” field.
- Choose the appropriate stock status (In stock or Out of stock) from the “Stock status” dropdown menu.
- Save your changes by clicking “Update” at the top right corner of the page.
Step 3: Grey Out Out-of-Stock Variations with CSS
To grey out out-of-stock variations, you’ll need to add some custom CSS to your website. This code will change the appearance of out-of-stock variations, making them appear grey and unclickable. Follow these steps to add the custom CSS:
- Navigate to Appearance > Customize in your WordPress Dashboard.
- Click on the “Additional CSS” tab.
- Copy and paste the following CSS code into the provided text area:
/* Grey out out-of-stock variations */
.variations_form .outofstock {
pointer-events: none;
opacity: 0.5;
}
/* Grey out out-of-stock variation labels */
.variations_form .outofstock .label {
color: #777;
}
4. Click “Publish” to save your changes.
This code will grey out the out-of-stock variations and prevent users from selecting them. If you want to display a custom message when a user hovers over an out-of-stock variation, you can add the following CSS code to the “Additional CSS” tab as well:
/* Display custom message for out-of-stock variations */
.variations_form .outofstock:hover::before {
content: "Out of stock";
position: absolute;
background-color: #777;
color: #fff;
padding: 3px 6px;
border-radius: 3px;
font-size: 0.9em;
z-index: 10;
margin-left: 10px;
}
This code will show a “out
of stock” message when a user hovers over an out-of-stock variation, providing a clear indication that the option is not available.
Step 4: Test Your Changes
Now that you’ve implemented the necessary changes, it’s important to test them to ensure they’re working correctly. To do this, follow these steps:
- Visit your website and navigate to a product page with variations.
- Check that out-of-stock variations are greyed out and unclickable.
- Hover over an out-of-stock variation to see if the custom message (if added) displays correctly.
- Verify that in-stock variations are still selectable and appear normal.
- Complete a test purchase to ensure the checkout process is not affected by the changes.
Bonus Method:
We can implement this using a simple PHP code snippet. To use PHP code, you can add the following code to your functions.php file or Learn how to use plugin code snippets here:
/* Grey out out of stock items in the product dropdown */
add_filter( 'woocommerce_variation_is_active', 'grey_out_variations_when_out_of_stock', 10, 2 );
function grey_out_variations_when_out_of_stock( $grey_out, $variation ) {
if ( ! $variation->is_in_stock() )
return false;
return true;
}
Conclusion
By greying out out-of-stock variations in WooCommerce, you provide a better user experience for your customers, minimizing confusion and frustration. Following the steps outlined in this blog post will help you achieve this goal, keeping your product listings clear and accurate. Don’t forget to monitor your inventory levels regularly, updating your product variations as needed. Doing so will ensure that your customers always have the most up-to-date information on your products’ availability, making their shopping experience smooth and enjoyable.
