How to show "out of stock" message instead of add to cart button (Shopify 1.0 themes)

If you are using one of the SKU management modes (Bundle mode, Fast bundle mode, Inventory management), Custom Product Builder prevents selling out-of-stock items by showing an error message when a customer is trying to add an unavailable product variant to the cart.

But if you don't want to sell the whole product, if SKUs are out of stock, you can follow this guide and replace the Add to Cart button with the "Out of Stock" unclickable button.

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

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

Add the following 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.

On the Shopify product page, you need to uncheck the "Continue selling when out of stock" checkbox for the first product variant. Track quantity should be enabled.

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