Building a Custom
WooCommerce Order Page
In Nov 2017 AP Meal Prep (All Purpose Meal Prep) reached out to us to help them with the WordPress integration of their then static website.
AP Meal Prep is a weekly cooking service that offers breakfast, lunch and dinner. Their menu changes weekly, but they also have a few “Staple Items” that have earned their permanent spots.
This was the first time we were about to work with them and they trusted us with building their whole website - front-end, back-end + WooCommerce. George, a project manager from our WordPress team, was assigned to manage the development work on the project.
The main challenge with the WordPress integration of AP Meal Prep was the Order Page. Jon Paul, executive chef and owner of the website had a list of very specific requirements for the functionality of the order page, however, WooCommerce did not have out-of-the-box solutions for all of them.
Some of the most important points that Jon Paul had for us were:
- Easy management of weekly meals;
Show 30+ meals with multiple variations.
All of them listed directly at the order page;
- Improved UX for the checkout process;
- Monthly payments with weekly purchases;
- Automated flush of users' cart every week;
- Advanced data collection for each order: notes, preferred delivery date, etc.
- Exporting reports with Order Data;
- Minimum purchase amount based on location;
We had to use a combination of ready-to-use plugins and custom development to meet all project requirements.
Automated Date Change
The weekly menu’s dates change automatically and the administrator of the website just need to add the products for the new menu.
Improved UX for the checkout process
We’ve used the ARG Multistep Checkout plugin to streamline the order process, as the default WooCommerce checkout displays all form fields on a single page, which could be a bit overwhelming.
The same plugin allows for pre-paying your purchases and using your credit to pay for future weekly orders.
Flushing the User’s Cart
Since the meals change every week the user's cart needed to be emptied from any old items, as soon as the new menu is published. We've added a WP Cron job to look for that and remove any products from the users' cart if they are no longer available.
We've used the Advanced Order Export For WooCommerce plugin by AlgolPlus to allow the client to export any order details he wants. We've extended the plugin's default settings to match the customer's request to have a detailed breakdown of the purchases’ information, but not only a weekly summary of the user’s activity.
Displaying All Products and Product Variations
It was very important that the user sees the full variety of the weekly meals on the order page. Unfortunately WooCommerce's built-in methods exhausted all of the server's RAM when more than 30 products are being added. This is why we've added custom functions that do direct DB SQL queries to optimize the data flow and the page load speed.
Selecting a Monthly Plan
For further user convenience we've implemented the WooCommerce Wallet System Plugin by Webkul to allow the users to purchase a monthly plan, while still being able to make weekly purchases.
The Webkul Wallet Plugin was not fully compatible with the custom checkout process offered by the ARG Multistep Checkout plugin, this required some custom coding work to make them work together seamlessly.
Since the website offers free delivery there is a minimum order amount for the order to be accepted. This amount, however, needed to be dynamic based on the user's location, so certain ZIP codes have a higher minimum purchase amount. We've added a custom solution to allow the administrator to set that by hooking it with WooCommerce' Shipping Zones functionality.
The project took several months to be completed. It went through a lot of testing and fine-tuning the different components, so the complex order process could work as smoothly as possible.
You can see the result of our work here www.apmealprep.com
We also had an excellent working relationship with Jon Paul and his designer Parker Reed.