How to enable wholesale pricing with the WordPress Shopp plugin

The problem: Out-of-the-box, the WordPress Shopp plugin doesn’t support wholesale pricing. I’m including the steps to implement it below. If you’d like me to implement this solution for you, please contact me at info@fredmarion.com, and I’d be happy to do so for a fixed rate. I can also try to answer questions in the comment section below.

Note: This is a client-side solution that utilizes the WordPress Shopp plugin’s “Add-on Options Menu.” That means that if you’re already offering Add-on’s in your shop (or if you plan to), this approach will need modified. In this case, my client didn’t need the Add-on field, so this solution works nicely. Since this approach is all client-side, you should have no problems upgrading the Shopp plugin when the time comes (although that could change if Shopp introduces their own Wholesale solution as noted below).

The end result: Before we dive into the code, here’s what the end result looks like to an account holder who’s entitled to wholesale pricing:

Here’s the end result for an account holder who’s not logged in or an account holder who’s logged in but not entitled to wholesale pricing:

Supported browsers/platforms: This solution has been tested in IE8+ as well as the latest versions of Chrome and Firefox. This solution was originally written for WordPress 3.5+ and Shopp 1.2.5 (although it could very well work for earlier versions of WordPress and/or Shopp).

Known limitations to this approach: First, since I’m unaffiliated with Shopp, I don’t know if this approach will work seamlessly with future releases of the Shopp plugin. Testing would need to be done at that time. Second, if you use add-ons in your product listing, this approach may need modified. In addition, full product prices (not wholesale prices are displayed on catalog pages). Users must navigate to individual product pages to see the actual wholesale price for each item. This shouldn’t be much of a limitation for most users. Here’s a screenshot to illustrate the point:

Prerequisites: Before beginning, ensure you have “Enable Account Logins” turned on in your Shopp preferences. Do this by going to Setup -> Preferences and scrolling down to the “Checkout Preferences” section. Check the box that says “Enable Account Logins” and save your changes.

Step 1: Creating a wholesale account: By default, the Shopp plugin has a “Wholesale” customer type available as an option. Start by setting up a wholesale account for testing. Navigate to Shopp -> Customers -> Add New. Fill in the following fields:

  • First name
  • Last name
  • Email
  • New password
  • Confirm the new password

Also, on the same screen, in the drop-down menu under “Settings,” be sure to select “Wholesale,” then save your changes:

Step 2: Ensure your theme supports jQuery: The easiest way to do that is by going to your web site’s homepage and seeing if jQuery is getting loaded in the <head/> tag of your document. Alternatively, you can go to your theme’s functions.php file to see if jQuery is referenced there. If jQuery is not being loaded, you’ll need to add a reference to your functions.php that enables jQuery. Eric Martin has a great tutorial on doing just that here.

Step 3: Update your theme’s footer file: Go to Appearance -> Editor -> Footer.php, find the closing </body> tag and insert the following just before the </body> tag:

<!--wholesale pricing display or hide-->
<?php if( current_user_can( 'shopp_wholesale' ) ) {
$myString = "'Wholesale'";
echo '<script type="text/javascript">';
echo 'jQuery(document).ready(function() {';
echo 'jQuery("select.addons option:eq(0)").detach();';
echo 'jQuery("select.addons option:eq(0)").html(jQuery("select.addons option:eq(0)").html().replace("+","")).parents("select").hide();';
echo 'jQuery("select.addons option:eq(0)").html(jQuery("select.addons option:eq(0)").html().replace("-","")).parents("select").hide();var wholesaleText = jQuery("select.addons option:eq(0)").html();jQuery("ul.addons label").append(" " + wholesaleText);';
echo 'var priceNum = jQuery("h3.price").text().replace("$",""); parseFloat(priceNum); var wholesaleDiscount = jQuery("ul.addons li label:eq(0)").html().slice(20,24); jQuery("h3.price").css("text-decoration","line-through"); var newPrice = priceNum - wholesaleDiscount; jQuery("h3.price").after("<h3>$" + newPrice.toFixed(2) + " (with your discount)</h3>").addClass("price");';
echo '});';
echo '</script>';
} else {
echo '<script type="text/javascript">';
echo 'jQuery(document).ready(function() {';
echo 'jQuery(".addons").detach()';
echo '});';
echo '</script>';
}
?>
</body>

In a nutshell, the code above does the following:

  1. Determines if a user is entitled to see wholesale pricing.
  2. Loads javascript when the page has downloaded that hides the add-on drop-down menu.
  3. Adds “Wholesale Pricing” text.
  4. Deletes the plus and minus signs from the “Wholesale Pricing” text.
  5. Captures the regular price and subtracts the wholesale price from it.
  6. Puts a line through the normal price.
  7. Adds the new (wholesale) price to the screen.
  8. If a user is not entitled to wholesale prices, the script detaches wholesale pricing from the DOM (effectively hiding the lower rate).

Step 4: Create a product with a wholesale price: In order for the script above to be effective, you must enter wholesale prices exactly as follows:

  1. Go to Catalog -> Products within the WordPress Admin.
  2. Add a new product or click on an existing product to edit it.
  3. Enter all the product details like you normally would, then click the Settings -> Add-ons option in the right-hand column:

  4. Scroll down to the “Add-on Options Menus” box, which should have appeared after completing the previous step.
  5. Create an add-on option menu titled “Wholesale” with a option titled “Savings”:

  6. IMPORTANT: Enter your wholesale discount with a “minus” sign in front of it!
  7. Save your changes.

Step 5: Test your changes: Log in with the wholesale account information that you created in Step 1 above. See if the wholesale pricing is displayed as intended. Log out and log in with a customer account that does not have whole pricing entitled. Wholesale pricing should now be hidden.

Hopefully, this tutorial helps you enhance your e-commerce site. Best of luck, and feel free to post questions/suggestions below. I’ll do my best to answer them.

5 thoughts on “How to enable wholesale pricing with the WordPress Shopp plugin

  1. peter on

    Hi,
    Can you have say wholesaleprice and distributer price but also retail by default

    Regards Peter

    • Fredricky on

      Yeah. It would trickier, though, because Shopp doesn’t come with a built-in distributor role. You’d need to utilize the merchant role or another role that’s not being used on your site. Then, you could repeat the if statement I pasted above and change the presentation for distributors (by targeting them as merchants)… It would require re-writing quite a bit of the Javascript, too, and following strict rules when you’re inputting prices for wholesalers and distributors.

      • Fredricky,
        Thats something I’m not very good at I’m afraid, i was hoping to use woo commerce and need a plugin that will do the jo? anyideas.

        Regards Peter

        • Fredricky on

          Unfortunately, I haven’t used Woo Commerce yet… I’d be interested to hear what you think of it since this is my first time using Shopp (which I’ve got to give a thumbs up to so far).

  2. Thanks for the solution! I’m testing it out and seem to be having the conditional if( current_user_can( ‘shopp_wholesale’ ) ) evaluate false every time, even when logged in as an account with wholesale customer type. Where is ‘shopp_wholesale’ coming from?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>