Home › Forums › WoodMart support forum › Product Box “Out of Stock” – Modifications

Product Box “Out of Stock” – Modifications

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 11, 2025 at 3:51 pm #637239

    radu.george.bucurenci
    Participant

    Hello,

    Could you please help me with two small issues?

    When a product is out of stock, I would like its image to become black and white.
    I want the “Out of Stock” label to be centered on the image.
    Could you make these changes, please?

    Thank you!

    February 12, 2025 at 8:10 am #637355

    Hung Pham
    Keymaster

    Hi radu.george.bucurenci,

    Thanks for reaching to us.

    1. Default image

    Placeholder image is default WooCommerce functionality, which can be found in WooCommerce > Settings > Products tab https://monosnap.com/file/Y5ewG5Fb9Izbs8Tk77FW344oedxpOQ

    But there is no such an option for Out of stock products specific, For specialized assistance and potential solutions, I kindly suggest that you reach out directly to the WooCommerce plugin’s support team https://wordpress.org/support/plugin/woocommerce/, who are better equipped to provide you with the guidance you requires .

    2. Center label

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

    div.product-labels {
    width: 100%;
    max-width: 100%;
}

.product-labels.labels-rounded span.out-of-stock {
    margin: 0 auto;
}

    Regards,

    February 12, 2025 at 11:50 am #637436

    radu.george.bucurenci
    Participant

    Hello, thanks for reply.
    Your CSS code is not working. I want the label to appear exactly in the middle of image.

    I att. a image.
    Thanks.

    Attachments:
    You must be logged in to view attached files.
    February 12, 2025 at 11:54 am #637440

    radu.george.bucurenci
    Participant

    As for the images appearing in black and white, we managed to do it with a JS code, but it only works if you refresh the page. The images are not displayed in black and white from the start. Maybe you can help us with a solution, please.

    jQuery(document).ready(function($) {
    $(‘.product-label.out-of-stock’).each(function() {
    $(this).closest(‘.product-grid-item, .product-wrapper, .product’).find(‘.product-element-top img’).css({
    ‘filter’: ‘grayscale(100%)’,
    ‘opacity’: ‘0.5’
    });
    });
    });

    Attachments:
    You must be logged in to view attached files.
    February 12, 2025 at 1:49 pm #637493

    Hung Pham
    Keymaster

    Hi radu.george.bucurenci,

    Do you want to display another labels centered as well?

    Regards,

    February 12, 2025 at 2:15 pm #637508

    radu.george.bucurenci
    Participant

    I want all products that are out of stock to have the image in black and white and the label that says “Out of stock” to be in the middle of the image. I’ve attached an edited example so you can see what I’m talking about.

    Attachments:
    You must be logged in to view attached files.
    February 12, 2025 at 2:58 pm #637515

    radu.george.bucurenci
    Participant

    I have also made a video to show you what I mean. I used a JS code, the one I mentioned earlier. When I open an out-of-stock product, the image appears in color, but if I refresh the page, only then does it turn black and white. I want it to appear black and white from the start, without the customer having to do anything.

    February 12, 2025 at 2:59 pm #637516

    radu.george.bucurenci
    Participant

    I have reattached the video in a smaller size so you can view it.

    Attachments:
    You must be logged in to view attached files.
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)