Я изо всех сил пытаюсь создать пользовательский цикл для клиента:

, отобразить конкретную категорию, ее миниатюру и все продукты этой категории. Макет выглядит так:

сетка категорий

, второй вариант будет использовать переменные продукты, как это:

сетка с переменными продуктами


Для первого варианта я использую код ниже. Но я не знаю, как отображать категории продуктов.

{amp}lt;div class="row"{amp}gt; {amp}lt;?php $prod_categories = get_terms( 'product_cat', array( 'orderby' ={amp}gt; 'name', 'order' ={amp}gt; 'ASC', 'hide_empty' ={amp}gt; 0, 'numberposts' ={amp}gt; -1, 'exclude' ={amp}gt; array('16,19,23') )); foreach( $prod_categories as $prod_cat ) : $cat_thumb_id = get_woocommerce_term_meta( $prod_cat-{amp}gt;term_id, 'thumbnail_id', true ); $cat_thumb_url = wp_get_attachment_thumb_url( $cat_thumb_id ); ?{amp}gt; {amp}lt;div class="col {amp}lt;?php echo $prod_cat-{amp}gt;slug; ?{amp}gt;"{amp}gt; {amp}lt;h3 class="text-center"{amp}gt;{amp}lt;?php echo $prod_cat-{amp}gt;name; ?{amp}gt;{amp}lt;/h3{amp}gt; {amp}lt;div class="text-center"{amp}gt; {amp}lt;img src="{amp}lt;?php echo $cat_thumb_url; ?{amp}gt;" alt="{amp}lt;?php echo $prod_cat-{amp}gt;name; ?{amp}gt;" /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;?php endforeach; wp_reset_query(); ?{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

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