Hiding Product Options on checkout pages


I have configured 2 product options for my product using 2 radio buttons. The problem is that these options are available to my customer right throughout the cart and checkout pages even though if he has selected one option for checking out. How do I hide the other options and display only the option selected for checkout ?

Any help will be greatly appreciated.


This may not be beneficial to you, however, have you tried the dropdown box method rather than the radiobox display for your product options?

[quote name=‘Struck’]This may not be beneficial to you, however, have you tried the dropdown box method rather than the radiobox display for your product options?[/QUOTE]

tried it…still things remain the same. all the options remain visible on all the checkout pages…:frowning:

What version are you running?

in 2.0.7 product options in cart have being replaced with a “Click here for more details”


The best way to do this is to override the template using the ‘My Changes’ addon and hooks. There is a lot of good info about hooks in the forum and here: [url]http://docs.cs-cart.com/common.php?dispatch=docs/view&node_name=design-changes[/url] (look for Hooks in the middle of the page)

In file /your skin directory…/views/checkout/components/cart_items.tpl there is a hook that allows a portion of this template to be ignored by creating an override.tpl

The content between {hook name=“checkout:items_list”} and the closing {/hook} around line 110 can be changed by creating a hook file in addons/my_changes/checkout/items_list.override.tpl

just copy and paste everything between that hook into your new override.tpl file and then remove the following (lines 67 to 106):

{assign var="name" value="product_options_$key"}
{capture name=$name}
{if $product.product_options}
{include file="views/products/components/product_options.tpl" product_options=$product.product_options product=$product name="cart_products" id=$key location="cart" disable_ids=$disable_ids form_name="checkout_form"}

{hook name="checkout:product_info"}
{if $product.exclude_from_calculate}
{elseif $product.discount|floatval || $product.taxes}

{if $product.discount|floatval}
{if $product.taxes}

{if $product.discount|floatval}
{if $product.taxes}

{include file="common_templates/price.tpl" value=$product.base_price span_id="original_price_`$key`" class="none"}{$product.amount}{include file="common_templates/price.tpl" value=$product.discount span_id="discount_subtotal_`$key`" class="none"}{include file="common_templates/price.tpl" value=$product.tax_summary.total span_id="tax_subtotal_`$key`" class="none"}{include file="common_templates/price.tpl" span_id="product_subtotal_2_`$key`" value=$product.display_subtotal class="none"}


{if $smarty.capture.$name|trim}



You could also try targetting them with jQuery - that way you don’t have to modify your templates at all. jQuery let’s you match selectors: [url]http://docs.jquery.com/Selectors[/url]

Once you’ve matched something you can hide it easily also with jQuery or add a class to to then hide it via CSS.

Here is an example:

$(document).ready(function() {

$(".mainbox-container .options div.form-field:last").addClass("gift-wrapping");


There are lot’s of other selectors you can use and many more advanced methods to achieve this type of functionality. It’s not limited to just hiding elements either as adding a class to particular things can be very helpful if they aren’t already.

I hope this helps.

  • Jonah