Style Sold out products

[Anonymous]

Hello There ,

Is there any way to remove or hide  the quantity and buy buttons only in the sold-out products and bring the notify button a bit up.

Thank you!!

[Dan-From-Ryviu]

Hi @Anonymous 

You can try to add this code at the bottom of your base.css file in Online store > Themes >Edit code to hide quantity and buy buttons 

 .product__info-container:has(.price--sold-out) .product-form__buttons { display: none !important; }

[Anonymous]

Not working

[Dan-From-Ryviu]

Hi @Anonymous 

Where did you add the code? Did you save file after adding code?

[Dan-From-Ryviu]

Please try to add this code to your Online store > Themes > Edit code > open theme.liquid file, add code below before </head> tag 

<style>
 .product__info-container:has(.price--sold-out) .product-form__buttons { display: none !important; }
</styl>

[DelightCart]

@Anonymous Can you please send me your store URL?

[Anonymous]

https://qvau23msd549slug-71493648693.shopifypreview.com/products/bubaka-growing-chair-for-children-o...

[BSS-Commerce]

Hi @DelightCart ,

You need to edit the code on the theme. You can follow the steps below:

1. Go to Shopify admin -> Online store -> Edit code.

2. Find the base.css file and add the following code at the end of the file, then save the file:

.hidden_quantiy_sold_out,
.hidden_btn_payment_sold_out {
visibility: hidden !important;
position: absolute !important;
}

3. Find the theme.liquid file
+) Add the following code before the </head> tag: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

+) Find the last </script> tag in the file and add the following code before the </script> tag

if(window.location.pathname.includes('/products')) {
if( $('.price__badge-sold-out').css('display') !== 'none') {
$('.product-form__quantity').addClass('hidden_quantiy_sold_out');
$('.shopify-payment-button').addClass('hidden_btn_payment_sold_out');
}
}

+) Save the file

4. Check the results outside the font store

Hope it helps @DelightCart !