# Promotional Banner Above the Product List

> Displays a banner with a message and a button above the products on the shop and category pages.

- Type: HTML
- Runs: Wc before products list
- Category: [WooCommerce](https://wpide.com/library/category/woocommerce/)
- Requires: WooCommerce
- Tags: woocommerce, shop, banner, promotion
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/woo-shop-promo-banner/

## Code

```html
<div class="wpide-shop-banner" style="margin:0 0 24px;padding:20px 24px;border-radius:8px;background:#1e1e1e;color:#fff;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;">
    <p style="margin:0;font-size:1.05em;"><strong>Spring sale:</strong> 20% off selected items until Sunday.</p>
    <p style="margin:0;"><a class="button" href="/product-category/sale/">Shop the sale</a></p>
</div>
```

## Notes

Edit the text and link. Remove the button paragraph if you only need a message.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Promotional Banner Above the Product List" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/