Overview #
The purpose of this plugin is to allow the front-end users to select their own particular delivery date and time slot from the options available. Admin will have the option from the back end to configure the date and time slots and set up delivery days.
Features #
This is a new plugin, and we will add the following features in the initial release.
- General Settings
- Date
- Time
- Holiday
- Bookings
General #
- The General tab will be placed in the WooCommerce 🡪 Settings 🡪 Delivery Slots tab as a sub-tab.
- In the General, you will see the General Settings as per the following:
- Following is the screenshot of the Back-end General tab.
- Date & Time field position: options to display the delivery slots on the checkout page.
- Within the billing fields: The delivery slots will be displayed on top of the billing address.
- Within the shipping field: The delivery slots will be displayed on top of the shipping address.
- Within order details: The delivery slots will be displayed after the order details are on the checkout page.
Within the Billing Field – Front End Impact #
Within the shipping field – Front End Impact #
Within Order Details – Front End Impact #
Display Fields Without Shipping #
A checkbox to enable it will allow the admin to display the delivery slots field on the checkout page without the shipping method required. If disabled, the shipping method is mandatory to select.
Frontend Impact
Default Label #
This will be the label displayed on the delivery slots fields. For example, if the label is Collection, it will be displayed as Collection slots in the front end.
Frontend Impact
Shipping Method #
This option allows the admin to choose the shipping method for displaying the delivery slots when selected from the front end. In every method, there will be a label field that will be displayed on the front end. So, for example, the admin can set Delivery for one shipping option and Collection for another shipping option.
Frontend Impact
Exclude Products #
This will be a multi-select field; the admin can search for the product and add it. The delivery slots option will not be displayed on the front end when the excluded product is added to the cart.
Frontend Impact
- Delivery slot unavailable for the Excluded Products.
Exclude Categories #
This will be a multi-select field admin can search for the category to add. Delivery slots option will not be displayed on the front end when a product from one of the excluded categories will be added to the cart.
Frontend Impact
- Delivery slot unavailable for the Excluded Categories.
Date #
- The date tab will be placed in WooCommerce 🡪 Settings 🡪 Delivery slots as a sub tab.
- Delivery Types: There will be two options in the delivery type dropdown.
- Delivery slots: which allows the admin to add date and time slots, which will let the user select their own delivery slot at the time of checkout.
- Delivery estimates: This allows the admin to set up their own date range for different shipping methods.
Delivery Slots #
- When this option is selected, the following option will appear:
Required Date #
Enable this option to make the delivery date a required field, not an optional field. If this option is enabled, the user won’t be able to checkout without selecting the date slot.
Frontend Impact
- Required
- Optional
Date Theme #
Select theme option for the admin to select to change the date calendar color.
Frontend Impact
Delivery Days #
- Admin will have the option to select the specific delivery days.
- A checkbox will be beside each day to mark the day as a delivery day or select all.
- There will be a maximum order and fees field along with each day field. Admin can enter a maximum order limit for each day and also the fees for each day delivery.
- Every day can have a different maximum orders limit and the fee rate as well. For example, admin enables delivery days and sets the maximum order limit for each day like for Monday, it is 50 for Tuesday, 40, and for Wednesday, it is 45 also the delivery fees will differ from day to day. Like for Monday, it is $5, Tuesday $6, and Wednesday $7. The delivery fees will be displayed in the order details on the checkout page according to the date the user selects.
Frontend Impact
Same Day Delivery Fees #
- this option allows the admin to charge a different delivery fee for the same-day delivery. For example, if the current day is Monday and the fee set for the day is $5, but in this field, it is set to $8, so if the user wants the same day delivery, the system would charge the user $8 as a delivery fee, but if the user selects the date of upcoming or any other Monday, then the system would charge the user $5 delivery fee.
Frontend Impact
Lead Time #
- the number of days for the user to select the delivery dates. If the Lead time is set to 2 then the next available delivery day will be after 2 days from the current day. So, whatever number of days admin sets in the lead time field, the next available delivery day will be after that number of days. If left empty, it will be disabled.
Note: Same-day delivery will not work if the Lead time is enabled
Frontend Impact
- Maximum selectable days: The admin can set up the maximum limit of delivery days. Whatever number the admin puts here, only that number of days will be available to select for the user from the front end. For example, if the admin inputs 14 days as the maximum, the user will see 14 available days in the front-end calendar. The default days set up will be 30 days. When hovering on a date on the calendar, the fees and maximum order limit on a tooltip will be displayed.
Frontend Impact
- Same day delivery cut off: The admin will have the option to set the cut-off time. When the field is selected, a time selector will open, allowing the admin to select the cut-off time. When the user from the front-end orders after the cut-off time, the current delivery day will be disabled. If empty, it will be disabled.
Frontend Impact
Before Cutoff time
After Cutoff time
- Next day delivery cut off: The admin can set the cut-off time for the next day delivery. When the field is selected, a time selector will open allowing the admin to select the cut-off time. When the user from the front-end orders after the cut-off time, the current and next delivery day will be disabled.
Frontend Impact
- Before Next day Cutoff time
- After Next day Cutoff time
- Display cut-off message: Enable/disable the checkbox to display the cut-off message on the front-end checkout page.
- Cut-off message: The admin can enter the custom message to be displayed on the front-end of the checkout page as a notification bar on the top.
Frontend Impact
- Last week of the day: a dropdown field displaying all days of the week. Admin can select any day as the last day of the week. Whatever day is selected as the last day of the week on the front-end calendar will be shown as the last day.
Frontend Impact
- Date Format: Predefined date formats for the admin to select. Whatever date format is selected will reflect on the front-end in the delivery date field, in order details, after the order is placed. The same order will be applied to the WooCommerce order details page, which the admin selects.
Frontend Impact
- A save button at the end to save all the applied changes.
Delivery Estimation #
- The following options will appear when the delivery estimates option is selected from the delivery types dropdown.
Set Estimates #
- There will be an option for the delivery range. Admin can enter the day range in the boxes, for example, 2 – 3, which means the estimated delivery will be in 2 -3 days. The admin can also select the specific shipping method for this day range. So, the delivery day range will differ depending on the shipping method. For example, for the flat shipping method, the day range will be 2-3 days; for the local shipping method, the day range can be 4-5 days. Admin will have the option to add multiple estimates. A new button will be at the end of each estimation rule after the shipping method. A new set of date range and shipping method selections will be displayed when clicked. Admin can also have the option to delete the estimation rule set.
Frontend Impact
- In our case, the current date is 18th August 2023 now, Flat rate and Local Pickup have their own delivery estimates.
- Delivery Days: Admin will have the option to checkmark delivery days. Whichever day is selected will be marked as a delivery day in the system, and the day estimation range will depend on the selected delivery days. For example, if Monday, Tuesday, and Wednesday are marked as delivery days. Then, the estimation will work between these days, and on the front end it will be displayed according to the selected days. For example, if the order is being placed on Saturday and the above days are delivery days, the user selects the flat rate. Then the delivery option will show “Estimated Delivery: Tuesday, 4th October – Wednesday, 5th October. The 2-day range calculation will depend on the selected delivery days, so Monday is the first day counted. So, according to the range of 2-3 days, the order will be delivered in 2-3 days, which will be Tuesday and Wednesday.
- The estimation will be displayed in order details on the checkout page, in order confirmation, and in order details of WooCommerce.
- A save button at the end to save all the applied changes.
Frontend Impact
Time #
Enable/Disable Time #
- the checkbox to enable the time slot function.
Note: To enable the Time slot the admin must select the delivery type as Delivery Slot under the header Date Tab.
Frontend Impact
Required Checkbox #
- to make the time slot required to select for the user on the front end.
Frontend Impact
Auto Select #
- checkbox to auto select the first time slot of the day available automatically. First the user has to select a date from the date field, so whatever date is selected, the first time slot of that day will be automatically selected.
Frontend Impact
- Disabled
- Enabled
Time Format #
- It will be a dropdown field, admin will have the option to either select 24 hour format or 12 hour format. By default, the 12 hour format will be selected.
Frontend Impact
- 12 Hour Format
- 24 Hour Format
Allow Booking X Minutes Before Slot #
- This option will allow the admin to prevent the users from ordering too close to the start of the time slot. For example, if the admin sets 20 in the field, the booking will be disabled 20 minutes before the slot start time.
Frontend Impact
Before
- Before 11:40 AM, the slot of 11:50 AM – 12:20 PM will be available.
After
- After 11:40 AM, the slot of 11:50 AM – 12:20 PM will be unavailable due to Allow booking x minutes before slot time.
Time Slots #
- There are multiple options in the time slot settings.
Slot Frequency #
The admin will have the option to create slots every x minutes. So for example, if you set 20 in the field,, slots will be created every 20 mins.
Frontend Impact
- Slots Duration: It is the time period of each slot. The admin will have the option to create slots for x minutes. For example, if the admin sets 40 in the field, the slot duration time will be 40 mins for each slot.
Frontend Impact
- From: Admin will enter the starting time for the days. When clicked, a time selector will open, allowing the admin to select the starting time.
- To: The admin will enter the end time for the days selected. When clicked, a time selector will open, allowing the admin to select the ending time.
- Maximum orders: define the maximum number of orders that can be placed within a single time slot daily.
- Fees: The admin can charge a specific fee for each time slot.
Note: Maximum order will be applied on each of the individual slots.
Frontend Impact
- Fees Surge: Increase the delivery fee by multiplying Fees with Fees Surge. Admin will enter the fee, and whatever the number is in the fees, it will be multiplied by this number. For example, if the admin inserts 2 in the surge field and the fee to charge for the time slot is $2, then the fees will be $4 after multiplying with the number.
- Surge fees time: The admin can choose when to apply the surge fee multiplier. When the admin clicks, a time selector will appear for him to choose a time. The multiplier will be applied after the admin specifies the time.
Note: Users must enter the Surge fee time while using the fee surge multiplier.
Frontend Impact
- Days: The admin will have the option to select the specific days for the current time slot. So, these time slots will only be displayed to the user on these selected specific days.
Frontend Impact
- Shipping Methods: The admin can select the specific shipping method for the current time slot. So, these time slots will only be displayed to the user when the user selects these specific shipping methods.
- Admin can create different time slots for different shipping methods by clicking the Add Time Slot Button. For example, the time slots for the flat and local rates can differ.
- Admin will also have the option to set the different labels for every shipping method. Whatever the admin will give the label will be displayed on the front-end. For example, the admin can provide a Delivery label for one shipping method, and for another, the admin can provide a Collection label.
Frontend Impact
- An Add Time Slot button will be available to add more time slots sections. When clicked, a new time slot section with all the details will appear.
- An option to delete the extra time slots section at the top right corner.
- A save button to save all the applied changes.
- If the admin selects maximum order and fees in time and date settings, then fees for both time and date will be added together.
Time Settings
Date Settings
Frontend Impact
- The fee is added together for Date $23 and Time $22.
- Secondly, if the maximum order exceeds the Date setting, the specific day will be off. Similarly, if the maximum order reaches the Time Setting, the date will be available, but the slots are not.
Frontend Impact
- When the Date’s maximum order is reached.
- When the Time’s maximum order reached
Note: This applies only when there is a single slot.
- Once done, the admin can Select the Date and Time to book the slot.
Frontend Impact
Note: The user must first select the date from the date field to select the time slot. The time slot won’t appear if the date is not selected.
- The delivery date and time will be displayed on the order confirmation WooCommerce order details page. A filter in the all orders page is available to filter the order according to delivery dates.
- In order to view, navigate to WooCommerce→Orders
Holiday #
- Enable Holiday checkbox to enable the functionality of holiday.
- Holidays: There will be a title field to set the title for the holidays, like Bank Holiday. A From and To field to set the starting and ending date for the holiday period. A repeat yearly checkbox will let the admin mark the selected days as holidays every year.
- Admin can select the Add Holiday button to add more holiday sections. Admin can set multiple holidays with different dates.
- There is an option to delete the extra holiday section at the top right corner.
- A save button to save all the applied changes.
Frontend Impact
Booking #
- Enable/disable the checkbox to the functionality of booking.
- Booking expiry: The admin will enter the duration after how many minutes the bookings will expire.
Note: After specified minutes, the booking will expire just after the booking is reserved.
- Slots Remaining: Enable / disable the checkbox to display the slots remaining label on the front-end in each time slot duration. The slots duration will appear based on the maximum order limit.
Frontend Impact
- Disabled
- Enabled
- Slot remaining threshold: When the slots are less than this threshold number, the remaining slots label will be displayed. For example, if the admin inputs 4, the label will be displayed when the slots remaining for the time slot will be 3. If left empty, then the remaining slot label will be displayed all the time.
- Hide Unavailable Timeslots: When the maximum order limit is reached and that time range is full, if this option is enabled, then the time slots range that are reached to the maximum order limit will get hidden.
Frontend Impact
- Disabled
- Enabled
- Redirect URL: enter the URL to redirect users after they book the time slot.
Frontend Impact
- Theme color: The admin will have the option to set the theme color for the booking table.
Frontend Impact
- Before
- After
- Slot Remaining Label color: The admin can set the remaining slot color. This label will display when the available slots are below the threshold.
Frontend Impact
- Before
- After
- Slot Unavailable Label color: The admin can set the slot unavailable label color. This label will display when no slots are left to book in a time range.
Frontend Impact
- Before
- After
- Earliest Available Slot Label Color: The admin can set the earliest available slot label color. This label will display on the first time range available.
Frontend Impact
- Before
- After
- Admin must add the shortcode to render the booking table on a page by using the [wc_booking_slot] shortcode.
- The booking table will be displayed to the non-logged-in users also.
Frontend Impact
