How to display categories in a grid in WooCommerce and products in a list?

Question

WooCommerce

How to display categories in a grid in WooCommerce and products in a list?
I didn’t find how to display it with code, only plugins where this is automatically done for the entire store

Answer 1

// Move WooCommerce subcategory list items into heir own <ul> separate from the product <ul>
add_action( 'init', 'move_subcat_lis' );

function move_subcat_lis() {
  // Remove the subcat <li>s from the old location.
  remove_filter( 'woocommerce_product_loop_start', 'woocommerce_maybe_show_product_subcategories' );
  add_action( 'woocommerce_before_shop_loop', 'msc_product_loop_start', 40 );
  add_action( 'woocommerce_before_shop_loop', 'msc_maybe_show_product_subcategories', 50 );
  add_action( 'woocommerce_before_shop_loop', 'msc_product_loop_end', 60 );
}

//Conditonally start the product loop with a <ul> contaner if subcats exist.
function msc_product_loop_start() {
  $subcategories = woocommerce_maybe_show_product_subcategories();
  if ( $subcategories ) {
    echo '<ul class="archive-category-wrapper">';
  }
}

//Print the subcat <li>s in our new location.
function msc_maybe_show_product_subcategories() {
  echo woocommerce_maybe_show_product_subcategories();
}

//Conditonally end the product loop with a </ul> if subcats exist.
function msc_product_loop_end() {
  $subcategories = woocommerce_maybe_show_product_subcategories();
  if ( $subcategories ) {
    echo '</ul>';
  }
}