In a previous post called Adding custom WooCommerce product fields I wrote about how to add custom fields in the backend for products. As a follow up on that, this post will guide you through adding (those) custom fields at the WooCommerce front end, including adding the custom field values to the cart and in the order.

Outputting the fields

The first step of adding custom WooCommerce field on the front end is outputting the HTML code. To get started with this you’d want to figure out where you want to display the fields. A common place for regular informational field (those who do not require user input) can be found in the plugins/woocommerce/templates/content-singe-product.php file. If you examine that file closer you will see that there are a couple hooks available and which actions are already hooked into them.

For my example I chose to display the fields not exactly on that hook, but just before the add to cart. This is because in my example there is a input field that needs to be filled out by the customer, and this is required to be within the <form> in order to pass the data. If you are only displaying information (non-user input required) you can choose to output your custom fields anywhere you want to. The following code will make sure it is within the form and will be posted when adding the product to the cart.

HTML output code

As we are building the code that added custom fields at the backend in a previous post, we want to output the following fields; Personal message, Gift card validity, Redeemable in stores. I’ve created the following code to output the fields allowing the customer to input their personal message (only when the checkbox in the backend is checked), and displaying the info about validity and the stores where the gift card is redeemable.

This will output the fields at the front end, it should look something like;

Passing the custom fields to the cart

On itself the information is displayed for the customer, which is helpful. The personal message can be filled out, but isn’t doing anything when added to the cart. For the customer it is good to have the personal message available in the cart to review for errors and the store manager requires the text later in the backend to put it on the gift card.

The following code will add the personal message that was input by the customer as cart item data. I’ve also included the other info (validity and stores redeemable) for this example, it could serve purpose as a rest-assure the user at the cart for example (or if the values change in the future, it would be good to have the values as they were when the customer bought the item). As they are not input field by the user we get them straight from the database.

The code above works for adding them to the cart, but that is not enough. Due to the way WooCommerce works, this custom data is being removed as soon as the page reloads (and the cart data is retrieved via the session). This always happens instantly so you will never know if it was there. In order to keep the data in the cart also add the following code.

Displaying the custom data in the cart

The code above ensures the cart data is persistent until the cart item is unset (either by checkout or removal from the cart). You will need a bit of code in order to display the data in the cart. With the following code I will display the three data fields we’ve saved above. You might want to omit the redeemable stores and/or the validity for example, that no problem, the data is still being kept with the cart item, just not displayed at the front end.

This will result in the display of the items like this;

Adding the data to the WooCommerce order

We’re still not done as the cart item is simply thrown away when ordering right now. Of course we want the store manager to be able to view the data at the order overview. Add the following code in order to add the item data in the admin order view.

Which will result in:

Thats it!

You’ve now added custom fields on the front end of WooCommerce, added them to the cart, and eventually saved them in the order. You can find the full code over here; https://gist.github.com/jeroensormani/aa813b750a9f651502c2

I would love to hear from you if this was useful in any way, have feedback, missing something that you’d love to see or just a Thank you 😉