PayPal Community

LMPerkins · ‎Feb-27-2013

I need to create an "Add to Cart" button for a product that has a number of options, and I would like the details of the selected option to display in the customer's shopping cart.

For example, the Item Name is "T-Shirt" and it comes in three sizes, "Small," "Medium," and "Large," which I would itemize in the Drop-Down Menu Option fields. If a customer buys 1 Small and 1 Large, their Shopping Cart displays only the Item Name ("T-Shirt") but not the Option Name and shows "2" in the Quantity field.

Instead, I would like their shopping cart to display the option detail: "T-Shirt - Small" "1" and "T-Shirt - Large" "1".

Is there any way to control preferences or settings to make this happen?

snowshoe · ‎Feb-27-2013

What you have in mind requires a little extra coding that can't be done using the online button creator. Below is an example that may similar to what you have in mind. If not, it should give you some ideas. Happy coding!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <title></title>
</head>
<body>

<!-- Start of Script -->
<SCRIPT language=javascript>
function CalculateOrder(form)
{

if (form.os0.value == "Small - $14.95")
 {
 form.amount.value = 14.95;
 form.item_number.value = "W-T-Small";
 }
 
if (form.os0.value == "Medium - $14.95")
 {
 form.amount.value = 14.95;
 form.item_number.value = "W-T-Medium";
 }

if (form.os0.value == "LG - $14.95")
 {
 form.amount.value = 14.95;
 form.item_number.value = "W-T-LG";
 }

if (form.os0.value == "XL - $14.95")
 {
 form.amount.value = 14.95;
 form.item_number.value = "W-T-XL";
 }
 
if (form.os0.value == "2XL - $16.95")
 {
 form.amount.value = 16.95;
 form.item_number.value = "W-T-2XL";
 }
 
if (form.os0.value == "3XL - $19.95")
 {
 form.amount.value = 19.95;
 form.item_number.value = "W-T-3XL";
 }

 if (form.os0.value == "4XL - $20.95")
 {
 form.amount.value = 20.95;
 form.item_number.value = "W-T-4XL";
 }
}  
</SCRIPT>
<!-- End of Script -->



<!-- Start of Form -->
<!-- Note: target="paypal" was replaced with the variable target="_self" -->
<!-- Note: shopping_url also added to code -->
<!-- These two changes allow better functionality with IE, Firefox and Chrome --> 
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="on0" value="Size">Size:&nbsp;&nbsp;
<SELECT name="os0">
<OPTION value="Small - $14.95">Small - $14.95</OPTION>
<OPTION value="Medium - $14.95">Medium - $14.95</OPTION>
<OPTION value="LG - $14.95">LG - $14.95</OPTION>
<OPTION value="XL - $14.95">XL - $14.95</OPTION>
<OPTION value="2XL - $16.95">2XL - $16.95</OPTION>
<OPTION value="3XL - $19.95">3XL - $19.95</OPTION>
<OPTION value="4XL - $20.95">4XL - $20.95</OPTION>
</SELECT>
<br><br>
<input type="hidden" name="on1" value="Color">Color:&nbsp;&nbsp;
<select name="os1">
<option value="Sky Blue">Sky Blue</option>
<option value="Ash Grey">Ash Grey</option>
<option value="White">White</option>
</select>
<br><br>
<INPUT onclick=CalculateOrder(this.form) type=image alt="Make payments with PayPal - it's fast, free and secure!" 
src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border=0 name="submit">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="your email address">
<input type="hidden" name="item_name" value="Widget - T-Shirt">
<input type="hidden" name="amount">
<input type="hidden" name="item_number">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="shopping_url" value="http://www.yourwebsite.com/your_page.html">
<input type="hidden" name="return" value="http://www.yourwebsite.com/successorder.html">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="bn" value="PP-ShopCartBF">
</FORM>
<!-- End of Form -->

<br><br><br><br>
<hr align="left" width="50%" noshade>
<br><br>
NOTES:
<br>
In order to test the code, you must replace the &quot;business&quot; value variable with your PayPal Email Address or Account ID.

</body>
</html>

View solution in original post

snowshoe · ‎Feb-27-2013

What you have in mind requires a little extra coding that can't be done using the online button creator. Below is an example that may similar to what you have in mind. If not, it should give you some ideas. Happy coding!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <title></title>
</head>
<body>

<!-- Start of Script -->
<SCRIPT language=javascript>
function CalculateOrder(form)
{

if (form.os0.value == "Small - $14.95")
 {
 form.amount.value = 14.95;
 form.item_number.value = "W-T-Small";
 }
 
if (form.os0.value == "Medium - $14.95")
 {
 form.amount.value = 14.95;
 form.item_number.value = "W-T-Medium";
 }

if (form.os0.value == "LG - $14.95")
 {
 form.amount.value = 14.95;
 form.item_number.value = "W-T-LG";
 }

if (form.os0.value == "XL - $14.95")
 {
 form.amount.value = 14.95;
 form.item_number.value = "W-T-XL";
 }
 
if (form.os0.value == "2XL - $16.95")
 {
 form.amount.value = 16.95;
 form.item_number.value = "W-T-2XL";
 }
 
if (form.os0.value == "3XL - $19.95")
 {
 form.amount.value = 19.95;
 form.item_number.value = "W-T-3XL";
 }

 if (form.os0.value == "4XL - $20.95")
 {
 form.amount.value = 20.95;
 form.item_number.value = "W-T-4XL";
 }
}  
</SCRIPT>
<!-- End of Script -->



<!-- Start of Form -->
<!-- Note: target="paypal" was replaced with the variable target="_self" -->
<!-- Note: shopping_url also added to code -->
<!-- These two changes allow better functionality with IE, Firefox and Chrome --> 
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="on0" value="Size">Size:&nbsp;&nbsp;
<SELECT name="os0">
<OPTION value="Small - $14.95">Small - $14.95</OPTION>
<OPTION value="Medium - $14.95">Medium - $14.95</OPTION>
<OPTION value="LG - $14.95">LG - $14.95</OPTION>
<OPTION value="XL - $14.95">XL - $14.95</OPTION>
<OPTION value="2XL - $16.95">2XL - $16.95</OPTION>
<OPTION value="3XL - $19.95">3XL - $19.95</OPTION>
<OPTION value="4XL - $20.95">4XL - $20.95</OPTION>
</SELECT>
<br><br>
<input type="hidden" name="on1" value="Color">Color:&nbsp;&nbsp;
<select name="os1">
<option value="Sky Blue">Sky Blue</option>
<option value="Ash Grey">Ash Grey</option>
<option value="White">White</option>
</select>
<br><br>
<INPUT onclick=CalculateOrder(this.form) type=image alt="Make payments with PayPal - it's fast, free and secure!" 
src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border=0 name="submit">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="your email address">
<input type="hidden" name="item_name" value="Widget - T-Shirt">
<input type="hidden" name="amount">
<input type="hidden" name="item_number">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="shopping_url" value="http://www.yourwebsite.com/your_page.html">
<input type="hidden" name="return" value="http://www.yourwebsite.com/successorder.html">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="bn" value="PP-ShopCartBF">
</FORM>
<!-- End of Form -->

<br><br><br><br>
<hr align="left" width="50%" noshade>
<br><br>
NOTES:
<br>
In order to test the code, you must replace the &quot;business&quot; value variable with your PayPal Email Address or Account ID.

</body>
</html>

LMPerkins · ‎Feb-27-2013

Thank you, Snowshoe — I'll try this and let you know how it works out!

snowshoe · ‎Feb-27-2013

No worries, you'll be thinking of all kinds of things now.

LMPerkins · ‎Feb-27-2013

Wow! Snowshoe! That worked beautifully! Thank you so much! (boy, do I love having control!)

snowshoe · ‎Feb-27-2013

All the best!

ilovecards2012 · ‎Feb-28-2013

I have a similar question though mine involves shipping ....

I sell old stuff, lol, so there are never standard sizes/weights for shipping. How do I implement a per item shipping cost ? I am at a complete loss on how to do this and I am not a coder, but am familiar with html type stuff. Can you help or offer some suggestions as to where i might find an iframe type thing I could implement on my site? Any and all suggestions, help etc would be graciously appreciated.

Thank you in advance

snowshoe · ‎Feb-28-2013

No worries but, you should have started a new post.

Tips:

You can override the shipping charges on a button by including the following variables: "shipping" and/or, "shipping2".   Note, the shipping variables are related to the item it is associated with, not the entire shopping cart.   The "shipping" variable is the cost of shipping the first item.    The "shipping2" variable is the cost you would charge for additional numbers of the same item.   Let's say you charge $1.00 to ship the first item, but you might give a price break for the anything beyond the first item.   So, for purchasing more of the item you would charge $.50 per item (2 through x).

For example:

For non-hosted item button code, you can override the Profile Shipping Table calculations by adding the following lines to your extisting button code:

< input type="hidden" name="shipping" value="1.00">
< input type="hidden" name="shipping2" value=".50">

If using the Online Button Creator:

For "hosted" or "encrypted" item button code you need to modify button code using the "Advanced Variables" in Step 3.   Note the text box near the bottom of the page. There you can insert extra variables.   For example, to insert the "shipping" and "shipping2" override variables just enter:

shipping=1.00
shipping2=.50

There's no HTML extras, just the name of the variable, an equal sign and the value.

How to check to see if you have the shipping override enabled.

Note, you have to have at least one shipping method setup for the shipping override variables to be recognized.   If you don't have at least one shipping method setup, you must set one up first.   Additionally, when using the override variables, you will not see the Estimate Shipping and Tax box on the PayPal Checkout Screen.

* Log in to your PayPal Account.
* Select Profile.
* Select My Selling Tools.
* Under Shipping my Item, you will see Shipping preferences and Shipping Calculations.
* Click on Update next to Shipping Calculations.
* On the next page, look for "Override Shipping Methods Per Transaction".   It should be "ON".
* If not, you need to Edit your settings.
* Look for "Use the shipping fee in the transaction instead of my calculator's settings:"
* Select "Yes".
* Save changes.

Notes concerning the use of the "handling_cart" variable and the "handling" variable.   The "handling_cart" variable is used with Add to Cart Item Buttons and unlike "shipping" and "shipping2" it's value applies to the entire shopping cart.   The value will only be applied one time.   You can include the "handling_cart" variable with multiple item buttons but, it will only be applied by the first button thats selected.   All other selections will be ignored for that shopping session.   Should you use different values for this variable, depending on which one is applied first, the Shipping amount displayed may be different than expected.

The "handling" variable is used with Buy Now Item Buttons.   With either variable, "handling_cart" or "handling", the value will be included with the Shipping amount on the PayPal Screens and not displayed as a separate line item.

ilovecards2012 · ‎Feb-28-2013

I do not see an "UPDATE" button anywhere, so can't continue with your directions. Thank you for answering so soon.

ilovecards2012 · ‎Feb-28-2013

I need to create a sample button and product to test this all out. I am a bit confused but highlighted this post and need to have tester items and tester buttons as I am a hands on learner. Thank you so much for your help and I will see how far I get as your instructions are pretty straight forward. Many Many Thanks....

PayPal Community

How to Create "Add to Cart" Button so Drop-Down Details Display in Shopping Cart?

Haven't Found your Answer?