Сверстать дизайн статей и настроить WooCommerce

Нужно будет сверстать дизайн статьи и не только. Читай дальше.

Что есть сейчас: https://tehcovet.ru/reitingi/sport/luchshie-aminokisloty.html

Фотографии дизайна прикладываю. Макеты скину после выбора исполнителя.

Страница статьи

На что нужно будет обратить внимание:

• Сделать автоматическую генерацию содержания https://prnt.sc/13iglc8 без плагинов. Например, категорию можно подтягивать h2, начинающееся со слов Рейтинг или ТОП; наименование товара - это h3; в столбце Характеристика можно выводить то, что после тире в названии товара; и отдельно выводить рейтинг. Предполагаю, что здесь можно сделать с помощью регулярных выражений. Примечательно, что сколько товаров будет в статье, столько и строк должно быть в содержании.
• По кнопкам "Посмотреть все" можно перейти в отдельную карточку товара.
• Будет два варианта изображений товара: со слайдером https://prnt.sc/13ih1jw и без него https://prnt.sc/13ih2mw
• Все такие блоки должны быть плавно выпадающими по стрелке https://prnt.sc/13ih785
• Здесь будет меняться процент, в зависимости от скроллинга. Вверху 0%, в самом низу страницы 100% http://joxi.ru/12MRkW8Ck37DnA

Страница карточки товара

У каждого товара статьи будет еще своя карточка товара. Чтобы не оформлять отдельно

карточки товара и отдельно товары в самой статье, хотелось бы, чтобы можно было

как-то из карточек товара переносить информацию в статью. Таким образом

достаточно было бы вносить информацию вручную только в карточки товара. А

товары в статью подтягивались бы по указываемым ссылкам или как-нибудь

по-другому. Поэтому нужно настроить Woocommerce.

1. В Woocom в карточке товара будут блоки:

Изображения товара,

Оценка в рейтинге http://joxi.ru/eAOOyLJsk0nXlA,

Рейтинг на отзовиках,

Где купить,

Контактная информация,

Характеристики,

Отзывы.

2. Нужно, чтобы была возможность быстро подтянуть эти данные в статью (чтобы выглядело как на дизайне), но с кое-какими ограничениями по количеству строк в товарах статьи:

• Характеристики – максимум 5 штук
• Отзывы – 2 достаточно.
• Описание товара, плюсы и минусы уже будут вставляться вручную в саму статью.

3. Со статьи будет якорная ссылка по кнопке “Посмотреть все” http://joxi.ru/KAxkQnKFKdLl82 на Характеристики в самой карточке товара и по одноименной кнопке http://joxi.ru/1A5Yw5gtbBEj1A якорная ссылка на отзывы в карточке товара.

4. По поводу дизайна карточки товара – его пока нет. Думаю, получится без него пока.