When you provide a product form that includes options for a customer to chose between, you will often need those selections to change aspects of the product. Foxy has a specific syntax that allows you to modify a products price, weight, code or category based on selections a customer makes in your form.

We'll continue with our Red Velvet Cake form, which includes options for shape and servings:

<form action="https://example.foxycart.com/cart">
	<input type="hidden" name="name" value="Red Velvet Cake">
	<input type="hidden" name="price" value="24.99">
	<input type="hidden" name="code" value="cake-rv">
	<input type="hidden" name="weight" value="0.5">
	<label for="shape">Shape:</label>
	<select name="shape" id="shape">
		<option value="Circle">Circle</option>
		<option value="Square">Square</option>
		<option value="Rectange">Rectangle</option>
	</select>
	<label>Number of Servings:</label>
	<input type="radio" name="servings" id="servings1" value="6 pieces"> <label for="servings1">6 pieces</label>
	<input type="radio" name="servings" id="servings2" value="12 pieces"> <label for="servings2">12 pieces</label>
	<input type="radio" name="servings" id="servings3" value="20 pieces"> <label for="servings3">20 pieces</label>
	<button>Add To Cart</button>
</form>

For this kind of product, we would ideally want to increase the price and weight if a customer orders a larger size. And for inventory purposes, we'd also like to have the code update to match the selections too.

Here is an updated version of the add to cart form that includes the product option modifiers, and then we'll explain what they're doing:

<form action="https://example.foxycart.com/cart">
	<input type="hidden" name="name" value="Red Velvet Cake">
	<input type="hidden" name="price" value="24.99">
	<input type="hidden" name="code" value="cake-rv">
	<input type="hidden" name="weight" value="0.5">
	<label for="shape">Shape:</label>
	<select name="shape" id="shape">
		<option value="Circle{c+-c}">Circle</option>
		<option value="Square{c+-s}">Square</option>
		<option value="Rectange{c+-r}">Rectangle</option>
	</select>
	<label>Number of Servings:</label>
	<input type="radio" name="servings" id="servings1" value="6 pieces{c+6}"> <label for="servings1">6 pieces</label>
	<input type="radio" name="servings" id="servings2" value="12 pieces{p+5|w+0.5|c+12}"> <label for="servings2">12 pieces (+$5)</label>
	<input type="radio" name="servings" id="servings3" value="20 pieces{p+8|w+1.2|c+20}"> <label for="servings3">20 pieces (+$8)</label>
	<button>Add To Cart</button>
</form>

Within the values for the “shape” and “servings” options, you'll see that there is an additional suffix enclosed in curly brackets. This special syntax is the product option modifiers to change either the price, weight, code or category of the product.

As an example, the value for the “Circle” option has been updated to Circle{c+-c}. The value that is added to the cart for the “Shape” parameter will still just be “Circle”, but using the {c+-c} modifier, the code for the product will have “-c” appended to it, making the code “cake-rv-c”.

Product option modifiers stack though, in the order they are in the form, so if someone selected a “Circle” shape with a “12 pieces” serving size, then they would also apply the additional modifiers from that option: {p+5|w+0.5|c+12}. Using these modifiers, three changes would be made:

1. The price would be increased by $5 to become $25.99
2. The weight would be increased by 0.5 to become 1
3. The code would have “12” appended to it, which paired with the existing “-c” modification from the “Circle” option, the product code would become “cake-rv-c12”

Here is the working form for you to try out different combinations of options to see how the changes apply:

The example above just shows appending/increasing the price, weight and code using the + modifier - but for some of the parameters, we also support decreasing (-) and setting (:) the specific value through the modifier. Here is the complete list of option modifiers:

p

Modifies: Price

Increasing: p+5 - increase the price by $5

Decreasing: p-5 - decrease the price by $5

Setting: p:5 - set the price to $5

Notes: If working with multicurrency, you may need to append the currency code to the price as required, such as {p+5CAD}. If no currency code is specified, it's assumed the price is in the store currency.

w

Modifies: Weight.

Increasing: w+2 - increase the weight by 2

Decreasing: w-2 - decrease the weight by 2

Setting: w:2 - set the weight to 2

c

Modifies: Code

Setting: c:mycode - set the code to “mycode”

Appending: c+-small - append “-small” to the product code

y

Modifies: Category

Setting: y:mycat - set the product category to be “mycat”

• Getting started with Foxy products
• Adding multiple products to the cart in a single add to cart
• Creating subscription products
• Creating downloadable products