Hide/show line item property fields based on variant selection

Store Design
1

Hello,

I created a test product that has four variations:

  1. No Inscriptions
  2. First name (+$50)
  3. Quote - 5 words max (+$100)
  4. First name & Quote - 5 words max (+$150)

and the following two line item property fields:

  1. First Name Inscription:
  2. Quote (5 Words Max):

I’m hoping someone can help me code the below basic functionality:

  1. Currently when the product page loads it displays the default “No inscriptions” variation - I would like both the “First Name Inscription” and the "Quote (5 words max)” line item property fields to be hidden when this variant is selected.

  2. When the “First name (+$50)” variation is selected I want to display the "First Name Inscription:” line item property field ONLY. This field needs to be required - so the customer must add text into it in order to proceed to the checkout.

  3. When the “Quote - 5 words max (+$100)" variation is selected I want to display the "Quote (5 words max):” line item property field ONLY. This field needs to be required - so the customer must add text into it in order to proceed to the checkout.

  4. When the “First name & Quote - 5 words max (+$150)" variation is selected I want to show BOTH the "First Name Inscription:” and "Quote (5 words max):” line item property fields. Both fields will be required so the customer must add text into each of them in order to proceed to the checkout.

Any help would be greatly appreciated!

2

Hi There!

What you’re describing is pretty complex in code even though the functionality looks basic.

How are those extra fields being reflected on checkout? Are they cart attributes?

3

Hi JHKC,

I used the Shopify UI Elements Generator (https://ui-elements-generator.myshopify.com/pages/line-item-property) and selected the “Show at checkout” option which shows the captured information on the cart and in the order summary on the checkout page. I have seen a similar thread (https://community.shopify.com/c/Shopify-Design/Hiding-line-item-text-box-based-on-selected-variant/td-p/678689) where jquery code was used, but I have a slightly different need than was referenced.