1. Documentation /
  2. Shipping Countdown

Shipping Countdown

Installation

↑ Back to top

Download, install and activate the extension.

It is strongly recommended you initially use a staging/development environment and test the extension before use on a production website.

If you haven’t already, connect your store to your WooCommerce account. This ensures you get extension update notifications when available.

Quick start guide

↑ Back to top
  • Perform the installation steps above
  • Go to WooCommerce > Settings > Shipping > Shipping countdown
  • Configure the display settings as you require or use the defaults
  • Configure the mode setting as you require or use the default, if changing this setting immediately save settings after
  • If using shipping class mode configure the shipping class settings as you require, for each shipping class (which has been created in WooCommerce > Settings > Shipping > Shipping classes) you’ll be able to enter specific settings for that shipping class, you can also configure settings for if a product has no shipping class
  • If using stock status mode configure the stock status settings as you require, for each stock status you’ll be able to enter specific settings for that stock status
  • Save settings
  • The shipping countdown will now appear on all products which match the mode specific settings you have set

Settings

↑ Back to top

Introduction

↑ Back to top

You can find the settings for this extension in WooCommerce > Settings > Shipping > Shipping countdown.

Countdown display

↑ Back to top

Configure the countdown display.

Configuring shipping countdown display settings
  • Automatic display
    • Displays the countdown automatically based on the mode specific settings below, it is displayed where your theme includes the automatic display hook set below. If you wish to display the countdown using the Shipping Countdown block or [wcsc_shipping_countdown] shortcode it is recommended you disable this setting.
  • Automatic display hook
    • The action hook used to display the shipping countdown when automatic display is enabled. If you are unsure what an action hook is for then leave this set to the default. To add additional action hooks for selection here use the wcsc_shipping_countdown_automatic_display_hooks_custom filter hook.
  • Variable products display
    • The countdown display method used for variable products. When the before option is used if all required options have not been selected the countdown is used from the parent product.
  • Styling
    • Applies the styling settings selected below, disable this setting if you want to style the shipping countdown from scratch using your own custom CSS. If you need to apply any additional gap between the shipping countdown and other elements in the page target the wcsc-shipping-countdown class which is available regardless of this setting.
  • Show if cart not empty
    • When enabled if the customer has products in their cart then countdowns remain displayed on products as they browse the store. You may wish to disable this if the countdowns no longer apply or are inaccurate when the customer is purchasing multiple items.
  • Show seconds
    • Displays the amount of seconds remaining until cut off time in the countdown.
  • Disable on specific dates
    • To disable the countdown on specific dates enter each date per line in YYYY-MM-DD format e.g. 2024-12-25. These are used in addition to any other disabled dates set.
  • Date format
  • Day text
    • Day text shown in countdown.
  • Days text
    • Days text shown in countdown.
  • Hour text
    • Hour text shown in countdown.
  • Hours text
    • Hours text shown in countdown.
  • Minute text
    • Minute text shown in countdown.
  • Minutes text
    • Minutes text shown in countdown.
  • Second text
    • Second text shown in countdown.
  • Seconds text
    • Seconds text shown in countdown.
  • Text color
    • Text color of the countdown.
  • Background color
    • Background color of the countdown.
  • Border color
    • Border color of the countdown.
  • Border style
    • Border style of the countdown.
  • Border size (px)
    • Border size of the countdown.
  • Border radius (px)
    • Border radius of the countdown.
  • Padding (px)
    • Padding of the countdown.
  • Font size (px)
    • Font size of the countdown.
  • Font style
    • Font style of the countdown.
  • Font weight
    • Font weight of the countdown.

Date/time offset

↑ Back to top

Configure the date/time offset for the shipping countdown.

Configuring shipping countdown date/time offset settings

If you have visitors from multiple time zones and/or if the shipping countdown seems inaccurate then set this to the UTC offset the times set further below and your WordPress time zone setting are based on.

Populating the offset will ensure the countdown is consistent across time zones. This setting must be populated in the format +01:00 or -01:00.

Mode

↑ Back to top

Configure the mode for the shipping countdown.

Configuring shipping countdown mode settings

If changing this setting immediately save settings after, the settings available below will change to be related to the mode selected.

Shipping class mode displays the countdown based on product shipping classes. Stock status mode displays the countdown based on product stock status.

Shipping classes

↑ Back to top

When the mode setting above is set to shipping class you will then see sections of settings to configure for each shipping class currently used on your store (created in WooCommerce > Settings > Shipping > Shipping classes).

The shipping countdown will be displayed on all products that have no or a specific shipping class set depending on the settings you apply for each shipping class.

Configuring shipping countdown settings for products which have no shipping class
  • Enable
    • Enable the countdown for available products (in stock, have price) for the shipping class
  • Text
    • Use [countdown] to display the countdown and [date] to display the date customer will receive their order or date being shipped (depending on text used) based off the shipping days set below. HTML can be used if required e.g. to add a link. If your visitors may be from different time zones it is recommended you consider all potential time zone scenarios before including [date] if you are using it to display a receive date.
  • Text fallback
    • Text shown when there is no countdown to display, e.g. when cut off time exceeded and/or roll over unavailable. Note that [countdown] and [date] are unavailable for the text fallback. Set to empty to disable.
  • Disable on specific dates
    • To disable the countdown on specific dates enter each date per line in YYYY-MM-DD format e.g. 2024-12-25. These are used in addition to any general disabled dates set.
  • Roll over
    • If cut off for current day has expired use the following day cut off.
  • Cut off time (setting provided for each day of the week)
    • Countdown to this time on this day. To disable the countdown on this day remove the time using the delete key on hours/minutes/am/pm.
  • Shipping days (setting provided for each day of the week)
    • Number of days from this day for shipping, this is used to calculate the expected date the customer will receive their order displayed in the countdown. Use 0 for same day.

Stock statuses

↑ Back to top

When the mode setting above is set to stock status you will then see sections of settings to configure for each stock status.

The shipping countdown will be displayed on all products that have a specific stock status set depending on the settings you apply for each stock status.

Configuring shipping countdown settings for products which are in stock
  • Enable
    • Enable the countdown for available products (in stock, have price) for the stock status
  • Text
    • Use [countdown] to display the countdown and [date] to display the date customer will receive their order or date being shipped (depending on text used) based off the shipping days set below. HTML can be used if required e.g. to add a link. If your visitors may be from different time zones it is recommended you consider all potential time zone scenarios before including [date] if you are using it to display a receive date.
  • Text fallback
    • Text shown when there is no countdown to display, e.g. when cut off time exceeded and/or roll over unavailable. Note that [countdown] and [date] are unavailable for the text fallback. Set to empty to disable.
  • Disable on specific dates
    • To disable the countdown on specific dates enter each date per line in YYYY-MM-DD format e.g. 2024-12-25. These are used in addition to any general disabled dates set.
  • Roll over
    • If cut off for current day has expired use the following day cut off.
  • Cut off time (setting provided for each day of the week)
    • Countdown to this time on this day. To disable the countdown on this day remove the time using the delete key on hours/minutes/am/pm.
  • Shipping days (setting provided for each day of the week)
    • Number of days from this day for shipping, this is used to calculate the expected date the customer will receive their order displayed in the countdown. Use 0 for same day.

Product page

↑ Back to top

When a product meets the shipping class/stock status specific settings the shipping countdown will display on the product page. It will display using the styling settings applied in the display settings.

Shipping countdown displayed on a product page

Custom development

↑ Back to top

The following information is provided for custom development purposes for web developers, they are useful if you wish to add custom features or modify how the extension works. As per the WooCommerce support policy we cannot offer any support for your use of these custom development features.

Filter hooks

↑ Back to top
Filter hookDescription
wcsc_shipping_countdown_automatic_display_hooks_customArray of custom action hooks to include in the automatic display hooks selection setting

BETA functionality

↑ Back to top

We may occasionally include BETA functionality, this is highlighted with a (BETA) label. Functionality with this label should be used with caution and is only recommended to be tested on a staging/development environment. The functionality is included so users can test the functionality/provide feedback before it becomes stable, at which point the (BETA) label will be removed. Note that there may be occasions where BETA functionality is determined unsuitable for use and removed entirely.

Caching

↑ Back to top

If you are using any form of caching then it is recommended that the cache lifespan/expiry should be set to 10 hours or less. This is recommended by most major caching solutions to avoid potential issues with WordPress nonces.

Screen sizes

↑ Back to top
  • Frontend: Where elements may be displayed they will fit within the screen width
  • Backend: Where interfaces may be displayed it is recommended to use a desktop computer with a resolution of 1920×1080 or higher, for lower resolutions any interfaces will attempt to fit within the screen width but some elements may be close together and/or larger than the screen width

Translation

↑ Back to top

We generally recommend Loco Translate to translate and/or adapt text strings within this product.

Works with

↑ Back to top

Where we have explicitly stated this product works with another product, this should only be assumed accurate if you are using the version of the other product which was the latest at the time the latest version of this product was released. This is because, while usually unlikely, the other product may have changed functionality which effects this product.

FAQs

↑ Back to top

I have enabled automatic display but the shipping countdown is not displaying?

↑ Back to top

Firstly, check that your shipping class/stock status settings should result in the shipping countdown being displayed, remember to enable the shipping countdown for the specific shipping class/stock status (the first setting of these is to enable it). If you are using the automatic display setting it could be an issue that your theme is not including the automatic display hook you selected in settings. If so try selecting an alternative automatic display hook or disable the automatic display setting and then include the Shipping Countdown block or [wcsc_shipping_countdown] shortcode in your product page template.

The countdown is inaccurate or does not roll over?

↑ Back to top

Ensure your WordPress time zone setting in Settings > General is correct, then use the equivalent date/time offset setting in WooCommerce > Settings > Shipping > Shipping countdown.

How can I apply custom CSS to the countdown?

↑ Back to top

If you inspect the countdown in your browser development tools, you’ll see that the countdown has several elements with classes which can be targeted for CSS styling. The classes start with the wcsc-shipping-countdown prefix.

Does it work with variations that have specific shipping classes/stock statuses?

↑ Back to top

Yes, for variable based products which have different shipping classes/stock statuses set on the variations the shipping countdown is based on the variation shipping class/stock status, if not set it uses the parent variable product’s shipping class/stock status.

Does it display before all required variation options are selected?

↑ Back to top

You can choose whether the countdown appears immediately or should only appear once all required options are set, see the variable products display setting for further information.

Does it work with WooCommerce Subscriptions?

↑ Back to top

Yes, it works with both simple and variable subscription based products.

Can I use automatic display with a custom hook?

↑ Back to top

Yes, use the wcsc_shipping_countdown_automatic_display_hooks_custom filter hook to add your own custom hook for selection in the automatic display hook setting. See the filter hooks section above for further details.

Is it compatible with a specific theme?

↑ Back to top

This extension will generally be compatible with most themes. There may be a small number of themes that are fully or partially incompatible due to clashes in functionality and/or if the theme has removed or adapted core WooCommerce functionality. If you would like to know if a specific theme will be compatible before purchase then please contact us and we can advise, it may not be possible for us to determine this e.g. if the theme requires a license and/or several configuration steps. In this scenario you are welcome to purchase and test this extension with the theme and if there is a a compatibility issue you can take advantage of the refund policy for this extension.

Is it compatible with a specific extension/plugin?

↑ Back to top

This extension will generally be compatible with most extensions/plugins. There may be a small number of extensions/plugins that are fully or partially incompatible due to clashes in functionality and/or if the extension/plugin has removed or adapted core WooCommerce functionality. If you would like to know if a specific extension/plugin will be compatible before purchase then please contact us and we can advise, it may not be possible for us to determine this e.g. if the extension/plugin requires a license and/or several configuration steps. In this scenario you are welcome to purchase and test this extension with the other extension/plugin and if there is a a compatibility issue you can take advantage of the refund policy for this extension.

Is it compatible with a specific page builder?

↑ Back to top

This extension will generally be compatible with most page builders. There may be a small number of page builders that are fully or partially incompatible due to clashes in functionality and/or if the page builder has removed or adapted core WooCommerce functionality. If you would like to know if a specific page builder will be compatible before purchase then please contact us and we can advise, it may not be possible for us to determine this e.g. if the page builder requires a license and/or several configuration steps. In this scenario you are welcome to purchase and test this extension with the page builder and if there is a a compatibility issue you can take advantage of the refund policy for this extension.

Support

↑ Back to top

If you need any further assistance with this extension please contact us. Please note that extension support does not include providing assistance with any custom development requirements as per the WooCommerce support policy.