How do I hide: price / quantity / add to cart

On 9/12/2022 at 5:24 PM, liamgv said:

Hi there, I have just been to your website and I see this image now has a new statement, how did you achieve this? many thanks.

They used this code in Design > Custom CSS

.tag-poa .product-price {
    visibility: hidden;
}
.tag-poa .product-price:before {
    content: 'Price on request. Please email me at lauren@esora.co for availability/pricing.';
    visibility: visible;
}
.tag-poa .ProductItem-summary .ProductItem-details .sqs-add-to-cart-button-wrapper, .tag-poa .ProductItem-summary .ProductItem-details .product-quantity-input {
    display: none;
}

 

Hi!

Wondering the same thing-- I need to hide prices for now and wondering how to do that.

 

Thanks!

On 10/20/2022 at 1:39 AM, Toviah23 said:

Hi!

Wondering the same thing-- I need to hide prices for now and wondering how to do that.

 

Thanks!

Hide on a product? Edit product > Additional Info > Add a Code Block > Paste this code

<style>
  .product-price {
  	display: none;
  }
</style>

 

Hi,

Wondering can somebody help me.

I created a store in 7.1 and I have successfully hidden the quantity, price and add to cart on the site as I don't want people to purchase of it yet, it's working like a catalogue with products marked POA. The prices are set on the product but they are hidden using css, the problem I'm having is when you google some of the products individually, it's showing the hidden price, is there any way of stopping this globally with javascript or do I need to remove every price, it will still show €0.00 on google, I'd rather it said POA or just blank.

Any help would be greatly appreciated

Pip

7 minutes ago, Pip1 said:

The prices are set on the product but they are hidden using css, the problem I'm having is when you google some of the products individually, it's showing the hidden price

"Hiding" prices does exactly that. The prices are still there, they are just hidden from the humans looking at the page. The price data will still be there in the metadata, the JSON and the HTML.

5 minutes ago, paul2009 said:

"Hiding" prices does exactly that. The prices are still there, they are just hidden from the humans looking at the page. The price data will still be there in the metadata, the JSON and the HTML.

Thanks for the reply Paul,

So is there a way for me to stop it showing on google or do I need the remove every individual price?

8 minutes ago, SHYDesignStudio said:

I've been using your code to change '0.00' prices to POA found here; 

https://sf.digital/squarespace-solutions/how-can-i-make-some-prices-poa-on-squarespace-71

Thank you, appreciate your work! It did work fine and seems to work fine with the Squarespace editor space. However when I go to my site as anybody else would, prices initially show 'POA', then click on the product page and it shows '0.00'.

The guide was written for Squarespace 7.1 but your site is built on a Brine family template on Squarespace 7.0 so you'll need to disable Ajax Page Loading. For more information, see my guide Why does Squarespace code only work on refresh?

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

Because you can create multiple store pages on Squarespace, is there an easy way to create a selector that will target all the products inside a given Store page.

We are trying to hide the Price, Qty, and Add to Cart, on a few separate shop pages. With other shop pages working and showing normally.

If possible we'd like to avoid using the  ... section[data-section-id="xxxxxxxxxx"] method, as we are uploading the products from an outside database with a csv.

As an example we have a situation where the stores url page would be...

www.website.com/storename

there is a collection that I can see at that level, but it doesn't carry to the individual product pages.

#collection-xxxxxxxxx 

 

 

 

3 hours ago, dougjaeger said:

is there an easy way to create a selector that will target all the products inside a given Store page.

Yes. Instead of installing code in Design > Custom CSS you add to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

The are many posts that show various code for hiding product detail elements. If you want to hide elements in only some of the products in a store page then I suggest you use one of the tag based methods. You basically add a hide tag and then the CSS hides the various elements you want to hide based on the tag being set or not.

Oh man, thanks. So simple! 

Hi,

I used  this custom css

.ProductItem-product-price {
    display: none !important;
}

to hide the price , but it stopped working in couple of days. can anyone help please

On 3/26/2023 at 4:37 AM, silvy888 said:

but it stopped working in couple of days. can anyone help please

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

so i have used the code to remove the price and add to cart button but id like to change to add to cart button to a contact us button that either links to our contact page or an email

53 minutes ago, EJames said:

id like to change to add to cart button to a contact us button that either links to our contact page or an email

Please see the following.

Let us know how it goes.

16 hours ago, creedon said:

Please see the following.

Let us know how it goes.

So I followed the steps but it still doesn't seem to be working, I'm not sure why

 

13 minutes ago, EJames said:

So I followed the steps but it still doesn't seem to be working, I'm not sure why

 

https://seabass-maracas-rw7s.squarespace.com/config/pages/64de58a1c376746da049ba11/categories/64de70bc57761911119d5e25

Just now, EJames said:

https://seabass-maracas-rw7s.squarespace.com/config/pages/64de58a1c376746da049ba11/categories/64de70bc57761911119d5e25

wait nevermind it worked, just not when i was configuring pages, woohoo thats awesome

I have another question along the same lines. I want to have a blurb above my store that changes as you click to each category. is that possible?

21 minutes ago, EJames said:

I want to have a blurb above my store that changes as you click to each category. is that possible?

Please see the following.

Let us know how it goes.

18 hours ago, creedon said:

Please see the following.

Let us know how it goes.

so im still having trouble

I did everything, When i added the code theres a hug block of all descriptions at the bottom of my page while im editing, when i go to the site i dont see that huge block but i also dont see any descriptions

https://www.zortechled.com/products-1

6 hours ago, EJames said:

When i added the code theres a hug block of all descriptions at the bottom of my page while im editing, when i go to the site i dont see that huge block but i also dont see any descriptions

Sounds like a syntax error was introduced into the code. It appears the code is not there now so I can not diagnose code I can't see.

2 hours ago, creedon said:

Sounds like a syntax error was introduced into the code. It appears the code is not there now so I can not diagnose code I can't see.

I will post my code below

I dont know if i just have too much in my descriptions

<x-twc-splcda>

 

  <!--

 

    the format of each line is a category list and a description for

    the category list

   

    for category list use values from Store Settings > Categories >

    [category name] > Edit > NAME field for the store page. you need all

    the text from the field. if you want to add a description to the

    Store page ( i.e. grid/listing ) leave the category empty, i.e. ''.

    for a top level category you would enter something like

    'Top Category'. For a nested category you enter something like

    'Top Category > Sub Category'

   

    following is an example line. copy the example line below and paste

    after the example line. remove the less than exclamation double dash space

    from the beginning of the pasted line and space double dash greater than

    from the end. repeat for as many categories as you want to add a

    description. this has been done once initially

   

    -->

   

  <!-- [enter category list here between single quotes replacing square brackets] : [enter category description here between single quotes replacing square brackets] -->

 

  ‘LED Strip Light Bar > Profiles’ : ‘Take your LED light strip installation to the next level with our custom extrusions.

We carry a wide range of extrusion profiles with enables architects, interior designers, retailers, and contractors to create unique lighting projects.

Our custom linear extrusions can be designed to meet your specific requirements.

The large aluminum heatsink allows excellent heat dissipation. This gives the LED hours of worry-free low maintenance operation.

We offer several lens options suited for your applications, with an easy snap in design and acrylic construction. Extrusions are easy to install with a variety of mounting clips, suspension wires and more.

The LEDs are available in a variety of colour, intensity, and density options with lengths up to 8ft.

Easily connect and power your LED strip with a selection of cable leads that are cut standard at 6 inches or can be custom cut to your requirements.

Our strips are powered with a low input voltage of 12 to 24 VDC, power supplies are available up to 600W and can operate in temperatures of -20 degrees Celsius to +40 degrees Celsius, indoor and outdoor if coated.

Have questions? Call to discuss your project and determine the best custom solution to meet your needs.’

‘LED Strip Light Bar > LED Strip Tape’ : ‘LED Strip Lighting is an affordable solution for a wide range of different applications. It can be mounted into a variety of extrusions or mounted on their own.

Note: If mounting on their own, it is recommended mounting to a non-porous or metal surface.

Different light colours, intensities, densities, and other options are available.

Zortech offers a wide range of options suitable for bars, decks, display shelf lighting, cabinets, retail displays, signage, landscaping, and more.

Keep in mind gold and warm whites (2200K-2700K) are best suited for low light areas where ambient light is needed such as bedrooms, living rooms, dining rooms and kitchens. Soft and cream white (3000K-3500K) are best suited for bedrooms, bathrooms, living rooms, dining rooms, kitchens, offices, workspaces, and garages. Natural and bright whites (4000K-4500K) are ideal for spaces where detail-oriented tasks are performed such as bathrooms, kitchens, offices, workspaces, and even garages. Cool whites (5000K+) are most common in commercial spaces such as offices, workspaces, and garages.

A 3 year warranty is available on most lighting products.

Have questions? Call to discuss your project and determine the best custom solution to meet your needs.’

‘LED Strip Light Bar > Luminaires’ : ‘Discover Zortech LED's exclusive lineup of Common Builds, each affectionately named after our local community. These meticulously crafted builds feature our most sought-after LED strips and extrusions, catering to diverse lighting needs.

From the inviting 'Lowbanks' build to the versatile 'Simcoe' build, and the vibrant 'Hillview' build, we've captured the essence of our locality in every design.

What's more, our Common Builds come complete with the standard semi-clear cover, 2 end caps, 2 mounting clips, and a variety of lead wire options, ensuring a hassle-free installation process.

Immerse yourself in the perfect blend of cutting-edge LED technology and innovative extrusions that seamlessly harmonize aesthetics and functionality, all while paying homage to the vibrant spirit of our local area.

Have questions? Call to discuss your project and determine the best custom solution to meet your needs.’

‘Accessories > Controllers’ : ‘Whether you're illuminating your home, office, or event space, take your lighting experience to the next level with an array of controllers and accessories designed to enhance the performance and customization of single-color, CCT, RGB, and RGBW LED lighting systems.

Controllers: Seamlessly control your LED lights with advanced controllers tailored to your specific needs. From simple manual dimmers to sophisticated programmable units, these controllers put the power at your fingertips, allowing you to adjust brightness, color temperature, and colors with ease.

Amplifiers and Decoders: Extend the reach of your LED lighting installation with amplifiers and decoders. These devices enable you to connect and control multiple LED fixtures without compromising brightness or performance, ensuring uniform lighting across your entire space.

Dimmers: Create the perfect ambiance by fine-tuning the brightness of your LED lights with dimmers. Enjoy personalized lighting for any occasion, whether it's a cozy movie night or an energetic party atmosphere.

Receivers and Remotes: Embrace wireless convenience with receivers and remotes that grant you the freedom to control your LED lights from a distance. Effortlessly switch between color modes, adjust brightness, or synchronize multiple lights to achieve captivating lighting displays.

Controls and Players: For large-scale lighting installations or complex setups, sophisticated controls and players offer extensive functionality. Utilize advanced programming options, dynamic color-changing effects, and timed sequences to achieve mesmerizing lighting shows.

Sensors: Enhance energy efficiency and automation with intelligent sensors. Motion sensors can activate your LED lights when someone enters the room, while ambient light sensors adjust brightness based on natural light levels, creating a seamless lighting experience.

With this wide range of controllers and accessories at your disposal, your LED lighting will transcend the ordinary, transforming any space into a captivating and dynamic environment. Explore the possibilities and unlock the full potential of your LED lighting system today!’

‘Accessories > Power Supplies’ : ‘When it comes to choosing the ideal power supply or driver for your lighting setup, it's essential to ensure you make the right decision to avoid any electrical mishaps or performance issues. Follow this simple step-by-step guide to find the perfect match for your needs.

Calculate Total Wattage: Begin by adding up the wattage of all the lights you intend to use in your circuit. This includes all the bulbs, LEDs, or any other lighting elements that will be connected to the driver.

Opt for 85% Rule: To prevent overloading the power supply, make sure that the total wattage of all the lights combined does not exceed 85% of the driver's maximum wattage capacity. This ensures a safety margin and stable performance for your lighting system.

Consider Future Expansions: If you plan to expand your lighting setup in the future, account for potential additions when selecting the driver. Choose a power supply that has some headroom to accommodate these future upgrades without needing to replace the driver altogether.

Voltage and Current Specifications: Verify that the power supply matches the voltage and current requirements of your lights. Mismatched specifications can damage the lights or the driver, leading to costly replacements.

Choose Quality and Reliability: Invest in a reputable and high-quality power supply or driver from a reliable manufacturer. A well-made driver ensures longevity and prevents potential hazards.

Energy Efficiency: Consider selecting an energy-efficient power supply to reduce electricity consumption and minimize environmental impact.

By following these steps, you'll be equipped with the knowledge to confidently choose a power supply or driver that perfectly suits your lighting needs, providing you with optimal performance and peace of mind.’

‘Accent Lighting’ : ‘Introducing Zortech LED Accent Lighting, the perfect solution to transform any space into a stunning visual experience. With their innovative technology and sleek design, Zortech LED Accent Lighting products are designed to create captivating ambiances in homes, offices, restaurants, and more.

Illuminate your surroundings with a mesmerizing array of vibrant colors and dynamic lighting effects. Whether you want to set a calming mood with soft, warm hues or energize your environment with bold, vibrant shades, Zortech LED Accent Lighting offers a wide spectrum of color options to suit every occasion.’

‘Commercial Lighting’ : ‘Introducing Zortech LED Commercial Lighting Products—a revolutionary lighting solution designed to illuminate your business and enhance its visual appeal. With cutting-edge technology and unmatched efficiency, Zortech offers a comprehensive range of LED lighting solutions tailored to meet the diverse needs of commercial spaces.

Experience the brilliance of Zortech's advanced LED technology, delivering exceptional brightness and color accuracy while consuming significantly less energy. From vibrant retail environments to productive office spaces, Zortech lighting products create an inviting ambiance that fosters productivity and enhances customer experiences.’

‘Down Lighting’ : ‘Custom LED downlights are a great way to give your space a unique and modern look. Our pot lights and swivel lights are also a great option if you want a more traditional look. We have a curated selection to fit your needs. Both options come with a variety of wattages, colours, and beam angles to choose from. We can tailor our products to meet your exact requirements, ensuring that you get the best quality solution for your project.

These custom LED pot lights have several features that make them a great choice for your lighting needs. They are dimmable, air tight, and IP rated, and can even be in direct contact with insulation materials. They are low voltage and don't require a pot light box, and have an even light output with a thin profile that is the same depth as drywall..’

‘Landscape Lighting’ : ‘Introducing Zortech LED Landscape Lighting, the perfect solution to illuminate and transform your outdoor spaces. Zortech offers a wide range of innovative lighting products designed to enhance the beauty and functionality of your landscape, while conserving energy and providing long-lasting performance.

With Zortech's cutting-edge LED technology, you can create stunning lighting effects that bring your garden, pathway, or patio to life. Whether you want to highlight architectural features, accentuate the natural beauty of plants and trees, or create a warm and inviting ambiance for outdoor gatherings, Zortech has the right lighting solution for you.’

‘Wall Washers’ : ‘Custom LED Wall Washer products are a type of lighting that is designed to illuminate large wall surfaces. They are commonly used in commercial settings such as hotels, restaurants, and retail stores, but can also be used in residential spaces. Wall Washers are available in customizable lengths and colors, and can be programmed to create dynamic lighting effects. They are energy-efficient and long-lasting, making them a popular choice for those looking to save on energy costs and reduce their carbon footprint.’

 

 

  <!--

 

    x-twc-splcda Optional Attribtues

   

    there are three optional attributes that can be added to the x-twc-splcda

    tag.

   

      data-paragraph-style

     

        value is one of the following. the default is Heading 3

       

          Heading 1

          Heading 2

          Heading 3

          Heading 4

          Paragraph 1

          Paragraph 2

          Paragraph 3

          Monospace

         

      data-selector-destination

     

        value is any valid selector value. the default is

        .nested-category-title

       

      data-action

     

        value is one of the following. the default is after

       

          after

          append

          before

          prepend

         

    Example of Adding an Attribute

   

      <x-twc-splcda data-paragraph-style="Paragraph 1">

     

    -->

   

  </x-twc-splcda>

 

5 hours ago, EJames said:

I dont know if i just have too much in my descriptions

It is not that, it is you've introduced syntax errors.

‘LED

The first character here is a smart quote. Smart quotes are bad (introduces syntax errors) in JavaScript, dumb quotes are good. Dumb quotes are ' or ".

This appears to be a case of code that has been passed through a Word Processor. Code should not be passed through Word Processors as they often smarten dumb quotes.

If you have to edit code in an app, use a code editor app or something like Note Pad.

7 hours ago, creedon said:

It is not that, it is you've introduced syntax errors.

‘LED

The first character here is a smart quote. Smart quotes are bad (introduces syntax errors) in JavaScript, dumb quotes are good. Dumb quotes are ' or ".

This appears to be a case of code that has been passed through a Word Processor. Code should not be passed through Word Processors as they often smarten dumb quotes.

If you have to edit code in an app, use a code editor app or something like Note Pad.

something more like this?

<x-twc-splcda>

  <!--
  
    the format of each line is a category list and a description for
    the category list
    
    for category list use values from Store Settings > Categories >
    [category name] > Edit > NAME field for the store page. you need all
    the text from the field. if you want to add a description to the
    Store page ( i.e. grid/listing ) leave the category empty, i.e. ''.
    for a top level category you would enter something like
    'Top Category'. For a nested category you enter something like
    'Top Category > Sub Category'
    
    following is an example line. copy the example line below and paste
    after the example line. remove the less than exclamation double dash space
    from the beginning of the pasted line and space double dash greater than
    from the end. repeat for as many categories as you want to add a
    description. this has been done once initially
    
    -->
    
  <!-- [enter category list here between single quotes replacing square brackets] : [enter category description here between single quotes replacing square brackets] -->
  
  'LED Strip Light Bar > Profiles' : 'Description 1'
'LED Strip Light Bar > LED Strip Tape' : 'Description 2'
'LED Strip Light Bar > Luminaires' : 'Description 3'
'Accessories > Controllers' : 'Description 4'
'Accessories > Power Supplies' : 'Description 5'
'Accent Lighting' : 'Description 6'
'Commercial Lighting' : 'Description 7'
'Down Lighting' : 'Description 8'
'Landscape Lighting' : 'Description 9'
'Wall Washers' : 'Description 10'
  
  <!--
  
    x-twc-splcda Optional Attribtues
    
    there are three optional attributes that can be added to the x-twc-splcda
    tag.
    
      data-paragraph-style
      
        value is one of the following. the default is Heading 3
        
          Heading 1
          Heading 2
          Heading 3
          Heading 4
          Paragraph 1
          Paragraph 2
          Paragraph 3
          Monospace
          
      data-selector-destination
      
        value is any valid selector value. the default is
        .nested-category-title
        
      data-action
      
        value is one of the following. the default is after
        
          after
          append
          before
          prepend
          
    Example of Adding an Attribute
    
      <x-twc-splcda data-paragraph-style="Heading 1">
      
    -->
    
  </x-twc-splcda>

10 minutes ago, EJames said:

something more like this?

<x-twc-splcda>

  <!--
  
    the format of each line is a category list and a description for
    the category list
    
    for category list use values from Store Settings > Categories >
    [category name] > Edit > NAME field for the store page. you need all
    the text from the field. if you want to add a description to the
    Store page ( i.e. grid/listing ) leave the category empty, i.e. ''.
    for a top level category you would enter something like
    'Top Category'. For a nested category you enter something like
    'Top Category > Sub Category'
    
    following is an example line. copy the example line below and paste
    after the example line. remove the less than exclamation double dash space
    from the beginning of the pasted line and space double dash greater than
    from the end. repeat for as many categories as you want to add a
    description. this has been done once initially
    
    -->
    
  <!-- [enter category list here between single quotes replacing square brackets] : [enter category description here between single quotes replacing square brackets] -->
  
  'LED Strip Light Bar > Profiles' : 'Description 1'
'LED Strip Light Bar > LED Strip Tape' : 'Description 2'
'LED Strip Light Bar > Luminaires' : 'Description 3'
'Accessories > Controllers' : 'Description 4'
'Accessories > Power Supplies' : 'Description 5'
'Accent Lighting' : 'Description 6'
'Commercial Lighting' : 'Description 7'
'Down Lighting' : 'Description 8'
'Landscape Lighting' : 'Description 9'
'Wall Washers' : 'Description 10'
  
  <!--
  
    x-twc-splcda Optional Attribtues
    
    there are three optional attributes that can be added to the x-twc-splcda
    tag.
    
      data-paragraph-style
      
        value is one of the following. the default is Heading 3
        
          Heading 1
          Heading 2
          Heading 3
          Heading 4
          Paragraph 1
          Paragraph 2
          Paragraph 3
          Monospace
          
      data-selector-destination
      
        value is any valid selector value. the default is
        .nested-category-title
        
      data-action
      
        value is one of the following. the default is after
        
          after
          append
          before
          prepend
          
    Example of Adding an Attribute
    
      <x-twc-splcda data-paragraph-style="Heading 1">
      
    -->
    
  </x-twc-splcda>

I have also put the code in again for the site so your should be able to take a look now