> ## Documentation Index
> Fetch the complete documentation index at: https://razorpay-881012b3.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Customisation Options

> Customise the Affordability Widget on your WooCommerce Website.

<div style={{display:"flex",flexWrap:"wrap",alignItems:"center",gap:"0.35rem 0.9rem",border:"1px solid rgba(128,128,128,0.28)",borderRadius:"0.5rem",padding:"0.45rem 0.75rem",margin:"0 0 1.25rem",fontSize:"0.875rem"}}>
  <span style={{fontWeight:600}}>Available in</span>
  <span>🇮🇳 India</span>
</div>

After successfully integrating Affordability Widget with your WooCommerce website, you can choose to customise the widget based on your requirement.

<Warning>
  **Watch Out!**

  Customisations on the widget are not applicable for Payments Checkout.
</Warning>

To customise the widget:

1. Log in to the [WordPress account](https://wordpress.com/log-in), navigate to **WooCommerce** → **Settings** and click the **Payments** tab.
   <img src="https://razorpay.com/docs/build/browser/assets/images/woocommerce-settings.jpg" alt="WooCommerce settings" width="800" />
2. In the **Payments** tab, scroll down to **Razorpay** and click **Manage** to edit the settings.
   <img src="https://razorpay.com/docs/build/browser/assets/images/widget-razorpay-edit.jpg" alt="edit" width="800" />
3. Select **Affordability Widget**.
   <img src="https://razorpay.com/docs/build/browser/assets/images/widget-woocommerce-affordability.jpg" alt="Select Affordability Widget to customise the widget" width="800" />

You can now customise the following options:

1. [Offers](#1-offers).
   * Offers Enable/Disable.
   * Additional Offers.
   * Limited Offers.
   * Show Discount Amount.
2. [Payment Methods](#2-payment-methods) (EMI, Cardless EMI and Pay Later).
   * Card EMI Enable/Disable.
   * Limited Card EMI Providers.
   * Cardless EMI Enable/Disable.
   * Limited Cardless EMI Providers.
   * Pay Later Enable/Disable.
   * Limited Pay Later Providers.
3. [Themes and Colours](#3-themes-and-colours).
   * Theme.
   * Heading Colour.
   * Heading Font Size.
   * Content Colour.
   * Content Font size.
   * Link Colour.
   * Link Font Size.
   * Footer Colour.
   * Footer Font Size.
   * Dark Logo Enable/Disable.

<Warning>
  **Watch Out!**

  For comma-separated lists, add the information without a space. For example, if you are adding a list of `offer_ids` then follow this format: `offer_ANZoaxsOww2X53`,`offer_LAZoazsOcc2X55`,`offer_QAFoazsOww2X78`.
</Warning>

## 1. Offers

Configure the offers you want to display on the website based on your requirement. The customers can choose from a wide range of offers for your product or service. Know how to [create offers](/docs/payments/offers/create).

<Info>
  **Handy Tips**

  By default, all the offers marked visible on the Dashboard during the offer creation appear on the widget.
</Info>

<img src="https://razorpay.com/docs/build/browser/assets/images/widget-woocommerce-offers.jpg" alt="Configure the offers on the widget" width="800" />

#### 1.1 Offers Enable/Disable

To display the offers on the widget, select the **Enable Offers** check box.
To disable the offers, clear the check box. If you disable the offers completely, they will not appear on the widget and the customers will not be able to view them.

#### 1.2 Additional Offers

By default, all those offers with the **Show Offer on Checkout** option enabled during creation will appear on the widget. Additionally, you can enter the `offer_id` of the offer that did not have the [Show Offer on Checkout](/docs/payments/offers/create#offer-validity:~:text=Show%20Offer%20on%20Checkout) option enabled during offer creation.

#### 1.3 Limited Offers

To display limited offers on the widget, enter the offer\_id of the offers of your choice.

#### 1.4 Show Discount Amount

Select the check box to display the exact discount amount on the widget. This will help new customers compare and choose your products over your competitors.

## 2. Payment Methods

Configure the payment methods you want to display on the website based on your requirement.

<img src="https://razorpay.com/docs/build/browser/assets/images/widget-woocommerce-payment-methods.jpg" alt="Configure the Payment Methods on the widget" width="800" />

#### 2.1 Card EMI Enable/Disable

To display the **Card EMI** payment option, select the **Enable Card EMI** check box. To disable the card EMI payment option, clear the check box. If you disable the EMI options completely, they will not appear on the widget and the customers will not be able to view them.

#### 2.2 Limited Card EMI Providers

Razorpay supports [Debit Card](/docs/payments/payment-gateway/emi²/faqs#5-can-you-provide-a-list-of-the) and [Credit Card](/docs/payments/payment-gateway/emi²/faqs#1-what-are-the-standard-credit-card-interest) EMI providers for EMI options. By default, all EMI options satisfying the minimum transaction amount will appear on the widget. If you want to display limited EMI options on the widget, enter the list of **provider codes** based on your requirement.

<Info>
  **Handy Tips**

  All EMI options applicable for the payment amount will appear on the widget by default. For example, if the payment amount is ₹3000, the widget displays only the suitable EMI options.
</Info>

#### 2.3 Cardless EMI Enable/Disable

To display the **Cardless EMI** payment option, select the **Enable Cardless EMI** check box. To disable the cardless EMI payment option, clear the check box. If you disable the cardless EMI options, they will not appear on the widget and the customers will not be able to view them.

#### 2.4 Limited Cardless EMI Providers

Razorpay supports [these providers](/docs/payments/payment-gateway/emi²/faqs#cardless-emi) for Cardless EMI options. By default, all Cardless EMI options satisfying the minimum transaction amount will appear on the widget. To display limited Cardless EMI options on the widget, enter the list of **provider codes** based on your requirement.

<Info>
  **Handy Tips**

  All Cardless EMI options applicable for the payment amount will appear on the widget by default. For example, if the payment amount is ₹3000, the widget displays only the suitable Cardless EMI options.
</Info>

#### 2.5 Pay Later Enable/Disable

To display the [Pay Later](/docs/payments/payment-methods/pay-later) payment option, select the **Enable Pay Later** check box. To disable the Pay Later payment option, clear the check box. If you disable the Pay Later options, they will not appear on the widget and the customers will not be able to view them.

### 2.6 Limited Pay Later Providers

Razorpay supports [these providers](/docs/payments/payment-gateway/emi²/faqs#2-what-are-the-standard-interest-rates-charged) for Pay Later options. By default, all Pay Later options satisfying the minimum transaction amount will appear on the widget. If you want to display limited Pay Later options on the widget, enter the list of **provider codes** based on your requirement.

<Info>
  **Handy Tips**

  All Pay Later options applicable for the payment amount will appear on the widget by default. For example, if the payment amount is ₹4000, the widget displays only the suitable Pay Later options.
</Info>

## 3. Themes and Colours

Alter the appearance of the widget based on your website. You can customise the widget based on the following themes and colors.

<img src="https://razorpay.com/docs/build/browser/assets/images/widget-woocommerce-theme.jpg" alt="Configure the themes and colours of the widget" width="800" />

* **Widget Theme Colour**: Enter the 6-character HEX code of the theme based on your requirement. The default theme colour is blue.

<img src="https://razorpay.com/docs/build/browser/assets/images/widget-theme-colour.jpg" alt="Configure the widget theme colour" width="450" />

* **Heading Colour**: Enter the 6-character HEX code of the heading colour based on your requirement. The default colour is black.

<Warning>
  **Watch Out!**

  Enter the font size as per pixels (px). You only have to enter the required size: for example, 14.
</Warning>

* **Heading Font Size**: Enter the font size of the heading based on your requirement. The default size is 12.

<img src="https://razorpay.com/docs/build/browser/assets/images/widget-heading.jpg" alt="Customise the heading colour and font size" width="450" />

* **Content Colour**: Enter the 6-character HEX code of the content colour based on your requirement. The default colour is grey.

* **Content Font Size**: Enter the font size of the content based on your requirement. The default size is 12.

<img src="https://razorpay.com/docs/build/browser/assets/images/widget-content.jpg" alt="Customise the content colour and font size" width="450" />

<img src="https://razorpay.com/docs/build/browser/assets/images/widget-woocommerce-theme2.jpg" alt="View the customisation field on the WooCommerce Dashboard" width="800" />

* **Link Colour**: Enter the 6-character HEX code of the link colour based on your requirement. The default colour is blue.

* **Link Font Size**: Enter the font size of the link based on your requirement. The default size is 12.

<img src="https://razorpay.com/docs/build/browser/assets/images/widget-link.jpg" alt="Customise the link colour and font size" width="450" />

* **Footer Colour**: Enter the 6-character HEX code of the footer colour based on your requirement. The default colour is grey.

* **Footer Font Size**: Enter the font size of the footer based on your requirement. The default size is 12.

* **Dark Logo Enable/Disable**: Razorpay provides customisation option for the logo in two variants:
  * Light
  * Dark (default) <br />
    If you want to display the light variant of the logo, clear the **Enable Dark Logo** check box.

<img src="https://razorpay.com/docs/build/browser/assets/images/widget-dark-logo.jpg" alt="Customise the appearance of the logo on the widget" width="800" />

Once you customise the widget based on your requirement, click **Save Changes**.

### Related Information

* [Affordability Widget: WooCommerce FAQs](/docs/payments/payment-gateway/emi²/widget/faqs#woocommerce)
* [About Affordability Widget](/docs/payments/payment-gateway/emi²/widget)