In our previous article, we discussed how it can be important for some businesses to set restriction to hide product prices from guest / surfer customers.
This article will help you create a custom button to encourage customers to log in and view product prices.
To achieve this, we will make use of our handy HTML content widget.
Purpose of this widget is to be able to use your own HTML code on any part of the web page for including embed codes. For our example, we are about to add some coding to create our own button.
now click on the little machinery button on the widget.
You will then be presented with the following screen:
Paste the following code in "Content" section
<div class="">
<p class="textbox" dir="ltr" style="text-align: center;"><button class="btn btn-primary btn-list"><a href="https://yourevostore.eu.evostore.io/register">LOG IN TO VIEW PRICES</a></button></p>
</div>
Insert the following line in "Css Class"
loginprices
Please remember to change the https link to your own website's sign in page.
Click "Save Changes".
Now you can repeat this process to add this widget on individual page layouts(such as products, search results etc) OR you can add it to the header layout so it appears automatically on every page. For my example, I have added it on my home page since I have products displaying there.
This button would now appear on my website as following:
Upon clicking it, you should be taken to the register / sign in page.
Now,
Head to Appearance > Theme options.
Scroll down to CSS Block.
Add the following code to this section.
.loggedin .loginprices {display:none}
The reason we add this line of code is to hide the button once user is logged in.
That's it - job done.👍🏼