In the competitive world of e-commerce, 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 highlight your offers effectively, it is essential to clearly display the date when these promotions will end. In this article, I will show you how to do it without using additional plugins, using Elementor and some PHP and CSS code.
Set the Offer on a Product
The first step is to define an offer on one of your WooCommerce products. To do this, go to the WordPress admin panel and select “Products”. Choose the product you want to apply the offer to and edit its details. In the pricing section, set the discounted price (for example, $15) and schedule the sale 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. Although we will focus more on functionality than design in this article, a good presentation can make your offers even more attractive.
PHP Code to Show End Date
To display the offer end date in your products template, you will need to add a PHP code snippet to the “functions.php” file of your WordPress child theme. 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 offer end date. This ensures that information is presented in an orderly and attractive manner on the product page.
Customizing Styles with CSS
To style the offer message and end date, you can apply styling 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 have completed the steps above, you will 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 deal 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 additional plugins. Remember that the necessary codes are available in the link in the description to facilitate your implementation.
We hope that this article has been useful to you and that you can improve the presentation of your offers in your online store. If this tutorial has been useful to you, we invite you to like it and subscribe to receive more tips and tutorials. If you have any questions or concerns, don't hesitate to leave a comment. Until next time!
