I
I
Ilya Derevyannykh2021-11-27 14:30:06
WooCommerce
Ilya Derevyannykh, 2021-11-27 14:30:06

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

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

In order to leave comments, you need to log in

1 answer(s)
A
Anton Litvinenko, 2021-11-27
@Ylia_dr

// 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>';
  }
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question