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:
- Access Your WordPress Dashboard: Log in to your WordPress admin panel.
- 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.
- Edit Functions File: In the Theme Editor, locate and select the
functions.php
file from the right-hand side file list. - Insert the Code: Copy and paste the provided code snippet at the end of the
functions.php
file or within the custom plugin file. - Save Changes: Click the Update File button to save your changes.
- 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.