null
Show bulk price table inline on product page in BigCommerce

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:

New BigCommerce Bulk pricing table inline

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:

BigCommerce bulk discount is hide

BigCommerce bulk discount rates 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:

Code to add

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.

5th Jul 2017

Theme design & customization blog

Show More

Did you know?

Free Trial for all our BigCommerce themes.

Request Now

Need help? Don't hesitate to ask us. We'll reply shortly.

All our BigCommerce themes are 100% compatible with the Standard, Pro, Enterpise edition. Built with Stencil / Cornerstone framework.