Counter Box Pro

Plugin Installation

Since it is the same procedure for every plugin, this tutorial does not explain how to install the plugin. If you need help with the plugin installation, please see the Install WordPress plugin  and Activate Pro plugin tutorial.

Main Settings

Main Settings

The plugin has two main modes:

Activated – If this mode is activated then the counter will be displayed on the page, otherwise, the counter will not be.

Test Mode – this mode allows only the administrator to see the counter on the frontend. The counter will not be visible to all other users.  In frontend testing mode, a button is available to reset data. It can only be used in certain types of meter.

The picture below shows the timer data reset button

Reset Timer data

 

Types of counter

Counter Box Main Settings

The plugin has 7 types of counter:

Countdown to date – the standard countdown to a specific set date. Can be used, for example as the countdown to Christmas

Count from date – countdown from a certain date. For example, how much time has passed since the founding of Google Corporation.

Countdown to weekday – сountdown to a specific time of the day of the week. This countdown will be updated the next day from the selected day of the week. This is a cyclical countdown. For example, can be used as the countdown until the weekly Friday party

Timer – the timer is set for a specific time and is reset after a page refresh. Can be used to motivate users to stay on the page for a certain amount of time.

Timer for each user – The timer will be set at a specific time for each specific user. As an example, it can be used to show a discount and hide it after the timer expires.

Timer Stop & Go – Sets the total time that the timer will count down for each user. After the user leaves the page, the timer will be stopped and after the repeated visit by the user, timer will continue from the place when the user left the page

Counter – counts down certain values. It can both increase and decrease. As an example, it can be used as social proof of purchases of goods by adding a certain quantity to goods at a certain time.

Content

Content

After the select type of counter, you can insert the short tag for displing: days, hours, minutes, and counter.

This tag are:

  • {day} – display of days count
  • {hour} – display of hours count
  • {min} – display of minutes count
  • {sec} – display of seconds count
  • {counter} – display of counter

You can add any content to the counter.

Also, you can edit the style for counter such as color, font, align uses the standard tools of WordPress editor

Style

Style

On the tab ‘Style’ you can add the style for numbers of the counter such as:

  • Width
  • Height
  • Border Radius
  • Background
  • Border Style
  • Border Thickness
  • Border Color

Also, you can add the titles for numbers and edit it styles and position

Targets

Targets

Once the counter reaches its final value, you can set triggers for it.

Once the counter reaches its final value, you can set triggers for it:

Hide block – Hides the block with the specified identifier that is present on the page. As an example can be used for hiding the discounted block after the counter expires.

Show block – Shows a hidden block on the page that has a CSS property display: none with a certain ID. As an example can be used for showing the discounted block after the counter expires.

Redirect – redirects the user to the specified page after the counter ends.

Function – runs the specified custom function. The function must be declared on the page where the counter is located

Hide the Counter Box – Hides the block of the counter itself after it has been signed

Show the message – Displays a message after the end of the counter

You can combine several different triggers for one counter

 

Display Rules

Display Rules

Display Rules allow you to set conditions for displaying the counter on the frontend. Display Rules has 3 options:

Schedule – showing the counter at a given time

User Role – Show counter based on user role

Site language – displaying a counter depending on the language of the site. Suitable for multi-language sites