Product Tag

{exp:store:product}
  <!-- add to cart form / product details -->
{/exp:store:product}

The product tag is usually placed inside an {exp:channel:entries} tag - either on a product list page, or an individual product page. It generates a form which is used to add products, along with any modifiers, to the cart.

Product Tag Parameters

entry_id=””

Specify the entry ID of the product. Usually this is passed through from an {exp:channel:entries} loop. This would be achieved by using the {entry_id} parameter:

entry_id="{entry_id}"

return=”path”

This parameter is optional. It will redirect the user to the specified page after the form is submitted - such as the Checkout page. If no redirect is specified, the form will display the current page (useful if you just wish to update a sidebar cart)

empty_cart=”path”

When set to yes, this empties the current cart before adding the selected product. Useful for single-product websites, or donations.

form_id=”value”

Set an id attribute on the generated HTML form.

form_name=”value”

Set a name attribute on the generated HTML form.

form_class=”value”

Set a class attribute on the generated HTML form.

html:attribute=”value”

Specify arbitrary attributes on the generated HTML form. For example:

html:parsley-validate="true"

disable_form=”yes”

When set to yes, this disables wrapping the output in an add to cart form. This parameter is usually used in conjunction with the Product Form Tag, to manually build an add to cart form which allows the customer to add multiple items to their cart at once.

disable_javascript=”yes”

When set to yes, this disables any automatic javascript output by the tag.

input:custom_modifier_name=”Name”

The input parameter allows you to use custom product modifiers defined in your template, rather than setting them up on a per-product basis. This is useful if you are selling a large number of similar products.

For example, to allow a Small, Medium and Large size option for every product in your store, add the following parameter to the product tag:

input:size="Size"

Then, further down the form, you can use standard HTML to submit the modifier along with the rest of the form:

<select name="size">
  <option value="Small">Small</option>
  <option value="Medium">Medium</option>
  <option value="Large">Large</option>
</select>

These modifiers will behave like any other text modifiers, and display on the checkout and order details pages.

Product Tag Variables

All price variables are pre-formatted according to your currency formatting settings. If you want the unformatted amount, simply append _val to the variable.

entry_id

The entry id of the product. You probably already knew that.

price

The current applicable price of the product (equivalent to {if on_sale}{sale_price}{if:else}{regular_price}{/if}).

regular_price

The regular price of the product, regardless of whether it is currently on sale.

sale_price

The sale price entered for the product, regardless of whether it is currently on sale.

if on_sale

True if the product is currently on sale. You can use this in conditional statements:

{if on_sale}
  Price: <del>{regular_price}</del> <ins>{price}</ins>!
{if:else}
  Price: {price}
{/if}

you_save

The absolute value (in currency units) saved by any applicable sale price.

you_save_percent

The percent saved by any applicable sale price, relative to the regular price.

sale_start_date

The sale start date specified for this product. Note that even if the product is not currently on sale, it may still have a sale end date specified. Use the ExpressionEngine format parameter to adjust the output:

{sale_start_date format="%Y-%m-%d"}

sale_end_date

The sale end date specified for this product. Note that even if the product is not currently on sale, it may still have a sale end date specified.

modifiers Variable Pair

Loop through the applicable product modifiers. Inside the modifiers loop, the following variables are available:

modifier_name

This will display the name of the current modifier group.

modifier_input_name

This tag is used for setting the name attribute of the {modifiers} input or select field.

modifier_instructions

The instructions of the current modifier group if any were set.

modifier_type

The modifier type. One of var, var_single_sku, or text.

modifier_options

Loop through the applicable product modifier options. Inside the modifier options loop, the following variables are available:

option_id

This tag is used for {modifier_options} select option values.

option_name

This tag is used for {modifier_options} select option strings.

{modifier_options}
  <option value="{option_id}">
    {option_name}
    {if price_mod_inc_tax_val} ({price_mod_inc_tax}) {/if}
  </option>
{/modifier_options}

price_mod

The amount an option adds to the current product price, not including tax.

price_mod_inc_tax

The amount an option adds to the current product price including tax.

price_inc_mod

The product price including this option (for example if a product costs $20, and a modifier adds $5 to it, {price_inc_mod} will return $25).

price_inc_mod_inc_tax

The product price including this option, including tax.

if option_first

True if this is the first option in the loop. If you are not using a select input, you may can use the boolean variables {if option_first} or {if option_last} to pre-select options.

<input type="radio" value="{option_id}" name="{modifier_input_name}"  {if option_first} checked="checked" {/if} >{option_name}

if option_last

True if this is the last option in the loop.

modifier_select

When no element attributes need to be set you can use this tag to give an auto-generated select box filled with modifier options.

modifier_input

If {modifier_type} is text, you can use this variable to auto-generate an input box.

if no_modifiers

True if the product has no modifiers.

total_stock

The total stock available for the product. This can variable can also be used in a conditional:

{if total_stock > 0} In Stock {if:else} Out of Stock {/if}

Note: If only some of your products have stock tracking enabled, you will need to combine this with the track_stock conditional below to determine whether a product is out of stock:

{if track_stock AND total_stock <= 0}
    Out of Stock
{if:else}
    In Stock
{/if}

if track_stock

True if any of the product’s SKUs have stock tracking enabled.

min_order_qty

The minimum order quantity for the product. If the product has more than one SKU, this will be the maximum of all minimum order quantities. If the product does not have any minimum order quantity, this will return

1. Useful for pre-populating the item_qty field:

qty_in_cart

The quantity of this product already in the customer’s cart. Note if your product has multiple SKUs, this variable will take them all into account. It can also be used as a conditional:

{if qty_in_cart} This product is already in your cart. {if:else} Buy Now! {/if}

length

The length of the product.

width

The width of the product.

height

The height of the product.

weight

The weight of the product.

handling

The handling charge of the product.

if free_shipping

True if the product has free shipping.

if tax_exempt

True if the product is tax free.

Dynamic Product Variables

Sometimes you want to update the product details when the user changes the modifiers (for example, update the price to reflect the currently selected options). To achieve this, you simply need to add one of our dynamic css classes to any html element within the product tag. For example, to display a dynamic price, you can simply use the following html:

<span class="store_product_price"></span>

The price will be displayed using javascript when the page is first loaded, and updated when the product modifier options are changed. For graceful degradation, you can combine these classes with regular variables:

<span class="store_product_price">{price}</span>

The following dynamic css classes are available:

store_product_price

The product price, including currently selected modifiers.

store_product_price_inc_tax

The product price, including currently selected modifiers and any applicable tax.

store_product_sku

The currently selected SKU.

store_product_stock_level

The stock level of the currently selected SKU.

Note: This variable was previously called store_product_stock, which is deprecated.

store_product_in_stock

The contents of this element will only be displayed if the currently selected SKU is in stock.

store_product_out_of_stock

The contents of this element will only be displayed if the currently selected SKU is out of stock.

Product Tag Example

{exp:store:product entry_id="{entry_id}" return="store/checkout"}

  <p>
    {if on_sale}
      <del>{regular_price}</del>
      <strong>{sale_price}</strong><br />
      Save {you_save}!
    {if:else}
      {price}
    {/if}
  </p>

  {modifiers}
    <p>
      <label>{modifier_name}</label><br />
      {if modifier_instructions}<small>{modifier_instructions}</small><br />{/if}
      {if modifier_type == 'var' OR modifier_type == 'var_single_sku'}
        <select name="{modifier_input_name}">
          {modifier_options}
            <option value="{option_id}">
              {option_name}
              {if price_mod_val} ({price_mod}) {/if}
            </option>
          {/modifier_options}
        </select>
      {if:else}
        <input type="text" name="{modifier_input_name}" />
      {/if}
    </p>
  {/modifiers}

  <p>
    <label>Quantity</label><br />
    <input type="text" name="item_qty" size="3" value="1" />
  </p>

  <p>
    <input type="submit" name="submit" value="Add to Cart" />
  </p>

{/exp:store:product}