Hiding Pricing/Buying Options

If not logged into a customer account, all pricing and buying buttons across the site are replaced with a "login to view pricing" button.


Wireframes

Product Page

Product Page

Product Thumbnail (List & Grid View)

Product Thumbnail

Product Thumbnail


Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

  • Read through the Getting Started Guide to get a better sense of how the Control Panel, Database and Front End store interact.
  • Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
  • Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.

Coding Instructions

Step 1: Install the Customer Groups Add-on

In the control panel, navigate to Addons and install the "Customer Groups" add-on if it isn't already installed.

Step 2: Setup customer groups

Price/Customer Groups will be used to distinguish between 3 different customer types. In this example, we'll use the following setup:

  • Visitors (Non-logged-in): Price Group A
  • Customers: Price Group B
  • Wholesalers: Price Group C

In the control panel, navigate to Customers > Customer Groups to set up these 3 customer groups.

Customer Groups

Step 3: Assign customer groups

Navigate to Settings & Tools > All settings & tools > Customer Settings and classify the 3 customer groups (Visitor, Customer, Wholesale).

Customer Groups

Step 4: Add the template logic

The logic A for hiding pricing and buying options for non-logged in customers is as follows:

[%if [@user:group_id@] ne [@CONFIG:DEFAULT_GROUPID@]%]
    <!-- Logged in customers: All pricing & buying options go here -->
[%/if%]

The following Logic B includes an [%else%] statement which displays a "Login for Pricing" button for non-logged in customers:

[%if [@user:group_id@] ne [@CONFIG:DEFAULT_GROUPID@]%]
    <!-- Logged in customers: All pricing & buying options go here -->
[%else%]
    <a class="btn btn-primary btn-block mt-3" href="[%url page:'account' type:'login'/%]">Login for Pricing</a>
[%/if%]

For some instances (eg. the product page), you will need to edit multiple templates in order to hide pricing and buying options so the logic used will depend on whether you want to display a "Login for pricing" button or not.


The following templates contain product pricing and purchase logic so they will need to be edited:

There are 3 product page templates that will need to be edited:

Header

/httpdocs/assets/themes/[THEME-NAME]/templates/products/includes/header.template.html

Open the product header template and paste Logic A around the product pricing, highlighted here.

Buying Options

/httpdocs/assets/themes/[THEME-NAME]/templates/products/includes/buying_options.template.html

Open the product buying options template and paste Logic B around the buying options, hightlighted here.

Child Products

/httpdocs/assets/themes/[THEME-NAME]/templates/products/includes/child_products.template.html

Open the child products template. The logic will need to be implemented in multiple places to hide the quantity and pricing column in the child table, and the 'Add to cart' button.

Add Logic A to the following:

Add Logic B to the following:

By default, there are 3 product thumbnail templates:

Grid Thumbnail

/httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/product/template.html

Open the grid thumbnail template and paste Logic B around the pricing and buying options, highlighted here.

List Thumbnail

/httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/product/list.template.html

Open the grid thumbnail template and paste Logic B around the pricing, highlighted here and Logic A around the buying options highlighted here.

Box Thumbnail

/httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/product/box.template.html

Open the box thumbnail template and paste Logic A around the pricing, highlighted here and the savings badge, highlighted here.

Stock and Price Filters

/httpdocs/assets/themes/[THEME-NAME]/templates/cms/includes/sidebar.template.html

Open the sidebar template and paste Logic A around the stock and price filters, highlighted here.


Was this article useful?

Be notified when this page is updated. Optional.