OxyElements

Sale Countdown Woo

Projects info
EXAMPLE:

Timeless and elegant modular sofa (SALE)

$45.00
save
The iPad Pro is a magical piece of glass. It has pro cameras that can transform reality. You can use it with touch, pencil, keyboard and now trackpad.
Introduction:
Sale Countdown Woo is a dynamic element designed to display a countdown timer for products on sale based on WooCommerce sale dates. It integrates seamlessly with Oxygen Builder, enhancing product visibility and urgency for shoppers.
Installation:
1- Woo Fields Function:
It is crucial to integrate the Woo Fields feature, which allows for versatile functionality beyond this element. This feature powers a lot of additional features including the Sale Countdown Woo element.
2- JSON Import to Oxygen Builder: 
Import the following JSON code into Oxygen Builder to add the Sale Countdown Woo element
Refer to this guide for instructions on importing JSON into Oxygen Builder if needed.
Usage:
  1. Simply place the element named "Code Sale Countdown Timer" in your global template to ensure it runs across your site.

  2. Inside the "Element Countdown" element, identify the div named "Content Countdown" and place it within your WooCommerce product repeater or single page.

  3. Enter a sale date for a simple or variable product, and the countdown will appear accordingly.
Customization:

The element is structured around a container with the class x-count and key attributes:

  • data-count-year: Extracts the expiration year from Woo Fields.
  • data-count-mo: Extracts the month.
  • data-count-day: Extracts the day.

These attributes are essential for the element's functionality. Additionally, the element includes conditional logic to display the countdown only if the product is on sale and if the sale date is specified.

Within the x-count container, modify the countdown display using classes like x-count__days, x-count__hours, x-count__mins, x-count__secs. Customize the CSS as needed to fit your design.

Advanced:
For advanced users: adjust date calculations within the "Code Sale Countdown Timer" element. You can modify lines such as
parseInt(container.getAttribute("data-count-mo")) - 1 
parseInt(container.getAttribute("data-count-day")) + 0
to accommodate specific WooCommerce settings, if necessary.
Furthermore, leverage other Woo Fields to conditionally display additional data. Refer to the usage section in point 2 for more details on how to implement this functionality.
Thanks for visiting my page
CLOSE
If any of my work works for you, you can help me continue generating content by making a donation from PayPal: Donate
If you want a special project or modify some of my projects you can send me the details of your project and budget by Messenger  (There is no low budget)