Has anyone ever had a similar issue in Cartthrob and have a possible solution

Product XYZ has 4 color options and 4 size options

color A in small is $46
color B in small is $45
color C in small is $40
color D in small is $40

color A in med is $66
color B in med is $65
color C in med is $57.50
color D in med is $57.50

color A in lrg is $86
color B in lrg is $85
color C in lrg is $75
color D in lrg is $75

color A in XL is $107
color B in XL is $105
color C in XL is $92.50
color D in XL is $92.50

How do I build a product that easliy allows the user to pick the size from a select list and the colour and CT calculate the price?

  • Do you have any price modifier fields setup yet? If so, can you share how there configured?
    – Siebird
    Dec 17, 2012 at 22:18

3 Answers 3


Cartthrob supports price modifiers. The website is offline as I write this, but they may do what you want.

On the other hand, some of your numbers look like the prices are not standardized (ie. Medium is not always +$20 over Small, nor is Color A always $6 more than Color C). You may end up having to use the CartThrob hooks to modify the prices as items are added to the cart. With this option, the sky is the limit on your possibilities -- but it will take more thought and a little knowledge of PHP.

  • correct the prices are not standard. There are some great ideas below as to how I may get this working. Dec 18, 2012 at 17:02
  • I have done something like this in the past, but that was right after 2.0 was released and CT has been expanded and improved since then. I would probably look at the cartthrob_add_to_cart_start and cartthrob_add_to_cart_end hooks for your needs: cartthrob.com/docs/docs_cartthrob2/developers/hooks/…
    – EpicVoyage
    Dec 19, 2012 at 3:02

Here's a link to google's cache of the CT price modifiers docs for use while their site is still down.

CT permits you to use a matrix field for as your price modifier field, so with some extra columns and with the help of a little jQuery magic to make the UI nicer we can get to where you want to go.

Create your price modifiers matrix with additional columns for colour and size in addtion to the required option (url friendly value), an option_name (string) and a price value (ie a positive or negative amount to vary the base price by). Alternatively, avoid setting a base price and use the modifiers themselves to set the whole price of the product.

Additionally, structure your option value such that is is the colour and size values combined with a separator such as an underscore, eg red_xl, green_xl, etc.

Now in your template you can use the built-in CT item_options magic:

  <div class="default-options">
    {exp:cartthrob:item_options entry_id="{entry_id}" }
        <option {selected} value="{option_value}">{option_name} {price}</option>

This is what non-js users will see, perfectly usable but not super friendly. Let's fix that with some jQuery. In your template we can write out a couple of JS objects from your item_options field:

    var prodOpts = {
      sizes: [],

Then in an external script / on DOM ready, just hide the .default-options <div>, iterate over prodOpts.sizes and prodOpts.colours and build <select>s for each.

Inject these into the page and hook up some event handlers so that when both of your dynamically created selects have been set to non-default value, your hidden CT populated select is updated (you can get the value to select by concatenating the size and colour values together with your chosen separator).

I don't know what your JavaScript level is, and I'm not going to write the whole thing for you, but if you get stuck be sure to ask another question and I'll do my best to help out.

  • Great answer, I did something similar to this for complex products. Wanted to clarify, you can use multiple price modifier fields per channel. Even the default setup has 3 different PM fields
    – Siebird
    Dec 18, 2012 at 13:34
  • Great info Tom. I may wait a little bit to see if CT releases their update as Jason stated Dec 18, 2012 at 17:02

Cartthrob is about to release a product option configurator fieldtype which will be exactly what you need.

It allows you to create option groups (eg. color, size).
In each group you can options (eg. red, blue) and prices.

The fieldtype will automatically generate fields for every combination of option groups. (eg. large red, large blue, small red, small blue, etc).
It'll allow you to track inventory (optional) for each combination and calculate the prices automatically based on your options. You can also enter option names (perhaps an SKU) and labels (eg. Large Red) for the combinations.

Chris from CT tweeted a link to a short screencast about this recently.

If you can wait just a little longer, this'll be the ticket.
If not, you'll have to go with Tom's solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.