Display discount codes with one-click copy functionality in your announcement bars and popup campaigns. This guide covers coupon configuration, styles, WooCommerce integration, and best practices.
Note: Features marked (PRO) require HashBar Pro. All other features are available in the free version.
Setting Up a Coupon Display
- Open the Announcement Bar or Popup Campaign editor.
- Go to the Coupon tab.
- Toggle Enable Coupon to On.
- Enter your Coupon Code (e.g., “SAVE20”).
- Optionally add a Label (e.g., “Use code:”) and Description (e.g., “Get 20% off your order”).
- Choose a Coupon Style.
- Save your changes.
Coupon Settings
| Setting | Description |
|---|---|
| Enable Coupon | Toggle coupon display on or off |
| Coupon Code | The discount code visitors will see and copy |
| Label | Text displayed above the coupon code (e.g., “Use code:”) |
| Description | Text below the code explaining the offer |
| Copy Button | Shows a button for one-click copy to clipboard |
| Copy Button Text | Text on the copy button (default: “Copy”) |
| Copied Feedback Text | Text shown after copying (default: “Copied!”) |
| Auto-Copy on Click (PRO) | Copies the code when the coupon area is clicked (no button needed) |
PRO Feature: Auto-Copy on Click allows visitors to copy the coupon code simply by clicking anywhere on the coupon area, without needing a separate copy button.
Coupon Styles
| Style | Description | Best For |
|---|---|---|
| Simple | Clean text with solid border | Minimal designs, announcement bars |
| Dashed | Dashed border around the code | Traditional coupon look |
| Ticket (PRO) | Voucher/ticket design with perforated edges | Premium feel, popups |
| Gradient (PRO) | Modern gradient background | Eye-catching, modern designs |
PRO Feature: Ticket and Gradient coupon styles are available with HashBar Pro for a more visually impactful coupon display.
Styling Options
| Setting | Description |
|---|---|
| Background Color | Coupon box background fill |
| Text Color | Coupon code text color |
| Border Color | Border color around the coupon |
| Border Style | Solid, Dashed, or Dotted |
| Code Font Size | Size of the coupon code text |
| Label Font Size | Size of the label text |
| Button Background Color | Copy button fill color |
| Button Text Color | Copy button text color |
WooCommerce Integration (PRO)
Link your coupon display to an existing WooCommerce coupon. When enabled, you can select a WooCommerce coupon directly from a dropdown, and the coupon code is auto-filled. Available for Popup Campaigns only.
How to Set Up WooCommerce Integration
- Create a coupon in WooCommerce > Coupons (or Marketing > Coupons).
- In the HashBar Popup Campaign editor, go to the Coupon tab.
- Scroll to the WooCommerce Integration section.
- Toggle Link to WooCommerce Coupon to On.
- Select your coupon from the Select WooCommerce Coupon dropdown.
- The coupon code is automatically filled in from WooCommerce.
Tip: WooCommerce must be installed and active for the integration to work. The dropdown lists all available WooCommerce coupons for easy selection.
Best Practices
- Keep codes short and memorable. “SAVE20” is better than “SUMMERSALE2026DISCOUNT”. Short codes are easier to copy and share.
- Combine with countdown timers. A coupon code next to a ticking countdown dramatically increases urgency and conversion rates.
- Use descriptive labels. Instead of just showing the code, add context: “Use code:” or “Your exclusive discount:”.
- Add a clear description. Tell visitors exactly what the coupon does: “Save 20% on all orders over $50”.
- Use WooCommerce Integration (PRO). Link directly to your WooCommerce coupons so the code is always in sync and auto-filled.
- Match coupon style to your design. Simple/Dashed for announcement bars. Ticket/Gradient for popups where you want visual impact.
Related Guides
- Countdown Timer Guide – Combine countdowns with coupons for maximum urgency
- Announcement Bar Editor Guide – Full reference for announcement bar settings
- Popup Campaign Editor Guide – Full reference for popup campaign settings
- Use Cases & Recipes – Real-world coupon display examples
That’s it! You now have everything you need to display coupons effectively with HashBar. If you need additional assistance, feel free to contact our support team.