Add Custom Labels to WooCommerce Products Easily

How to add custom labels to WooCommerce products; Create product labels in WordPress; Add new label to WooCommerce product; Custom product badges for WooCommerce; WooCommerce product label plugin; Best plugin for WooCommerce product labels; Display custom labels on WooCommerce products; How to show sale badges on WooCommerce; Customize product labels in WordPress; Add promotional labels to WooCommerce products;

Explanation

Want to make your WooCommerce products stand out with custom labels like "New" or "Sale"? Here's a simple way to do it!

Adding Labels:

  • "New" Label: This label appears on products added within the last 30 days. It checks the product's date and if it's within the set timeframe, it shows the "New" label.
  • "Sale" Label: Automatically displays on products that are currently on sale.

How It Works:

  • The code hooks into WooCommerce to display these labels before the product title in the shop loop.
  • It uses simple conditions to determine if a product is new or on sale, then adds a label accordingly.

Styling the Labels:

  • The labels are styled with a bit of CSS to make them pop. They have a bold font and a background color to catch the eye.
  • The "New" label is green, while the "Sale" label is red, making it easy for customers to spot them.

With this setup, your products will have eye-catching labels that help highlight new arrivals and special offers, enhancing the shopping experience for your customers!

Code

<?php
// Add custom labels to WooCommerce products

// Hook to display custom labels on WooCommerce products
add_action('woocommerce_before_shop_loop_item_title', 'wp_dudecom_display_custom_product_label', 10);

function wp_dudecom_display_custom_product_label() {
    global $product;

    // Example: Add a 'New' label to products added in the last 30 days
    $post_date = get_the_date('Y-m-d', $product->get_id());
    $newness_days = 30; // Number of days to consider a product as 'New'

    if ((time() - strtotime($post_date)) < ($newness_days * 24 * 60 * 60)) {
        echo '<span class="wp-dudecom-product-label new-label">New</span>';
    }

    // Example: Add a 'Sale' label to products on sale
    if ($product->is_on_sale()) {
        echo '<span class="wp-dudecom-product-label sale-label">Sale</span>';
    }
}

// Enqueue custom styles for product labels
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_custom_styles');

function wp_dudecom_enqueue_custom_styles() {
    wp_add_inline_style('woocommerce-general', '
        .wp-dudecom-product-label {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: #ff0000;
            color: #ffffff;
            padding: 5px 10px;
            font-size: 12px;
            font-weight: bold;
            z-index: 100;
        }
        .wp-dudecom-product-label.new-label {
            background-color: #00ff00;
        }
        .wp-dudecom-product-label.sale-label {
            background-color: #ff0000;
        }
    ');
}
?>

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:

  1. Access Your WordPress Dashboard: Log in to your WordPress admin panel.
  2. Navigate to Theme Editor: Go to Appearance > Theme Editor. If you prefer using a plugin, navigate to Plugins > Add New and search for a plugin like "Code Snippets" to safely add custom code.
  3. Edit Functions File: In the Theme Editor, locate and select the functions.php file from the right-hand side file list.
  4. Insert the Code: Copy and paste the provided code snippet at the end of the functions.php file or within the custom plugin file.
  5. Save Changes: Click the Update File button to save your changes.
  6. Verify Labels: Visit your WooCommerce shop page to ensure the "New" and "Sale" labels are displayed correctly on the products.

Note: If you encounter any issues or need further customization, consider reaching out to wp-dude.com for professional assistance with your WordPress projects.