Out of stock

Hello, please, how can I reduce the opacity of out-of-stock products? I leave an example link. Thanks. https://kinikaly.com/

Hello,

Thank you very much for choosing our theme and for contacting us.

Woocommerce does not provide such an option, you can hide them from the catalog in Woocommerce > Settings.

If you have any questions please feel free to contact us.

Best Regards

I understand that it can be done from CSS, can you help me please.
Thank you.

Hello,

You can try this code:

.product_item.outofstock .product_item--thumbnail-holder a {
    opacity: 0.3;
}
.product_item .product_item--thumbnail-holder a {
    display: block;
}

If you have any questions please feel free to contact us.

Best Regards

Hello, with another design that I bought they sent me something more exact. Hopefully and you can too. Thanks.

body.ltr .la-custom-badge.badge-out-of-stock {
font-size:18px;
border-radius:3px;
background-color: rgba(0,0,0,0.5);
color: white;
}
.product_item.outofstock .product_item–thumbnail-holder a {
opacity: 0.3;
}

Hello,

As I see you have solved the issue.

If you have any questions please feel free to contact us.

Best Regards

Excuse me, I have not resolved it yet, I sent you a copy of what you once sent me for another design.
Thanks.

Hello,

Please provide the page URL with out-of-stock products and screen I will double-check.

Best Regards

https://kinikaly.com/producto/cairo-knit-dress-negro/

Hello,

I need a simple product out of stock, it is not possible to do with a variable product.

Best Regards

https://kinikaly.com/producto/cairo-knit-dress-negro/

Excuse me, that’s it

https://kinikaly.com/producto/prueba/

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .product-grid-item.outofstock .product-element-top{
    opacity: 0.3;
}

Best Regards

I am really grateful, as a last detail could you please delete what is marked (Only on Mobile devices)

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS >Mobile:

.product-grid-item .wd-buttons {
display:none;
}
.wd-hover-quick .wd-add-btn {
    display:none;
}

Best Regards

[Author]

Posts