How to display custom fields in shopping cart

[Greggy55]

Hello everyone, 

I am trying to get custom fields to display in my shopping cart once a user has added the item with the custom fields to their cart. 

Picture below shows the item with the custom fields :

I added this code to the main-product.liquid code block to achieve this. here is the code : 

<style>
.main-product-property label {
display: inline-block;
width: 120px; /* Adjust as needed */
margin-right: 10px; /* Adjust as needed */
}
</style>

{% if product.metafields.custom.name_field %}

<!-- Custom fields -->
<div class="main-product-property">
<label>Name</label>
<input type="text" name="properties[Name]">
</div>

{% endif %}

{% if product.metafields.custom.surname %}

<div class="main-product-property">
<label>Surname</label>
<input type="text" name="properties[Surname]">
</div>

{% endif %}

{% if product.metafields.custom.date_of_birth %}

<div class="main-product-property">
<label>Date of Birth</label>
<input type="text" name="properties[Date of Birth]">
</div>

{% endif %}

{% if product.metafields.custom.time_of_birth %}

<div class="main-product-property">
<label>Time of Birth</label>
<input type="text" name="properties[Time of Birth]">
</div>

{% endif %}

{% if product.metafields.custom.weight %}

<div class="main-product-property">
<label>Weight</label>
<input type="text" name="properties[Weight]">
</div>

{% endif %}

{% if product.metafields.custom.height %}

<div class="main-product-property">
<label>Height</label>
<input type="text" name="properties[Height]">
</div>

{% endif %}

I also added custom data and added definitions for the different fields I wanted. The definitions are here :

• Height

  product.metafields.custom.height

  True or false

  1 product
• Weight

  product.metafields.custom.weight

  True or false

  1 product
• Time of Birth

  product.metafields.custom.time_of_birth

  True or false

  1 product
• Date of Birth

  product.metafields.custom.date_of_birth

  True or false

  1 product
• Surname

  product.metafields.custom.surname

  True or false

  1 product
• name field

  product.metafields.custom.name_field

  True or false

  1 product

I am now in my main-cart-items.liquid code editor , however I dont know how I can get these options to display in your cart. 

What do I need to add so it will now display the info on the product page ? I need this info to display in the shopping cart :

Name 

Surname 

Date of Birth 

Time of Birth 

Weight 

Height

Thanks for any help!

Using Dawn theme.


***Update***

I went to my cart and i added the .json at the end of the url. 

It seems like the custom fields are not being saved to the item? And that is why it is not displaying?


I had a chat with chatgpt , here is what it says :

From the JSON response, it appears that the "properties" object for the item is empty. This might be why the custom fields are not displaying in your cart. Make sure that the custom fields are correctly assigned to the product properties in your store's backend. If the properties are correctly set but still not appearing, there might be an issue with how the properties are being rendered in your cart template.


I am not sure how to ensure the custom properties are being saved???


My store URL is : 

https://40f42b-de.myshopify.com/

Password is : saompo

[aldy-expatify · Accepted solution]

Hi @Greggy55 

Sorry just need your confirmation. I see that the data already shown, have you solved the issue?

[Greggy55]

Yes I solved it thank you

[aldy-expatify]

@Greggy55 Cool 👍
Would you mind marking the post as solved, please?

[EasifyApps]

Hi @Greggy55,

You can easily create your text fields using the free Easify Product Options app. It's a quick solution that allows you to not only create the fields but also display the entered values on the cart page, all without any need for coding on your part. 😊

[Greggy55]

I managed to solve it. thanks for the help!!!

[Oranjaman]

IF you don't mind, how did you manage to solve this. Can you share how you did this. I have a similar issue with my website where I am trying to have the width, height and calculated price of the item show up in the cart but can't seem to get it working.