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

Uncategorized Off 83

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 dies not allow you 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 Javascript to make it work in such a way you can manage your store’s pricing without displaying prices to your visitors.

Assuming every price in your store is set to your wholesale price, follow the steps below to hide your pricing with the message of your choice, and present it only when your customers have signed in your have added them to an appropriate Customer Group.

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.

A big special shot out and thanks to Joanne at VillageShopper.net who helped to make this script work.

About the author / 

Adam

Adam is an enigma, folded gently into dough, wrapped inside of cellophane, and hidden on the top shelf where he peers at passersby. He lives in Portland, OR with his wife and two dogs.

Rate This Commerical

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Categories