Customize the Quantity Breaks Grid

It's possible to customize the Quantity Breaks grid by entering your own custom HTML and CSS into the text box at the bottom of the Quantity Break Group setup page.

To customize the Quantity Breaks grid, please follow the steps below.

 Alert

The Quantity Breaks (standalone) app is no longer available for new installations. If you are currently using Quantity Breaks (standalone), you will be able to continue using the app on a grandfathered plan.

Any new installs of the Quantity Break app will be redirected to Custom Pricing which has a Quantity Breaks plan available. For more information on Custom Pricing, please visit Custom Pricing: Information and Overview.

 


 

Setup

  1. From within Quantity Breaks, select Quantity Breaks at the top of the page.

    select quantity breaks

  2. Select Edit next to the group you would like to customize.

    select Edit

  3. Scroll down to the Custom field.

    scroll down to custom

  4. Paste this code into the text field:
    <table class='shappify_qb_grid'>
    <thead>
    <tr>
    <th>[qty_text]</th>
    <th>[price_text]</th>
    <th>[percent_text]</th>
    </tr>
    </thead>
    <tbody>
    [per_level]
    <tr>
    <td>[qty] - [qty_max]</td>
    <td>[price] [price_each]</td>
    <td>[percent] [discount_off]</td>
    </tr>
    [end_per_level]
    </tbody>
    </table>
  5. Customize as you would like.

    Note: The above code will produce a grid similar to this (which actually isn't a standard grid layout listed in step 4):

    Quantity Break Group

  6. Select Save.

Most of the code is HTML, but the text that is wrapped in [ and ] characters are fields that the app will populate depending upon the required quantities for a discount and prices that are set up in a particular group.  Below is a legend pointing out what each of these fields is.

These are the "header" cells at the top of their respective columns:

  • <th>[qty_text]</th> - the "title" cell at the top of the quantity column
  • <th>[price_text]</th> - the "title" cell at the top of the price column
  • <th>[percent_text]</th> - the "title" cell at the top of the percentage discount column

These are the cells that output the specific quantity, price, and discount information for each quantity break level setup in the group:

<td>[qty] - [qty_max]</td> - Outputs the cells containing the quantity information in the quantity column.  [qty] outputs the minimum quantity needed to reach that quantity break, [qty_max] will output the maximum quantity allowable for that tier before the next tier is reached (if applicable).

<td>[price] [price_each]</td> - Outputs the cells containing the pricing information in the price column.  [price] outputs the price per unit, whereas [price_each] outputs the "ea" text.

<td>[percent] [discount_off]</td> - Outputs the cells containing the discount percentage off for the tier in the percentage discount column.  [percent] outputs the percentage discount, and [discount_off] outputs the "off" text.

Each of these fields can be removed for various effects, or even replaced with text altogether.  For example, replacing [price_each] with "per unit" will replace the outputted "ea" text with "per unit".

In order to reorder the columns, you'd just need to rearrange the lines in the code.  Just keep in mind that each column has two lines of code for it; the line for the column header, and the line for every other cell of that same column.

For example, if you wanted to have the "discount" column appear before the "priced" column, you just need to cut and paste the lines that output that column before the code that outputs the price column.  To illustrate, it would need to look like this:

<table class='shappify_qb_grid'>
<thead>
<tr>
<th>[qty_text]</th>
<th>[percent_text]</th>
<th>[price_text]</th>
</tr>
</thead>
<tbody>
[per_level]
<tr>
<td>[qty] - [qty_max]</td>
<td>[percent] [discount_off]</td>
<td>[price] [price_each]</td>
</tr><
[end_per_level]
</tbody>
</table>

 

Was this article helpful?
3 out of 3 found this helpful