Jump to content

How can I hide the Add to Cart, Quantity and Price from my product page?

Go to solution Solved by amcg,

Recommended Posts

I'm working within the 7.1 system, and here is a way to hide the product selection drop down menu (such as for "Select Size"), the quantity selection box, and the Add to Cart button on an individual product level basis. This way you can hide these elements on products within a given store page without having to use a blanket approach that affects more than specific products.

We'll do this by creating a tag called "hideorder" and tagging any product with this tag name for which we want to hide all of these ordering options. So to start, take a single product and create a tag called "hideorder." To learn more about tags, see: https://support.squarespace.com/hc/en-us/articles/205814438)

Next, add this code to your site's Custom CSS:

 

/* ----------------- ultra-fresh "ORDER INTERFACE Be-Gone"  ----------------- /
/*  add "hideorder" tag to any page to remove dropdown, quantity, and order button  */


/*  remove select size dropdown  */
article .tag-hideorder .variant-option {
    display: none;
}

/*  remove quantity dropdown  */
article .tag-hideorder .product-quantity-input {
    display: none;
}

/*  remove order button  */
article .tag-hideorder .sqs-add-to-cart-button-wrapper {
    display: none;
}

 

That should do it. Seems to work nicely. Also, you can adjust the code by deleting lines if you want parts of the product ordering system to appear but not others (for whatever reason). Or of course you could create additional tag names with different attributes built off this code. I hope this makes sense. Good luck!

Link to comment
  • 1 month later...
  • 2 weeks later...

hello, I have a shop on SS, and want to hide the add to cart button only. As not set up paypal yet, but want people to still email for products.

What code do I need to just hide the ADD TO CART button?  I am using the flatiron template.

Link to comment
1 hour ago, ghazwan said:

What code do I need to just hide the ADD TO CART button?

See: 

 

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • 4 weeks later...
  • 7 months later...
  • 2 months later...
On 6/4/2020 at 3:55 PM, dhobman said:

I'm working within the 7.1 system, and here is a way to hide the product selection drop down menu (such as for "Select Size"), the quantity selection box, and the Add to Cart button on an individual product level basis. This way you can hide these elements on products within a given store page without having to use a blanket approach that affects more than specific products.

We'll do this by creating a tag called "hideorder" and tagging any product with this tag name for which we want to hide all of these ordering options. So to start, take a single product and create a tag called "hideorder." To learn more about tags, see: https://support.squarespace.com/hc/en-us/articles/205814438)

Next, add this code to your site's Custom CSS:

 

/* ----------------- ultra-fresh "ORDER INTERFACE Be-Gone"  ----------------- /
/*  add "hideorder" tag to any page to remove dropdown, quantity, and order button  */


/*  remove select size dropdown  */
article .tag-hideorder .variant-option {
    display: none;
}

/*  remove quantity dropdown  */
article .tag-hideorder .product-quantity-input {
    display: none;
}

/*  remove order button  */
article .tag-hideorder .sqs-add-to-cart-button-wrapper {
    display: none;
}

 

That should do it. Seems to work nicely. Also, you can adjust the code by deleting lines if you want parts of the product ordering system to appear but not others (for whatever reason). Or of course you could create additional tag names with different attributes built off this code. I hope this makes sense. Good luck!

I tried this code with the Brine template but it doesn't work. Does this only work on 7.1 templates?

Link to comment

@StephanieMemory

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  .tweak-product-item-details-show-add-to-cart-button .ProductItem-details .sqs-add-to-cart-button-wrapper,
  .tweak-product-item-details-show-price .ProductItem-details .product-price,
  .tweak-product-item-details-show-quantity .ProductItem-details .product-quantity-input
  
    {
    
      display : none;
      
      }
      
  </style>

This is for v7.0 using the Brine template family.

Let us now how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 weeks later...
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.