How can I use WooCommerce conditional tags to create custom product badges for in-stock items

Step-by-Step Implementation

1. Add Custom Badge Code

You can use the following PHP snippet to display a custom badge for in-stock products on both the product page and the shop page.

php
add_action( 'woocommerce_before_shop_loop_item_title', 'display_custom_stock_badge', 10 );
add_action( 'woocommerce_single_product_summary', 'display_custom_stock_badge_single', 6 );

function display_custom_stock_badge() {
    global $product;

    if ( $product->is_in_stock() ) {
        echo '<span class="custom-badge" style="background-color: green; color: white; padding: 5px; border-radius: 5px;">In Stock</span>';
    }
}

function display_custom_stock_badge_single() {
    global $product;

    if ( $product->is_in_stock() ) {
        echo '<span class="custom-badge" style="background-color: green; color: white; padding: 5px; border-radius: 5px;">In Stock</span>';
    }
}

2. Explanation of the Code

- Hooks: The `add_action` function hooks into two locations:
- `woocommerce_before_shop_loop_item_title`: This hook is used to display the badge on the shop page (product loop).
- `woocommerce_single_product_summary`: This hook displays the badge on the single product page.

- Function `display_custom_stock_badge`: This function checks if the product is in stock using `$product->is_in_stock()`. If the product is in stock, it outputs a badge with custom styling.

- Styling: The badge is styled with inline CSS for demonstration purposes. You can customize the styles further by adding CSS to your theme's stylesheet instead of using inline styles.

3. Adding CSS for Better Styling (Optional)

To improve the appearance of the badge, you can add custom CSS to your theme's stylesheet:

css
.custom-badge {
    background-color: green;
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-weight: bold;
    position: absolute; /* Position it as needed */
    top: 10px; /* Adjust position */
    left: 10px; /* Adjust position */
}

4. Testing the Badge

After adding the code, check your shop and product pages to ensure the badge appears for in-stock products. The badge should not display for out-of-stock products.

Summary

By using WooCommerce conditional tags and hooks, you can easily create custom product badges for in-stock items. This enhances the visibility of available products and can improve the shopping experience for customers. You can further customize the badge's appearance and behavior as needed.