Adding custom checkout steps/tabs is possible, but takes some custom development to get working.
Here is a 80% working demo of how you could add an Age Verification tab to the checkout process:
What this code does:
- Adds an Age Verification link to the breadcrumb navigation
- Add an Age Verification tab to the tabs
- Adds tab navigation to the bottom of the Age Verification tab that takes you to the appropriate previous / next tabs
- Any fields output in this tab using woocommerce_form_field will pickup Parsley JS validation which will prevent advancing steps when a required field isn’t filled
What this code doesn’t do:
- It doesn’t switch the navigation on the customer info and shipping method tabs to appropriately point the next and previous buttons to the correct tab. Here are the action hooks that add those navigations to the native tabs: https://gist.github.com/clifgriffin/f7d090bbe66b6039c7cf57f88a1b0be3
- The shipping tab can be hidden dynamically based on whether the cart has shipped items. This snippet doesn’t handle that condition. You would need to have two next buttons on the age verification tab and use this CSS class to determine which to show: cfw-hide-shipping
- It doesn’t actually add any age verification form control to the tab. (It’s just an example after all!)
Hopefully this is helpful to get you started. Let us know if you get stuck.
