Create countdown timer

Step 1:

First, you need to create a timer countdown then you can use it in the product or anywhere in WordPress.

Step 2. Setting create timer countdown

You need to attention to the following important settings:

  • Type countdown timer: There are 3 types

    • Only timer in WordPress: This type helps you to only display the timer in WordPress (anywhere shortcode is supported) by shortcode.

    • Bar timer in WordPress: This type helps you to only display the bar timer countdown in WordPress (anywhere shortcode is supported) by shortcode.

    • Timer in WooCommerce: This type helps you to display the timer countdown in WooCommerce products. In product or setting, you choose timer countdown when created timer countdown.

Only timer in WordPress

Bar timer in WordPress

Timer in WooCommerce

Setting in type "Only timer in wordpress"

  • Style: You have 6 styles of the countdown timer

  • Date from, Date to for timer countdown to work. if date from is greater than current time then date from will be used for timer countdown to work. If date from is less than current time and date to is greater current time then date to will be used for timer countdown to work. If current time is greater date to or empty date from, date to timer count down will not display.

  • Label Days: You can change text day

  • Label Hours: You can change text hour

  • Label Minute: You can change text minute

  • Label Seconds: You can change text seconds

  • Size countdown timer: Change size of countdown timer. You have 3 size: small, mediu and large

  • Margin bottom timer: margin bottom of timer countdown. Example insert input: 20px

  • Color main: you can change olor main of timer countdown depending on type timer coundown(background color or border color,...)

  • Color timer: You can change color number time of timer countdown

  • Color label: You can change color label (Days, hours, minute, second)

  • Background color label: You can change background label (Days, hours, minute, second)

Setting in type "Bar timer in wordpress"

  • Style: You have 6 types of the countdown timer.

  • Title: You can change text title of timer countdown bar

  • Text Button: You can change text button of timer countdown bar

  • Link Button: You can change link Button of timer countdown bar.

  • Padding top bottom bar: You can change padding top and padding bottom (increase height bar). Example: 20px

  • Padding left right Bar: You can change padding left, padding right bar timer countdown

  • Background color bar: You can change background color bar

  • Font size title bar: Change font size title bar. Example: 20px

  • Width title: Change width title by %. Example: 50%;

  • Color title: Change color title of bar timer countdown

  • Font size button: Change font size of button bar timer countdown

  • Width button, Height button: You can change width and height button in bar timer countdown by px. Example: 100px

  • Color button: You can change color button in bar timer countdown

  • Background color button: You can change background color button timer countdown.

  • Color button hover: Change color button when hover mouse

  • Background color button hover: Change background color button when hover mouse

  • Other setting: Like setting of type Only timer in wordpress

Setting in type "Timer in WooCommerce"

  • Style: You have 6 types of the countdown timer.

  • Message upcoming: Text display when product upcoming sale

  • Message onsale: Text display when product on sale.

  • Label Days, Label Hours, Label Minute, Label Seconds, ... like setting of type Only timer in WordPress.

  • Margin top message: You can change margin top message. Example: 20px

  • Margin bottom message: You can change margin bottom message. Example: 20px

  • Font size message: You can change font size message

  • Color message: You can change color message

  • Margin bottom bar: You can change margin bottom bar. Example: 20px

  • Font size bar: You can change font size text bar. Example: 20px;

  • Color bar: You can change color text bar

  • Height bar: You can change height bar

  • Background Color bar: you can change background bar

  • Background color bar (sold): You can change background color bar sold

Last updated