Q Card Docs
Modules

Fees & charges

Product-specific fees and charges sections.

Fees & charges

Description

Fees & charges lists the fees for a product. There is a separate template for Q Card and Q Mastercard, and the page's product type controls which one is shown.

How to edit

  1. Go to Elementor → Editor → Templates.
  2. Search for Fees (or the specific template name below).
  3. Open the template and edit the fee copy directly.
  4. Save, then check a page that uses the template.

Update the copy inside the existing rows rather than rebuilding them, and make sure any change is made on the correct product template.

Variants

  • CK – Fees & Charges – Q Card
  • CK – Fees & Charges – Q Mastercard

Product switching

Both templates can sit on the same page. The IDs qcard-fees and qmastercard-fees are used to show the right one and hide the other based on the product selected on the page. Keep these IDs in place or the wrong fees may appear.

Classes

Primary classes used by the fees & charges component:

ClassWhat it's for
ck-feesMain wrapper
ck-fees__dot-pointA bulleted fee item
ck-fees__iconIcon beside a fee item
ck-fees__buttonCall-to-action button

IDs used:

IDWhat it's for
qcard-feesThe Q Card fees section
qmastercard-feesThe Q Mastercard fees section

Styling is done through a combination of the built-in page builder options as well as custom CSS where needed.

On this page