Jump to content

How do I hide Price, Quantity, and "Add to Cart" button for products on Quick View?

Recommended Posts

I put it in the right code to hide price, quantity, and "add to cart" button from the products in one of my two stores on my website, the code worked and each product no longer displays those features. 

However, when I click on a product's Quick View, everything is still displayed. Does anyone have lines of code or a solution that can help me fix this issue by hiding those details?

Attached are photo examples.

The code I used to hide the details is:

[data-section-id="60d6b8a6aac1033985af9188"] {

//CSS Hide Add to Cart Button
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {display:none;}

}

[data-section-id="60d6b8a6aac1033985af9188"] {

//CSS Hide Price
.sqs-money-native, .product-price {display:none;}

}

[data-section-id="60d6b8a6aac1033985af9188"] {

//CSS Hide Quantity
.product-quantity-input {
    display: none !important;}

}

Screen Shot 2021-07-25 at 12.44.25 AM.png

Screen Shot 2021-07-25 at 12.43.42 AM.png

Link to comment
On 7/25/2021 at 7:07 PM, KingDahab said:

I put it in the right code to hide price, quantity, and "add to cart" button from the products in one of my two stores on my website, the code worked and each product no longer displays those features. 

However, when I click on a product's Quick View, everything is still displayed. Does anyone have lines of code or a solution that can help me fix this issue by hiding those details?

Attached are photo examples.

The code I used to hide the details is:

[data-section-id="60d6b8a6aac1033985af9188"] {

//CSS Hide Add to Cart Button
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {display:none;}

}

[data-section-id="60d6b8a6aac1033985af9188"] {

//CSS Hide Price
.sqs-money-native, .product-price {display:none;}

}

[data-section-id="60d6b8a6aac1033985af9188"] {

//CSS Hide Quantity
.product-quantity-input {
    display: none !important;}

}

Screen Shot 2021-07-25 at 12.44.25 AM.png

Screen Shot 2021-07-25 at 12.43.42 AM.png

Hi. Can you share link to shop page on your site? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
4 hours ago, KingDahab said:

@tuanphan messaged you the link privately. Thank you!

Add to Design > Custom CSS

/* quick view */
.ProductItem-details .ProductItem-product-price {
    display: none;
}
div.product-quantity-input {
    display: none !important;
}
div.sqs-add-to-cart-button-wrapper {
    display: none !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thank you. It worked, however, it also took out the price, quanity, and "add to cart" button from my other store on this same website that actually has items for sale.

I only want it to hide these features from quick view from one store and not all the stores on my website: 

The store is: [data-section-id="60d6b8a6aac1033985af9188"]

@tuanphan

Link to comment
23 hours ago, KingDahab said:

Thank you. It worked, however, it also took out the price, quanity, and "add to cart" button from my other store on this same website that actually has items for sale.

I only want it to hide these features from quick view from one store and not all the stores on my website: 

The store is: [data-section-id="60d6b8a6aac1033985af9188"]

@tuanphan

Can you share link to this store?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 8/1/2021 at 1:40 PM, KingDahab said:

Hover Explore Egypt page on Not Linked > Click Gear Icon > Advanced > Add this code

<style>
  /* quick view */
.ProductItem-details .ProductItem-product-price {
    display: none;
}
div.product-quantity-input {
    display: none !important;
}
div.sqs-add-to-cart-button-wrapper {
    display: none !important;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
7 hours ago, KingDahab said:

Thank you @tuanphan, while it did work for the Explore Egypt page. It still shows up on Summary Blocks for the products on other pages.

Example provided:

Screen Shot 2021-08-03 at 3.49.00 PM.png

Can you share link to product in screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
14 hours ago, KingDahab said:

@tuanphan https://www.myexpoegypt.com/packages/p/teest-package

Please click on one of product's quick view under featured to see what I'm talking about. 

The Wonders of Ancient Egypt should keep it's price, quantity, and add to cart because it's from another store.

The quick view of the summary block's is what I want to edit.

Thank you!

Screen Shot 2021-08-04 at 10.27.52 AM.png

Screen Shot 2021-08-04 at 10.28.07 AM.png

Hi,

It looks a bit complex.

First, try add tag: no-all for these products >> Next, add this code to Design  >Custom CSS

.lightbox-content .tag-no-all {
	/* quantity */
.product-quantity-input {
    display: none !important;
}
/* add to cart */
.sqs-add-to-cart-button-wrapper {
    display: none !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 8/12/2021 at 1:36 PM, KingDahab said:

Hey @tuanphan, do you know how to show full excerpt of the product description and remove "view full item" on Quick view? Without cancelling/disabling the other work done ^

Link to product: https://expoegypt.com/packages/p/teest-package

Screenshot of example attached

Screen Shot 2021-08-11 at 11.33.21 PM.png

Show Full: No idea

Remove View full: Posssible. Do you still need code?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.