by philwonski  • September 30, 2021

Remove Weekends (or Sundays) from WooCommerce Checkout Date Picker

If you run WooCommerce, you’ve been there: why does it seem like I need to buy another plugin for every custom checkout field? 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?

WooCommerce jQuery date picker with Sundays removed, since the store is closed on Sundays.
WooCommerce jQuery date picker with Sundays removed, since the store is closed on Sundays.

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? Do we need another WordPress or WooCommerce plugin to simply remove weekends and Sundays from the date picker? That seems crazy.

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.

Because any day you can avoid buying an unnecessary plugin — or visiting the functions.php file — is a good day.

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.

To see if this solution will work for you, check for the script by viewing the source of the page that has your date picker. Usually the standard script reference will show up in your theme like this:

<script src='https://orderthd.com/wp-includes/js/jquery/ui/datepicker.min.js?ver=1.12.1' id='jquery-ui-datepicker-js'></script>

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 be — ahem — a plugin. You can use something very basic that is unlikely to have compatibility issues like WordPress Insert Headers and Footers. This plugin, like its name, simply allows you to insert script tags (or other tags) in the header and footer of your site. In our case, it’s best to use the footer: install the plugin and navigate to Settings >> Insert Headers and Footers, then paste in the code above.

Inserting jQuery script into the footer of a WordPress / WooCommerce website. This script hides Sundays and holidays from the jQuery date picker.
Inserting jQuery script into the footer of a WordPress / WooCommerce website. This script hides Sundays and holidays from the jQuery date picker.

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.