How to "grey out" unavialble product variations?

This topic has 30 replies, 1 voice, and was last updated 1 year ago by av_admin_1984.

Viewing 30 posts - 1 through 30 (of 31 total)

1 2 →

Author

Posts
April 15, 2019 at 5:44 am #118826

36styles
Participant

I am connected to a POD service, which creates my product pages for me. When it does this, it does not use the Woodmart color and sizes attributes that I’ve set. I also used WooCommerce Variation Swatches and Photos plugin to set the colors and sizes. But by doing this, I am not able to use the Woodmart filters like search by color. So I wanted to manually edit each page and use the Woodmart attributes so I could use this feature.

The main problem I am having that Woodmart is not doing that the plugin did, is made unavailable variations greyed out, unselectable. For instance, if you click size 4XL, the plugin would only display the colors that are available in that size, and grey out the rest.

Is there a way to add this ability to Woodmart? This is a major feature that makes the site so much more professional.

April 15, 2019 at 6:14 am #118833

Artem Temos
Keymaster

Hi,

Currently, there is no such option in our theme. We will consider improving this in the future.

Regards

April 15, 2019 at 9:07 am #118870
newsprince
Participant
@36styles

Add this code to your functions.php file or with a snippet plugin

https://wordpress.org/plugins/code-snippets/
```
add_filter( 'woocommerce_variation_is_active', 'grey_out_variations_when_out_of_stock', 10, 2 );

function grey_out_variations_when_out_of_stock( $grey_out, $variation ) {
  
  ?>
  <script type="text/javascript">
  jQuery( document ).bind( 'woocommerce_update_variation_values', function() {

    jQuery( '.variations select option' ).each( function( index, el ) {
      var sold_out = '<?php _e( 'sold out', 'woocommerce' ); ?>';
      var re = new RegExp( ' - ' + sold_out + '$' );
      el = jQuery( el );

      if ( el.is( ':disabled' ) ) {
        if ( ! el.html().match( re ) ) el.html( el.html() + ' - ' + sold_out );
      } else {
        if ( el.html().match( re ) ) el.html( el.html().replace( re,'' ) );
      }
    } );

  } );
</script>
   <?php

    if ( ! $variation->is_in_stock() )
        return false;

    return true;
}
```
Your variation select box will be something like this image below.

The customer can select only the variation which has stock.

Attachments:
You must be logged in to view attached files.
April 15, 2019 at 4:35 pm #118965

36styles
Participant

Thank you for the reply and suggestion @newsprince

I installed the Code Snippets plugin and paste the code, but it did not work.

I also notice it mentions “Out of Stock”, but for the purpose, I mentioned I needed it for, where a variant doesn’t exist, should it still work?

I also don’t use the dropdown selection option, but the color swatch boxes.

April 15, 2019 at 5:42 pm #118974

36styles
Participant

Here is an example of how the WooCommerce Variation Swatches and Photos plugin looks when an attribute is selected in a variation, and it shows which of the other attributes is unavailable.

https://imgur.com/WpE0SLC

April 15, 2019 at 7:02 pm #118992

newsprince
Participant

The code works with the default woocommerce drop down functionality and woodmart theme. You can have color swatches for the color attribute and drop down for the sizes. That way the code works.

April 15, 2019 at 7:38 pm #119002

36styles
Participant

@newsprince

That fact I know it can work fully with swatches for both color and size attributes means it should be able to work with Woodmart. I’d rather not use the dropdown selection for sizes, as I would like the style to be consistent and more visual. Is there any way you can try and get this to work, I can PayPal you direct a donation if you can make it happen.

Thank you.

April 15, 2019 at 8:57 pm #119004

newsprince
Participant

I’m a little confused. Do you use the WooCommerce Variation Swatches and Photos plugin or you want to use woodmart’s variation swatches?

April 16, 2019 at 1:01 am #119020

36styles
Participant

@newsprince

I WAS using the plugin you mentioned, but in order for me to take advantage of the Woodmart color filter, and also how the color options display on the grid layout, I changed over to Woodmarts swatches. This is how my product page looks now with using Woodmart.

https://imgur.com/03P31eY

2 things I desperately need to work that worked just fine with the plugin I was using, is show the name of the color selected beneath in between the color and size sections, and to grey out variants that are not available.

April 16, 2019 at 10:27 am #119077

newsprince
Participant

Ok i get it. Let me check it and get back to you.

April 16, 2019 at 10:36 am #119081

newsprince
Participant

So you want something like this to happen?

https://gyazo.com/079fdf9b05c2a6bb264927a201e82654

https://gyazo.com/d0356faf8dc11e8402d61c4e4a6c0539

?

April 16, 2019 at 2:32 pm #119156

36styles
Participant

@newsprince

Yes, that looks right. If I have short sizes Small – 4XL listed, but the color Olive is only available on sizes Small – 2XL,when you click on the color Olive, it Grey’s out sizes 3XL and 4XL, because those variants aren’t available. Or if you click on the size 4XL, it would grey out all the colors that aren’t available in that size.

Having this feature would save the customer so much time and frustration from having to click options, then getting a message saying that what they picked is not available, then having to pick 2 other options (size and color), and possibly going back and forth.

April 16, 2019 at 2:36 pm #119158
newsprince
Participant
In that case add the following code to the snippet plugin
```
add_filter( 'woocommerce_variation_is_active', 'grey_out_variations_when_out_of_stock', 10, 2 );

function grey_out_variations_when_out_of_stock( $grey_out, $variation ) {

    if ( ! $variation->is_in_stock() )
        return false;

    return true;
}
```
April 16, 2019 at 4:19 pm #119176

36styles
Participant

I tried the code, but it did not work, unfortunately.

April 16, 2019 at 6:53 pm #119189

newsprince
Participant

It does work. As you can see on the links i posted. Create a snippet from the plugin paste the code check run everywhere and save and activate

April 16, 2019 at 6:57 pm #119191

newsprince
Participant

Your products variations have to have the manage stock enabled option and if stock is 0 the variation will be grey out

April 16, 2019 at 8:57 pm #119216

36styles
Participant

First off all, thank you @newsprince for trying to help me with this.

Now,

1. I don’t need this to work for stock purposes, but basically for variants that don’t exist.
2. I use a POD service, so stock for each size and color is unlimited, nothing will ever need to be listed as Sold Out unless I choose to not sell it anymore.
3. The fact that the plugin I use to use did this, does that mean it is possible to get it to work with the right “code”, or is it way more complicated than that, and requires the code of a bunch of files to be altered?

April 17, 2019 at 7:32 am #119290

newsprince
Participant

The variation to become grey out that means it has to be out of stock first. The code works, i tested it many times. Something you are not doing right? Try to add it to child’s theme functions.php and disable it from the snippet plugin first. Or maybe you have done some other modification and the code conflicts somewhere.

April 17, 2019 at 8:30 am #119310

newsprince
Participant

Yes if you have unlimited stock this can’t work. I don’t know how the other plugin make that work. But if you use the default woocommerce options and a variation become out of stock then with this code it automatically the variation gets grey out.

Hope that helps.

Thank you.

April 17, 2019 at 4:38 pm #119481

36styles
Participant

The thing is, I do not need this to work with inventory or items out of stock, how do I list the color Olive in size 3XL out of stock, when the variant does not even exist in the first place? I have hundreds of product pages and do not want to have to go in and edit and manually do any changes to get this to work when I know there is a way with coding to get it to work, I just haven’t found it yet.

I may have to just hire someoneone to come up with the correct coding to achieve this since I haven’t been able to find the solution online for free. I’ve been looking for days now.

Thanks for your help. Do you know of anyone participating here on the forum that could help with this?

April 17, 2019 at 6:07 pm #119493

36styles
Participant

@newsprince Just curious, if I sent you the plugin I was using, that does have this feature, would you be able to look through the code and see how they achieved this, or is it more complicated than that?

April 17, 2019 at 7:26 pm #119500

newsprince
Participant

Send me a print screen of one of your product’s configuration page. To see the variations you have and what options are enabled.

Like this:
https://s3.envato.com/files/237582218/Screenshots/08_preview8.png

April 17, 2019 at 10:11 pm #119529

36styles
Participant

As you can see in the screenshot, the color Brown is only available up to 2XL, most of the other colors are available up to 4XL.

So on the product page, if a person selects size 4XL, it should grey out the color Brown, and any other color not available in that size. This really has nothing to do with being Sold Out.

Also, @newsprince, can you see things in the ‘Private Content’ section in these posts? It says you are staff.

April 18, 2019 at 7:41 am #119587

newsprince
Participant

No sorry i can’t see things in Private Content. I am not working with xtemos team. Just a customer of their.

April 18, 2019 at 2:18 pm #119693

36styles
Participant

@newsprince

https://www.dropbox.com/s/d94lmmkar5cxskm/VariationScreenshot.jpg?dl=0

April 19, 2019 at 11:10 am #119860

newsprince
Participant

So you say the plugin you use shows grey out which variation? Send me that variation that the plugin shows grey out, a printscreen.

May 8, 2019 at 8:15 pm #122796

Andersjpg
Participant

not trying to hijack a thread but @newsprince could you try and help me out with same problem
the code does nothing

https://cl.ly/10c37e/Screen%20Recording%202019-05-08%20at%2010.15.11.95%20PM.mp4

May 16, 2019 at 7:49 am #124015
newsprince
Participant
@Andersjpg

The code you added was for the drop down selection not the swatches. Add this code for the swatches to work.
```
add_filter( 'woocommerce_variation_is_active', 'grey_out_variations_when_out_of_stock', 10, 2 );

function grey_out_variations_when_out_of_stock( $grey_out, $variation ) {

    if ( ! $variation->is_in_stock() )
        return false;

    return true;
}
```
August 3, 2019 at 5:40 am #135815

36styles
Participant

@newsprince

https://imgur.com/WpE0SLC

In this image, the color ‘Maroon’ is only available up to the size 2XL, so when I click on the color ‘Maroon’, size 3XL, 4XL, and 5XL get greyed out, and you can not choose either of those sizes. If I was to choose the color Black, then it all the sizes that are available in Black would be available to click on.

November 12, 2019 at 7:43 pm #156599

36styles
Participant

SOLVED

After reading the following post by @gevcen in the Features Requests section,

In WooCommerce, all attributes in the product page are shown with dropdowns. Assume a product has 2 attributes. If a value is selected in the first dropdown, the second dropdown narrows all values to only those that match with the value in the first dropdown.

However, if we apply the theme feature that shows all attributes with squared buttons, this system doesn’t work. The second attribute will show all the values even if they do not match with the first selected attribute.

Please fix this to match with the default WooCommerce behavior.

… and after I have finally solved this issue myself thanks to WooCommerce support pointing me in the right direction, I wanted to come back here and leave the solution for anyone else that may be in need of this info.

WooCommerce support sent me a link to the following page, which shows code you will need to add to your functions.php file, preferably in your child theme of Woodmart.

https://gist.github.com/jessepearson/ae21721f4d75ea8d2c72c138a3aa25d7

After adding this code, if I select the size attribute of 4XL, and only 2 colors are available in that size, it will grey out all the colors that are not available in 4XL. Or if I first chose the color “Maroon”, and this color was only available in sizes Small, Medium, Large and X-Large, it would grey out sizes 2XL, 3XL and 4XL.

And this works using the Woodmart ‘squared buttons’, as I do not use the default dropdown attribute setting.
Author

Posts