Case Study Building a Custom
WooCommerce Order Page

For apmealprep.com

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;

Ap Meal Prep Designs

Approach Taken

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.

    • Prepaid Purchases

      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.

    • Detailed Reporting

      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.

    • Custom Development

      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.

    • Free Delivery

      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.

Results

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.

Here is what Jon has to say about his
experience with the htmlBurger team:

Jon Paul

Executive Chef, apmealprep
htmlBurger client since 2018

"Htmlburger has been very open to us and all of our crazy ideas. They made it very easy for someone that has no idea how to code, develop a functional & Welcoming E-commerce Site . Htmlburger has made every upgrade seamless and has helped with any issues we had before launching the new site. I believe that if I can operate our site with all of the customized coding that Htmlburger did for us, that anyone can. I don't think anyone would have been able to create what Htmlburger did with minimal change orders. Htmlburger always gave me options on how to make each function I was thinking of better. With out Htmlburger I would have probably lost my mind. A.P. Meal Prep Appreciates you and so do our customers the love all of the new changes and so do we."

George

Lead Project Manager
"We're happy we took this project as we were able to gain a lot of experience with it. Achieving compatibility between various plugins and extending their functionality requires you to see things from the plugin developers' perspective and builds-up new skills. We also enjoy working on challenging requirements like listing a whole lot of WooCommerce products on a single page and doing it with as little server resources as possible."

Loved Our Case Study?

Start Your Project