Support » Plugin: WooCommerce » Howto grey out unavailable attributes on product page

  • Resolved beckseden

    (@beckseden)


    Hi

    On my product page, customers can select from 3 different types of attribute to build the look of the custom made product.

    Some combinations are not available, and so there is no such product variation. Customers are able to select unavailable option though, and this happen (ignore the first part of the video – I have fixed that random -OR- that I indicate)

    Instead of just greying out unavailable options (which would be more efficient because the customer will not have to keep trying combinations to find out if they are possible) it lets you select unavailable attributes, then tells you “”Sorry, no products matched your selection. Please choose a different combination.”.”

    Dos anyone know how I can fix this, please?

    I’m not a developer, so please consider than before using very technical language. I know enough to add things to functions.php if necessary. 🙂

    Many thanks

    Becky

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

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Support Mirko P. woo-hc

    (@rainfallnixfig)

    Hi @beckseden,

    I’ve been researching a bit for you on this forum and it looks like there was a similar request from another WooCommerce user. You can see the related thread here:

    https://wordpress.org/support/topic/make-unavailable-variations-grey-out/

    As a side note, I would recommend using a plugin like Code Snippets by Code Snippets Pro to add custom PHP code into your site without directly accessing the functions.php file. Here is a link on how to use the Code Snippets plugin:

    https://www.wpbeginner.com/plugins/how-to-easily-add-custom-code-in-wordpress-without-breaking-your-site/

    Hope this helps.

    Thread Starter beckseden

    (@beckseden)

    Hi @rainfallnixfig

    Thank you very much for replying.

    Yes, I did find that thread on my googling journey, and unfortunately, it didn’t do anything when I added that to my functions.php file.

    Perhaps I didn’t know which values to change to make it work on my site.

    Becky

    Thread Starter beckseden

    (@beckseden)

    Another thought – I don’t have any variations existing that are not available. But some of the attributes for the product are not available for all the variations if that makes sense.

    I’ve also realised that I linked you to the wrong video, and the right one seems to have disappeared!

    Basically, if you select any of the colour with “gold” in, you should not be able to then select any decoration with silver in.

    Thanks

    Becky
    Thanks

    Becky

    Plugin Support MayKato woo-hc

    (@maykato)

    Hi @beckseden

    Yes, I did find that thread on my googling journey, and unfortunately, it didn’t do anything when I added that to my functions.php file.

    Hmm…I’m surprised it didn’t work on your site – I’ve tried this code on my test site, and worked perfectly without having to modify it.

    Link to image: https://snipboard.io/0esbP2.jpg

    Did you add that code using the Code Snippet plugin like @rainfallnixfig suggested?

    If you still can’t get the code to work out, you may also want to look into using a plugin that can gray out unavailable variations such as https://pluginrepublic.com/wordpress-plugins/woocommerce-better-variations/

    Thread Starter beckseden

    (@beckseden)

    Hiya @maykato

    I tried adding it directly and also adding it through code snippets. The first did nothing,. The second gave me a notification that I’d broken my site so I quickly undid it! So frustrating that the code works for some but not me! I must be doing something wrong, but I don’t know what.

    So this is the one you used:

    Quote” Paste this code into your functions.php file and your unavailable variations will be disabled.

    function wcbv_variation_is_active( $active, $variation ) {
    if( ! $variation->is_in_stock() ) {
    return false;
    }
    return $active;
    }
    add_filter( ‘woocommerce_variation_is_active’, ‘wcbv_variation_is_active’, 10, 2 );`

    “Unquote

    I also notice that is says this afterwards – which I did not understand

    “The rest you can do by simply adding a ::before in every disabled option.”

    I was looking for a plugin, and unfortunately I won’t be able to afford this one for this tiny new site – maybe I can later. But for now, I’m either left with frustrated customers on finding another way to do it by changing the way variations and products are setup, which is probably what I will end up doing.

    Many thanks for taking the time to repl

    Becky

    Plugin Support Saravanan S, a11n

    (@simplysaru)

    Hi @beckseden,

    Here is how I have added the code to my site via the code snippet plugin and it works as expected. Is that how you have added to your site?

    Thread Starter beckseden

    (@beckseden)

    Hiya @simplysaru

    Thank you for you help! I really appreciate it.

    I’ve tried that again. It didn’t break my site, hooray! It also didn’t appear to grey out anything BUT….I wonder if the “greyed out” colour is the same as my text colour, which is dark grey. I am now trying to find a way to change the colour of the attribute drop down box text to test that theory. But that’s another subject… 🙂

    Thank you

    Plugin Support Saravanan S, a11n

    (@simplysaru)

    Hi @beckseden,

    Glad to know that it didn’t break anything.

    It also didn’t appear to grey out anything BUT….I wonder if the “greyed out” colour is the same as my text colour, which is dark grey.

    Quickly switching the theme to a different theme will confirm if this worked on your site. Try a theme like Storefront or 2021. Changing the attribute dropdown colour would mean doing some custom CSS based on your theme.

    Thread Starter beckseden

    (@beckseden)

    Hi @simplysaru

    Brilliant tip, thank you. Yes, I can confirm, the css doesn’t work on my site to grey out those attributes. Ah well. I think I’m at a dead end since my theme support couldn’t help either. Thank so so much anyway!

    Becky

    Plugin Support Saravanan S, a11n

    (@simplysaru)

    Hi @beckseden,

    Yes, I can confirm, the css doesn’t work on my site to grey out those attributes. Ah well. I think I’m at a dead end since my theme support couldn’t help either.

    Did you try switching the theme on your site? Perhaps you can try it on Staging site first to test it out?

    Thread Starter beckseden

    (@beckseden)

    Hi @simplysaru

    Yes, I did test it by changing the theme as suggested. That’s how I came to the conclusion in my last comment. 🙂

    Plugin Support Saravanan S, a11n

    (@simplysaru)

    Hi @beckseden,

    Thanks for the clarification. We will mark this issue resolved as the code snippet works as a solution though it didn’t suit your needs.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Howto grey out unavailable attributes on product page’ is closed to new replies.