How to change the "html skeleton" of products in woocommerce (on the shop page, where the products grid is)?

Question

WooCommerce

I want to put my own layout on the products, namely on the page where the products are displayed in the category. For example, on the page /shop (not to be confused with the layout of a single product.

Answer 1

There are two main ways to integrate layout into WooCommerce.
1. Without interfering with the markup, use hooks to change the markup. Here is an example code:

Look

// отключение сайдбара
remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );

// отключить хлебные крошки
remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );

// основной контейнер
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
add_action( 'woocommerce_before_main_content', 'storm_output_content_wrapper_start', 10 );
function storm_output_content_wrapper_start() {
  ?>
  <div class="container-1000">
  <?php
}

remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
add_action( 'woocommerce_after_main_content', 'storm_output_content_wrapper_end', 40 );
function storm_output_content_wrapper_end() {
  ?>
  </div><!-- container-1000 -->
  <?php
}

add_action( 'woocommerce_before_main_content', 'storm_archive_output_content_wrapper_start', 15 );
function storm_archive_output_content_wrapper_start() {
  if( is_shop() || is_product_category() ) {
    ?>
    <div class="category-content">
    <?php
  }
}

add_action( 'woocommerce_before_main_content', 'storm_catalog_wrapper_start', 20 );
function storm_catalog_wrapper_start() {
  if( is_shop() || is_product_category() ) {
    ?>
    <div class="catalog-list-wrapper">
    <?php
  }
}

//вывод хлебных крошек на странице архива
add_action( 'woocommerce_before_main_content', 'storm_catalog_breadcrumbs', 25 );
function storm_catalog_breadcrumbs() {
  if( is_shop() || is_product_category() ) {
    ?>
    <div class="breadcrumbs">
      <?php woocommerce_breadcrumb() ?>
    </div>
    <?php
  }
}

// Изменить стрелки пагинации
add_filter( 'woocommerce_pagination_args', 'custom_woo_pagination' );
function custom_woo_pagination( $args ) {
  $args['prev_text'] = '<span class="fa fa-angle-left"></span><span class="sr-only">Previous page</span>'; 
  $args['next_text'] = '<span class="fa fa-angle-right"></span><span class="sr-only">Next page</span>';
  return $args;
}

// вывод пагинации
remove_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );
add_action('woocommerce_after_shop_loop', 'storm_pagination', 10);
function storm_pagination() {
  ?>
  <div class="pagination-wrapper">
    <?php woocommerce_pagination(); ?>
  </div>
  <?php
}

add_action( 'woocommerce_after_main_content', 'storm_catalog_wrapper_end', 15 );
function storm_catalog_wrapper_end() {
  if( is_shop() || is_product_category() ) {
  ?>
    </div> <!-- catalog-list-wrapper  -->
    <?php
  }
}

// Вывод сайдбара на странице архива
add_action( 'woocommerce_after_main_content', 'storm_archive_get_sidebar', 20 );
function storm_archive_get_sidebar() {
  if( is_shop() || is_product_category() ) {
    woocommerce_get_sidebar();
  }
}

add_action( 'woocommerce_after_main_content', 'storm_archive_output_content_wrapper_end', 30 );
function storm_archive_output_content_wrapper_end() {
  if( is_shop() || is_product_category() ) {
  ?>
    </div><!-- category-content -->
    <?php
  }
}

2. Redefining templates. Create a woocommerce folder in your theme and copy the necessary templates from the folder with templates from the plugin into it, observing the nesting of folders. Change what you need in the markup, trying not to remove the hooks.
For good, the second method is used when the first is not suitable for something