Customizing the add to cart functionality in an online store

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

Replacing the add to cart text button with an image

You may encounter situations that require replacing the "add to cart" text with an image button. You can do this by adding image tag to the { tag_addtocart} tag.

The following code will replace "add to cart" text with the add_to_cart_button.gif image:

<p id="add_to_cart">{tag_addtocart,<img src="images/add_to_cart_button.gif">}</p> 

You can also add id="add_to_cart" id to the code shown above, to stylize the shopping cart with CSS formatting.

Replacing the add to cart input box with a drop-down menu

You can change the qty field for products from an input box to drop-down menu by replacing the {tag_addtocartinputfield} in your small and large product layouts with the code example shown below:

<select id="Units_{tag_productid}" class="productTextInput" name="AddToCart_Amount">  
<option value="50">50</option>  
<option value="100">100</option>  
<option value="150">150</option>  
</select>  

Simply replace the values of the option tags with the quantity of products you would like to offer in your online store.