The requested Delivery date setup does not include the option to restrict future dates from being selected. But this can be added by going to Appearance < Theme Options, the going to the Checkout CSS block and adding any combination of the below CSS code.
Note: Be sure to add the wanted code below any current coding in that field.
Paste the below code into the Checkout CSS block if weekends should not be selectable:
/* Requested Delivery Date: disabling weekends */
.datepicker-days table tbody tr td:nth-child(1),
.datepicker-days table tbody tr td:nth-child(7) {
pointer-events: none;
opacity: 0.45;
color: #888 !important;
background-color: #f5f5f5 !important;
cursor: default;
box-shadow: none !important;
}
Paste the below code into the Checkout CSS block if holidays should not be selectable:
/* Requested Delivery Date: Specific Date Blocking (Holidays) */
/* Each value is the millisecond timestamp for midnight UTC of that day */
/* Memorial Day — May 25, 2026 */
.datepicker-days td[data-date="1779667200000"],
/* Independence Day observed — July 3, 2026 */
.datepicker-days td[data-date="1783036800000"],
/* Labor Day — September 7, 2026 */
.datepicker-days td[data-date="1788739200000"],
/* Thanksgiving — November 26, 2026 */
.datepicker-days td[data-date="1795651200000"],
/* Day after Thanksgiving — November 27, 2026 */
.datepicker-days td[data-date="1795737600000"],
/* Christmas Eve — December 24, 2026 */
.datepicker-days td[data-date="1798070400000"],
/* Christmas Day — December 25, 2026 */
.datepicker-days td[data-date="1798156800000"],
/* New Year's Day — January 1, 2027 */
.datepicker-days td[data-date="1798761600000"] {
pointer-events: none;
opacity: 0.45;
color: #888 !important;
background-color: #f5f5f5 !important;
cursor: default;
box-shadow: none !important;
}
/* Fallback for hover/active states on disabled elements */
.datepicker-days tbody tr td.day[style*="pointer-events: none"],
.datepicker-days tbody tr td.day:not(.disabled)[style*="pointer-events: none"] {
background-color: #f5f5f5 !important;
color: #888 !important;
box-shadow: none !important;
}
Important: "data-date" for each specific holiday needs to be added as the millisecond timestamp for midnight UTC of that day. Some of the holidays will
Equally as important: These holiday codes will change yearly, so if adding the above code, be sure to make adjustments in December for the next year.
Add the below code into the Checkout CSS block if today's date and tomorrow's date should not be selectable:
/* first row that has any future (non-disabled) day => select its first two available days */
.datepicker-days tbody tr:nth-child(1 of tr:has(td.day:not(.disabled))) td.day:not(.disabled):nth-child(1 of td.day:not(.disabled)),
.datepicker-days tbody tr:nth-child(1 of tr:has(td.day:not(.disabled))) td.day:not(.disabled):nth-child(2 of td.day:not(.disabled)),
/* second row that has any future day => select its first available (covers case where first row had only one) */
.datepicker-days tbody tr:nth-child(2 of tr:has(td.day:not(.disabled))) td.day:not(.disabled):nth-child(1 of td.day:not(.disabled)) {
pointer-events: none;
opacity: 0.45;
color: #888 !important;
background-color: #f5f5f5 !important;
cursor: default;
box-shadow: none !important;
}
/* keep hover/active states muted for those elements */
.datepicker-days tbody tr td.day[style*="pointer-events: none"], /* fallback if inline styles used */
.datepicker-days tbody tr td.day:not(.disabled)[style*="pointer-events: none"] {
background-color: #f5f5f5 !important;
color: #888 !important;
box-shadow: none !important;
}
And that's it!