If you run WooCommerce, you’ve been there: for online stores with a physical location, one of the trickiest challenges is aligning your WooCommerce store open/closed hours with your custom checkout experience. What if I want my customers to be able to shop at any time, but also limit the “delivery” time in the WooCommerce date picker to no weekends or Sundays at checkout?
tl;dr? You can now purchase a simple plugin to easily hide dates in the WordPress / WooCommerce Jquery Datepicker.
WooCommerce Date Picker and no Weekends/Holidays
WooCommerce is our favorite platform for e-commerce because of its low startup cost and high level of flexibility. But when it comes to customizing the checkout experience for your customers, the platform still has some gaps.
Take a food checkout experience, such as Town Hall Deli in South Orange, New Jersey. For Town Hall, it’s important that customers have the convenience of being able to browse and place orders 24/7; but the deli isn’t open 24/7, so customers must select an available “Ready Date” and “Ready Time” on the checkout page.
Naturally the Ready Date/Time should align with the deli’s business hours. But when you drop 50 bucks and set up WooCommerce’s Custom Checkout Field Editor, you’re only half way there. How the heck do we tell WooCommerce which days are available and which days aren’t?
WordPress / WooCommerce jQuery Date Picker vs PHP Bootlicker
There are a number of plugins out there to address the WooCommerce open/closed hours issue, each approaching it slightly differently. Some plugins allow you to disable checkout during certain times of day, for example, essentially closing your online shop when your physical store is closed. The problem with this approach is that it’s not really what we want: the physical store may be closed on Sundays, but what if a customer sits down on Sunday to place a big catering order for Monday? We can’t miss that business!
Other plugins look to create a custom conditional workflow in the checkout experience. For example, a deli may have the need to throttle the number of orders that can be requested for a certain time of day. This can be helpful for many businesses, since everyone’s sandwich can’t realistically be ready at 12pm.
But like other PHP monoliths of days past, WooCommerce patches roll out frequently, and introducing lots of new custom PHP logic can result in a broken checkout page when updates occur. It’s wiser to keep Woo as close to its “clean” original form as possible. As a result, what seems like a pretty simple problem — “don’t let customers choose a time that’s unavailable” — instead becomes a big developer headache.
The solution, it turns out, is quite elegant: don’t modify WooCommerce and its PHP at all, and simply remove weekends / Sundays / holidays in the frontend by tweaking the jQuery date picker itself. That way a customer can’t even select a date if it’s unavailable.
By simply adding a bit of custom jQuery in a <script> tag to our theme, all we are doing is greying-out the dates we don’t want customers to choose in the date picker itself. No custom checkout logic or PHP is needed.
The beauty of this approach is that since most sites use the standard jQuery date picker, you can easily apply it to any platform or theme that uses jquery-ui-datepicker-js (so pretty much all WordPress sites).
Just make sure your field requires use of the date picker, as these Woo forms do. This way the user can’t type in their own date. To disable manual date entry, just make sure your form’s <input> tag has the word readonly. So like <input readonly type="text" ...etc inside your input tag.
This solution works best for the WooCommerce datepicker you see when you use their Custom Checkout Fields Plugin; but it should work for most WordPress datepickers.
Removing Weekends or Sunday from the jQuery Date Picker
To set it up, all you need to do is copy-paste the following script into your theme.
This script hides Sundays and a couple of holidays in the jQuery date picker. For holidays, note the UK date format of Day-Month-Year. To add Saturday, follow my two //comments in the script, simply replacing day != 0 with day != 0 && day !=6.
Shouts to Thomas Miller for his Codepen on this. All I’ve done is wrap his function in another function, which is necessary to include new scripts in this way in WordPress.
<script>
(function($) {
$(function() {
var holidays = [
'25.11.2021',
'25.12.2021'
];
function noSundaysOrHolidays(date) {
var day = date.getDay();
if (day != 0) { //change to "day != 0 && day != 6" to add Saturdays
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
for (i = 0; i < holidays.length; i++) {
if($.inArray((d) + '.' + (m+1) + '.' + y, holidays) != -1) {
return [false];
}
}
return [true];
} else {
return [day != 0, '']; //change to "day != 0 && day != 6" to add Saturdays
}
}
$('#day').datepicker({
firstDay: 0,
onClose: function(dateText, inst) {
$(this).attr("disabled", false);
},
beforeShow: function(input, inst) {
$(this).attr("disabled", true);
},
beforeShowDay: noSundaysOrHolidays,
minDate: 0,
});
});
})( jQuery );
</script>If you aren’t sure where/how to get this custom jQuery script into your WordPress/WooCommerce theme, an easy suggestion would our very own WordPress plugin to solve this problem, WP Datepicker No Weekends.
Voila! No more WooCommerce orders when the store is closed on weekends / holidays!
If you liked this article, be sure to check out my tutorial on creating a custom tablet-based dashboard for WooCommerce here. Sign up for our newsletter at the bottom of the page for other great content from the team and me.
“Sorry We’re Closed” cover photo by Tim Mossholder on Unsplash.
