General information about the plugin #
The Sale Countdown Timer Builder plugin by Develux provides additional functionality for your online store, enhancing the standard product card and product page capabilities.
In all online stores built on WooCommerce, product cards are displayed on the following pages:
- Catalog
- On the product page (Upsells)
- On the cart page (Cross-sells)
- May also be displayed on other pages if implemented in the site theme
If your WooCommerce theme has not modified the standard generation of product cards and pages, the full functionality of the plugin will be available. Otherwise, only part of its features will be accessible.
With this plugin, you can perform the following actions:
- Create a countdown timer for discounted prices or other promotions
- Work with the bulk manager, which allows you to assign timers using WooCommerce categories and tags, as well as include or exclude specific products
- Create your own library of timers
Plugin compatibility #
The plugin is designed to provide additional functionality for your online store built on WooCommerce. It is not compatible with other e-commerce platforms. Our plugin works correctly with WordPress themes developed for WooCommerce, following all requirements and recommendations of the WooCommerce/WordPress developer guidelines.
Important! Our plugin uses standard WooCommerce/WordPress hooks and filters. If your theme or other plugins modify the default behavior of these hooks/filters, the plugin may not function correctly!
Important! Our plugin uses the standard jQuery/jQuery UI library. If your theme or other plugins modify or disable these libraries, the plugin may not function correctly!
Installation and configuration #
The plugin is installed using the standard method provided in WordPress.
In the admin panel, you need to go to the Add New Plugin page.
Using the Upload Plugin button, upload the plugin’s zip archive.
After the plugin installation, it will be ready for use immediately. Additionally, after installation, you will receive ready-to-use elements in the label and timer library.
Creating and customizing/styling a unique timer for a product #
The timer is used for the countdown until the discount ends
At first, add Regular, Sale prices, and Sale price dates in the schedule
After completing these steps, click the ‘Update’ button and go to the Timer tab. All settings will be activated
Turn on the ‘Display timer’ toggle, and the default timer will appear
If you want to create your own timer, turn on ‘Use this timer’ toggle
Timer title
Timer title – field for inserting the title for the timer
Font size – sets the font size for the timer title
Font Weight – sets the text weight for the timer title
Style – sets the text style for the timer title
Font Color – sets the text font color
Text Align – align the text on the left, right, or center
Day field name / Hour field name / Minute field name / Second field name – fields for inserting the names of day, hour, minute, and second. These can also be left empty
BG Image for timer
Upload button – allows to upload the image for timer background
BG Repeat option controls whether the background image repeats. You can choose from the following options:
- Repeat – background image will repeat both horizontally and vertically
- No repeat – background image will not repeat
BG Size specifies how the background image is scaled. It can be set to:
- Cover – background image will cover the entire container, scaling up or down as needed to fill the space while maintaining its aspect ratio
- Contain – background image will scale to fit the container, ensuring the entire image is visible without cropping, while maintaining its aspect ratio
- Revert – resets the background size to its default or original setting, undoing any custom adjustments made previously
BG Position specifies the placement of the background image relative to the container’s edges. Common values for BG Position include:
- Top – aligns the image to the top of the container
- Bottom – aligns the image to the bottom of the container
- Left – aligns the image to the left side of the container
- Right – aligns the image to the right side of the container
- Center – aligns the image to the center of the container
Timer Containers Styles
Timer location specifies the placement of the timer on the card. It can be set to:
Before product card
After product card
Before product title
After product title
Turn on ‘Display animation‘ allows the timer to animate its countdown. It is displayed only in the square for seconds.
Font size – sets the size for the timer numbers
Style – sets the style for the timer numbers
Font Weight – sets the text weight for the timer numbers
Font Color – sets the number color
Border radius – sets the roundness of the number’s square corners
Width – sets the width of the number’s squares
Height – sets the height of the number’s squares
Gap – sets the space between the number’s squares
Margin Top – sets the outer space between the container top and the number’s squares
Margin Bottom – sets the outer space between the number’s squares and the container bottom
Background color – sets the number’s squares background
Container margin Y – sets outer space between elements in a vertical direction
Container padding top – sets inner space between the container’s top edge and its content
Container padding bottom – sets inner space between the container’s bottom edge and its content, pushing the content upwards
Container padding X – sets the horizontal inner space between the container’s left and right edges and its content
Container width – sets the width of container
Container Vertical Position – sets the placement of a container element along the vertical axis
Wrapper Layer order – sets the stacking order of elements, with elements having lower values placed below those with higher values
Wrapper Background color – sets the color of the wrapper background
Wrapper Padding – sets the inner space in the wrapper, creating space between the wrapper’s edges and its content
Wrapper Width – sets the width of wrapper
Wrapper Top – sets the distance from the top of the wrapper to the other elements
Wrapper Margin Bottom – sets the distance between the bottom of the wrapper and the element that follows it
#
Library of timers #
The library of timers allows to create timers for the custom cards and assign them to multiple products at once.
You can read more details about creating timers here
Timer location
In some themes, the “Before product title” position in the timer is only displayed when hovering over the image because the theme’s layout places the title area in a custom block with absolute positioning.
Animated timer
Some themes may affect the Display animation timer settings
In such cases, a regular timer should be used
