---
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-04-09
author: "Aditya Sharma"
description: "Do you want to change the website content when the countdown timer ends? As a website owner, you should replace the offer content with the normal content once the offer..."
image: https://theplusaddons.com/wp-content/uploads/2024/01/How-to-Change-Website-Content-When-Countdown-Timer-Ends_-1024x536.jpg
word_count: 390
---

# How to Change Website Content When Countdown Timer Ends?

## Key Takeaways

- The Plus Addons for Elementor Countdown widget allows automatic content changes based on CSS class names when the countdown timer ends.
- Website owners can use the Countdown widget to display an offer pricing section during the countdown and switch to a normal pricing section afterward.
- Users must ensure that The Plus Addons for Elementor is installed and activated to utilize the Countdown widget features.

Do you want to change the website content when the countdown timer ends? As a website owner, you should replace the offer content with the normal content once the offer period is over, to provide the correct information.

With the Countdown widget from The Plus Addons for Elementor, you can automatically change the website content when the countdown timer ends in Elementor based on the CSS class name.

*To check the complete feature overview documentation of The Plus Addons for Elementor Countdown widget, [click here.](https://theplusaddons.com/docs//countdown-widget-overview-in-elmentor/)*

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

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

https://www.youtube.com/watch?v=RdPTAGc3PMY&t=404s

For instance, we have two pricing sections on a page, one with the offer or discounted price and the other with the normal price.

We’ve given a class name of “normal” for the normal pricing section and “offer” for the offer pricing section. We’ve added the class name in the CSS Classes section to the Container.

Also read, [you can show custom text message after countdown timer ends](https://theplusaddons.com/docs//show-custom-text-message-after-countdown-timer-ends/)

Now, add the Countdown widget to the page and follow the steps -   

1. Select **Normal Countdown **from the **Countdown Setup** dropdown.

> *Note: You can also change website content for the Scarcity Countdown (Evergreen) as well.* 

2. Then select the appropriate style and end date and time from the **Countdown Style** and **Launch Date** sections respectively.

Also read, [5 best WordPress countdown timer plugins.](https://theplusaddons.com/blog/best-wordpress-countdown-timer-plugins/)

3. Make sure not to select **Page Redirect Url **from the **Select Action** dropdown under the **Special Option** tab. So the page doesn’t redirect to a different page after the countdown ends. 

4. Then in the **During Countdown Class** field add the section class name that you want to show while the countdown timer runs. In our case, it will be “offer”.

5. Finally in the **After Expiry Class** field add the section class name that you want to show after the countdown timer ends. In our case, it will be “normal”.

Now while the countdown timer runs it will show the offer pricing section while hiding the normal pricing section. When visitors visit the page after the timer ends it will show the normal pricing section and hide the offer pricing section.

Also read, [how to redirect to different page after Elementor countdown ends.](https://theplusaddons.com/docs//redirect-to-different-page-after-elementor-countdown-ends/)

## Frequently Asked Questions

**Q: What should I do if the countdown timer doesn't change the website content?**
A: If the countdown timer isn't changing the website content, ensure that you've correctly set the class names in the CSS Classes section. For example, the class name for the offer section should be set to 'offer' and for the normal section to 'normal'. If these are not set correctly, the content will not toggle as expected.

**Q: What is the best way to set up the countdown timer for a limited-time offer?**
A: For a limited-time offer, set the countdown timer to display the offer pricing during the countdown by using the class name 'offer'. After the countdown expires, switch to the normal pricing by using the class name 'normal'. This setup ensures that visitors see the correct pricing based on the timer's status.

**Q: Does the countdown timer work with other page builders besides Elementor?**
A: The countdown timer from The Plus Addons for Elementor works exclusively with Elementor. It does not support other page builders like Gutenberg, Beaver Builder, or Divi. Ensure you are using Elementor to take advantage of this feature.