---
title: Adding coupon code inputs to pages
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

To allow customers to enter [coupon codes](https://docs.kentico.com/k12sp/e-commerce-features/managing-on-line-stores/discounts/working-with-coupon-codes.md) for discounts or gift cards on the pages of your on-line store:

1. Open the **Pages** application.
2. Select the required page in the content tree.
3. Switch to the **Edit -> Design** tab.
4. Add the **Coupon codes** [ web part](https://docs.kentico.com/k12sp/developing-websites/developing-websites-using-portal-engine/using-and-configuring-web-parts.md) to the appropriate web part zone.
5. Configure the web part properties.

   > **Info:** We strongly recommend leaving the web part's **Show Apply button** property enabled. This allows customers to instantly apply coupon codes while viewing the page.
   >
   > If _Show Apply button_ is disabled, the web part only applies the entered coupon code when moving to the next step in the [checkout process](https://docs.kentico.com/k12sp/e-commerce-features/configuring-on-line-stores/checkout-process.md).
6. Click **Save & Close**.

The _Coupon codes_ web part uses a [transformation](https://docs.kentico.com/k12sp/developing-websites/loading-and-displaying-data-on-websites/writing-transformations.md) to display the coupon codes applied to the customer's shopping cart. The transformation allows you to format the coupon codes according to any requirements of your website's design.

When configuring the _Coupon codes_ web part, assign the transformation into the **Transformation name** property. You can either **Select** an existing transformation or create a **New** one.

When writing the code of transformations for coupon code items:

- Use the **Code** field to access the coupon code text – _{% Code %}_ in Text / XML transformations, _<%# Eval\<string>("Code") %>_ in ASCX transformations.
- You can use the **IsApplied** field to evaluate whether the coupon code is valid for the current shopping cart – _{% IsApplied %}_ in Text / XML transformations, _<%# Eval\<bool>("IsApplied") %>_ in ASCX transformations. This allows you to add formatting options for coupon codes that are no longer valid, for example after products are removed from the cart and the total price falls under the value required by the coupon code's discount.
- Call the **GetDiscountCouponCodeRemoveButton** method to add elements that allow customers to remove applied coupon codes. The method generates an _\<input>_ element (of the _submit_ type) that removes the specified coupon code from the shopping cart when clicked. The method has the following parameters:
  - _couponCode_ (required) – the text of the removed coupon code.
  - _cssClass_ (optional) – the name of the CSS class assigned to the generated input element.
  - _buttonText_ (optional) – the text caption of the input element (assigned to the _value_ attribute).

```csharp title="Example - Text / XML transformation"

<div>
  <div class="label">
    <span {% if (!IsApplied) {"style='text-decoration: line-through'"} %}>
      {% HTMLEncode(Code) %}
    </span>
    {% if (!IsApplied) {"<span>&nbsp;(not valid)</span>"} %}
  </div>
  <div class="button">
    {% GetDiscountCouponCodeRemoveButton(Code, "btn") %}
  </div>
</div>

```

![Output of the Coupon codes web part with two coupon codes applied](https://docs.kentico.com/docsassets/k12sp/adding-coupon-code-inputs-to-pages/Applying_coupon_codes.png "Output of the Coupon codes web part with two coupon codes applied")

After adding the _Coupon codes_ web part to your website's checkout pages, you can distribute coupon codes among your customers. Customers can then use these codes to receive discounts or redeem gift cards.

> **Note:** **Coupon code restrictions per order**
>
> When validating coupon codes, the system only accepts one code per discount for each order. For example, if a customer knows 2 different coupon codes for a 10% order discount, they can apply the codes to 2 different orders, but **cannot** apply both to a single order to get a 20% discount.
>
> [Gift cards](https://docs.kentico.com/k12sp/e-commerce-features/managing-on-line-stores/discounts/working-with-gift-cards.md) are an exception to this rule – a single gift card can be applied multiple times to the same order with different coupon codes.