Product Options: Altering Items Prices with Custom Fields

In this quick tutorial, we'll show you how to use our custom fields to alter and modify the price of an item depending on the item options selected. We'll use a simple scenario for our example: you want to offer the options of natural or smoked flavor for your bacon, and you’d like to charge an extra dollar for the smoked option.

When defining your item properties, you can define custom dropdown fields and optionally associate an option within the dropdown list to a specific price variation, as follow.

<!-- lang: html -->

<a href="#"
  class="snipcart-add-item" 
  data-item-id="2" 
  data-item-name="Oh bacon!" 
  data-item-price="10.00" 
  data-item-weight="20" 
  data-item-url="http://myapp.com/products/bacon" 
  data-item-custom1-name="Flavor"
  data-item-custom1-options="Natural|Smoked[+1.00]">
    Buy now
</a>

Notice that the “Natural” option has no price varation associated. That means that that option has no effect on the item price. On the other hand, notice the the “+1.00” markup next to the “smoked” option. The variation can be either positive or negative. You can use the “+” sign or the “-“ (minus) sign to configure the variation. In our case we’ll be adding an extra 1.00$ to the item price.

We could have also configured the regular price to be the one of the “smoked” option and configured the “Natural” option to remove a dollar, like that.

<!-- lang: html -->

...
data-item-custom1-name="Flavor"
data-item-custom1-options="Natural[-1.00]|Smoked" 
...

Now let’s do something more complicated. In addition to the flavors, we’d also like to offer a cut size option for the bacon, where you’d charge an extra 3.00$ for bigger size bacon. All we’ll need to do is add an additional dropdown custom field and configure the price variations associated to the size options. The final price will be the sum of all the price variations of the selected options.

<!-- lang: html -->

<a href="#"
  class="snipcart-add-item" 
  data-item-id="2" 
  data-item-name="Oh bacon!" 
  data-item-price="10.00" 
  data-item-weight="20" 
  data-item-url="http://myapp.com/products/bacon" 
  data-item-custom1-name="Flavor"
  data-item-custom1-options="Natural|Smoked[+1.00]" 
  data-item-custom2-name="Cut size"
  data-item-custom2-options="Regular|Large[+3.00]">
    Buy now
</a>

When using the option price variation markup you can express advanced pricing configuration for almost any type of product you’d like to sell online.