Are you looking to make your WooCommerce store stand out with personalized sale badges? Customizing your Sale badges plays a crucial role in grabbing visitors’ attention and encouraging them to make a purchase. Whether you’re aiming to highlight discounts or special offers, personalized badges can significantly impact your store’s visual appeal.
However, finding the perfect badge that aligns with your brand and effectively communicates your offers can be a real challenge. But what if you could create eye-catching and personalized sale badges that grab attention and entice customers to click?
In this guide, we’ll show you different ways to customize your WooCommerce sale badge to match your brand’s style and attract more customers.
Why You Need to Personalize WooCommerce Sale Badge
Customizing your WooCommerce sale badges is essential because it makes shopping clearer and more enjoyable for your customers. Imagine scrolling through an online store where every product looks similar, all with the same basic “Sale” badge. It’s easy for shoppers to overlook products that blend in and miss out on great deals.
However, if a product display with a personalized badge that reflects your brand’s colors, style, or special offers like “Limited Edition” or “Best Seller” grabs attention. For instance, a clothing store might use a bright-colored badge that says “Exclusive Summer Collection” to highlight seasonal offerings.
So, customizing your sale badge in this way not only enhances visibility but also builds trust and reinforces your brand identity. It tells customers that your store pays attention to detail and cares about offering great deals, which can ultimately lead to more clicks and sales.
Benefits of Customizing Sale Badge in WooCommerce
Customizing your WooCommerce sale badge offers several benefits. Here are:
- Capture Visitor’s Attention: Adding a personalized sale badge in WooCommerce with attractive words grabs customers’ attention, making them more likely to buy the product.
- Reduced Abandoned Carts: When customers see an engaging and clear sale badge on your store, it motivates them to purchase products, which helps reduce cart abandonment.
- Promote Quick Purchases: An appealing sale badge can motivate customers to buy products quickly, ensuring they don’t miss out on the sale. It encourages faster decision-making and purchases.
- Flexibility: Store owners can create a unique sale badge by adding text and choosing its appearance. This allows the badge to match the store’s style perfectly.
- Enhance User Experience: Users who see eye-catching sale badges with clear information have a better experience. It helps them understand what sale are happening and what discounts are available.
Customize WooCommerce Sale Badge
Let’s start customizing the Sale badge in WooCommerce. Before we dive in, it’s essential to ensure that each WooCommerce product has a sale price set.
Adding Sale Price to WooCommerce Products
To display a “Sale” badge on the products, you need to add a sale price to the product. Once you do that, the “Sale” badge will automatically appear on those products. Here are the steps to follow.
- Go to your WordPress Dashboard and select “WooCommerce Products.”
- Find and edit the product for which you want to add a sale price.
- In the “Product Data” section, go to the “General” tab.
- Enter the sale price in the provided field.
- Save or update the product changes.
When you set a sale price for a product, a default “Sale” badge will automatically appear on the product, like in the screenshot below.
Change Default Sale Badge Text in WooCommerce
By default, when products are discounted in WooCommerce, they show a badge with the text “Sale.” But what if you want to use your text to make it more straightforward for visitors? You can customize this badge using PHP code in WooCommerce. Customizing the sale badge allows you to create more engaging and personalized messages for your customers, helping to attract their attention and increase your sale. Below are the simple steps to learn how to make these changes quickly.
You need to add the PHP code to the functions.php file of your child theme, which can be found under the /wp-content/themes/Your_theme_name/.
add_filter('woocommerce_sale_flash', 'change_default_badge_text');
function change_default_badge_text() {
return '<span class="onsale">Festive Sale</span>';
}When you add the code, you’ll see that the sale badge text changes to the new text you put in. You can replace it with any text you like.
Display Discount Percentage on Sale Badge
Here, we will discuss how to show the discount percentage on each product in WooCommerce. This is a great way to provide clear information about your sale, grab your customers’ attention, and enhance their shopping experience.
For example, if you are offering a 20% discount on a product, the discount percentage will be displayed clearly, making it easy for your customers to see how much they are saving. This can encourage more purchases and make your sale more effective.
To do this, you just need to copy a piece of code and paste it into the functions.php file of your child theme.
// Function to display the discount percentage on the sale badge
function woocommerce_product_calc_discount($product_html, $post, $product) {
// Check if the product is on sale
if ($product->is_on_sale()) {
$regular_price = $product->get_regular_price(); // Get the regular price of the product
$sale_price = $product->get_sale_price(); // Getting the sale price of the product
if ($regular_price && $sale_price) {
// Calculate the discount percentage
$discount_percentage = round((( $regular_price - $sale_price ) / $regular_price ) * 100);
// Update the product HTML to display the discount percentage
$product_html = '<span class="onsale">' . "UPTO " . $discount_percentage . ' % OFF </span>';
}
}
// Return the updated or original product HTML
return $product_html;
}
add_filter('woocommerce_sale_flash', 'woocommerce_product_calc_discount', 10, 3);After adding the code, the sale badges will automatically show the discount percentage, which is calculated based on the original and sale prices.
Style Your Sale Badge in WooCommerce
By styling sale badges, you can grab customers’ attention and highlight special offers or discounts. Let’s explore how you can personalize and enhance your sale badges to match your store’s branding and attract more shoppers.
Add CSS Styling to Badge
To customize the appearance of your WooCommerce sale badge, you can use CSS code. First, go to the directory /wp-content/themes/Your_theme_name/ in your WordPress installation. Inside this folder, locate the style.css file of your child’s theme
Next, add the following CSS code to the style.css file. This code allows you to change the color, background color, borders, and other visual aspects of your WooCommerce sale badges. It will make your sale badges stand out and match your site’s design better.
/* WooCommerce Sale Badge Customization */
.onsale {
background-color: #AB7E4C; /* Set a Tan Brown background color */
color: #ffffff; /* Use white for the text color */
font-size: 14px; /* Set the font size */
border: 2px solid #ffffff; /* Add a white border around the badge */
border-radius: 5%; /* Slightly Rounded Corners */
padding: 15px 15px; /* Add padding to adjust the size */
margin: -10px -10px; /* Add margin to space it out from other elements */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow for depth */
text-transform: capitalize; /* Capitalize the first letter of each word */
}Once you apply the code, the sale badge on your website will change its appearance to match the styling you’ve defined.
Display WooCommerce Sale Badge in Ribbon Form
Adding a ribbon-style sale badge is another creative way to enhance your WooCommerce sale badge. This ribbon can be customized to highlight specific details about your sale, making it more informative and attractive. For instance, you could label the badge with “Summer Sale” during a summer sale to instantly convey the theme to your customers.
Alternatively, you can use the badge to display the discount percentage, helping shoppers quickly understand the discount they’re getting. This visual addition not only makes your badges more descriptive but also catches the eye, encouraging more clicks and purchases.
To add a ribbon-style sale badge, you’ll need to insert CSS code into your child theme’s style.css file. This code controls the appearance and position of the sale badge ribbon.
/* Adding Sale Badge in Ribbon Style */
.onsale{
position: absolute; /* Position absolute to align with the badge */
top: 5px; /* Vertical position */
left: -22px; /* Horizontal Position */
width: 90px; /* Ribbon width */
height: 25px; /* Ribbon height */
background-color: #A75502; /* Ribbon background color */
color: #ffffff; /* Ribbon Text color */
font-size: 13px; /* Font size */
padding: 10px 10px; /* Padding for size */
transform: rotate(-32deg); /* Rotate the ribbon */
}Once you’ve added the ribbon-style badge, its look changes. You can adjust its position and other aspects to match your store’s style and branding better.
Start Personalizing WooCommerce Sale Badge
Customizing WooCommerce sale badges is a powerful way to enhance the visibility of special offers and promotions on your online store. By exploring PHP code modifications for badge text, adding custom styles to badges, and incorporating eye-catching sale badges as ribbons, you can create badges that not only inform but also effectively attract and engage visitors. These customization options not only personalize your store’s appearance but also help increase sale by drawing attention to your best offers.
