How to Display a Discount Banner on Your WooCommerce Shop

Ever feel like your online store’s a bit… quiet? Like it needs a digital megaphone yelling, ‘Deals here!’?

That’s where discount banners come in – they’re your website’s virtual street hawker, grabbing attention and boosting sales.

Now, how to display a discount banner on your WooCommerce shop?

You can display discount banners on your WooCommerce shop by using dedicated plugins for easy setup or by implementing custom code for tailored designs.

This guide will walk you through both methods to ensure your discounts shine. So, let’s ditch the digital crickets and get those banners waving!

How to Display a Discount Banner on Your WooCommerce Shop?

Well, WooCommerce does display a sales tag or badge for products that are on sale, and advanced discounts plugins like Disco display discounted prices with badges. However, they don’t have the features for displaying promotional banners in WooCommerce.

But, not to worry, there are plenty of free and paid plugins available that can do the job of adding a sale banner in WooCommerce. You can also implement custom codes to display your personalized banners.

Let’s start with how to add a banner to WooCommerce shop page using custom codes.

How to Display a Discount Banner on Your WooCommerce Shop (Custom Codes)?

Let’s say you are offering an exclusive category discount on your ‘Summer Collection’ products for 2 weeks. You are using an advanced plugin such as Disco to create this automated discount campaign and want to display custom WooCommerce banners in the category and product pages.

Let us walk you through the entire process.

Example Target Scenario: “15% off on all ‘Summer Collection’ products and promote through on-site banners.”

Let’s first create this auto-apply discount rule using Disco. Here are the steps –

Create a new discount rule and name it.

Select the Product discount intent and select All Products.

Select start and end dates for the campaign.
Choose the discount type and enter your value.

Add the condition Categories.
Search and select the category.

How to display a discount banner on your WooCommerce shop

After you save the rule, the plugin will automatically start applying the discounts on the target category product pages. Disco also displays the discounted price and WooCommerce promotional badges to declare the discounts.

Now, let’s get down to how to add banner in category page WooCommerce using custom codes. For coding WooCommerce discount banners, follow these steps –

Step 1: Add the Custom Code

Go to Appearance >> Theme File Editor >> Functions.php.
Add the following code to your functions.php file:

function display_discount_banner() {

$current_time = current_time('timestamp');

$start_time = strtotime('2025-04-05');

$end_time = strtotime('2025-04-19');

if ($current_time >= $start_time && $current_time <= $end_time) {

     if (is_shop() || is_product_category('summer-collection') || has_term('summer-collection', 'product_cat')) {

         echo '<div class="discount-banner" style="background: #FF4500; color: white; text-align: center; padding: 12px; font-size: 18px; margin-bottom: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2);">

         🌞 Limited-Time Offer! Get <strong>15% Off</strong> on all <strong>Summer Collection</strong> products! 🌴 <br> Offer valid from <strong>April 5 - April 19, 2025</strong>.

         </div>';

     }

}

}

add_action('woocommerce_before_main_content', 'display_discount_banner');

Explanation of the Code

✔ Display dynamic banners in WooCommerce: The banner only appears from April 5 to April 19, 2025.
✔ Targeted pages:

Shop Page (is_shop())
Summer Collection Category Page (is_product_category('summer-collection'))
Product Pages in Summer Collection (has_term('summer-collection', 'product_cat'))
✔ Stylish banner: Uses an orange-red (#FF4500) background, rounded corners, and a subtle shadow.

Step 3: Add Some CSS (Optional)

If you want smooth animation, add this CSS inside Appearance >> Customize >> Additional CSS:

.discount-banner {

animation: fadeIn 1s ease-in-out;

}

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

}

Step 4: Test the Banner

Clear Cache: If you use a caching plugin, clear it to see changes.
Visit Target Pages:

✅ Shop Page → Should display the banner.

✅ Summer Collection Category Page → Should display the banner.

✅ Product Pages in Summer Collection → Should display the banner.

Check Before & After April 5/April 19 → The banner shouldn’t appear before or after these dates. This is how you generate and automate discount banners in WooCommerce.

How to Display an Image Banner Using Custom Codes?

To display a banner image using custom code for your 15% off Summer Collection sale from April 5 to April 19, 2025, follow these steps:

Step 1: Upload Your Banner Image

Go to your WordPress Dashboard >> Media >> Add New.

Upload your banner image (e.g., “banner.jpg”).
Copy the image URL for later use.

Step 2: Add the Custom Code to functions.php

This code will display your banner on the Shop page, Summer Collection category page, and related product pages during the sale period.

function display_discount_banner() {

// Define sale period

$start_date = strtotime("2025-04-05");

$end_date = strtotime("2025-04-19");

$current_time = time();

// Only show during sale period

if ($current_time >= $start_date && $current_time <= $end_date) {

     // Define category ID (Replace with your actual category ID)

     $category_id = 123; // Change this to your "Summer Collection" category ID

     // Check if the user is on the shop page, category page, or relevant product page

     if (is_shop() || is_product_category($category_id) || has_term($category_id, 'product_cat')) {

         echo '<div style="width: 100%; margin: 0; padding: 0;">

                 <img src="https://yourwebsite.com/wp-content/uploads/summer-sale-banner.jpg"

                      alt="15% Off Summer Collection"

                      style="width: 100%; height: auto; display: block; margin: 0; padding: 0; border: none;">

               </div>';

     }

}

}

add_action('woocommerce_before_main_content', 'display_discount_banner');

**Note: Replace the URL with your image URL.

Step 3: Replace with Your Category ID

Go to Products >> Categories.
Find the Summer Collection category and hover over it.

Copy the Category ID from the URL (e.g., tag_ID=40).
Replace 123 in the code with your actual Category ID.

Step 4: Save and Test

Visit the Shop page, the Summer Collection category, and the product pages to check if the banner appears.

Here’s the category page view –

Make sure it automatically disappears after April 19.

How to Display a Discount Banner on Your WooCommerce Shop Using a Plugin

Instead of manually adding custom code, which can be risky and time-consuming, using a plugin makes the process much easier and safer.

In this section, we’ll walk you through WooCommerce discount banner setup using the Banner Management for WooCommerce plugin.

Why Use a Plugin?

Manually coding banners can lead to compatibility issues, errors, or even breaking your site. A plugin, on the other hand, ensures a smooth setup with an easy-to-use interface. As a result, plugins allow you to manage banners without technical knowledge.

The Banner Management for WooCommerce plugin lets you display banners on the shop page, category pages, and product pages—perfect for highlighting sales and special offers.

Let’s explore the plugin settings.

Step 1: Install the Plugin

Go to Plugins >> Add New in your WordPress dashboard.

Search for Banner Management for WooCommerce.
Click Install Now, then Activate.

Once activated, you’ll find the plugin settings under Dotstore Plugins >> Banner Management.

Let’s take a look at the available settings.

Step 2: Display Discount Banners on the Shop Page

Open the Banner Management settings.
Select Banner for Shop Page and enable it.

Upload your discount banner image (WooCommerce banner size recommendations: 1800 x 600 px).

Save the settings and check your shop page to see the banner in action.

Note: The free version allows only one banner, while the pro version lets you add banner sliders.

Step 3: Add Banners to Category and Product Pages

How to change banners in WooCommerce Category Pages:

Go to Products >> Categories.
Select a category and scroll down to Category-Based Banner Settings.

Upload your banner image and save the settings.
The banner will now appear on that category page.

For Product Pages:

Go to Products >> All Products.
Select the product you want to add a banner to and click Edit.
Scroll down to Product Banner Settings.

Upload the banner image and save the settings.

Note: If you want the same banner for all product pages, enable Product Page Banner Settings in the plugin settings.

Step 4: Add a Call-to-Action Button

You can also add a custom button to your banners, linking to a sale page or special offer.

In the banner settings (Category or Product pages), locate the Button Settings.
Add a button text (e.g., Shop Now).
Enter the URL where you want customers to be redirected.
Save the settings.

Now, your banner will include a clickable button, making it easy for customers to access your discount offers.

Using the WooCommerce banner plugin, you can quickly set up discount banners across different pages in your store. Whether it’s a store-wide sale, category discount, or individual product promotion, this plugin makes it effortless to showcase offers and increase conversions.

Advanced Tips for WooCommerce Banners

If you’re ready to take your WooCommerce banners to the next level, these advanced tips will help you create banners that are not only eye-catching but also highly effective in driving sales and engagement.

Creating Dynamic Banners

Dynamic banners are a game-changer for WooCommerce stores. Unlike static banners, dynamic banners change based on user behavior, location, or time of day.

For example, you can display a banner promoting a flash sale to users who’ve visited your site before or show location-specific offers. To create dynamic banners, you’ll need a plugin or custom coding to integrate with your store’s data.

Pro Tip: Use dynamic banners to personalize the shopping experience. For instance, show a “Welcome Back” banner with a special discount for returning customers.

Using Sticky Banners

Sticky banners are banners that stay visible as users scroll through your site. They’re perfect for highlighting ongoing promotions or important announcements.

For example, you can create a sticky banner at the top of your shop page that says, “Free Shipping on Orders Over $50!”

To add sticky banners, you can use a plugin or add custom CSS to your theme. Just make sure the banner doesn’t obstruct important content or annoy users.

Pro Tip: Keep sticky banners simple and unobtrusive. Use clear, concise text and a strong call-to-action (CTA) like “Shop Now” or “Claim Your Discount.”

Coding Custom Banners

We have covered how to display a discount banner on your WooCommerce shop using codes in our earlier sections.

If you’re comfortable with coding, creating custom banners gives you complete control over their design and functionality. You can use HTML, CSS, and JavaScript to build banners that match your brand’s aesthetic perfectly.

For example, you can create a countdown timer banner for a limited-time offer or a banner that changes color based on the user’s interaction.

Pro Tip: Test your custom banners thoroughly to ensure they’re responsive and work seamlessly across all devices.

Automating Discount Banners

Automation can save you time and ensure your banners are always up-to-date. For instance, you can set up banners to automatically display when a new coupon is created or when a specific product goes on sale.

Pro Tip: Combine automation with dynamic banners to create a highly personalized shopping experience. For example, automatically show a banner with a discount code to users who’ve abandoned their cart.

Ensuring Responsiveness

With more users shopping on mobile devices, it’s crucial to ensure your banners are responsive. Responsive discount banners for WooCommerce adjust their size and layout based on the screen size, ensuring they look great on desktops, tablets, and smartphones.

Pro Tip: Use tools like Google’s Mobile-Friendly Test to check how your banners look on different devices.

Why Use Discount Banners in WooCommerce?

So now that we have learned how to display a discount banner on your WooCommerce shop, let’s discuss why you need them.

Discount banners are a powerful tool in WooCommerce for driving sales, increasing customer engagement, and boosting overall revenue. Here’s a detailed breakdown of why you should use them:

1. Attract Attention and Drive Immediate Sales

Visual Appeal: Banners are visually prominent elements on your website. They grab attention immediately, which makes them ideal for highlighting special offers and promotions.
Urgency and Scarcity: Discount banners can create a sense of urgency and scarcity by featuring limited-time offers, countdown timers, or messages like “While supplies last.” This encourages customers to make immediate purchases.
Clear Call to Action: Banners typically include clear and concise call-to-action (CTA) buttons, such as “Shop Now,” “Get Discount,” or “Learn More,” guiding customers directly to the relevant product or promotion page.

2. Increase Conversion Rates

Reduce Cart Abandonment: By displaying discount banners on the cart or checkout pages, you can incentivize customers to complete their purchases and reduce cart abandonment rates.
Highlight Value Propositions: Banners allow you to showcase the value of your products or services, such as free shipping, bundle deals, or percentage discounts. This makes them more appealing to potential buyers.
Targeted Offers: You can create targeted discount banners for specific customer segments or product categories and ensure that relevant offers are displayed to the right audience.

3. Boost Average Order Value (AOV)

Upselling and Cross-selling: Banners can promote related products or upsell higher-priced items. As a result, they encourage customers to add more items to their carts and increase their AOV.
Minimum Purchase Thresholds: You can use banners to promote discounts or free gifts for orders that meet a minimum purchase threshold and incentivize customers to spend more.
Bundle Deals: Banners can highlight bundle deals or package discounts, which encourage customers to purchase multiple items together.

4. Enhance Customer Engagement and Loyalty

Promote Special Events and Holidays: Banners are perfect for promoting seasonal sales, holiday discounts, or special events, keeping customers engaged and informed.
Reward Loyal Customers: You can create exclusive discount banners for loyal customers or email subscribers and show appreciation, thus fostering customer loyalty.
Announce New Product Launches: Banners can be used to announce new product launches or promotions. These promotional images can easily generate excitement and drive initial sales.

5. Improve Marketing Effectiveness

Track Performance: WooCommerce and related plugins allow you to track the performance of your discount banners, including click-through rates and conversion rates, enabling you to optimize your campaigns.
A/B Testing: You can use A/B testing to experiment with different banner designs, messages, and offers, identifying the most effective strategies for your target audience.
Integration with Marketing Channels: Discount banners can be integrated with other marketing channels, such as email marketing or social media, creating a cohesive and consistent brand message.

Common Mistakes to Avoid

Even the best-designed banners can fall flat if you make these common mistakes. Here’s what to watch out for:

Using Low-Quality Images

Blurry or pixelated banners can make your store look unprofessional. Always use high-resolution images that are optimized for web use.

Fix It: Use tools like Canva or Adobe Spark to create professional-looking banners, even if you’re not a designer.

Overloading Your Shop with Banners

Too many banners can overwhelm users and make your site look cluttered. Stick to one or two well-placed banners that align with your current promotions.

Fix It: Prioritize your most important promotions and remove outdated banners promptly.

Ignoring Mobile Responsiveness

A banner that looks great on desktop but breaks on mobile can frustrate users and hurt your sales. Always test your banners on multiple devices.

Fix It: Use responsive design principles and test your banners using tools like BrowserStack.

Forgetting a Clear Call-to-Action (CTA)

A banner without a clear CTA is a missed opportunity. Make sure your banners tell users exactly what to do, whether it’s “Shop Now,” “Claim Your Discount,” or “Learn More.”

Fix It: Use action-oriented language and make your CTA button stand out with a contrasting color.

Neglecting Analytics

If you’re not tracking how your banners perform, you’re flying blind. Use tools like Google Analytics or your WooCommerce dashboard to monitor clicks, conversions, and other key metrics.

Fix It: Regularly review your banner performance and make adjustments based on the data.

Wrap up

So, there you have it—your ultimate guide on how to display a discount banner on your WooCommerce shop!

Whether you’re just starting out or looking to level up your banner game, these tips and strategies should help you create banners that grab attention, drive sales, and keep your customers coming back for more.

From setting up your first banner to diving into advanced tricks like dynamic and sticky banners, it’s all about finding what works best for your store. Don’t forget to experiment with placement, keep your designs clean and responsive, and always track how your banners are performing.

At the end of the day, a well-designed discount banner isn’t just a pretty addition to your shop—it’s a powerful tool to boost your sales and connect with your customers. So, go ahead, get creative, and start making those banners work for you!