---
title: "How to Change Website Content When Countdown Timer Ends?"
url: https://theplusaddons.com/docs/change-website-content-when-countdown-timer-ends/
date: 2024-01-17
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "A page that still advertises a discount an hour after the discount ended does real damage. So does a full-price section sitting visible while the sale is still on. The..."
image: https://theplusaddons.com/wp-content/uploads/2024/01/How-to-Change-Website-Content-When-Countdown-Timer-Ends_-1024x536.jpg
word_count: 1023
---

# How to Change Website Content When Countdown Timer Ends?

## 

- The Countdown widget shows one section while the timer runs and a different section after expiry by using two CSS class names, such as sale-live and sale-over.
- Class Based Section Visibility is a Pro feature in The Plus Addons for Elementor Pro, while the Countdown widget itself is in the free plugin and needs Elementor installed and active.
- Style 1 swaps sections on page load after the timer ends, while Style 2 and Style 3 act the instant the timer runs out; Class Based Section Visibility works with Normal Countdown and Scarcity Countdown (Evergreen), but not with Style 3 or Fake Numbers Counter.
- Both During Countdown Class and After Expiry Class must be filled, and Elementor's element cache must be set to Inactive on the Countdown widget or disabled site-wide under Elementor > Settings > Performance.

A page that still advertises a discount an hour after the discount ended does real damage. So does a full-price section sitting visible while the sale is still on.

The **Countdown** widget can show one part of the page while the timer runs and a different part once it has finished, using two CSS class names you choose.

For the full settings tour of the **Countdown** widget, see [Countdown Widget: Settings Overview](https://theplusaddons.com/docs/countdown-widget-overview-in-elmentor/).

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

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/countdown-timer/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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:** **Class Based Section Visibility** 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](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Countdown** and turn its toggle on.- **Prerequisite:** two sections or containers on the same page — one for while the offer is live, one for after it ends.

## Steps

- Select the section you want shown *while* the countdown runs. In **Advanced > Layout**, put a class name in **CSS Classes**, for example `sale-live`.- Select the section for *after* the countdown and give it a different class, for example `sale-over`.- Select the **Countdown** widget and open **Content > Extra Option**.- Turn **Class Based Section Visibility** on.- Type `sale-live` into **During Countdown Class** and `sale-over` into **After Expiry Class**. Enter the names without a leading dot, and fill in **both**.- Publish and check the page.

Giving each section its own CSS class in Advanced > Layout.

Then tell the widget which class is which:

![Class Based Section Visibility with the During and After class fields.](https://theplusaddons.com/wp-content/uploads/2026/09/countdown-class-based.webp)

Turning on Class Based Section Visibility and entering the two class names.

## Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Class Based Section Visibility** | Turns the whole feature on. | Off |
| **During Countdown Class** | The class on the element shown while the timer is running. The other one is hidden. | Empty |
| **After Expiry Class** | The class on the element shown once the deadline has passed. | Empty |

## How It Behaves

Checked on published pages, three separate loads while the timer ran and two after it had expired:

- While the countdown is running, the **During Countdown Class** element is displayed and the **After Expiry Class** element is hidden. This was the same on every load and at every moment sampled.- Once the deadline has passed, a fresh page load reverses it: the during element is hidden and the after element is displayed.- The widget sets each element's `display` directly, so the hidden one is not rendered at all rather than merely made transparent.- It works with the **Normal Countdown** and the **Scarcity Countdown (Evergreen)** setups.

One section shown while the countdown runs and the other after the deadline has passed.

https://www.youtube.com/watch?v=RdPTAGc3PMY&t=404s
Countdown widget walkthrough, including the Class Based Section Visibility toggle.

## Limitations

- **With Style 1 nothing happens at the moment the clock hits zero.** This was watched on published pages: with **Style 1** the timer reaches **00 00 00 00** and stays there for as long as the visitor leaves the page open — the message, the template, the page redirect and the class swap all wait for the **next page load**. With **Style 2** and **Style 3** the same settings do act the instant the timer runs out. Since **Style 1** is the default, assume the change happens on reload unless you have deliberately chosen another style, and never write copy promising visitors that the page will change in front of them.- **Class Based Section Visibility does nothing with Style 3.** The feature is skipped for the **Style 3** preset, and it is skipped for the **Fake Numbers Counter** setup. Use **Style 1** or **Style 2** with **Normal Countdown** or **Scarcity Countdown (Evergreen)**.- **Both class fields must be filled.** If either **During Countdown Class** or **After Expiry Class** is left empty, no class data is written to the page at all and nothing is shown or hidden. Fill in both, even if one of the two sections is only ever a single element.- **One element per class.** The widget acts on the first element it finds with each class. If you need several blocks to appear together, put them inside one container and tag that container.- **The hidden section is still in the page source.** Its content is downloaded and simply not displayed, so do not use this to hide a price, a coupon or anything else that must not be seen.- **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

### Nothing is being shown or hidden

The usual cause is an empty field. **Both** **During Countdown Class** and **After Expiry Class** have to be filled in; with one blank, the widget writes no class information to the page at all. The second cause is **Style 3**, which skips the feature entirely.

### I typed the class with a dot and it did not work

Enter just the name, `sale-live`, not `.sale-live`. Elementor's **CSS Classes** field wants the same.

### The countdown ended in front of me and the sections did not swap

Reload the page. With **Style 1** the swap happens on page load, not at the moment the clock hits zero.

### Both sections are visible for a moment when the page loads

The swap is done by JavaScript after the page renders, so there can be a brief flash. Giving the after-expiry section `display: none` in your own CSS avoids it.

## Not verified

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

- **The Scarcity (Evergreen) setup driving the class swap.** The behaviour was measured with **Normal Countdown** and **Style 1**.- **More than one Countdown widget on a page**, each with its own pair of classes.

## Related Docs

- [How to Show an Elementor Template Section after Countdown Ends?](https://theplusaddons.com/docs/show-an-elementor-template-section-after-countdown-ends/)- [How to Show Custom Text Message After Countdown Timer Ends?](https://theplusaddons.com/docs/show-custom-text-message-after-countdown-timer-ends/)- [How to Redirect to Different Page After Elementor Countdown Ends?](https://theplusaddons.com/docs/redirect-to-different-page-after-elementor-countdown-ends/)- [Countdown Widget: Settings Overview](https://theplusaddons.com/docs/countdown-widget-overview-in-elmentor/)

## Frequently Asked Questions

**Q: What do I need before I can swap website content when a countdown ends?**
A: The setup depends on two sections or containers on the same page, one for the live offer and one for the expired state. The Countdown widget itself is in the free plugin, but Class Based Section Visibility is a Pro feature in The Plus Addons for Elementor. Elementor must also be installed and active, and the Countdown widget has to be enabled under The Plus Addons > Widgets.

**Q: Why is nothing being shown or hidden after I set up the countdown classes?**
A: The most common cause is an empty class field. Both During Countdown Class and After Expiry Class must be filled in, or the widget writes no class data to the page at all. Style 3 also skips this feature entirely, so it only works with Style 1 or Style 2. That makes this a setup issue, not a timing issue.

**Q: Does this countdown content swap work with Normal Countdown and Scarcity Countdown?**
A: The class swap works with both Normal Countdown and Scarcity Countdown (Evergreen). It was measured on published pages with Normal Countdown and Style 1, and the same feature is also supported in the Scarcity setup. The important limitation is that Style 3 is excluded, so the safe choices are Style 1 or Style 2 if you want section visibility to change.

**Q: Why did my sections not swap when the timer hit zero?**
A: With Style 1, the change happens on page load, not at the exact moment the clock reaches zero. That means if someone leaves the page open past expiry, the visible section will stay as-is until they reload. Style 2 and Style 3 behave differently at expiry, but Class Based Section Visibility is skipped for Style 3.

**Q: How do I stop both sections from flashing briefly when the page loads?**
A: The swap runs through JavaScript after the page renders, so a brief flash can happen before visibility is applied. The practical fix mentioned on the page is to set the after-expiry section to display: none in your own CSS. That reduces the flash without changing how the countdown logic decides which section should show.

**Q: What are the main limitations of changing content when a countdown ends?**
A: There are a few important ones: both class fields must be filled, only one element per class is acted on, and hidden content still exists in the page source because it is downloaded rather than removed. The page also says Elementor’s element cache should be turned off for this widget because cached markup can serve a stale deadline.