Snippet

Add Custom Labels to WooCommerce Products Easily

How to add custom labels to WooCommerce productsCreate product labels in WordPressAdd new label to WooCommerce productCustom product badges for WooCommerceWooCommerce product label pluginBest plugin for WooCommerce product labelsDisplay custom labels on WooCommerce productsHow to show sale badges on WooCommerceCustomize product labels in WordPressAdd 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

1<?php 2// Add custom labels to WooCommerce products 3 4// Hook to display custom labels on WooCommerce products 5add_action('woocommerce_before_shop_loop_item_title', 'wp_dudecom_display_custom_product_label', 10); 6 7function wp_dudecom_display_custom_product_label() { 8 global $product; 9 10 // Example: Add a 'New' label to products added in the last 30 days 11 $post_date = get_the_date('Y-m-d', $product->get_id()); 12 $newness_days = 30; // Number of days to consider a product as 'New' 13 14 if ((time() - strtotime($post_date)) < ($newness_days * 24 * 60 * 60)) { 15 echo '<span class="wp-dudecom-product-label new-label">New</span>'; 16 } 17 18 // Example: Add a 'Sale' label to products on sale 19 if ($product->is_on_sale()) { 20 echo '<span class="wp-dudecom-product-label sale-label">Sale</span>'; 21 } 22} 23 24// Enqueue custom styles for product labels 25add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_custom_styles'); 26 27function wp_dudecom_enqueue_custom_styles() { 28 wp_add_inline_style('woocommerce-general', ' 29 .wp-dudecom-product-label { 30 position: absolute; 31 top: 10px; 32 left: 10px; 33 background-color: #ff0000; 34 color: #ffffff; 35 padding: 5px 10px; 36 font-size: 12px; 37 font-weight: bold; 38 z-index: 100; 39 } 40 .wp-dudecom-product-label.new-label { 41 background-color: #00ff00; 42 } 43 .wp-dudecom-product-label.sale-label { 44 background-color: #ff0000; 45 } 46 '); 47} 48?>

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.