Product Status > Out of Stock

Site URL: https://www.octoolhouse.com/

I have successfully hide some elements from my page via CSS and cannot figure out how to hide the out of stock message. I want to be able to use SquareSpace inventory for another purpose thus when I have 0 I do not want the out of stock text to appear on my webpage. The intention is "catalog" view only, but I am using the inventory section as integration and export for other ecommerce solution.

Commmerce > Product Status > Out of Stock.

Example: https://www.octoolhouse.com/accessories/p/miter-saw-crown-stops

You will see the out of stock message. "Contact Us For Availability And Pricing!" as the inventory count for that item is 0.

All the other items have 1+ as inventory so they are not showing that message.

Currently I have this in CSS and it is hiding my cart and price of product:

.sqs-add-to-cart-button {
  display: none !important;
}
.sqs-money-native {
  display: none !important;
}

figured it out!

.sqs-add-to-cart-button {
  display: none !important;
}
.sqs-money-native {
  display: none !important;
}
.product-mark.sold-out {
  display: none !important;
}

I see the text on Tablet a bit narrow. If you want increase width, you can add this to About Us Page Settings > Advanced > Header

<style>
  @media screen and (max-width:991px) and (min-width:768px) {
  #page section:nth-child(2) .content {
    width: 75%;
}
  }
</style>

Also, on product list page (mobile), space between header - search - content seems big, you can add this to Design > Custom CSS to solve.

@media screen and (max-width:767px) {
.collection-type-products.view-list #page section:first-child {
    min-height: unset;
    height: 35vh;
}
}