Home Forums WoodMart – Premium Template How to "grey out" unavialble product variations?

This topic contains 25 replies, has 3 voices, and was last updated by  newsprince 14 hours, 11 minutes ago.

Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • #118826

    36styles
    Customer

    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

    Hi,

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

    Regards

    #118870

    newsprince
    Staff

    @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
    Customer

    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
    Customer

    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

    • This reply was modified 4 days, 7 hours ago by  36styles.
    #118992

    newsprince
    Staff

    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
    Customer

    @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
    Staff

    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
    Customer

    @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
    Staff

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

    #119081

    newsprince
    Staff
    #119156

    36styles
    Customer

    @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
    Staff

    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
    Customer

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

    • This reply was modified 3 days, 8 hours ago by  36styles.
    #119189

    newsprince
    Staff

    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
    Staff

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

    #119216

    36styles
    Customer

    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
    Staff

    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.

    • This reply was modified 2 days, 17 hours ago by  newsprince.
    #119310

    newsprince
    Staff

    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
    Customer

    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
    Customer

    @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
    Staff

    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
    Customer

    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.

    Private Content Hidden
    #119587

    newsprince
    Staff

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

    #119693

    36styles
    Customer
    #119860

    newsprince
    Staff

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

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

You must be logged in to reply to this topic.