How to style product category list on WooCommerce store page?

Question

Taxonomy

The WooCommerce store settings have the option to show categories on the store page, and the categories page shows subcategories.
You need to make layout according to the template. I have defined that in the archive-product.php file, the woocommerce_product_loop_start() function outputs a list of categories. This function is bound by the woocommerce_maybe_show_product_subcategories hook, which depends on the woocommerce_output_product_categories function. In this function, the content-product_cat.php template is connected, which displays an element of the list of product categories li. I need these elements to be wrapped in a div ul with certain classes.
The woocommerce_output_product_categories function has the following code, which supposedly wraps a list:

function woocommerce_output_product_categories( $args = array() ) {
    $args = wp_parse_args( $args, array(
      'before'    => apply_filters( 'woocommerce_before_output_product_categories', '' ),
      'after'     => apply_filters( 'woocommerce_after_output_product_categories', '' ),
      'parent_id' => 0,
    ) );
...
}

I believe that these filters are responsible for the output of the code "before" and "after", but how to assign the necessary value to them in the form of html code?

Answer 1

Try wrapping with jQuery
Or output categories like this

<ul class="homepage-category">
<?php
$prod_cat_args = array(
    'taxonomy'    => 'product_cat',
    'orderby'     => 'id',
    'hide_empty'  => true,
    'parent'      => 0
  );

$woo_categories = get_categories( $prod_cat_args );
  foreach ( $woo_categories as $woo_cat ) {
      $woo_cat_id = $woo_cat->term_id;
      $woo_cat_name = $woo_cat->name;
      $woo_cat_slug = $woo_cat->slug;
      echo '<li class="main-cat-item">';
      $category_thumbnail_id = get_term_meta($woo_cat_id, 'thumbnail_id', true);
      $thumbnail_image_url = wp_get_attachment_image_src( $category_thumbnail_id, 'medium')[0];  
      echo '<a href="' . get_term_link( $woo_cat_id, 'product_cat' ) . '"><img src="' . $thumbnail_image_url . '"/> <h4>' . $woo_cat_name . '</h4></a>';
      echo "</li>\n";
  }
 
 ?>
</ul>