Sjeanjaquet Posted May 24 Share Posted May 24 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 } Link to comment
inside_the_square Posted May 24 Share Posted May 24 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 Link to comment
Sjeanjaquet Posted May 25 Author Share Posted May 25 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!! inside_the_square 1 Link to comment
Sjeanjaquet Posted May 25 Author Share Posted May 25 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. Link to comment
Sjeanjaquet Posted June 11 Author Share Posted June 11 @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 Link to comment
creedon Posted June 12 Share Posted June 12 (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 June 12 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. Link to comment
inside_the_square Posted June 12 Share Posted June 12 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 1 🤓 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 Link to comment
Sjeanjaquet Posted June 13 Author Share Posted June 13 @creedon This worked! Thank you so much for providing the CSS for me and thank you @inside_the_square for your support as well. creedon and inside_the_square 1 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment