In the competitive world of eCommerce, offering deals and discounts is an effective strategy to attract more customers and increase sales. If you run an online store with WooCommerce and want to effectively highlight your offers, it is essential to clearly display the date when these promotions will end. In this article, I will show you how to do this without using any additional plugins, using Elementor and some PHP and CSS code.
Setting Up the Offer on a Product
The first step is to set up a deal on one of your WooCommerce products. To do this, go to your WordPress admin panel and select “Products.” Choose the product you want to apply the deal to and edit its details. In the pricing section, set the discounted price (e.g. $15) and schedule the deal with a start and end date, such as June 1-15. Save your changes and refresh the product page.
Create a Product Template
To ensure your offers stand out visually, you can create a custom product template using Elementor. While we'll be focusing more on functionality than design in this article, a good presentation can make your offers even more appealing.
PHP Code to Display End Date
To display the sale end date on your product template, you will need to add a PHP code snippet to your WordPress child theme’s “functions.php” file. This will ensure that the end date is displayed only on products with active offers. You can find the PHP code at the end of this article.
Insert a Shortcode Widget
Within your custom product template, you can insert a shortcode widget to display the end date of the offer. This ensures that the information is presented in a neat and attractive manner on the product page.
Customizing Styles with CSS
To style the offer message and the end date, you can apply styles using CSS directly to the shortcode. This ensures that your products look attractive and professional. If you wish, you can find the CSS code at the end of this article.
Results
Once you've completed the steps above, you'll be able to see the results in your online store. Products that have an active offer will clearly display the promotion end date. This helps your customers understand how much time they have to take advantage of the offer.
In short, displaying the end date of a sale on WooCommerce products is an effective way to attract and convert more customers. With Elementor and a little PHP and CSS code, you can achieve this without using any additional plugins. Remember that the necessary codes are available in the description link to make your implementation easier.
We hope you found this article useful and that you can improve the presentation of your offers in your online store. If you found this tutorial useful, we invite you to give it a like and subscribe to receive more tips and tutorials. If you have any questions or doubts, do not hesitate to leave a comment. See you next time!
