Change Sold Out Spacing

Hello,

On the specific product page, can someone help to increase the spacing? I would like everything to be evenly spaced.

On the hover image, is it possible to replace the price with 'sold out'?

Thank you to anyone who can help!

Can you share link to this product?

This is one of the specific items that is affected

https://www.agneswolfe.com/shop/p/midi-doll-rosamund

This is the menu page with the hover issue

https://www.agneswolfe.com/shop

Thank you!

13 hours ago, Agneswolfe said:

This is one of the specific items that is affected

https://www.agneswolfe.com/shop/p/midi-doll-rosamund

This is the menu page with the hover issue

https://www.agneswolfe.com/shop

Thank you!

To remove sold out price on Shop page, you can use this code to Website > Website Tools > Custom CSS

.sold-out .grid-prices {
    display: none;
}

With space

I see top of Product Description, you have some blank paragraph so the gap is big, you can edit product and check again.

Thanks @tuanphan that totally fixed the hover issue.

I cant seem to fix the spacing issue on the product page though. We would love to spacing to be even from Add To Cart, to Sold Out, To Price, and then Product description.

https://wolverine-frog-lkx9.squarespace.com/shop/p/midi-doll-rosamund

On 6/3/2024 at 8:57 PM, Agneswolfe said:

Thanks @tuanphan that totally fixed the hover issue.

I cant seem to fix the spacing issue on the product page though. We would love to spacing to be even from Add To Cart, to Sold Out, To Price, and then Product description.

https://wolverine-frog-lkx9.squarespace.com/shop/p/midi-doll-rosamund

You can use this to Custom CSS

div.ProductItem-details-excerpt p:first-child {
    margin-top: 0px !important;
}

div.ProductItem-product-price, div.ProductItem-product-price .product-price {margin-bottom: 0px !important;margin-top: 10px !important;}

.product-mark.sold-out {
    margin-bottom: 20px !important;
}