How to show "out of stock" message instead of add to cart button

Custom product builder prevents selling out of stock items by showing an error message when a customer is trying to add the unavailable product variant to cart.

But sometimes we don't want to sell whole the product, not only some price variants of it.

In this case you can follow this guide and replace add to cart button with "out of stock" unclickable button.

To do this open file customproductbuilder-initializer.liquid and before

{% else %}{% section 'product-template' %}{% endif %}

Add the next code:

<script> 
document.addEventListener('DOMContentLoaded', function() {

document.body.addEventListener('CPB_ON_PRODUCT_MOUNTED', init);

function init() {
{% assign default = product.variants | first %}
{% unless default.available %}
replaceAddToCartBtn();
{% endunless %}
}

function replaceAddToCartBtn() {
var wrapper = document.querySelector('.cpb-panels-container');
var button = wrapper.querySelector('.cpb-add-to-cart-button');
var newBtn = button.cloneNode(false);
newBtn.innerHTML = '<span>Out of stock</span>';
newBtn.setAttribute('disabled', true);
button.parentNode.insertBefore(newBtn, button);
button.remove();
}
});
</script>

Save the file.

Now for the product you don't want to sell when it's out of stock you just need to uncheck the "Continue selling when out of stock" checkbox in the first product variant. Track quantity should be enabled.

Now when the first variant quantity will be less than 1 the add to cart button will be automatically replaced.