How to set it up

Here you can learn how to set the countdown up for an example product.

1. If you have not yet installed the plugin

  1. Please follow the instructions in the documentation that was delivered with the plugin to install it
  2. Then activate the plugin
  3. Make sure that WooCommerce is installed correctly.
  4. If the plugin does not work, please refer to the Product Countdown FAQ page and check the plugin requirements.

2. Configure the plugin

  1. Log-in to your WordPress administration panel
  2. Go to “WooCommerce” and click on “Countdown”:

    Product Countdown Settings
    Click on “WooCommerce” and then on “Countdown”

  3. Then activate the checkbox where it says “Show Fade-In helper”:

    Product Countdown Fade-In Helper
    Check the checkbox for the Fade-In Helper

  4. Optional: Fill in your purchase code to get automatic updates. Click here if you want to know where you can find your purchase code.
  5. Save your settings.

3. Prepare a WooCommerce product

  1. Log-in to your WordPress administration panel
  2. Go to “Products” and edit one of your WooCommerce products

    WooCommerce products menu in WordPress
    Choose “Products” from your WordPress administration panel

  3. Scroll down to the “Product Data” screen and select “General”:

    Scroll down to the “Product Data” screen

  4. Set a “Sales Price” and click on “Schedule” (Please note that the sales price have to different from the regular price. Otherwise WooCommerce will not mark the product “for sale”):

    WooCommerce Sales Price
    Schedule the sales price

  5. Then choose the period where the sales price should be active
  6. Save your product settings

4. Activate the countdown on a product

  1. Log-in to your WordPress administration panel
  2. Go to “Products” and edit one of your WooCommerce products:

    WooCommerce products menu in WordPress
    Choose “Products” from your WordPress administration panel

  3. Scroll down till the “Product Countdown Settings” appear:

    Product Countdown page settings
    Product Countdown page settings

  4. Set it to “ON” to activate the countdown.
  5. Set the info-text that is displayed together with the countdown. The standard-text is “Hurry up! The price rises in”
  6. Optional: You can use the following placeholders:
    • $sales_price: To display the sales price in the info text
    • $price: To display the normal price in the info text
    • For example, you can write: “Hurry up! The price rises to $price in:”. The variable $price will then be replaced with the normal price.
  7. Optional: Choose “Fade-in” position. You can set a position when the countdown should appear on a page. Please read section #6 on this page to learn more about this.
  8. Save your settings.
  9. View your product page and see whether the countdown appears and how it looks like. Please note that it only appears when it’s in the period you’ve chosen on your product page (see section #3).

5. Activate the countdown on a page for a product

Of course sometimes it necessary to promote a product not only on the product page but on a landingpage as well.

  1. At first, follow the steps on section #3 (Prepare a WooCommerce product).
  2. Then go a page, a post or a custom post type you promote your product, too. In this example we edit a normal WordPress page.
  3. Scroll down till the “Product Countdown Settings” appear:

    Product Countdown Settings on a page
    Product Countdown Settings on a page

  4. Set it to “ON” to activate the countdown.
  5. Select a product from the dropdown menu.
  6. Set the info-text that is displayed together with the countdown. The standard-text is “Hurry up! The price rises in”
  7. Optional: You can use the following placeholders:
    • $sales_price: To display the sales price in the info text
    • $price: To display the normal price in the info text
    • For example, you can write: “Hurry up! The price rises to $price in:”. The variable $price will then be replaced with the normal price.
  8. Optional: Choose “Fade-in” position. You can set a position when the countdown should appear on a page. Please read section #6 on this page to learn more about this.
  9. Save your settings.
  10. View your product page and see whether the countdown appears and how it looks like. Please note that it only appears when it’s in the period you’ve chosen on your product page (see section #3).

6. Make the countdown fade-in on a specific position

If you want the countdown to be disabled on page load to fade it in on a specific scrolling-position then do the following:

  1. Follow section #2 (Configure the plugin) on this page.
  2. Set up your product by following section #3 (Prepare a WooCommerce product) on this page.
  3. Then follow section #4 (Activate the countdown on a product) OR follow section #45 (Activate the countdown on a page for a product).
  4. If you followed section #4 view your product on the frontend.
  5. If you followed section #5 please view your page on the frontend.
  6. A little helper should appear on the top left. It looks like this:
    Product Countdown Helper Image Example
  7. Scroll down to the position where you want the countdown to appear later.
  8. Copy the number that the helper shows to you (in this case this is “802).
  9. Then edit the current page again and scroll down to the “Product Countdown Settings”.
  10. Paste the just copied number into the “Fade-in at position”-field:
    Copy and Paste the number from the helper
    Copy and Paste the number from the helper

     

  11. Save your settings and view your page again.
  12. Now the countdown should only appear at position 802.
  13. Note: The helper is only displayed on pages where the countdown is set to ON. And it’s only displayed for administrators that can manage WooCommerce settings.