Customisation Options
Customise the Affordability Widget on your WooCommerce Website.
After successfully integrating Affordability Widget with your WooCommerce website, you can choose to customise the widget based on your requirement.
Watch Out!
Customisations on the widget are not applicable for Payments Checkout.
To customise the widget:
- Log in to the , navigate to WooCommerce → Settings and click the Payments tab.
- In the Payments tab, scroll down to Razorpay and click Manage to edit the settings.
- Select Affordability Widget.
You can now customise the following options:
- .
- Offers Enable/Disable.
- Additional Offers.
- Limited Offers.
- Show Discount Amount.
- (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.
- .
- 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.
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.
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
.Handy Tips
By default, all the offers marked visible on the Razorpay Dashboard during the offer creation appear on the widget.
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.
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
To display limited offers on the widget, enter the offer_id of the offers of your choice.
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.
Configure the payment methods you want to display on the website based on your requirement.
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.
Razorpay supports
and 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.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.
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.
Razorpay supports
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.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.
To display the
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.Razorpay supports
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.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.
Alter the appearance of the widget based on your website. You can customise the widget based on the following themes and colors.
- Widget Theme Colour: Enter the 6-character HEX code of the theme based on your requirement. The default theme colour is blue.
- Heading Colour: Enter the 6-character HEX code of the heading colour based on your requirement. The default colour is black.
Watch Out!
Enter the font size as per pixels (px). You only have to enter the required size: for example, 14.
- Heading Font Size: Enter the font size of the heading based on your requirement. The default size is 12.
-
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.
-
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.
-
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)
If you want to display the light variant of the logo, clear the Enable Dark Logo check box.
Once you customise the widget based on your requirement, click Save Changes.
Was this page helpful?