adding prices to Line Item Properties

I am setting up a custom T-shirt option in my shopify store. I have successfully added the code to allow the customer to provide me with the details of their designs via a large text box and an upload image option. However I would also like to add an option to ask if the customer would like the design printed on the front, back or both. I would like to be able to add an additional $6 to the order if the customer chooses the "both" option. Is there a way I can do this? I will attach my code for my line item properties. my website is https://karkulture.com/collections/custom-car-apparel/products/your-custom-car-t-shirt

 </select>
   
            <form>
            {% if template contains 'Custom T-Shirt' %}

            <p class="line-item-property__field">
            <label for="Detailed Description of Design">Detailed Description of Design</label>
            <textarea required id="Detailed Description of Design" name="properties[Detailed Description of Design]"></textarea>
            </p>
            <p class="line-item-property__field">
            <label>Choose an option</label><br>
            <input required type="radio" name="properties[Choose an option]" value="Printing on Front"> <span>Printing on Front</span><br>
            <input required type="radio" name="properties[Choose an option]" value="Printing on Back"> <span>Printing on Back</span><br>
            <input required type="radio" name="properties[Choose an option]" value="Printing on both Sides"> <span>Printing on both Sides</span><br>
            </p>
            <p class="line-item-property__field">
            <label for="Image of car">Photo (JPG or PNG)</label>
            <input required id="Image of car" type="file" name="properties[Photo]">
            </p>
            <style>
            .ep_inline_block {display:inline-block;vertical-align:middle;margin-left:10px;}
            .ep_block {display:block;margin-top:10px;margin-bottom:2px;}
            </style>
            
            {% endif %}


            <div class="product-single__quantity{% unless section.settings.product_quantity_enable %} is-hidden{% endunless %}">
              <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
              <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
            </div>

            <button type="submit" name="add" id="AddToCart" class="btn {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}">
              <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
            </button>
            </form>
0 Likes
Jasoliya
Shopify Expert
4220 569 1039

Hi,

Add print_box in both Front and back radio button. like bellow

<input required="" class="print_box" type="radio" name="properties[Choose an option]" value="Printing on Front"> <span>Printing on Front</span><br>
<input required="" class="print_box" type="radio" name="properties[Choose an option]" value="Printing on Back"> <span>Printing on Back</span><br>

Add this line:

<input type="hidden" name="properties[Printing Codet]" id="print_price" value="">

Add this js in theme.js

 $(document).on('change','.print_box',function(){
     if($('.print_box').is(':checked')){
         $('#print_price').val('$6');
     }
})

Let me know if you need help.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
B_R-25
Shopify Partner
64 1 3

hi @Jasoliya is this code valid for radio button only? or i can use for Type of form field that is Drop-Down select?

0 Likes
Jasoliya
Shopify Expert
4220 569 1039

Thats depend on how you want your function to work.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
B_R-25
Shopify Partner
64 1 3

I want to use the dropdown menu like this:

<p class="line-item-property__field">
  <label>Style</label>
  <select required class="required" id="style" name="properties[Style]">
    <option value="Rifle">Rifle</option>
    <option value="Handgun">Handgun</option>
    <option value="Heavy Machine Gun">Heavy Machine Gun</option>
    <option value="Custom Pose Design">Custom Pose Design</option>
  </select>
</p>
                
                <p class="line-item-property__field">
  <label for="your-code-name">Your CODE NAME:</label>
  <input id="your-code-name" type="text" name="properties[Your CODE NAME]">
</p>

but have a different price, higher, only for the "Custom Pose Design"

0 Likes
Jasoliya
Shopify Expert
4220 569 1039

We can not change product price from front side base on line item option, price must get from variant. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
B_R-25
Shopify Partner
64 1 3

maybe I explained bad,

I would like to do the same stuff you suggest in previous post to the other user

 

<input required="" class="print_box" type="radio" name="properties[Choose an option]" value="Printing on Front"> <span>Printing on Front</span><br>
<input required="" class="print_box" type="radio" name="properties[Choose an option]" value="Printing on Back"> <span>Printing on Back</span><br>

Add this line:

<input type="hidden" name="properties[Printing Codet]" id="print_price" value="">

Add this js intheme.js

 $(document).on('change','.print_box',function(){
     if($('.print_box').is(':checked')){         $('#print_price').val('$6');
     }
})

 

but not with radio type but with the button I Posted before:

I want to use the dropdown menu like this:

<p class="line-item-property__field">
  <label>Style</label>
  <select required class="required" id="style" name="properties[Style]">
    <option value="Rifle">Rifle</option>
    <option value="Handgun">Handgun</option>
    <option value="Heavy Machine Gun">Heavy Machine Gun</option>
    <option value="Custom Pose Design">Custom Pose Design</option>
  </select>
</p>
                
                <p class="line-item-property__field">
  <label for="your-code-name">Your CODE NAME:</label>
  <input id="your-code-name" type="text" name="properties[Your CODE NAME]">
</p>

but have a different price, higher, only for the "Custom Pose Design" adding like in your example 6$ more to the other variant price that have all of them the same price.

 

is possible to use this button?

0 Likes
Jasoliya
Shopify Expert
4220 569 1039

here two radio button for chose option front and back side and if any box checked then it will add $6 price to item property, now what thing you want? possible to mail or PM me 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
B_R-25
Shopify Partner
64 1 3

ah, thank you for explaining me.

I would like if the customer choose this option:

<option value="Custom Pose Design">Custom Pose Design</option>

to add an extra cost value to the product total cost, like for example if the product cost is 20€ for all variants and options, only if the customer choose the option "custom pose Design" to charge an extra amount of 10€

0 Likes
Jasoliya
Shopify Expert
4220 569 1039

As i told you we can not add price to product or cart from front side for that you must need to add price with variant.

If we manage it by line item then it just show with product title but cant affect on cart or checkout total so user just charge for product price not line item price.

For that you can add "custom pose Design" as variant and change it price to 10 so when they select it they change 10 but you can add it to product price with other variant. if that make sense.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes