How to Remove the “Out of Stock” Text in WooCommerce: A Comprehensive Guide
Introduction
WooCommerce is a powerful and flexible e-commerce platform built on WordPress, allowing you to create a fully functional online store. A common element you’ll encounter is the “Out of Stock” text that displays when a product’s inventory reaches zero. While this notification is essential for informing customers, sometimes you might want to remove it entirely for aesthetic reasons, marketing strategies (e.g., pre-orders), or if you handle stock management differently. This article will guide you through several methods to remove this text from your WooCommerce store, ensuring you understand the pros and cons of each approach. We’ll cover everything from simple code snippets to more advanced plugin options, empowering you to customize your store to your exact needs.
Removing the “Out of Stock” Text: Multiple Methods
There are several ways to remove the “Out of Stock” text, each with varying levels of complexity and impact. Let’s explore the most common and effective methods.
#### 1. Using Code Snippets (Recommended for Advanced Users)
This method involves adding a small piece of PHP code to your theme’s `functions.php` file or using a code snippets plugin. Always back up your website before making changes to core files. This approach gives you granular control but requires a basic understanding of PHP.
Method 1: Removing the Text on Product Pages
This snippet removes the “Out of Stock” text specifically from individual product pages.
add_filter( 'woocommerce_get_stock_html', 'remove_out_of_stock_message', 10, 2 );
function remove_out_of_stock_message( $stock_html, $product ) {
if ( !$product->is_in_stock() ) {
return '';
}
return $stock_html;
}
Explanation:
- `add_filter(‘woocommerce_get_stock_html’, …)`: This line hooks into the WooCommerce filter responsible for generating the stock HTML.
- `remove_out_of_stock_message( $stock_html, $product )`: This is the function that will be executed. It takes the current stock HTML and the product object as arguments.
- `if ( !$product->is_in_stock() )`: This condition checks if the product is out of stock.
- `return ”;`: If the product is out of stock, it returns an empty string, effectively removing the message.
- `return $stock_html;`: If the product is in stock, it returns the original stock HTML.
Method 2: Removing the Text Everywhere (Including Category Pages)
This snippet removes the “Out of Stock” text globally across your entire WooCommerce store.
add_filter( 'woocommerce_stock_html', 'remove_out_of_stock_message_global', 10, 3 );
function remove_out_of_stock_message_global( $html, $availability, $product ) {
if ( !$product->is_in_stock() ) {
return ”;
}
return $html;
}
Explanation:
- This code snippet is very similar to the first one, but it uses the `woocommerce_stock_html` filter. This filter applies to the stock HTML displayed in various locations, including category pages. Therefore, removing the stock HTML using this hook will do so globally across your WooCommerce store.
How to Add the Code:
1. Via `functions.php`: Open your theme’s `functions.php` file (located in `wp-content/themes/your-theme-name/`) and paste the code at the end of the file, before the closing `?>` tag (if present).
2. Via a Code Snippets Plugin: Install and activate a plugin like “Code Snippets” (available on the WordPress plugin repository). Add a new snippet, paste the code, and activate it. Using a plugin like Code Snippets is generally safer than directly editing your `functions.php` file because it isolates the code and makes it easier to manage.
Advantages:
- Fine-grained control over where the text is removed.
- Lightweight and efficient.
- No need to install extra plugins.
Disadvantages:
- Requires basic PHP knowledge.
- Editing `functions.php` directly can be risky if not done carefully. A single error can break your site.
- Theme updates might overwrite changes made to `functions.php` directly. Child themes are highly recommended.
#### 2. Using CSS (Less Recommended)
You can technically hide the “Out of Stock” text using CSS, but this is not a recommended approach. While it visually removes the text, the underlying HTML element still exists, which can affect SEO and accessibility. It’s also harder to target specific instances of the text. However, if you need a very quick and dirty fix:
.woocommerce div.product p.stock.out-of-stock {
display: none !important;
}
/* For category and shop pages (adjust selector if needed) */
li.product .stock.out-of-stock {
display: none !important;
}
Explanation:
- `display: none !important;`: This hides the element completely. `!important` ensures that this rule overrides any other CSS rules that might be applied to the element.
How to Add the CSS:
1. Via the WordPress Customizer: Go to Appearance > Customize > Additional CSS and paste the code.
2. Via your Theme’s Stylesheet: Add the CSS to your theme’s `style.css` file (located in `wp-content/themes/your-theme-name/`). Again, a child theme is recommended.
Advantages:
- Very simple and quick to implement.
Disadvantages:
- Bad for SEO: The text is still present in the HTML source code, which search engines may still index.
- Bad for accessibility: Screen readers will likely still read the hidden text.
- Not a clean solution; it simply hides the content instead of removing it.
#### 3. Using a WooCommerce Plugin
Several WooCommerce plugins can help you manage your inventory and customize the display of stock status, including removing the “Out of Stock” text. Some popular options include:
- WooCommerce Stock Manager: Allows you to easily manage stock levels and customize the appearance of stock messages.
- Custom Stock Status for WooCommerce: Provides granular control over stock status messages.
- WooCommerce Product Stock Alert: Not strictly for removing the text, but for notifying users when a product is back in stock. Can be helpful when combined with removing the “Out of Stock” message to encourage sign-ups.
How to Use a Plugin:
1. Install and activate the plugin from the WordPress plugin repository.
2. Configure the plugin settings according to your needs. Most plugins will have options to disable or customize the “Out of Stock” text.
Advantages:
- User-friendly interface.
- Often includes additional features for managing inventory.
- No coding required (typically).
Disadvantages:
- Can add extra overhead to your website.
- Plugin compatibility issues are possible.
- May require a premium subscription for advanced features.
#### 4. WooCommerce Settings Adjustments (If Applicable)
Depending on your theme and WooCommerce version, you might find some options within the WooCommerce settings themselves to adjust the display of stock status. While rare to completely remove the text, it’s worth checking.
How to Check:
1. Go to WooCommerce > Settings.
2. Explore the Products tab, specifically the Inventory section. Look for options related to stock display or “Out of Stock visibility.” Keep in mind that this method often just impacts backorders and whether to show out of stock products in the catalog rather than modifying the “Out of Stock” message.
Advantages:
- Simplest approach if the setting is available.
- No coding or extra plugins needed.
Disadvantages:
- The options may not be available for the intended purpose (removing the text).
- Limited customization possibilities.
Conclusion
Removing the “Out of Stock” text in WooCommerce can be achieved through various methods, each with its pros and cons. Using code snippets via your `functions.php` file or a code snippets plugin offers the most control and is generally recommended for experienced users. CSS should be avoided due to SEO and accessibility concerns. Plugins can be a convenient option for those without coding experience, but they can add extra overhead to your site. Before making any changes, always back up your website to avoid potential issues. Choose the method that best suits your technical skills and the specific needs of your online store. Remember to test your changes thoroughly to ensure they are working as expected.
