Modify cart button on product page

Solved
Highlighted
Excursionist
49 0 4

Does anyone know how to change the 'add to cart' button so that once clicked it show the custom option fields for my products (they are personalized products where customer enters a name etc). I would like it so that the option fields are hidden on the product page until a customer click on the button. obviously the button will have a different label such as 'personalize and add to cart'.

I have seen similar functions on many websites so I know it can be done. Just needs some code that will call up the option fields container when the button is clicked.

0 Likes
Highlighted
Shopify Expert
3666 550 885

Hi,

Yes its possible you need to make hide textbox and on button click show this box,

<input type="text" id="pers_btn">
<input type="button" value="Add to cart" id="add_to_cart">
$(document).on('click','#add_to_cart',function(){
    $('#pers_btn').show();
})

Let me know if they make sense or text me.

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

To be more specific on what I need to do, see the following screenshot:

 

screen.JPG

0 Likes
Highlighted
Shopify Expert
3666 550 885

As mention above you need to hide this div with css like bellow:

suppose this is your structure...

<div class="pers_cls" style="display: none;">
    <label>Name:</label>
    <input type="text" id="pers_btn">
</div>
<input type="button" value="Add to cart" id="add_to_cart">

<script type="text/javascript">
$(document).on('click','#add_to_cart',function(){
    $('.pers_cls').show();
})
</script>

Note: This is placeholder for your structure.

Let me know if you cant,text me on skpye. 

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

Thanks very much. I'm now very close to getting it exactly as I wanted.

The personalization fields now only display when the customer clicks on the button labelled "CLICK HERE TO PERSONALIZE", so that's good. (see attached screenshot which shows how the product page looks after the button is clicked).

Is there a way of altering that button so that once it has been clicked on, the label changes to "HIDE PERSONALIZATION" and when the customer clicks on it, the personalization fields go back to being hidden?

 


screen.JPG

 

[my relevant code is as follows:]

<input type="button" value="CLICK HERE TO PERSONALIZE" id="show_personalization">
               
<div class="pers_area" style="display: none;">      
          <div class="personalisation_label">
            <p>Type the personalisation you want below:</p>
          </div>
  
    <div id="infiniteoptions-container"></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>
          
            {% if section.settings.enable_payment_button %}
              {{ form | payment_button }}
            {% endif %}
          {% endform %}
  
</div>

          
<script type="text/javascript">
$(document).on('click','#show_personalization',function(){
    $('.pers_area').show();
})
</script>          
          
          

 

0 Likes
Highlighted
Shopify Expert
3666 550 885

This is an accepted solution.

Change this Jquery code:

<script type="text/javascript">
$(document).on('click','#show_personalization',function(){
    if($('.pers_area').is(':visible')){
        $(this).val('CLICK HERE TO PERSONALIZE');
        $('.pers_area').hide();
    }else{
        $(this).val('HIDE PERSONALIZATION');
        $('.pers_area').show();
    }   
})
</script> 
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Excursionist
49 0 4

Thanks. That's excellent. It all appears to be working perfectly now.

I've got some more changes in mind, so I'll look into hiring you as an expert.

0 Likes
Highlighted
Shopify Expert
3666 550 885

Sure text me on Skype when you need.

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

Thanks, but I don't have Skype. Is there another way I can get in touch to hire you as Expert?

0 Likes
Highlighted
Shopify Expert
3666 550 885

Sure text me on hangout or mail(jasoliyabrijesh123@gmail.com) 

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