Варианты Woocommerce - группы цветовых образцов

Question

Я пытаюсь найти способ сгруппировать цвета по разделам в Woocommerce.Я искал различные плагины, как бесплатные, так и премиум, но ничего не соответствовало моей цели.

Что я ищу:

Мой продукт - металлическое окно в крыше.Она может быть окрашена в: Colourbond, Colourbond Matt или Colourbond Ultra.

Для простоты:

• Краска Colourbond может быть красного, розового и белого цветов
• Colourbond Matt выпускается в цветах синий, фиолетовый и черный
• Colourbond Ultra поставляется в цветах зеленый, желтый и серый

Я хочу, чтобы клиент выбрал тип краски, которую онхотите, а затем будут представлены доступные варианты цвета.Цвета должны быть показаны в образцах (в настоящее время я использую плагин Варианты образцов для WooCommerce , чтобы показать образец, я хотел бы подобный макет).

Спасибо за помощь.

Answer 1

Я закончил задачу следующим образом:

• с атрибутом 'master' для выбора группы цветов, включающей colorbond, matbond-matt и т. Д.
• , назначая каждую группу цветовв отдельный атрибут, например, colorbond, colorbond-matt

Затем я использовал несколько простых JS, чтобы скрыть атрибуты, которые не были выбраны атрибутом 'master'.

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');
});

Answer 2

Я использую тот же плагин.Я пришел к следующему решению: найти первый образец в каждой группе образцов и добавить заголовок перед ним для каждой группы образцов.Затем вы можете стилизовать его с помощью CSS, чтобы иметь сгруппированный вид.

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;

}