How remove or hide the "Out Of Stock" message you can hide that with CSS code.
Step 1: Find the product id specific CSS class.
Each page in WordPress has multiple CSS classes which makes it super convenient to target them with CSS if you need to apply different CSS colors based on a category or IDs. To find that specific css class you need to open that product page in Google Chrome.
Then press F12 and the developer console will show up. Then go to the <body section and look for postid- class followed by a number. That's the product ID. This should look like this.
Step 2: Replace 123 with the number you've found.
.postid-123 .out-of-stock { display: none !important; }
Note: Keep in mind if you have a staging WordPress site where content or products are being constantly added/removed the product IDs will be change. The same product will get a different ID on different sites.
Therefore you want a more reliable solution you will need a bit of custom code.
This custom code can add an additional CSS class that is tied to product link rather than its ID.
That way as long as you keep the plugin link (slug) the same the CSS class will stay consistent.
If you need to hide all Out of stock messages you can use this css snippet.
.woocommerce-page .out-of-stock { display: none !important; }
Step 3. Add that css to your theme
You can either do it from within the browser by navigating to:
WP-Admin > Appearance > Customizer > Additional (or Custom) CSS
or you can update your Child Theme's style.css file via (S)FTP program.
