How to Remove “In Stock” from WooCommerce: A Beginner’s Guide
Are you annoyed by the “In Stock” message constantly appearing on your WooCommerce product pages? While reassuring customers that items are available is generally good, in some situations, it’s redundant, visually cluttering, or even misleading. For example:
* You only sell digital products: Showing “In Stock” for a downloadable eBook is unnecessary.
* You manage inventory tightly and restock frequently: The “In Stock” message is always true, adding no real value.
* You want a cleaner, more minimalist design: The “In Stock” message detracts from your website’s aesthetics.
This guide will walk you through several methods to remove “In Stock” from WooCommerce, catering to different levels of technical expertise. We’ll start with the simplest options and move towards more code-intensive approaches. Don’t worry; we’ll explain everything clearly!
Why Remove “In Stock” at All? A Real-Life Example
Imagine you’re selling handmade jewelry. Each piece is unique, and you replenish stock weekly. The “In Stock” message on every single product page is constant and, frankly, boring. Removing it can give your website a more sophisticated look and feel. Instead, you might want to focus on highlighting details like materials used, dimensions, or the story behind each piece. This creates a better shopping experience that highlights the unique value you provide.
Method 1: Using WooCommerce Settings (Only Hides the Stock Quantity)
This method doesn’t *completely* remove “In Stock” from your website, but it hides the *quantity* from the customer. If WooCommerce is configured to *not* show the number of products in stock, the simple “In Stock” text might not appear at all in some themes.
Here’s how:
1. Navigate to WooCommerce Settings: Go to *WooCommerce* -> *Settings* in your WordPress dashboard.
2. Select the “Products” Tab: Click on the “Products” tab.
3. Go to the “Inventory” Section: Click on the “Inventory” sub-tab.
4. Uncheck “Enable stock management”: If you don’t want to manage stock levels at all. This is helpful for digital products or products with unlimited stock.
5. OR Modify “Stock display format”:
* Change it from “Always show quantity remaining in stock” to either “Only show quantity remaining in stock when low” or “Never show quantity remaining in stock”.
6. Save Changes: Click the “Save changes” button at the bottom of the page.
This method might be sufficient for some, but it doesn’t actually remove the “In Stock” message completely. Let’s move on to more robust solutions.
Method 2: Using a CSS Snippet (The Quick Visual Fix)
This method uses CSS (Cascading Style Sheets) to *hide* the “In Stock” message visually. It doesn’t remove it from the underlying code, but it makes it invisible to visitors. This is a good option if you’re comfortable with basic CSS or have a theme that allows you to add custom CSS.
1. Identify the CSS Class or ID: Use your browser’s “Inspect” tool (right-click on the “In Stock” message and choose “Inspect”) to identify the CSS class or ID associated with the “In Stock” element. Common classes include `stock`, `in-stock`, or something similar.
2. Add the CSS Snippet: Go to *Appearance* -> *Customize* -> *Additional CSS* in your WordPress dashboard (the exact location might vary depending on your theme).
3. Paste the following CSS, adapting to your theme’s class/ID:
.stock { /* Replace .stock with the actual class/ID you found */
display: none !important;
}
Explanation:
* `.stock` (or your class/ID) targets the “In Stock” element.
* `display: none;` hides the element from view.
* `!important;` ensures that this rule overrides any other CSS rules that might be affecting the element.
4. Publish Changes: Click the “Publish” button.
Important Note: This method *hides* the text, it doesn’t *remove* it. The text is still there in the underlying HTML code of your website, which is important for search engines.
Method 3: Using a Code Snippet (The Cleaner Removal)
This method involves adding a small code snippet to your theme’s `functions.php` file (or a custom plugin) to *remove* the “In Stock” message directly from the WooCommerce output. This is the most robust and recommended solution.
Important Warning: Editing `functions.php` can break your website if done incorrectly. Always back up your website before making changes to the code. Consider using a code snippets plugin like “Code Snippets” for easier management and safer implementation.
Here’s the code snippet:
<?php /**
- Remove "In Stock" display
Explanation:
* `add_filter( ‘woocommerce_get_availability’, ‘wcs_remove_get_availability’, 1, 2);`: This line tells WordPress to run our function `wcs_remove_get_availability` whenever WooCommerce retrieves the product availability information.
* `function wcs_remove_get_availability( $availability, $_product )`: This defines our function, which receives the availability data (`$availability`) and the product object (`$_product`) as arguments.
* `if ( $_product->managing_stock() )`: This checks if the product is set to manage stock. We only want to remove the “In Stock” message for products where we’re tracking inventory.
* `$availability[‘availability’] = ”;`: This sets the availability message to an empty string, effectively removing it.
* `return $availability;`: This returns the modified availability data back to WooCommerce.
How to add the code:
1. Backup your website: Before making any changes, back up your website completely.
2. Use a Code Snippets Plugin (Recommended): Install and activate a plugin like “Code Snippets”. Create a new snippet, paste the code above, and activate it.
3. Alternatively, edit `functions.php` (Not Recommended for Beginners): Navigate to *Appearance* -> *Theme Editor* in your WordPress dashboard. Locate the `functions.php` file for your active theme. Add the code snippet to the *bottom* of the file, *before* the closing `?>` tag (if it exists). Click “Update File”.
4. Test Your Website: Visit a product page to confirm that the “In Stock” message is no longer displayed.
This method directly manipulates the WooCommerce code, providing the cleanest and most reliable way to remove the “In Stock” message.
Troubleshooting
* Nothing seems to be happening: Clear your browser cache and your WooCommerce cache (if you’re using a caching plugin). Also, make sure you’ve saved your changes correctly.
* My website is broken after editing `functions.php`: Restore your website from your backup. Use the code snippets plugin instead.
* The “In Stock” message is still appearing on some products: Double-check that stock management is enabled for those products (WooCommerce -> Products -> Edit Product -> Inventory). The code snippet only affects products with stock management enabled. If you want it gone regardless of stock management, remove the `if ( $_product->managing_stock() ) {` and the closing `}`.
* CSS is not working: Make sure you have the correct CSS class or ID. Use the browser inspect tool.
Conclusion
Removing the “In Stock” message from your WooCommerce store can improve the user experience and enhance your website’s design. Choose the method that best suits your technical skills and needs. The CSS method offers a quick visual fix, while the code snippet provides a cleaner, more permanent solution. Remember to always back up your website before making any code changes! Good luck!
