Skip to content

How to Add WooCommerce Product Stock Scarcity Timer in Elementor? (X Item Left)

Table Of Content

“Only 12 left” moves people in a way that a price never does. The catch is that real stock numbers rarely move fast enough to create that feeling.

The Countdown widget’s Fake Numbers Counter shows a number that walks steadily from one value towards another, wrapped in a sentence you write.

For the full settings tour of the Countdown widget, see Countdown Widget: Settings Overview.

Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.

Before You Start

  • Edition: the Countdown widget itself is in the free plugin, but this page uses a Pro setting (see the next line).
  • Pro feature: Fake Numbers Counter and everything in this page is part of The Plus Addons for Elementor Pro. In the free plugin the control is either missing or replaced by an upgrade notice.
  • Prerequisite: Elementor (free) installed and active.
  • Widget to enable: go to The Plus Addons > Widgets, search for Countdown and turn its toggle on.
  • Prerequisite: WooCommerce installed and active, with at least one product.
  • Be honest with your customers. This counter is not connected to your stock. It is a presentation device, and in several markets presenting an invented stock figure as a real one is unlawful. Use wording you would be comfortable defending.

Steps

  1. Add the Countdown widget where the stock line should appear.
  2. In Content > Layout, set Countdown Setup to Fake Numbers Counter. The Countdown Style and Launch Date controls disappear — this is a counter, not a clock.
  3. Open Content > Extra Option.
  4. Set Initial Number (where it starts), Final Number (where it stops), Number Range (the biggest random step) and Change Interval (In Seconds) (how often it steps).
  5. Write your sentence in Fake Message, putting {visible_counter} where the number belongs — for example Only {visible_counter} left in stock.
  6. Publish and watch it on the front end.
The fake numbers counter settings in the extra option section.
Setting up the Fake Numbers Counter in the Countdown widget.

Settings

SettingWhat it doesDefault
Initial NumberThe value shown when the page loads.500
Final NumberThe value it stops at.99
Number RangeThe largest random step taken each interval. With 5 it drops by one to five at a time.10
Change Interval (In Seconds)How often it steps.1
Fake MessageThe sentence around the number. {visible_counter} is replaced by the current value.Showing {visible_counter}
Enable LoopWhen the counter reaches Final Number, start again from Initial Number.On
Track User DataYes(Local Storage Based) keeps the number where this visitor left it instead of restarting at Initial Number on every page load.No

How It Behaves

Measured on a published page with 60 down to 8, range 5, one-second interval. Eight readings taken 1.2 seconds apart:

  • Only 55 left in stock, then 53, 51, 47, 46, 43, 42 and 40 — eight different values, dropping by a random amount between one and five each time.
  • The number is wrapped in its own element, so you can style it separately under Style > Fake Number while the sentence uses Style > Fake Message.
  • With Track User Data left on No, the counter starts again at Initial Number every time the page is loaded.
The fake stock counter rendered on a published page.
The stock counter ticking down on the front end.

A walkthrough of the same setup:

Youtube video
Countdown widget walkthrough, including the Fake Numbers Counter setup.

Limitations

  • It is not your real stock. Nothing connects this counter to WooCommerce inventory. Two visitors can see different numbers at the same moment, and the number can go back up when the loop restarts.
  • Get the placeholder exactly right. It is {visible_counter}. Anything else — {visible}, {counter} — is printed on the page as literal text with no warning, which is how it looks to your customers too.
  • No Countdown Style applies. The three style presets are hidden for this setup; the look comes entirely from the Fake Number and Fake Message style sections.
  • The steps are random, not smooth. Number Range is an upper bound on each step, so the countdown is jumpy by design.
  • Turn Elementor’s element cache off for this widget. Elementor’s Element Cache is on by default and stores rendered markup for a day, which can serve a stale deadline. Set Advanced > Layout > Cache Settings to Inactive on the Countdown widget, or disable it site-wide under Elementor > Settings > Performance.

Troubleshooting

The page literally shows {visible_counter} or {visible}

The token must be {visible_counter}, spelled exactly, with the braces. An unrecognised token is printed as-is.

The number does not move

All four numeric fields have to be greater than zero — Initial Number, Final Number, Number Range and Change Interval (In Seconds). If any of them is zero or empty, the widget does not render the counter.

It resets to the starting number whenever I reload

Set Track User Data to Yes(Local Storage Based).

I want the number to go up instead of down

Set Initial Number lower than Final Number. The widget counts in whichever direction the two values imply.

Not verified

So you know exactly what has and has not been checked:

  • Enable Loop restarting the counter after it reaches Final Number. The eight readings taken did not reach the end.
  • Track User Data = Yes(Local Storage Based) for the fake counter specifically. It was verified for the evergreen timer, not for this one.
  • Placement inside a real WooCommerce product template. The counter was measured on a published Elementor page; building a product template needs a theme builder, which is not part of this widget.

Related Docs

Related Frequently Asked Questions

Related Docs