Сортировщик (фильтр) товаров woocommerce

Сортировщик №1

Образец, как примерно это работает https://volhovec.ru/catalog/doors/classic/lignum/

Общие сведения:

На сайте представлено 144 модели дверей, разложенные в 15 групп по стилям. В каждой группе 10-20 моделей.

Каждая модель имеет 36 вариантов, в зависимости от древесины и от цвета окрашивания.

Нужно сделать такой сортировщик, чтобы пользователь, находящийся в определенной группе моделей, мог выбрать древесину, модель из группы и цвет.

При выборе определенного типа древесины все миниатюры моделей  и большая модель слева появляются в выбранном типе древесины.

При выборе цвета – тоже самое.

При выборе модели – изменяется большая картинка модели слева.

Белый цвет возможен только вместе с древесиной MDF, соответственно этот тип древесины должен выбираться автоматически. Над значком древесины и над белым цветом должен появляться tooltip, сообщающий о том, что это единственная возможная комбинация.

Лиственница так же не существует в одном из цветов. При сочетании лиственница – этот несуществующий цвет, над ним появляется сообщение, что данную комбинацию не делаем, выберете другой цвет или материал.

Сортировщик выводится с помощью шорт-кода.

Итого получается 15 вариантов шорт – кодов (по одному для каждой группы).

Сортировщик №2

Все двери представлены только в одном цвете, но разделены на 5 модельных групп (в каждой около 20 – 30 моделей).

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

Пожалуйста, указывайте сразу реальную стоимость.