Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce Variations – Colour Swatch Groups

I’m trying to find a way to group colours into sections in Woocommerce. I’ve searched through a variety of plugins both free and premium, but nothing matches my goal.

What I’m after:

My product is a metal skylight. It can be painted in either: Colourbond, Colourbond Matt, or Colourbond Ultra.

To keep things simple:

  • Colourbond paint comes in colours red, pink, and white
  • Colourbond Matt comes in colours blue, purple, and black
  • Colourbond Ultra comes in colours green, yellow, and gray

I want the customer to select the paint type they want and then be presented with the colour options available. The colours should be shown in swatches (I’m currently using the plugin Variation Swatches for WooCommerce to show the swatch, I’d like a similar layout).

Thanks for the help.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I ended up completing the task by:

    • having a 'master' attribute to select the colour group that included colorbond, colorbond-matt etc.
    • assigning each colour group to a separate attribute e.g. colorbond, colorbond-matt

    Then I used some simple JS to hide the attributes that were not selected by the 'master' attribute.

    jQuery(document).ready(function(){
	
	jQuery('#pa_steel-finish').change(function(){
						  
	var colorselect = jQuery('#pa_steel-finish option:selected').val();
	switch (colorselect){
		case 'colorbond':
			jQuery('.tawcvs-swatches').closest('tr').css('display','none');
			jQuery('[data-attribute_name="attribute_pa_colorbond"]').closest('tr').css('display','table-row');
		break;
		case 'colorbond-matt':
			jQuery('.tawcvs-swatches').closest('tr').css('display','none');
			jQuery('[data-attribute_name="attribute_pa_colorbond-matt"]').closest('tr').css('display','table-row');
		break;	
		case 'colorbond-ultra':
			jQuery('.tawcvs-swatches').closest('tr').css('display','none');
			jQuery('[data-attribute_name="attribute_pa_colorbond-ultra"]').closest('tr').css('display','table-row');
		break;	
		case 'galvanised':
			jQuery('.tawcvs-swatches').closest('tr').css('display','none');
			jQuery('[data-attribute_name="attribute_pa_galvanised"]').closest('tr').css('display','table-row');
		break;	
		case 'heritage-galvanised':
			jQuery('.tawcvs-swatches').closest('tr').css('display','none');
			jQuery('[data-attribute_name="attribute_pa_heritage-galvanised"]').closest('tr').css('display','table-row');
		break;	
		case 'zincalume':
			jQuery('.tawcvs-swatches').closest('tr').css('display','none');
			jQuery('[data-attribute_name="attribute_pa_zincalume"]').closest('tr').css('display','table-row');
		break;	
				
			
		default:
			jQuery('.tawcvs-swatches').closest('tr').css('display','none');
	}

	});
		jQuery('.reset_variations').closest('tbody').append('<tr><td class="label"><label></label></td><td class="value resetvariations"></td></tr>');
		jQuery('.reset_variations').detach().appendTo('.resetvariations');
});


  2. 0

    I am using the same plugin. I came up with the following solution: Find the first swatch in each swatch group and add a title before it for each group of swatches. You can then style it with CSS to have a grouped look.

    add_filter( 'tawcvs_swatch_html', 'swatch_group_titles', 98, 2);
function swatch_group_titles($html, $args) {

    if ($args->slug == 'slug-of-first-colourbond') {
        $html = '<div class="swatch-group-title">Colourbond</div>' . $html;
    }
    else if ($args->slug == 'slug-of-first-colourbond-matt') {
            $html =  '<div class="swatch-group-title">Colourbond Matt</div>' . $html;
    }
    else if ($args->slug == 'slug-of-first-colourbond-ultra') {
            $html =  '<div class="swatch-group-title">Colourbond Ultra</div>' . $html;
    }

    return $html;

}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search