Home Forums WoodMart support forum How to "grey out" unavialble product variations?

How to "grey out" unavialble product variations?

Viewing 30 posts - 1 through 30 (of 30 total)
  • Author
    Posts
  • #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.

    #118833

    Artem Temos
    Keymaster

    Hi,

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

    Regards

    #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.
    #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.

    #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

    #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.

    #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.

    #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?

    #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.

    #119077

    newsprince
    Participant

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

    #119081

    newsprince
    Participant
    #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.

    #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;
    }
    #119176

    36styles
    Participant

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

    #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

    #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

    #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?

    #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.

    #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.

    #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?

    #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?

    #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

    #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.

    #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.

    #119693

    36styles
    Participant
    #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.

    #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

    #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;
    }
    #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.

    #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.

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