Show bulk price table inline on product page in BigCommerce

This tutorial shows you how to transform the default bulk price popups on BigCommerce product details page to bulk pricing table. The new bulk pricing or bulk discount rates we will as a table inline your product description. The final result will look like below screenshot:

It also calculates price per piece and percent of savings for you. Your customer will your discount and their benefits clearly. Improving user experience for your store.

Compare to the default bulk pricing popup:

As you see the bulk discount rates is hide until you click on the link. Your customer will not see it. Not a good idea.

In this customization we will move the bulk price table to below the product options and above quantity box. 

You can download the diff file here  bigcommerce-show-bulk-price-table-inline.diff and use patch command to apply to your source file.

Or you can manually edit file  templates/components/products/product-view.html

Delete the code showing below:

And add the code as showing below:

Source code to add:

                {{#if product.bulk_discount_rates.length}}
                <table class="table">
                    <tbody class="table-tbody">
                        <tr>
                            <td>Quantity</td>
                            {{#each product.bulk_discount_rates}}
                                <td>{{lang 'products.bulk_pricing.range' min=min max=max}}</td>
                            {{/each}}
                        </tr>
                        <tr>
                            <td>Per Piece</td>
                            {{#each product.bulk_discount_rates}}
                                <td>
                                    {{#if type '===' 'percent'}}
                                        {{../../settings.money.currency_token}}{{divide (round (multiply ../../product.price.without_tax.value (subtract 100 discount.value))) 100}}
                                    {{/if}}
                                    {{#if type '===' 'fixed'}}
                                        {{lang 'products.bulk_pricing.fixed' discount=discount.formatted}}
                                    {{/if}}
                                    {{#if type '===' 'price'}}
                                        {{../../settings.money.currency_token}}{{divide (round (multiply (subtract ../../product.price.without_tax.value discount.value) 100)) 100}}
                                    {{/if}}
                                </td>
                            {{/each}}
                        </tr>
                        <tr>
                            <td>Savings</td>
                            {{#each product.bulk_discount_rates}}
				<td>
                                {{#if type '===' 'percent'}}
                                    {{lang 'products.bulk_pricing.percent' discount=discount.formatted}}
                                {{/if}}
                                {{#if type '===' 'fixed'}}
                                    {{../../settings.money.currency_token}}{{subtract ../../product.price.without_tax.value discount.value}}
                                {{/if}}
                                {{#if type '===' 'price'}}
                                    <td>{{divide (round (multiply (divide discount.value ../../product.price.without_tax.value) 10000) 2) 100}}%</td>
                                {{/if}}
				</td>
                            {{/each}}
                        </tr>
                    </tbody>
                </table>
                {{/if}}

Save and test it with our product which has bulk discount price.