BigCommerce Tutorial – Hide Pricing Until Customer is Signed Into a Wholesale Account

Not everyone who sells online wants to sell retail. For instance, if you are a wholesaler or a distributor and your customers are businesses, you may have a wholesale price, or many wholesale price levels, that you want your audience to see but you do not want to disclose to the general public.

In cases like these, BigCommerce does not provide you with an easy way to hide prices for visitors and display them to signed in (or approved) customers, so we’ll do a few things with Customer Groups and a couple small scripts so it lets you manage store pricing without displaying prices to your visitors.

This walk-through assumes that every price you have in your store right now is set to a Wholesale-level price. Once you’re ready, follow the steps below to hide the pricing and replace it with a message of your choice. Your actual wholesale prices will only be displayed to customers who are signed into an approved account that has been assigned to the correct Customer Group. This gives you full control over who sees your prices and when, so you can vet those customers before they find what your products cost.

Please note that this will require some comfort working in the Store’s code and a little knowledge of HTML/CSS if your template doesn’t work with the below code, but I’ll guide you as best as I can in this tutorial.

Set Up Your Pricing Groups

Log into BigCommerce and go to Customers >> Customer Groups

The first group we’re going to set up is going to be the Default Group. This group is the one intended for all customers to see and it will discount everything $100. What we need to accomplish first is ensure that every price shows up as $0.00 to the public. You’ll understand in a little bit, but it’s important, so bear this in mind if you’re receiving traffic before you start and take your site down into Maintenance Mode if necessary.

1. Click “Create a Customer Group” and under “Group Name” write “Default (No Price).
2. Assign Group Access to “Customers in this group can see products in all categories.”
3. Under “Storewide Discount”, enter 100 and select “Percent Discount” in the dropdown.
4. Click Save.

Here’s an illustration:

Now, just like the above, create a second group with the name “Wholesale” and under “Storewide Discount”, enter 100 and select “Percent Discount” in the dropdown.

So now we have two price groups. One will be a default group, which will be default set all prices to $0.00 for anyone viewing the store. The second will be the group that you assign to your customers when they are approved for a wholesale account.

Adding the Javascript

This next part will require inserting some Javascript into the template code on pages that display prices. This code looks for anything marked $0.00 and replaces it with a brief message of your choice. This effectively hides the $0.00 price and replaces it with “Log In or Register for Pricing”. We also want to hide the cart buttons in the instances where the “Log In for Pricing” note appears.

In the Website footer, place the following code:


<script type="text/javascript">
$(document).ready( function() {
$('.ProductPriceRating em:contains("$0.00")').text("Login for Cost");
$('.ProductPrice:contains("$0.00")').text("Login for Cost");
})
</script>


<script type="text/javascript">
$(document).ready( function() {
if($('.ProductPrice').html()=='Login for Cost') {
//if('.ProductPrice:contains("$0.00")')
$('div.ProductAddToCart').hide();
}
})
</script>


If you’d rather it say something other than Log In or Register for Pricing, you can change the three instances of that text in the above code and it will print that instead.

The above scripts work for hiding everything on my particular theme. However, not all BigCommerce themes follow the same class structure.

IF IT ISN’T WORKING for you, then use a tool like FireBug for Firefox that allows you to Inspect the code and find the class that is wrapped around the price. Use the Inspect function and move the cursor over the price to highlight the code. You’ll be able to see the class.

In my instance, on the homepage, it is .ProductPriceRating em where the price is contained, and as you can see it has been changed by the Javascript to show the message instead of the $0.00 price:

…and on my Product page, the class is called “Product Price” and exists on the EM tag:

Lastly, if your cart buttons are showing, you will need to highlight the Add to Cart button and look for the DIV class it is contained in. The last part of the code (div.ProductAddToCart) is exactly where this is hidden.

Finally, let’s change your CSS:

Add the following to the bottom of your .css file. This should prevent the prices from showing up in the QuickSearch:


.QuickSearchResult .Price {display:none}


You’ve done it!

Now, nobody without an account will be able to see prices until they are placed into the “Wholesale” Customer Group by a human being.

If you’d like anyone who is signed in to see prices, go back into Customer Groups, click “Wholesale” and check the “All new customers should be added to this group” box. Now, anyone who creates an account will automatically see wholesale pricing without requiring a person to place them into the group.

Having issues?

If you would rather hire a professional, We’ve implemented our wholesale price hiding solution for many BigCommerce stores, usually by the following day. Contact us now and we’ll reach out with a timeline and a reasonable quote for your store.