Coupon Display

Overview

The Coupon Display feature makes it easy to showcase discount codes directly in your announcement bar. Visitors can copy the code with a single click, reducing friction and increasing redemption rates.

Enable/Disable Coupon Display

Toggle the coupon display on or off within your announcement bar settings. When disabled, the coupon section is completely hidden from visitors while other bar content remains visible.

Coupon Code Text

Enter the discount or promotional code you want to display. This is the text that appears in the coupon box and gets copied to clipboard. Examples:

• SAVE10
• BLACKFRIDAY2024
• WELCOME15
• SUMMER40

Coupon Styles

Choose from four visual styles to match your brand and announcement bar design:

Copy to Clipboard

One-Click Copy

Visitors can click the coupon box to copy the code to their clipboard. A visual confirmation ("Copied!") provides immediate feedback.

Auto-Copy on Page Load

Enable this option to automatically copy the coupon code to the visitor's clipboard when the page loads. This is useful for urgent offers where you want maximum engagement.

• Note: Browser security may require explicit user interaction; auto-copy works best when combined with a visible notification

Custom Labels and Text

Custom Label

Add a descriptive label above or next to the coupon code. Examples:

• "COUPON CODE:"
• "Use code:"
• "Your discount:"
• "Enter at checkout:"

Custom Description

Add additional context below the coupon code to explain what the discount offers. Examples:

• "Get 10% off your first order"
• "Free shipping on orders over $50"
• "Ends today at midnight"
• "Valid for new customers only"

Button Text Customization

Copy Button Text

Customize the text shown on the copy button. Default: "COPY"

• "COPY CODE"
• "COPY & SAVE"
• "CLICK TO COPY"

Copied Confirmation Text

Customize the confirmation message shown after successful copy. Default: "COPIED!"

• "✓ COPIED"
• "COPIED TO CLIPBOARD"
• "READY TO USE"

The confirmation text displays for 2-3 seconds before returning to the copy button.

Color Customization

Fully customize the color scheme of your coupon display:

• Coupon background color: Main coupon box background
• Coupon text color: The discount code text
• Label text color: Color of custom label
• Description text color: Color of description text
• Button background color: Copy button background
• Button text color: Copy button text
• Border color: Outline of coupon box (for styles using borders)
• Opacity: Control transparency of elements

Pro Feature: The Ticket and Gradient styles, plus WooCommerce auto-apply functionality, are available exclusively on the Pro plan.

WooCommerce Auto-Apply

Automatically apply the discount code to the visitor's WooCommerce cart when they click the copy button.

• Availability: Pro plan, Announcement Bar only (not PopUp)
• Requirement: WooCommerce must be installed and activated
• Behavior: Applies the coupon code to cart items instantly; displays success message

Setup Instructions

1. Install and activate WooCommerce plugin
2. Create your coupon in WooCommerce settings with desired discount amount and rules
3. Enable "Auto-Apply to Cart" in your announcement bar coupon settings
4. Enter the exact coupon code in the coupon field
5. Test on your site to ensure the code applies correctly

Important Notes

• The coupon must exist in WooCommerce and be active for auto-apply to work
• Coupon restrictions (minimum order, usage limits, date ranges) are still enforced by WooCommerce
• If a customer already has a coupon applied, the new code will either add or replace it depending on WooCommerce settings
• The auto-apply happens on the announcement bar's domain; ensure the visitor is on a WooCommerce product or cart page

Best Practices

• Keep codes short: Use concise coupon codes (5-10 characters) that are easy to remember and type
• Use uppercase: Make codes uppercase for better readability in the announcement bar
• Add urgency: Combine with a countdown timer or expiration date message
• Be specific: Use custom descriptions to explain exactly what the discount covers
• Match brand colors: Customize colors to fit your site's color scheme
• Test with WooCommerce: If using auto-apply, test thoroughly with different order amounts and coupon types
• Mobile friendly: Ensure the coupon button is large enough to tap easily on mobile devices
• Pair with CTA: Use alongside a "Shop Now" or "Claim Offer" button for maximum conversions

Examples

Flash Sale Setup

• Style: Simple
• Code: SALE20
• Label: "Limited time:"
• Description: "20% off everything - Code expires tonight"
• Pair with: Countdown timer set to end of day

New Customer Offer

• Style: Dashed (classic coupon look)
• Code: WELCOME15
• Label: "Welcome offer:"
• Description: "First time here? Get 15% off your order"
• Auto-Copy: Enabled

Free Shipping Promotion

• Style: Gradient
• Code: FREESHIP50
• Label: "Free shipping:"
• Description: "On orders over $50 - Use code at checkout"
• WooCommerce Auto-Apply: Enabled

Related Documentation

• Countdown Timer - Add urgency to your coupon display
• Scheduling - Control when your coupon bar appears
• Animations - Add eye-catching effects to your coupon
• A/B Testing - Test different coupon codes and messaging