How to Display Sale End Date with the Dynamic Tag
This tutorial explains how to display the sale end date for WooCommerce products using dynamic tags and JetEngine tools to get WooCommerce data. It describes adding the Countdown Timer widget to the WooCommerce listings and hiding the timer for products not on sale using the dynamic tags.
Adding the Countdown Timer Widget
Navigate to the JetEngine > Listings tab and open the listing template with applied dynamic tags (here, Products_listing_items). Open the listing template and drag and drop the Countdown Timer widget where needed.
![countdown timer widget adding](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/countdown-timer-widget-adding-1x.png)
Navigate to the General settings and turn on/off the appropriate toggles for the timer format displaying.
![general settings of the countdown timer widget](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/general-settings-of-the-countdown-timer-widget-1x.png)
Countdown Timer Widget Settings
Navigate to the Settings tab of the Countdown Timer widget. Press the “Dynamic Tag” button and select the WooCommerce Product Field option from the drop-down menu.
![due date setting of the countdown timer widget](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/due-date-settings-of-the-countdown-timer-widget-2x.png)
Select the Date on Sale to option in the appeared Settings field. This field allows setting the terms of the promotion.
![adding woocommerce product field to countdown timer widget](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/adding-woocommerce-product-field-to-countdown-timer-widget-2x.png)
If necessary, customize the widget appearance.
Press the “Update” button to save changes.
Adding the Heading Widget
Find the Heading widget and drag and drop it to the listing item. Add the text (here, Sales ends in) and style it if necessary.
![heading widget settings](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/heading-widget-settings-1x.png)
Press the “Update” button to save changes.
Open the page with the Listing Grid widget with the Listing Item applied as a source (Products_listing_items).
The front-end view of the page is as follows:
![front-end view of a page with countdown timer](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/frontend-view-of-page-with-timer-1x.png)
The main issues here are:
- the countdown timer is displayed for all products;
- the countdown timer shows zeros for all products regardless of the specified or not sale end date.
Sale Time Scheduling
Navigate to the front end of the Listing Grid widget with the Listing Item applied as a source (Products_listing_items). Click on any book with the sale price. Open this book in a new tab.
Press the “Edit” button.
![cpt edit button](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/cpt-edit-button-1x.png)
Scroll down and find the Settings tab.
![sale end date schedule settings](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/sale-end-date-schedule-settings-1x.png)
Press the “Schedule” link.
![sale end date settings of cpts](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/sale-end-date-schedule-link-1x.png)
These charges refer to the current product only. Therefore you need to edit other products and add the sale end date.
![front-end view of countdown timer with a set date](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/frontend-view-of-timer-with-set-date-1x.png)
Scroll the product page up and press the “Update” button. Update the front-end view of the listing grid.
Edit all products and schedule their sales end date.
![front-end view of counter timer with different dates](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/frontend-view-of-timer-with-different-dates-1x.png)
Settings to Hide the Counter
Here the Dynamic visibility conditions were applied to hide the counters for products not on sale.
Open the listing template with applied dynamic tags (here, Products_listing_items).
Click the Timedown Counter widget settings and unroll the Dynamic Visibility settings of the Advanced tab.
Move the Enable toggle. Select the Show element if condition met option from the Visibility condition type drop-down menu.
Choose the Greater than condition from the Conditions menu. This condition checks that the promotion end date exceeds the current time.
Press the Dynamic Tag and select the WooCommerce Product Image option from the drop-down menu.
![dynamic visibility settings of countdown timer](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/dynamic-visibility-settings-of-countdown-timer-2x.png)
Type now in the Value text field. Select the Default option from the Context drop-down menu and the Datetime option from the Data type drop-down menu.
![value field of countdown timer](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/value-field-of-countdown-timer-2x.png)
Apply the same Dynamic Visibility conditions to the Heading widget to hide its text (here, Sales ends in).
Press the “Update” button and refresh the page with the listing grid.
![front-end view of page timer with hidden dates](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/03/frontend-with-of-page-timer-with-hidden-dates-1x.png)
That’s about displaying WooCommerce products’ sale end date with dynamic tags.