Как создать виджет для WooCommerce с выводом категорий (с миниатюрами и т.д.) и индивидуальным шаблоном?

Question

blackfm @blackfm

Как создать виджет для WooCommerce с выводом категорий (с миниатюрами и т.д.) и индивидуальным шаблоном?

Здравствуйте, как организовать виджет списка категорий товаров с произвольным html на front-page?
Тоесть, стоит задача - вывести все категории 1-ого уровня с ссылкой и миниатюрой, но в индивидуальной верстке.

Только начал изучать WP и woocommerce, поэтому, не полностью понимаю логику роботы WP, сейчас напрямую вставил код вывода в файл front-page с таким содержимым:

<div class="home-2 categories-list bg-dark">
  <div class="container-fluid">
    <div class="home-header"><span>Каталог продукції</span></div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <?php
      $prod_cat_args = array(
        'taxonomy'    => 'product_cat',
        'orderby'     => 'id', // здесь по какому полю сортировать
        'hide_empty'  => false, // скрывать категории без товаров или нет
        'parent'      => 0 // id родительской категории
      );

    $woo_categories = get_categories( $prod_cat_args );
    $category_index = 0;
      foreach ( $woo_categories as $woo_cat ) {
        $woo_cat_id = $woo_cat->term_id; //category ID
        $woo_cat_name = $woo_cat->name; //category name
        $woo_cat_slug = $woo_cat->slug; //category slug
        $category_thumbnail_id = get_woocommerce_term_meta($woo_cat_id, 'thumbnail_id', true);
        $thumbnail_image_url = wp_get_attachment_url($category_thumbnail_id);
        ?>
          <div class="categories_list__item col-md-4 <?php echo ($category_index++ % 2) ? ' bg-primary': 'bg-light'; ?>" style="background-image: url(<?php echo $thumbnail_image_url; ?>);">
            <h2 class="categories_list__item__title">
              <a href="<?php echo get_term_link( $woo_cat_id, 'product_cat' ); ?>"><?php echo $woo_cat_name; ?> <i class="demo-icon icon-arrow"></i></a>
            </h2>
          </div>
        <?php } ?>
        <div class="categories_list__item col-md-4 <?php echo ($category_index++ % 2) ? ' bg-primary': 'bg-light'; ?> d-flex align-items-center justify-content-center">
            <h2 class="categories_list__item__title">
              <a href="<?php echo get_term_link( $woo_cat_id, 'product_cat' ); ?>">Інші товари <i class="demo-icon icon-arrow"></i></a>
            </h2>
        </div>
    </div>
  </div>
</div>

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