Как изменить «html скелет» товаров в woocommerce ( на стр shop, где сетка товаров)?

Question

[Константин]

Хочу натянуть собственную верстку на товары, а именно на странице где вывод товаров в категории. Например на странице /shop (не путать с версткой одиночного товара.

Answer 1

[Антон Литвиненко]

интеграция верстки в вукоммерс идет двумя основными способами.
1. Не вмешиваясь в разметку с помощью хуков меняете разметку. Вот пример кода:

Смотреть

// отключение сайдбара
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. Переопределение шаблонов. Создаете в своей теме папку woocommerce и в нее из папки с шаблонами из плагина копируете нужные шаблоны, соблюдая вложенность папок. Меняете в разметке то что вам нужно, стараясь не удалять хуки.

По хорошему второй способ применяется когда первый чем то не подходит