fbpx

Create A Countdown To Display Your Discount Offer With Style

Every Online Store uses Discount Offers to attract new customers or retain existing ones. But how do you inform your customers about the offer? News-letters might not be the answer. It is better to use countdown for WordPress websites. In fact, add a timer at the top of the product page itself which will keep count of every second before your discount deal runs out.

Create A Countdown To Display Your Discount Offer With Style 1

Countdown For WordPress

Imagine that its Christmas time and you want to offer a discount deal to your customers. Let’s include a timer that reminds your buyers of the time remaining before the deal runs out.

To add the timer you need Elementor and Essential Add-ons for Elementor. 

You can get clear documentation on how to add Elementor and Essential Add-ons to your WordPress website on their official website.

Create A Timer for Your Online Store

Create A Countdown To Display Your Discount Offer With Style 2

Open your WordPress Dashboard and enter the Elementor Builder Interface. From the side panel, select EA CountDown element.

Create A Countdown To Display Your Discount Offer With Style 3

Drop it inside the Blank Canvas area and the customization options will automatically appear in the side panel. But, if it doesn’t appear, simply click over the EA CountDown element that you just dropped inside the Elementor interface.

First, you need to specify the time until which you want to offer a discount. Head over to the side panel>Content. 

Create A Countdown To Display Your Discount Offer With Style 4

Now, click on the Countdown Due Date field to open the pop-up that you see above.

  1. Use the middle and side arrows to specify a certain date. Pick a Month and a Year.
  2. Use the boxes to specify the exact hour, minute and second in time.

As soon as you specify the date and time, it will be updated inside the Elementor Interface. Okay, so we are done with half of the work.

Now head over to the Content Settings Tab. From the first option pick a Countdown style for the element. The EA Countdown uses separate areas to display Days, Hours, Minutes and Seconds. Inside the Content Settings Tab, you will see 4 toggle buttons to turn on/off any of the measurement units.

Create A Countdown To Display Your Discount Offer With Style 5

Change the Labels On The Timer

Similarly, under each toggle bar, you will see text fields. Use them to change the label of the Countdown. There are four labels-Days, Hours, Minutes and Seconds. The labels are given by default. But suppose you want to add the word ‘Remaining’ after every label text. Just click on the label text field and add the word Remaining.

Create A Countdown To Display Your Discount Offer With Style 6

Now you might want to change the color and typography. Head over to the Style section> Color and Typography.

Create A Countdown To Display Your Discount Offer With Style 7Once you are happy with the design of the Countdown box, hit Publish.

Create A Countdown To Display Your Discount Offer With Style 8

Limitless Possibilities

Every Essential Addon element contains its customization options inside the same side panel as any other Elementor element. However, the difference lies in the slight difference between the available customization options.

Create A Countdown To Display Your Discount Offer With Style 9

You can build jaw-dropping website designs without seeking help from your developer friend. In fact, after you have mastered Essential Addons for Elementor, your web design will become subject to the envy of your developer friends.

Create A Countdown To Display Your Discount Offer With Style 10

Wrapping Up!

Are you new to Drag and Drop Page Building for WordPress? Well, there is no need to worry. You can learn the tricks of using Elementor and Essential Addons overnight. Do let us know if this blog helps you to add a timer to your WordPress website. And do drop a comment below for further queries.

In the meantime here is a quick blog on how to add a Content table inside your WordPress website.

Picture of Afshana Diya

Afshana Diya

Afshana Diya is CMO at WPDeveloper. She is helping the company to create a dynamic team and sustainable business from the scratch. When she is offline from the digital world, she must be traveling to find natural beauty in remote places.

Share This Story

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.