Customizing the Checkout Page for Heat and Eat Meals

This post documents the changes I made to the Heat and Eat Meals checkout page. My goal was to make the process simpler and clearer for customers. Most of the updates were small but important—like changing “shipping” to “delivery,” hiding unnecessary fields, and adding helpful notes for delivery drivers. I used code snippets, trial and error, and a lot of help from ChatGPT to make it all work.

Adding a “Back to Cart” Button for Better Navigation

I was surprised that there was no “Back to Cart” button on the checkout page when using Orderable’s optimized checkout. Users expect the “Back” button to take them to what they perceive as the previous page. However, the browser’s back arrow may not always return them to their cart. To address this, I created a button that clearly states it will return users to their cart. This is especially helpful for mobile users, who may not have a back button, and for elderly users who might not know how to navigate back on their devices. I used a simple paragraph block with a link to the cart page.

Replacing “Shipping” with “Delivery”

At checkout, all instances of the word “ship/shipping” needed to be changed to “deliver/delivery” since we do not ship our meals. I used PHP code generated by ChatGPT to make this adjustment.

After some trial and error, I was able to get the code to work as I wanted.

Deselecting the “Deliver to a different address” Checkbox

By default, the “Deliver to a different address” checkbox is selected, which displays additional name and address fields. I found this confusing for customers who wanted to pick up their meals in person. Initially, I attempted to hide the entire delivery address section unless a valid delivery ZIP code was entered in the billing address field. While I almost had this working, it caused other issues on the site. Instead, I simplified the process by inserting PHP code using the Snippets plugin to deselect the checkbox by default:

add_filter(‘woocommerce_ship_to_different_address_checked’, ‘__return_false’);

This solution worked perfectly and didn’t require further adjustment. It creates a cleaner view on both desktop and mobile. While it’s not as dynamic as showing the section only if specific ZIP codes are inputted, it’s still a satisfying result.

Clarifying ZIP Code Restrictions at Checkout

I wanted to make it clear that delivery is only available to specific ZIP codes. If the billing ZIP code entered is outside of our delivery area, then only the pickup option should be available. If it’s within our service area, the customer can choose either delivery or pickup. To communicate this, I added a message in the delivery section using code generated by ChatGPT.

I also included a link to our Delivery Information page so customers can understand how our delivery service works. From a usability perspective, it felt important to set expectations and share terms clearly at checkout.

Using My Delivery Driver Experience to Guide Checkout Design

The last customization I made was updating the delivery notes field. As someone who delivered food for four years, I often struggled to find houses with unclear or missing numbers. Notes with details like the color of the house or cars in the driveway made deliveries much easier. I wanted that same option for Heat and Eat Meals customers.

To implement this, I went to WooCommerce > Checkout Form > Additional Fields and added a custom delivery notes field with the following instruction:

“If you selected delivery instead of pickup, please include a brief description of your house (color, cars in the driveway, or other identifying details) to help us find it more easily.”

I considered making this a required field, but since it’s not relevant for pickup orders, I left it optional. If a customer chooses delivery without including notes, I can follow up with them manually.

Choosing Orderable’s Checkout Page Over WooCommerce

I chose Orderable’s optimized checkout page instead of WooCommerce’s default because I initially thought the custom code I used to limit pickup and delivery options to Sundays and Mondays would only work with Orderable. Later, I learned that the code would have worked with WooCommerce’s checkout too. By that time, I had already customized the Orderable checkout to my liking.

In hindsight, using WooCommerce’s checkout might have been easier because I could have edited the page directly using blocks. Still, I’m happy with how it turned out, and most of the customizations were added using ChatGPT-generated PHP snippets.

Reflection and Takeaway

My main goal in customizing the checkout was to reduce confusion, especially by replacing all references to shipping with delivery. I focused heavily on user experience and wanted to make it as simple and clear as possible for customers to place an order.

Many of our customers are elderly and have voiced concerns about ordering online. I wanted to earn their trust by making the process feel safe and intuitive. These changes became especially important because the restaurant we operate out of is closing, and we’re redirecting more traffic to the Heat and Eat Meals website.

This project gave me more confidence in using code to solve real problems. I understand that using code should be a last resort due to potential site conflicts, but it’s empowering to know how to implement it effectively. Tools like ChatGPT have helped me apply changes I wouldn’t have been able to make on my own. While I’ve learned basic Java and JavaScript in school, it wasn’t enough to use in real-world applications. This project proved to me how valuable AI and self-teaching can be in my work as a freelance developer.