Jump to content

Sold Out Styling on Summary Product Block

Recommended Posts

Posted

Hi,

The page I need to edit: https://emu-oval-c6bn.squarespace.com/artwork

password: Sanctuary

Original Shop page with correct CSS code and styling: https://emu-oval-c6bn.squarespace.com/artwork-o2Dhy

 

I used this code (see below) to style the sold-out banner and cart on the artwork shop page. I've since had to move to using a product summary block to style my product page how I want it to look. Can someone provide me with an updated code to target the product summary block? I would like it not to be for this one element but anytime this summary block is used for the product. Block ID Is: #block-yui_3_17_2_1_1716478641909_79581

 

 

/* Hide price when product is out of stock */
.sold-out .ProductItem-details .product-price,
.sold-out .ProductList-overlay .ProductList-meta .product-price {
  display: none;
}

/* Display and right-align "Sold Out" text */
.sold-out .ProductItem-details .product-price:before,
.sold-out .ProductList-overlay .ProductList-meta .product-price:before {
  content: "Sold Out";
  display: block;
  text-align: right;
  color: #ff0000; /* Optional: set color for "Sold Out" text */
}


// Hide Add to Cart button when product is out of stock
.sold-out .ProductItem-details .sqs-add-to-cart-button {
  display: none;
}

/* Hide sold out price */
.sold-out .product-price {
  display:none;
  text-align: right
}
 

Posted

I wish it were as easy as updating a selector class but these two content types are as similar as apples and oranges my friend! 😅 

This code here will push your sold out text down 110%, pushing it below the price, and changing it to bold font and the color it is on the other page, which is definitely not the bright red of #ff000; change that hex to anything you want. I hope this helps with your project, and if you want to learn more about CSS, I have a free guide about CSS basics, specifically for Squarespace available at https://insidethesquare.co/learn 

.sqs-block-summary-v2 .summary-product-status .product-mark{
    top:110%!important;
    background:transparent!important;
    font-weight: bold;
    color:#d6d6d6!important
}

 

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Posted
6 hours ago, inside_the_square said:

I wish it were as easy as updating a selector class but these two content types are as similar as apples and oranges my friend! 😅 

This code here will push your sold out text down 110%, pushing it below the price, and changing it to bold font and the color it is on the other page, which is definitely not the bright red of #ff000; change that hex to anything you want. I hope this helps with your project, and if you want to learn more about CSS, I have a free guide about CSS basics, specifically for Squarespace available at https://insidethesquare.co/learn 

.sqs-block-summary-v2 .summary-product-status .product-mark{
    top:110%!important;
    background:transparent!important;
    font-weight: bold;
    color:#d6d6d6!important
}

 

Thank you so much for your time in replying!!!  I have been learning code from your website and am so thankful for it the past few months!! 

Posted
3 minutes ago, Sjeanjaquet said:

Thank you so much for your time in replying!!!  I have been learning code from your website and am so thankful for it the past few months!! 

I have two more questions about this if that is okay. What do I put in to prevent the price from being displayed when it's sold? Second, the Sold-out isn't totally right-aligned because it had that background box around the title. 

Screenshot 2024-05-24 at 7.37.04 PM.png

  • 3 weeks later...
Posted

@inside_the_square Hi! I was curious if there was an option to hide the price when the product is sold out for the summary block? Thank you for helping me on the issue above! 

 

CSS for the shop where this working: /* Hide price when product is out of stock */
.sold-out .ProductItem-details .product-price,
.sold-out .ProductList-overlay .ProductList-meta .product-price {
  display: none;
}

 

Example page where I use the summary block. (I don't want the CSS to just target this page but anywhere where the summary block for the shop is used)https://www.michaelmagrin.com/artwork

Posted (edited)
Quote

I was curious if there was an option to hide the price when the product is sold out for the summary block?

Add the following to Website > Pages > Website Tools > Custom CSS.

/* uses working draft specification */

.sqs-block-summary-v2 .summary-item .summary-thumbnail-outer-container:has( .summary-product-status .product-mark ) + .summary-content .summary-price .product-price {

  display : none;
  
  }

Folks be aware that this CSS is using the :has pseudo-class from a working draft. It is not official specification and is subject to change or being dropped altogether. Browser support from the major vendors appears strong at the moment. User be warned!

Let us know how it goes.

 

 

Edited by creedon

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.

Posted

Thanks for jumping in to answer this one for me @creedon 

I tested the code you shared and it did work, so this should do the trick for you too @Sjeanjaquet 

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

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.