Yes, it is possible to hide, grey-out, or strikethrough variants that are not in stock on the product page in Odoo 15. This can be done by creating a custom module that modifies the product template and product variants views, and adding conditions based on the stock availability of the variants.

One way to accomplish this is to use the attrs attribute on the variant field in the product template view. This attribute allows you to define a JavaScript expression that will be evaluated for each variant, and can be used to set the CSS class or style of the variant based on its stock availability.

For example, you could use the attrs attribute to add a class to the variant field that will hide the variant if its stock is zero, and grey-out the variant if its stock is low.

Then in your css file you can add the css class to make it look grayed out.

.oe_product_variant_low_stock:before{
    content: 'Out of Stock';
    color: red;
}

In a similar way you can use the same logic to make the variants look strikethrough by using the following css class

.oe_product_variant_low_stock{
    text-decoration: line-through;
}

It's important to note that this is a basic example and you should adjust it according to your specific requirements. Also, it is always recommended to test your code in a development environment before deploying it to production.

Hi,

If this is still a topic you could actually use the integrated custom JS and SCSS to achieve something like that online ! 

In SaaS you can go to HTML and CSS editor and add this code :

JS :

(function () {
    function checkOutOfStockVariants() {
        const wishlistEl = document.querySelector('[data-product-template-id]');
        if (!wishlistEl) return;

        const productTemplateId = parseInt(wishlistEl.getAttribute('data-product-template-id'));
        if (!productTemplateId) return;

        const variantItems = document.querySelectorAll('.js_attribute_value');
        if (!variantItems.length) return;

        variantItems.forEach(function (item) {
            const input = item.querySelector('input[type="radio"]');
            if (!input) return;

            const combinationId = parseInt(input.value);
            if (!combinationId) return;

            fetch('/website_sale/get_combination_info', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    jsonrpc: "2.0",
                    method: "call",
                    id: Math.random(),
                    params: {
                        product_template_id: productTemplateId,
                        product_id: false,
                        combination: [combinationId],
                        add_qty: 1,
                        uom_id: null
                    }
                })
            })
            .then(r => r.json())
            .then(data => {
                const info = data?.result;
                if (!info) return;

                const outOfStock = !info.allow_out_of_stock_order &&
                    info.free_qty <= (info.available_threshold ?? 0);

                if (outOfStock) {
                    item.classList.add('oos_variant');
                }
            })
            .catch(err => console.warn('[OOS] variant stock check error:', err));
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', checkOutOfStockVariants);
    } else {
        checkOutOfStockVariants();
    }

    window.addEventListener('load', checkOutOfStockVariants);
})();

SCSS :

// Out of stock variants
.js_attribute_value.oos_variant {
    opacity: 0.38;
    pointer-events: none;
    position: relative;

    // Diagonal strike-through on the pill
    &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1.5px;
        background-color: #888;
        transform: translateY(-50%) rotate(-15deg);
        pointer-events: none;
        z-index: 10;
    }
}

Hope this helps ! 
Arthur

Hi,

To hide unavailable variants from the product page in Odoo, you can use the Website Hide Variants module from the Odoo App Store.This module helps to hide variant which are unavailable by clicking on a boolean field

Here is the link to the app:

https://apps.odoo.com/apps/modules/16.0/website_hide_variants/

Regards

Thanks for the answer.
But I am in v15 online, so I can not add custom modules, or am I missing something?