Creating a Meal Box Subscription Site: The Customer Journey!

Our Customer Journey Step 1a

WooCommerce Account Settings

First, we’re going to set our WooCommerce Account Settings so that Passwords and Usernames are automatically generated for new customers, which will allow us to create a new customer account using only an email. To do this ensure that the following two options are checked under the WP Admin > WooCommerce > Settings > Account & Privacy ( tab ):

Our Customer Journey Step 1c

Registration Form Creation

We now have the function that will hold our forms and HTML, so let’s get started by creating a custom registration HTML. Your HTML is going to have two parts ( at least ), the first is the registration form and the second is the form for selecting / changing plans. To make this easy first copy the registration form from the WooCommerce login form from woocommerce/templates/myaccount/form-login.php and delete all the components we’re not going to use ( all paragraph html elements except those that contain the email field and the registration button ).

Our Customer Journey Step 1d

Select Plan Form Creation

Next, create a form our customer can use to select the fresh plan. We’re going to use the xx_get_user_plans() function we created earlier to retrieve a list of available plans to populate our select drop down list. We’re also going to use the xx_get_user_plan() function to retrieve the current plan ( if there is one ) assigned to the user and then use the WordPress selected() function to add a selected attribute to the select option that matches the customers current plan.

Our Customer Journey Step 1f

Sign-In Form

Great!….but wait, what happens if our customer already has an account? or what will they do if they have an account and lost their password? The new form will work to register a customer and for them to select / change their plan but doesn’t help them login if they already have an account or even recover their password if they forgot it.

We’re going to add two more else / if blocks to our code snippet. The first is going to be our login section which will be displayed if the current URL has an action parameter set to sign-in. Just like we did for our registration form, we’re going to port the WooCommerce login form from woocommerce/templates/myaccount/form-login.php, strip some of the un-needed html, adjust the classes and such to match our theme, and finally wrap it in the else if statement.

Our Customer Journey Step 1g

Password Recovery Form

The second else / if block we’re going to add is going to be our password recovery section which will be displayed if the current URL has an action parameter set to lost-login. Just like we did for our other forms, we’re going to port the WooCommerce lost password form from woocommerce/templates/myaccount/form-lost-password.php, strip out some of the un-needed html, adjust the classes and such to match our theme, and finally wrap it in the else if statement.

Our Customer Journey Step 1h

Creating The Shortcode

Our plan will be to make all our content as shortcodes, since we may want to try different customer journeys or even include our registration form on different landing pages ( hey, we’re all marketers at heart right?! ) we’re going to wrap this form ( and the next form ) in a function and attach that function to a custom shortcode using the WordPress add_shortcode() function call. This way including our registration form is as simple as including the shortcode on any page we want.>

Our Customer Journey Step 1i

Process the Form Submission

Now that we’ve created the Select Plan Form HTML our customer can use to adjust their plan, we need to add a function to process the form when submitted to the server. Create a new xx_autoship_apply_meal_plan_handler() function ( which doesn’t take any arguments ) and add a new add_action() call with the action set to “wp“, our new function as the hooked function, and a priority of 99. Why the “wp” action? It’s a hook recommended by WordPress as a good place to perform high level validation before template redirects…

This hook is one effective place to perform any high-level filtering or validation, following queries, but before WordPress does any routing, processing, or handling….

WordPress Reference Docs

The third check is to add a wp_verify_nonce() function call to confirm that the nonce we added to the form is still valid. If the nonce fails, lets add a WooCommerce notice and return.

Our Customer Journey Step 1j

Assign Submitted Plan

After checking that the form being submitted is the one we want, and the submitted value is valid, we now need to assign the new plan to the customer. We do this using our xx_add_plan_to_user() function. Pass the function the current user’s id, and the new plan value. Once assigned, we add our success message to the WooCommerce notice queue using the WooCommerce wc_add_notice() function and redirect the customer to the next step in the journey, the Select Your Meals page ( i.e. our Shop Page ), using our xx_send_to_journey_step() function and the Select Your Meals page slug, ‘meals’.

Our Customer Journey Step 3a

Custom Schedule Options

As our site name ( Weekly Fresh ) implies we’re going to adjust the Autoship Cloud default frequency options to Weekly options by creating a new xx_populate_schedule_options() function, hook it to the autoship-default-frequency-options filter using the add_filter() function call, and finally populating the options array with our weekly options.

Within our new hooked function we’ll be using the autoship_get_frequency_display_name() library function to generate our schedule Option display names as well as a counter to generate weekly options from every week to every 4 weeks.

First, in our new function create a new HTML form with a Select drop down and a Submit button. To populate the Select drop down use the autoship_default_frequency_options() function we mentioned above to get the values, then iterate through the values to populate the select drop down’s option using the key as the value and the associated display_name value as the label.

We also need to make sure we show the customer the current schedule assigned to the cart. To do this use the Autoship Cloud library autoship_get_full_cart_schedule() function ( mentioned earlier ) to retrieve the current WC Carts schedule. Then while iterating through the frequency options returned by the autoship_default_frequency_options() function check if the frequency and frequency_type matches and if so add the selected value to the Select option using the WordPress selected() function.

Our Customer Journey Step 3c

Select Schedule Form Action & Security

Just like we did for our Select Your Plan form we’re going to add a custom action ( in this case lets use “xx_assign_box_schedule“), and a security nonce ( let’s use xx-assign-schedule as the action and xx-assign-schedule-nonce as the name ) to our form.

Finally, because our goal is to make our form as usable as possible, let’s also wrap this form in a shortcode call using the add_shortcode() function.

Our Customer Journey Step 3e

Assign Submitted Schedule

After checking that the form being submitted is the one we want, and the submitted value is valid, we now need to assign the schedule to the cart and to the customer. We do this using the Autoship Cloud autoship_set_full_cart_schedule() function referenced above and our custom xx_update_fresh_box_schedule() function. Once assigned, we add our success message to the WooCommerce notice queue using wc_add_notice and redirect the customer to the next step in the journey, Address ( our Address Page ), using our xx_send_to_journey_step() function passing it the slug for our Address page, “address”.

Our Customer Journey Step 4c

Creating the Shortcode

Just like we have for the last forms, we’re going to create this Address form into a shortcode using the add_shortcode() function call setting the first parameter ( the tag ) and the second parameter ( the callback ) to the name of our function ‘xx_output_address’.

Our Customer Journey Step 4d

Address Success Redirect

We’re first going to tackle the success redirect override and to do this were going to use the ‘woocommerce_customer_save_address’ action hook in WooCommerce’s WC_Form_Handler::save_address() method. Create a new xx_save_address_redirect() function that takes two parameters, an integer ( $user_id ) and a string ( $load_address ), both passed from the action hook and and add a new add_action() call to hook our new function to the ‘woocommerce_customer_save_address’ action.

Lastly, if they have entered all the required billing and shipping information then we want to add a notice and send them to our ‘payment’ step using our xx_send_to_journey_step() function.

Our Customer Journey Step 4d

Address Validation Redirect

We’ve covered the redirect for when an address is successfully processed by WooCommerce. Now we’re going to deal with how / where to redirect a user when the form validation fails. We’re going to use the ‘woocommerce_after_save_address_validation’ action hook in WooCommerce’s >WC_Form_Handler::save_address() method to accomplish this. Create a new xx_save_address_failure_redirect() function that takes four parameters, an integer ( $user_id ), a string ( $load_address ), an array ( $address ), and a WC_Customer object ( $customer ), all passed from the action hook. Again, since we’re hooking this function to an action we also need to add a new add_action() call with our new function as the callback.

We also need know if the user is explicitly choosing to add a new Payment Method so just like with our address form we’re going to use an “action” URL parameter to trigger the display of the add payment method form if the value of that parameter is set to “add”. We’ve pulled the saved methods for the user so now we’re going to check for the “action” URL parameter using the $_GET PHPs superglobal array and if either the user has no saved payment methods OR if the action parameters is set to “add” we should show the Add Payment Method form otherwise the saved payment methods.

Our Customer Journey Step 5b

Creating the Shortcode

As we mentioned above we’re going to create this Payment form into a shortcode using the add_shortcode() function call setting the first parameter ( the tag ) and the second parameter ( the callback ) to the name of our function ‘xx_output_payment_method’.

The last piece to our function will be to add a custom notice using WooCommerce’s wc_add_notice() function that includes a link to our Order step, generated using our xx_send_to_journey_step() function. Finally, after adding the notice we redirect the customer back to the Payment Method step in the journey, payment, using our xx_send_to_journey_step() function passing it the slug for our payment page, “payment”.

Start the contents of the new function by checking that we’re currently on our journey pages ( we don’t want to show our action in the My Account > Payment Method page ) using our xx_is_customer_journey() function and if the customer isn’t on our page just return the list item data without making any changes. Next let’s use our xx_get_fresh_box_payment_method() function we created earlier to retrieve the payment method currently assigned to the box

The second part we’re going to add to our new function is a check to see if the current saved payment method is the one assigned to our box by comparing the id for the payment token assigned to the box to the WooCommerce Payment Token object’s id using WooCommerce’s WC_Payment_Token::get_id() method. If the current box’s token id matches this row’s payment token we’re going to add a custom action that we’ll use to visually show that this is the current payment token with custom CSS though here is where you could add your own customized way to flag the method.

The third piece we’re going to add to our new function is the action that will allow our customers to assign a saved method to their fresh box. We just checked if the current saved payment method is assigned, so if it isn’t we’re going to add an Apply To Box button. To add the button let’s first use our xx_send_to_journey_step() function to retrieve our payment method step URL, passing it several URL parameters to add on to the returned value. The following URL parameters should be sent to our function which we’ll use in the next function we create to process this call: an “action” variable with a value of “apply”, a “token-id” variable with the current WooCommerce Payment Token object’s id as the value, and finally a “type” variable set to the current WooCommerce Payment Token object’s gateway id. To retrieve the current WooCommerce Payment Token object’s gateway id we’ll use WooCommerce’s WC_Payment_Token::get_gateway_id() method.

We’ve validated the nonce and the URL parameters so now we use our xx_update_fresh_box_payment_method() function along with the WordPress’ get_current_user_id() function to assign the token id and token type to our fresh box. Once we assign the payment method to the box the only things left to do is add a notice letting the customer know it was successful along with an option to place their order. We’re going to use WooCommerce’s wc_add_notice() function to add our success notice and our xx_send_to_journey_step() function to retrieve the order step’s URL.

Journey Check Point 1

Not Logged In

The first check we’re going to add to our new router function is to check if the user is not logged in, and if they aren’t logged in and they are on our journey and on any page other than our Welcome page, we should send them to our Welcome page so that they can sign in or register. We’re going to use the WordPress is_user_logged_in() function to determine if the current customer is logged in and we’re going to use our xx_is_customer_journey() utility function to check if they are on our journey and also if they are on our welcome page by passing it the slug to our Welcome page, “welcome”. Then, if the customer isn’t logged in and not on our Welcome page, but on our journey, we’re going to use our xx_send_to_journey_step() function to redirect them to the welcome page / first step in the journey by passing it the slug to our Welcome page.

Journey Check Point 2

Logged In & On a Non-Restricted Page

The second check we’re going to add to our new router function is to check if the user is logged in, and if they are and they are on the Welcome Page, Select Your Meals ( i.e. Shop ) Page, page or Box ( i.e. Cart ) Page, don’t restrict them. Again, we’re going to use the WordPress is_user_logged_in() function to determine if the current customer is logged in, and our xx_is_customer_journey() utility function to check if they are on our welcome page, Select Your Meals page ( i.e. the shop ), or the Your Fresh Box page ( i.e. cart ) ( which we’ve renamed to Your Fresh Box with box as the slug, remember the utility function takes the page slug ). Then, if the customer is logged in and on one of these pages / steps we’re going to let them browse.

Journey Check Point 3

Full Fresh Box ( i.e. Cart )

The third check we’re going to add to our new router function is to check if the user is not on the Welcome page, Select Your Meals ( i.e. Shop ) Page, or Box ( i.e. Cart ) Page and they don’t have a full Box. Remember, our customer already chose a plan size ( number of meals ) and before they can move on they need to have selected the right number of meals for their plan. Luckily, we have a handy cart utility function, xx_get_cart_diff(), that can tell us if the Cart Quantity matches the customers plan.

Journey Check Point 4

Cart is Full But Not Scheduled

The Next check we’re going to add to our router function is to check if the user is not on the Welcome page, Select Your Meals ( i.e. Shop ) Page, Box ( i.e. Cart ) Page, or Select Your Schedule page and they have a full Box but no schedule assigned. This means that are customer selected their plan, filled their box, but never selected a schedule. If this is the case we need to send them back to select a schedule. In this case we’ll use our xx_cart_has_schedule() function to check if the box has a schedule and if it doesn’t we’ll add a notice and use our xx_send_to_journey_step() function to send them back.

Journey Check Point 5

Cart is Full & Is Scheduled

We now know at this point in the route that the customer is registered and logged in, has a full box ( i.e. cart ), and has a schedule assigned to their box. We don’t know where they are in the journey but they should be able to go back and fourth between the Welcome page, Select Your Meals ( i.e. Shop ) Page, Box ( i.e. Cart ) Page, and Select Your Schedule page without being redirected. We already have the check for the first three pages so now lets add a check for the Select Your Schedule page, and if they are on that page leave them be. Once again we’ll use our xx_send_to_journey_step() function to check if they are on the Select Your Schedule page by passing it the Select Your Schedule page slug, “schedule”.

Journey Check Point 6

Billing & Shipping Address

The next check we’ll add is to see if the customer is not on one of our first four pages ( i.e. Welcome page, Select Your Meals page, Box page, Select Your Schedule page ) doesn’t have all the required Shipping or Billing information entered and is NOT on our Address page. To check for missing billing or shipping information we’re going to use our xx_user_has_required_address_vals() function, calling it twice once to check for missing shipping information by passing it “shipping” and once to check for missing billing information by passing it “billing”. Just like we did with the other steps, if there is missing information we’re going to add a WooCommerce notice and send the customer back to the Address page using our xx_send_to_journey_step() function. The only difference in this case is we’re going to pass the function an additional “action” parameter to specify which edit address form should be displayed on the redirect.

Journey Check Point 7

Billing & Shipping Address // Check 2

We just added a check to see if the customer is missing any billing or shipping information and if they aren’t on our Address page send them there. Well now we need to automatically display the address edit form if they are on our Address page, are missing billing or shipping information, and are not currently editing an address. In order to accomplish this we’re first going to use WooCommerce’s wc_get_var() function to check if the customer is currently editing their address by looking for either the URL action parameter or a Posted form parameter. We’ll then check if the customer is on our Address page using our xx_send_to_journey_step() function by passing it the Address page’s slug, “address”, if they are missing any billing or shipping info using the values we just retrieved, and if the action is empty or not our “edit-address” action. If this is the case then we’re going to update the URL to include our action ( so the appropriate dit address form shows ) and send the customer back to the Address page using our xx_send_to_journey_step() function.

Journey Check Point 8

Payment Method

The last check we need to add is to make sure there is a payment method assigned to the Box if the customer is trying to place their order (i.e. on the Order page ). To make this check we’re going to first use our xx_send_to_journey_step() function to check if they are on our Order page and then use our xx_get_fresh_box_payment_method() function to check if they have a payment method assigned to their Box. If they are on the Order page and have no payment method then add a notice and redirect them back to the Payment Method page.