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, you will be able to continue using the app on a grandfathered plan.
- New requests for Quantity Breaks will be directed to Custom Pricing. Custom Pricing's Select plans can be used to create quantity breaks. For more information on pricing, please visit Custom Pricing Overview.
- If you'd like move from Quantity Breaks (standalone) to Custom Pricing, please visit Switch from Quantity Breaks to Custom Pricing.
Setup
- From within Quantity Breaks, select Quantity Breaks at the top of the page.
- Select Edit next to the group you would like to customize.
- Scroll down to the Custom field.
- 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> -
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):
- 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>