Display Options

Top  Previous 

The screenshots below shows an example of how you can display your product on your existing site with drop-down buttons, checkboxes and radio buttons.

 

IMPORTANT: The HTML codes shown below should always be included within the <form> </form> tags that are in the HTML code that is generated for each product. If you do not do this, these options will not show up next to the products in the shopping cart.

 

  Example HTML code for "drop down menu"

 

  <select name = type>

  <option value="Select Type" selected> Select Type </option>

  <option value="Type: CD^5.00">CD - Add $5.00</option>

  <option value="Type: CD and DVD^10.00">CD and DVD - Add $10.00</option>

  <option value="Type: Deluxe Edition^20.00">Deluxe Edition - Add $20.00</option>

  </select>

 

drop_down

 

  Example HTML code for "check boxes"

 

  <INPUT type=checkbox name=op12 value="cd">CD - Add $14.88

  <INPUT type=checkbox name=op12 value="deluxe edition">Deluxe Edition - Add $20.00

 

checkboxes

 

  Example HTML code for "Radio Buttons"

 

  <input type="radio" name="radiobutton" value="CD">CD<br>

  <input type="radio" name="radiobutton" value="CD and DVD">CD and DVD <br>

  <input type="radio" name="radiobutton" value="Deluxe Edition">Deluxe Edition

 

radiobuttons

 

  Adding a small Quantity Text Box Next to your Add to Cart Button

 

  If you would like your customers to be able to enter a quantity number for the product they are ordering so that it can get passed right to the cart when they click add to cart, then you will need to add this line of code to your “add to cart” code:

 

  <input type=text name=qty[] value='1' size="4">

 

  **Note: This code has to go within your add to cart form tags ( <form> </form>)

 

Price Option Modification

 

When you use the HTML option for drop down, checkboxes and radiobuttons on your products pages, you can modify the code so that a specific option has a new price.  For example if you have the options:

Small, Medium and Large

If the Large option is $5.00 more then the other opiton, then you can modify the code as follows:

<option value="Large^5.00">Large - Add $5.00</option>
 

By adding the "^5.00" to the code as above, if a customer would choose the large option, the amount that is added to the shopping cart is increased by $5.00.
 

You can do this type of modification with dropdowns, checkboxes or radio buttons.