Sold Out Styling on Summary Product Block

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
}
 

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
}

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!! 

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. 

@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

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.

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 

@creedon This worked! Thank you so much for providing the CSS for me and thank you @inside_the_square for your support as well.