Display Out-of-Stock Message on WooCommerce Product Page

How to display out of stock message in woocommerceWoocommerce show out of stock on product pageDisplay out of stock text woocommerceWoocommerce out of stock message not showingCustomize out of stock message woocommerceWoocommerce out of stock notificationShow out of stock products woocommerceWoocommerce display out of stock on catalogHow to add out of stock label in woocommerceWoocommerce 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.