Hide 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 Thumbnail (List & Grid View)
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.
- The code snippet in this tweak doc uses Bootstrap 4, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.
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.
Step 3: Assign customer groups
Navigate to Settings & Tools > All settings & tools > Customer Settings
and classify the 3 customer groups (Visitor, Customer, Wholesale).
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 and availability, 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 entire template code.
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:
- Quantity Column: heading highlighted here and content highlighted here.
- Price Column: heading highlighted here and content highlighted here.
Add Logic B to the following:
- Add to Cart button, highlighted here.
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.