Display Out-of-Stock Message on WooCommerce Product Page
How to display out of stock message in woocommerce;
Woocommerce show out of stock on product page;
Display out of stock text woocommerce;
Woocommerce out of stock message not showing;
Customize out of stock message woocommerce;
Woocommerce out of stock notification;
Show out of stock products woocommerce;
Woocommerce display out of stock on catalog;
How to add out of stock label in woocommerce;
Woocommerce out of stock message settings;
Explanation
To show a custom "out of stock" message on your WooCommerce product page, this code does the trick. It checks if a product is out of stock and displays a friendly message right on the product page.
Here's what it does:
- Product Page Message: It adds a message saying "Sorry, this product is currently out of stock" directly on the product page when an item isn't available.
- Catalog Visibility: Out-of-stock products are still shown in your catalog, so customers know they exist even if they can't buy them right now.
- Catalog Label: In the product catalog, it adds a noticeable "Out of Stock" label to items that aren't available, making it clear at a glance.
- Custom Styling: The message and label are styled with bold red text to catch the eye, ensuring customers notice the stock status.
This setup helps manage customer expectations by clearly communicating product availability, both on individual product pages and in the broader catalog view.
Code
<?php
// Hook into WooCommerce to display a custom out-of-stock message on the product page
add_action('woocommerce_single_product_summary', 'wp_dudecom_display_out_of_stock_message', 20);
function wp_dudecom_display_out_of_stock_message() {
global $product;
// Check if the product is out of stock
if (!$product->is_in_stock()) {
// Display a custom out-of-stock message
echo '<p class="stock out-of-stock">' . esc_html__('Sorry, this product is currently out of stock.', 'woocommerce') . '</p>';
}
}
// Ensure out-of-stock products are displayed in the catalog
add_filter('woocommerce_product_query_meta_query', 'wp_dudecom_include_out_of_stock_products_in_catalog');
function wp_dudecom_include_out_of_stock_products_in_catalog($meta_query) {
// Remove the default meta query that hides out-of-stock products
foreach ($meta_query as $key => $query) {
if (isset($query['key']) && '_stock_status' === $query['key']) {
unset($meta_query[$key]);
}
}
return $meta_query;
}
// Add a custom label to out-of-stock products in the catalog
add_action('woocommerce_before_shop_loop_item_title', 'wp_dudecom_add_out_of_stock_label', 10);
function wp_dudecom_add_out_of_stock_label() {
global $product;
// Check if the product is out of stock
if (!$product->is_in_stock()) {
// Display a custom out-of-stock label
echo '<span class="out-of-stock-label">' . esc_html__('Out of Stock', 'woocommerce') . '</span>';
}
}
// Enqueue custom styles for the out-of-stock message and label
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_custom_styles');
function wp_dudecom_enqueue_custom_styles() {
wp_add_inline_style('woocommerce-general', '
.stock.out-of-stock {
color: #ff0000;
font-weight: bold;
}
.out-of-stock-label {
background-color: #ff0000;
color: #ffffff;
padding: 5px;
display: inline-block;
margin-top: 10px;
}
');
}
?>
Instructions
File Location: Add the following code to your theme's functions.php
file or a custom plugin file.
Prerequisites:
- Ensure WooCommerce is installed and activated on your WordPress site.
Implementation Steps:
- Access your WordPress dashboard.
- Navigate to Appearance > Theme File Editor if you are adding the code to
functions.php
. Alternatively, use a code editor if you are working with a custom plugin file. - Locate the
functions.php
file from the list of theme files on the right side, or open your custom plugin file. - Copy and paste the provided code snippet into the file.
- Save the changes to the file.
- Visit your WooCommerce product pages and catalog to verify that the out-of-stock message and label are displayed correctly.
If you encounter any issues or need further assistance with this implementation or more advanced functionality, consider reaching out to wp-dude.com for expert help.