How to show Out Of Stock on image in archive products woocommerce-etheme_archive_products.default

Dear @Chris0483,

If you would like to display an “Out of Stock” label on the products listed on your shop page, you can enable this option here: https://gyazo.com/76577890257335edd6bdbf8da98d9b5f

Please note that we do not provide an option to display this badge over the product image. This is due to UI/UX considerations, as the widget offers multiple options, and adding such a badge could cause conflicts with certain settings.

Additionally, you may refer to the following discussion: https://www.8theme.com/topic/out-of-stock-products-are-not-showing-as-out-of-stock/, where we have provided a custom CSS solution for displaying the “Out of Stock” label over the product image. However, this approach is not ideal due to structural limitations, so you may need to further customize the layout to suit your specific requirements.

For reference, here is the CSS code you can add in Archive products widget -> Advanced tab -> Custom CSS that we provided to another customer:

selector .etheme-product-grid-content {
    position: static;
}

selector .etheme-product-grid-item {
    position: relative;
}
selector .etheme-product-grid-item .stock.out-of-stock {
    position: absolute;
    text-align: center;
    background-color: rgba(179, 13, 2);
    z-index: 1;
    margin-bottom: 0;
    font-size: .85rem;
    text-transform: uppercase;
    color: #fff;
    left: 50%;
    top: var(--outofstock-top-offset, 21%);
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    padding: 7px 14px;
}

[data-elementor-device-mode="tablet"] selector {
    --outofstock-top-offset: 35%;
}

[data-elementor-device-mode="mobile"] selector {
    --outofstock-top-offset: 20%;
}

Kind regards,
Jack Richardson
The 8theme’s team