Hide Pricing Until Customer Login?

mattvrgs · April 12, 2021

Site URL: http://www.helicon-banjo-kjhj.squarespace.com

PW: southernbeauty

Hello Forum Friends,

So, a client we're working with just let us know we have to hide prices in her store until customers log-in to their account. Is there a clean way to do this? Right now we're considering using Squarespace's membership options and hiding the store behind that, but that doesn't really work well from a new customer's perspective.

I'm hoping to find a way to just hide pricing, and change the "add to cart" button to "login to see pricing", but I understand this is probably a more complicated process than I think it is. Any help with this would be much appreciated!

estormstudio · December 7, 2023

Hi @mattvrgs - I see on the site you linked there is a login for pricing feature. Are you able to share how you achieved this or any tips? Thank you!

paul2009 · December 7, 2023

12 hours ago, estormstudio said:

I see on the site you linked there is a login for pricing feature.

I'm not answering for @mattvrgs, just chiming in.

How secure do you want these prices to be?

I ask because this method is only "hiding" the prices with some CSS. This means the prices are still visible on the page using the browser tools.

estormstudio · December 7, 2023

21 minutes ago, paul2009 said:

How secure do you want these prices to be?

Hey @paul2009 - thanks for chiming in!

The prices need to be as secure as they cannot add anything to cart until they are logged in for pricing like @mattvrgs seemingly solved on the above site. They’ve managed to keep the native checkout experience on Squarespace as well and it’s looking pretty seamless.

Through lots of deep diving, I found this old post, and I was shocked to find someone managed to do it in Squarespace. Just curious what script or plugin or code may have been used To get the ball rolling 🙂 Thanks!

paul2009 · December 7, 2023

24 minutes ago, estormstudio said:

The prices need to be as secure as they cannot add anything to cart until they are logged in for pricing like @mattvrgs seemingly solved on the above site.

I'm happy to help but can you define 'secure' for me?

When I'm dealing with requirements like this from clients, they must usually follow strict T&Cs that dictate that prices must not be published on a public website and/or may only be shared with clients, so I'm just checking if this is the case here.

In the example above, the prices (and the add to cart button) are still on the page, which means they can be viewed/clicked by anyone who knows how to use browser tools. That said, anyone can create an account for free, so there is nothing to prevent anyone viewing the prices or making a purchase; they don't need a consultation first. But perhaps that is good enough for your requirements?

estormstudio · December 7, 2023

16 minutes ago, paul2009 said:

But perhaps that is good enough for your requirements?

@paul2009 - thank you so much for your help with this! Noted on the above and thank you for clarifying.

Correct, anyone can signup and the only requirement is the act of creating the account to view prices. Let me know if this is possible and any tips you have for setup. Thank you!

Separate question, out of curiosity for any future projects, is a more secure option preventing browser tools from viewing pricing info or adding additional requirement steps to create an account achievable?

Many thanks!

paul2009 · December 7, 2023

18 minutes ago, estormstudio said:

Let me know if this is possible and any tips you have for setup.

Sure. Can you provide me with a link to the products on the site?

19 minutes ago, estormstudio said:

out of curiosity for any future projects, is a more secure option preventing browser tools from viewing pricing info or adding additional requirement steps to create an account achievable?

Pages protected by the Member Sites add-on cannot be circumvented.

estormstudio · December 7, 2023

2 minutes ago, paul2009 said:

Can you provide me with a link to the products on the site?

Just received them and will get these loaded today and I’ll send you a note back asap! Thank you so much!

One more random question, can some products have prices listed and others login only? Or will they all require login?

5 minutes ago, paul2009 said:

Pages protected by the Member Sites add-on cannot be circumvented.

That’s what I was thinking with Member Areas - thank you.

paul2009 · December 7, 2023

25 minutes ago, estormstudio said:

One more random question, can some products have prices listed and others login only?

If the code is written that way, yes. For example, you could add a tag to each product (when you are adding it using the Product Composer) to indicate that the price should be hidden.

estormstudio · December 7, 2023

@paul2009 - Awesome!

I've gone ahead and added in three products with a $0 price for now that would require login. The fourth product with a price would not require login.

Here is a link to the shop:
https://n4-skincare.squarespace.com/shop
password: backandforth

Let me know if this is enough to start things and any questions.

Thank you so much!

Edited December 8, 2023 by estormstudio

estormstudio · December 8, 2023

Hi @paul2009 - just checking in on the above. Even just an example of how to start the code and I can interpret and tweak for the rest. Appreciate your help!

paul2009 · December 11, 2023

Have you enabled customer accounts in the Customer Accounts panel? I couldn't see them.

estormstudio · December 11, 2023

32 minutes ago, paul2009 said:

Have you enabled customer accounts in the Customer Accounts panel? I couldn't see them.

@paul2009 - just enabled! Thank you.

paul2009 · December 11, 2023

Here's an example that hides the price and other elements when products are tagged with a tag called "hidden". This isn't production-ready code, but it should get you started. Add to the Code Injection Footer.

<!-- Hide Prices for products tagged 'hidden' on Squarespace 7.1 --------------------------->
<!-- Copyright Soundfocus Digital [sf.digital] --------------------------------------------->
<!-- Use freely in your code injection. Do NOT re-publish.---------------------------------->
<script>
function MemberPricing() {
  logged_in = UserAccountApi.isUserAuthenticated() || false;
  if (!logged_in) {
    var priceElements = document.querySelectorAll('.hentry.tag-hidden .grid-prices .product-price, .hentry.tag-hidden .ProductItem-product-price .product-price');
    priceElements.forEach(function (priceElement) {
      priceElement.style.display = 'none';

      var quantityInputElements = document.querySelectorAll('.product-quantity-input');
      quantityInputElements.forEach(function (quantityInputElement) {
        quantityInputElement.style.display = 'none';
      });

      var addToCartButtonWrapperElements = document.querySelectorAll('.sqs-add-to-cart-button-wrapper');
      addToCartButtonWrapperElements.forEach(function (buttonWrapperElement) {
        buttonWrapperElement.style.display = 'none';
      });

      var productVariantsElements = document.querySelectorAll('.product-variants');
      productVariantsElements.forEach(function (variantsElement) {
        variantsElement.style.display = 'none';
      });

      var loginMessageElement = document.createElement('div');
      loginMessageElement.className = 'price-message';
      loginMessageElement.textContent = 'Please login for price';

      var productPriceContainer = priceElement.closest('.ProductItem-product-price, .grid-prices');
      if (productPriceContainer) {
        productPriceContainer.appendChild(loginMessageElement);
      }
    });
  }
}
document.addEventListener("DOMContentLoaded", MemberPricing);
</script>
<!-- End of Hide Prices -------------------------------------------------------------------->

estormstudio · December 11, 2023

@paul2009 - Amazing - so appreciate all your time and help with this! It's working great and getting a feel for what the script is doing. Thank you!

One more question, would you recommend targeting places like a Summary Block just with CSS to hide pricing in those instances?

nikkiaa · December 22, 2023

I need help with some coding as I have no experience. I have skincare products listed on a page with listed prices. I need to make it so that only customers that have an account and that are logged in can see those prices. I have all the products ready and listed on my website and just need this coding done. Here is an example of what I'm looking for https://southernbeautyskin.com/the-general-store. Note too that when you click on a product it also says login to see pricing on a product page. I can't seem to find anyone anywhere that can help me do this.

Thank you.

paul2009 · December 22, 2023

3 hours ago, nikkiaa said:

need to make it so that only customers that have an account and that are logged in can see those prices.

@nikkiaa Please see the answer I provided above.

Did this help? Please give feedback by clicking an icon below ⬇️

limasole · January 11

@paul2009 I am a new squarespace user and no experience in coding. In the meantime I am helping my company to setup/ build the webpage to display our products and information. Literally I followed and copied your code and it works. thanks! However the price is still shown in specific product page. is it possible to hidden it too?

paul2009 · January 14

On 1/11/2024 at 4:17 PM, limasole said:

the price is still shown in specific product page

It was designed for the 'Simple' Product Detail Page (PDP) layout. Perhaps you are using a different PDP layout? Please provide a link to the page so we can check.

limasole · January 15

the website and page are still under developments, and it's a draft version in which the page and content are not yet published in public.

paul2009 · January 15

3 hours ago, limasole said:

it's a draft version

No problem. It is still possible to share a password-protected link, either in the forum or by direct message. For guidance on how to share a password-protected link, please see How to Post a Forum Question.

Hide Pricing Until Customer Login?

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

paul2009

paul2009

paul2009

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources