WooCommerce Gutenberg Blocks: Countdown & Shop the Look
Overview
WooCommerce Gutenberg blocks are Sale Booster features you place manually in the WordPress block editor. Unlike badges that attach to product images or embeds that use hooks and selectors, these WooCommerce promotional blocks let you add Countdown Banner and Shop the Look content exactly where you want it on a page, post, or template.
Two features ship as blocks:
| Block | Search for | What it does |
|---|---|---|
| Countdown Banner | Countdown Banner | A full-width promotional banner with a live countdown, six layouts, and image backgrounds. |
| Shop the Look | Shop The Look | A lifestyle photo with clickable product hotspots. |
Both blocks are available in the Pro version.
Popular use cases
Blocks are for hand-placed, one-off promotions — content that belongs on a specific page rather than across the catalog. Match your goal to the block:
| Your goal | Best block | How to set it up |
|---|---|---|
| A campaign / landing-page hero with a live deadline | Countdown Banner | Insert at the top, set Full width, pick a layout, and point the timer at your sale end date. |
| Build urgency on a seasonal or Black Friday page | Countdown Banner | Use a themed layout + background image; the countdown drives FOMO. |
| Turn a lifestyle / lookbook photo into a shoppable image | Shop the Look | Add hotspots on the photo and link each to a product. |
| Curate a "get the look" bundle in a blog post | Shop the Look | Place it inside the post content and tag each featured item. |
| Feature a promo exactly where you want it on one page | Either block | Use a block (not an embed) — it lives in that page's content only. |
| Show the same promo across many products automatically | Use an embed instead | Set it up in Sale Badges → Embeds with targeting — see Blocks or embeds? below. |
How it works
You're building a seasonal landing page rather than a product page, so the usual product-page placement doesn't apply. You open the page in the editor, insert the Countdown Banner block at the top, set it to full width, choose the Centered hero layout, and point the countdown at your sale end date. The banner lives in that page's content — no CSS selector, no hook, no targeting rules.
Adding a block
- Edit any page, post, or template.
- Click the + inserter.
- Search for the block by name (see the table above).
- Click it to insert.
- Configure it in the right-hand sidebar — the block previews live on the canvas as you change settings.
Blocks or embeds?
Countdown Banner and Shop the Look are available both as a block and as an embed type. They render identically — the difference is only how you place them.
| Block | Embed | |
|---|---|---|
| Where it appears | Exactly where you insert it | Anchored to a hook or CSS selector |
| Scope | That one page or post | Every page matching your targeting rules |
| Targeting & scheduling | Not available | Full targeting, conditions, and schedule |
| Set up in | The block editor | Sale Badges → Embeds |
Use a block for one-off placements: landing pages, a homepage hero, a campaign post. Use an embed when the same content should appear across many products automatically.
Full-width layouts
The Countdown Banner block supports the editor's Wide and Full alignment options. Whether they take effect depends on your theme — block themes and most modern classic themes support them; older themes may constrain the block to the content column.
If your theme doesn't offer wide alignment, use the block's own Width (%) setting instead.
Performance
Each block's JavaScript and CSS load only on pages where that block is actually present. A page without any blocks loads nothing extra, and a page with only Shop the Look doesn't download the Countdown Banner code.
| Page | Extra assets loaded |
|---|---|
| No blocks | none |
| Countdown Banner only | ~20 KB |
| Shop the Look only | ~25 KB |
Both blocks are built with React. If you use an optimization plugin with JavaScript delay or combine features (LiteSpeed, WP Rocket, Perfmatters, SG Optimizer, Autoptimize), the plugin already registers the necessary exclusions automatically — you don't need to configure anything. Keep Sale Badges (the free plugin) updated alongside Pro, since those exclusion rules live there.
SEO and conversion checklist
Use the WooCommerce block editor to place one focused experience in the page flow: a Countdown Banner for a genuine promotion or Shop the Look for visual product discovery. Keep the page title, headings, product links, image alt text, offer details, and normal content intact so the block adds context without replacing the page’s indexable information.
Before publishing, preview each block on desktop and mobile, check keyboard and screen-reader access, confirm every product link opens the intended product, and verify that a countdown disappears after its real deadline. Use an embed when the same content needs automatic targeting or scheduling across multiple product pages. Track block views, CTA clicks, coupon uses, product-page visits, add-to-cart events, and completed orders to measure whether the WooCommerce promotional blocks support the page goal. Follow WordPress block editor guidance for the insertion workflow and keep product offer data accurate under Google’s Product structured data guidance.
Frequently Asked Questions
What are WooCommerce Gutenberg blocks?
WooCommerce Gutenberg blocks are manually placed Sale Booster components for WordPress pages, posts, and templates. The blocks folder includes Countdown Banner for timed campaigns and Shop the Look for shoppable lifestyle images.
What is the difference between a block and an embed?
A block is inserted at a specific location in the WordPress editor and applies to that page or post. An embed uses placement, targeting, conditions, and schedules to appear automatically wherever its rules match.
Are the WooCommerce promotional blocks available in the free version?
Countdown Banner and Shop the Look blocks are available in Sale Booster Pro. They can also be configured as embed types under Sale Badges → Embeds.
Can I use WooCommerce Gutenberg blocks in a template?
Yes. Insert a block into a compatible page, post, or block-theme template, then configure it from the block settings sidebar. Check the published template on desktop and mobile before making it live.