How to grey out out-of-stock product

  • Resolved romandas

    (@romandas)


    4 years, 3 months ago

    Hello,

    How to grey out out-of-stock product, which has no variations?
    I have Photoshoped, how I would like it look like:
    Image
    A good similar suggestion also appreciated.

    P.S. I have Code Snippets installed and know how to use it.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Senff – a11n

    (@senff)

    Hey @romandas

    You can do this with a little bit of custom CSS code.

    Go into your site’s admin Dashboard and select Appearance → Customize →?Additional CSS. In the CSS textbox on the left, add the following code:

    li.outofstock {
 filter: grayscale(1);
}

    Select “Save Changes” from the top, and your changes will be applied to your site.

    Thread Starter romandas

    (@romandas)

    Thank You it works!
    Now I just wont to add that code to Code Snippet plugin, because I think it’s the future for working with additional customizations.

    • This reply was modified 4 years, 3 months ago by romandas.
    • This reply was modified 4 years, 3 months ago by romandas.
    Thread Starter romandas

    (@romandas)

    Yes it’s simple too, just found. In Code Snippet it has to be:

    add_action( 'wp_head', function () { ?>
<style>

li.outofstock {
 filter: grayscale(1);
} 

</style>
<?php } );
    • This reply was modified 4 years, 3 months ago by romandas.
    Plugin Support Hannah S.L.

    (@fernashes)

    Automattic Happiness Engineer

    I’m glad that helped, thanks for letting us know!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to grey out out-of-stock product’ is closed to new replies.