Hide/grey out colour swatch when size not available

credit to @lemehovskiy for this magical script

$( “.variations_form” ).on( “woocommerce_update_variation_values”, function () {

let $swatches = $(‘.tawcvs-swatches’);

$swatches.find(‘.swatch’).removeClass(‘hidden’);

$swatches.each(function(){

let $select = $(this).prev().find(‘select’);

$(this).find(‘.swatch’).each(function(){

if (!($select.find(‘option[value=”‘+ $(this).attr(‘data-value’) +’”]’).length > 0)) {
$(this).addClass(‘hidden’);
}

})
})

} );

Where exactly are you placing this magic script?

On the affected product’s page inside:

<script> $(document).ready(function(){

}); 
</script>

Hi,

I am having the same problem, I have try inserting the giving script at the end of frontend.js but it is not working for me.

Can someone please give a bit more help?

This is a product sample, I am trying to set up this way:

https://mariarihair.com/store/product/copper-tubes-for-itips-extensions/

I’m having the exact same issue as @mariari. I’ve added the code in the same location, however, the code does not affect the swatches in any way. I’m using it for the Label swatches.

Is there also an option to add a tooltip which displays ‘Out of stock’?

Why are you pasting it in frontend.js if you don’t understand how JS/PHP files are loaded by your wordpress installation / theme ? Even if this solution worked, that file still might get loaded across your entire website when you only need it on a particular product or a few … don’t clutter your site or at least add a ternary to check for referrer/URL before executing function.

You don’t need to modify files to make this work, as I said simply add SCRIPT tags to the product description and voila.

Use this code guys

<script defer="defer"> 
jQuery(document).ready(function(){
	jQuery( ".variations_form" ).on( "woocommerce_update_variation_values", function () {
		let $swatches = jQuery('.tawcvs-swatches');
		
		$swatches.find('.swatch').removeClass('hidden');
		
		$swatches.each(function(){
		
			let $select = jQuery(this).prev().find('select');
			
				jQuery(this).find('.swatch').each(function(){
				
					if (!($select.find('option[value="'+ jQuery(this).attr('data-value') +'"]').length > 0)) {
						jQuery(this).addClass('hidden');
					}
				})
			})
		} );
}); 
</script>

Hi all,

Looks like i found a solution for my problem.

There is 2 plugins with the same name: “WooCommerce Variation Swatches”

Both seems to start form the same code but one have got more features build on.

The one that give us the problem is created by ThemeAlien.

The one that works as we want to, out of the box, and also have more features is the one created by Rymera Web Co.

Now, unfortunately they don’t have a migration way to convert from one to the other, so this means I have to edit my variables back into images and find the images back from the gallery. For me, this is about 800 variations, and the fully conversion will take about 3 days. 3 long, repetitive and, boring days… but the pay off is that we can offer this functionality to our costumers now.

The other thing is that Rymera have limited features and there is a Pro, to pay for the full plugin, For us it is worth it to pay, instead of having to code and support this plugin.

So, My recommendation is to check what install you have, and consider what works best for you.

Hi, @mariari if possible can you post a link to the plugin created by Rymera Web Co as I can’t find it.

I have the plugin by Theme Alien installed and have about 180 products already set up with sizes (50 sizes per product) and a selection of colours, will I need to reset all of these if I swapped plugins? I want to be able to show a tool tip on the actual product page’s colour swatches etc and with the Rymera plugin I think this can be done.

Thanks

Hi @joeywilks

I made a mistake the other plugin is not by Rymera Web Co. but by Emran Ahmed, this is the link:

https://www.ads-software.com/plugins/woo-variation-swatches/

It does have a page on the admin end. there you have some customization options for example to shade the unavailable options, or to cross X them or just hide them…they also have a tool tip out of the box… though I am personally no a fan of that, I have it available on the meantime. You can also see all the features that are available to paying costumers…

This used to be an opensource plugin, my guess is that Emran started with it and pump it up with some better functionalities. I would guess that some playing on the database might copy the picture names into the new plugin, however I am not on position to risk it, so I go for the safe option to re-link the images…

Installing the new plugin will cause all your attributes to set back as “select” this is a drop down menu, then you can edit your variables back to images and link each image to each variable.

For sizes I will just use “button” instead of “image”, the end result is similar to the one Theme Alien calls “label”. So for me that will be very straight forward.

The free versions goes as far as 80 variations per product, and it appears as the Pro version can do more. I am still exploring this to see what is the best option for me.

But in any case if I have 4 sizes and about 20 colors I am safe in the limit of 80… and this is most of my products, there is some products I think will go over the 80… I will need to figure out what to do then, either try to find the line in the source code to increase my quota or just pay the money and be a “pro”.

This page is the product I am using as my sample:

https://mariarihair.com/store/product/copper-tubes-for-itips-extensions/

All of them are images, though I probably convert the colors into… colors (RGB), you can see the tool tip as well, I have it setup to shade out and the X. because it is colors and shading out colors just looks like the colors are just… shaded… the X does the trick, though eventually I will try with the Hide.

I hope this answered your questions.