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

[LMPerkins]

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]

[jacson]

Just wanted to thank snowshoe for the great code for the original answer to the original question, works perfect.  One note, you forgot the quotes on either side of this:  onclick=CalculateOrder(this.form) . 

It should be: onclick="CalculateOrder(this.form)"

Thanks again!!

Jacson

[Pizzicato]

My drop downs aren't showing up on my webpage!

http://www.pizzicatopizza.com/shop/t-shirts/

I've included the code here. I pasted directly from the code you've provided but they still won't work. Any thoughts? 

<img title="Pizzicato T-Shirts" src="http://www.pizzicatopizza.com/wp-content/uploads/iheartpizza.jpg" alt="Pizzicato T-Shirts" width="625" height="372" />

<strong>Everyone loves Pizzicato T-Shirts!</strong> Here’s a whimsical gift for the pizza diva in your life. <strong>Made in the USA by American Apparel,</strong> these super-soft cotton tees fit well, wash like a dream and are sure to please your special someone. Available in women’s sizes S-XL and toddler’s sizes 2T and 4T. For men, we are offering our special
<strong>"Hope You Love Garlic" </strong> T-Shirt (made by Gildan).
<div style="margin-top: 20px;">
<div style="float: left; margin-right: 60px;"><img src="http://www.pizzicatopizza.com/wp-content/uploads/iheartpizza_sm.jpg" alt="" width="80px" />&nbsp;

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="paypal"><input type="hidden" name="cmd" value="_s-xclick" /> <input type="hidden" name="hosted_button_id" value="NEVTM35RKWTK2" />
<table>
<tbody>
<tr>
<td><input type="hidden" name="on0" value="I Heart Pizza" />I Heart Pizza</td>
</tr>
<tr>
<td><select name="os0"> <option value="Toddler 2T">Toddler 2T $14.50 USD</option> <option value="Toddler 4T">Toddler 4T $14.50 USD</option> <option value="Women's Small">Women's Small $20.00 USD</option> <option value="Women's Medium">Women's Medium $20.00 USD</option> <option value="Women's Large">Women's Large $20.00 USD</option> <option value="Women's XL">Women's XL $20.00 USD</option> </select></td>
</tr>
</tbody>
</table>
<input type="hidden" name="currency_code" value="USD" /> <input type="image" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" alt="PayPal - The safer, easier way to pay online!" /> <img src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" alt="" width="1" height="1" border="0" /></form></div>
<div style="float: left;"><img src="http://www.pizzicatopizza.com/wp-content/uploads/hylg_small.jpg" alt="" width="80px" /><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"><input type="hidden" name="cmd" value="_s-xclick" /> <input type="hidden" name="hosted_button_id" value="4NDRBXG38B3ZL" />
<table>
<tbody>
<tr>
<td><input type="hidden" name="on0" value="Hope You Love Garlic" />Hope You Love Garlic</td>
</tr>
<tr>
<td><select name="os0"> <option value="Men's Small">Men's Small $15.00 USD</option> <option value="Men's Medium">Men's Medium $15.00 USD</option> <option value="Men's Large">Men's Large $15.00 USD</option> <option value="Men's XL">Men's XL $15.00 USD</option> </select></td>
</tr>
</tbody>
</table>
<input type="hidden" name="currency_code" value="USD" /> <input type="image" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" alt="PayPal - The safer, easier way to pay online!" /> <img src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" alt="" width="1" height="1" border="0" /></form></div>
<div style="float: left; margin-top: 20px;"><em>*Please note, when you click the add to cart button your shopping cart will automatically open in a new window for checkout via paypal.</em></div>
</div>

[snowshoe]

Pizzicato, you should have started a new post however, I did test the code.  I created a blank web page and copied the code to it for testing.  It does work and display the dropdowns selections properly.  That demonstrates there is nothing wrong with PayPal item button code itself.  See below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Test</title>

<!-- START META TAG SECTION -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="Content-Language" content="en">
<!-- END META TAG SECTION -->



</head>

<body>

<!-- INSERT TEST CODE HERE -->

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="NEVTM35RKWTK2">
<table>
<tr>
<td>
<input type="hidden" name="on0" value="I Heart Pizza">I Heart Pizza</td>
</tr>
<tr>
<td>
<select name="os0">
<option value="Toddler 2T">Toddler 2T $14.50 USD</option>
<option value="Toddler 4T">Toddler 4T $14.50 USD</option>
<option value="Women's Small">Women&#8217;s Small $20.00 USD</option>
<option value="Women's Medium">Women&#8217;s Medium $20.00 USD</option>
<option value="Women's Large">Women&#8217;s Large $20.00 USD</option>
<option value="Women's XL">Women&#8217;s XL $20.00 USD</option>
</select>
</td>
</tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><br />
</form>

<br><br><br><br>


<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="4NDRBXG38B3ZL">
<table>
<tr>
<td>
<input type="hidden" name="on0" value="Hope You Love Garlic">Hope You Love Garlic</td>
</tr>
<tr>
<td>
<select name="os0">
<option value="Men's Small">Men&#8217;s Small $15.00 USD</option>
<option value="Men's Medium">Men&#8217;s Medium $15.00 USD</option>
<option value="Men's Large">Men&#8217;s Large $15.00 USD</option>
<option value="Men's XL">Men&#8217;s XL $15.00 USD</option>
</select>
</td>
</tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><br />
</form>



<!-- END TEST CODE SECTION -->



</body>
</html>

The issue is with your web page template design and/or function as something is preventing the dropdowns from being displayed.  It's possible there is a line of code in one of your style sheets or .css files or script files that's causing the issue.   Seems this is a WordPress issue as others have had the similar problems, you need to work with their support or community forums to get your issue resolved.  It may simply be an tweak you need to make however, you need to find the right expertise who can view your files and find the line of code that needs tweaked.

[ilovecards2012]

I do not have the option to override payment options in my profile >seller settings.  Can someone help me find this so I can check YES .. Please

[snowshoe]

What type of PayPal Account do you have, Personal, Permier or Business?   The option is only available for Premier and Business Accounts.