How to create a WooCommerce widget with categories (with thumbnails, etc.) and a custom template?

Question

WordPress

Hello, how to organize a product category list widget with arbitrary html on the front-page?
That is, the task is to display all categories of the 1st level with a link and a thumbnail, but in an individual layout.

I just started learning WP and woocommerce, so I don’t fully understand the logic of WP robots, now I directly inserted the output code into the front-page file with the following content:

<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>

Before that, I used opencart, where the same was done through modules that have their own controller, model, output template and language files (which were easily corrected) ... unfortunately, I have not yet mastered the widget architecture in order to create my own .... but it is possible , there is a ready-made version ... it's wordpress))))

Answer 1

This should help you