Примеры трех страниц магазина

В этом примере archive-product.php отвечает за отображение каталога с категориями и подкатегориями, content-product-cat.php отвечает за отображение товаров определенной категории, а single-product.php отвечает за карточку товара.
В этих примерах реализовано сложное трехуровневое меню, которое строится по информации из административной части.

archive-product.php

<?php
/**
 * The Template for displaying product archives, including the main shop page which is a post type archive
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

global $product;

get_header();
?>





<?php
$left_menu = '';

$taxonomy     = 'product_cat';
$orderby      = 'term_order';
$show_count   = 0;      // 1 for yes, 0 for no
$pad_counts   = 0;      // 1 for yes, 0 for no
$hierarchical = 1;      // 1 for yes, 0 for no
$title        = '';
$empty        = 0;
$args = array(
	'taxonomy'     => $taxonomy,
	'orderby'      => $orderby,
	'show_count'   => $show_count,
	'pad_counts'   => $pad_counts,
	'hierarchical' => $hierarchical,
	'title_li'     => $title,
	'hide_empty'   => $empty
);
$all_categories = get_categories( $args );
foreach ($all_categories as $cat) {
	if(($cat->category_parent == 0) && ($cat->term_id <> 15)) {
		$category_id = $cat->term_id;
		$args2 = array(
			'taxonomy'     => $taxonomy,
			'child_of'     => 0,
			'parent'       => $category_id,
			'orderby'      => $orderby,
			'show_count'   => $show_count,
			'pad_counts'   => $pad_counts,
			'hierarchical' => $hierarchical,
			'title_li'     => $title,
			'hide_empty'   => $empty
		);
		$sub_cats = get_categories( $args2 );
		if($sub_cats) {
			foreach($sub_cats as $sub_category) {
				$sub_category_id = $sub_category->term_id;
				$args3 = array(
					'taxonomy'     => $taxonomy,
					'child_of'     => 0,
					'parent'       => $sub_category_id,
					'orderby'      => $orderby,
					'show_count'   => $show_count,
					'pad_counts'   => $pad_counts,
					'hierarchical' => $hierarchical,
					'title_li'     => $title,
					'hide_empty'   => $empty
				);
				$sub_sub_cats = get_categories( $args3 );
				if($sub_sub_cats) {
					$left_menu .=  '<!--ПОДКАТЕГОРИЯ-->';
					$left_menu .=  '<div class="accordion-item">';
					$left_menu .=  '<h2 class="accordion-header" id="heading' . $cat->term_id . '">';
					$left_menu .=  '<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse' . $cat->term_id . '" aria-expanded="true" aria-controls="collapse' . $cat->term_id . '">';
					$left_menu .=  $sub_category->name;
					$left_menu .=  '</button>';
					$left_menu .=  '</h2>';
					$left_menu .=  '<div id="collapse' . $cat->term_id . '" class="accordion-collapse collapse" aria-labelledby="heading' . $cat->term_id . '" data-bs-parent="#accordionMenu">';
					$left_menu .=  '<div class="accordion-body">';
					foreach($sub_sub_cats as $sub_sub_category) {
						$left_menu .=  '<a class="accordion-body-link" href="'. get_term_link($sub_sub_category->slug, 'product_cat') .'">'. $sub_sub_category->name .'</a><br>';
					}
					$left_menu .=  '</div>';
					$left_menu .=  '</div>';
					$left_menu .=  '</div>';
					$left_menu .=  '<!--ПОДКАТЕГОРИЯ-->';
				} else {
					$left_menu .=  '<div class="accordion-body">';
					$left_menu .=  '<a class="accordion-body-link" href="'. get_term_link($sub_category->slug, 'product_cat') .'">'. $sub_category->name .'</a><br>';
					$left_menu .=  '</div>';
				}
			}
		}
	}
}
?>





<?php		
$url=$_SERVER['REQUEST_URI'].'/';
$url=str_replace(array('http://','//'),'',$url);
$level=substr_count($url,'/');
if (!$level) {$level=1;}
//echo $level;	
if ($level>="3" ) {
?>





	<div class="container-cat-001 overlay-black" style="background-image: url(/wp-content/themes/mielemos/assets/images/mainback.jpg);">
		<div class="container-cat-001-content">
			<div class="container-cat-001__title">
				<div class="container-cat-001__title-content">
				<p class="container-cat-001__title-text"><?php woocommerce_page_title(); ?></p>
				<?php
				 $t_id = get_queried_object()->term_id;
				 //echo $t_id;
				 $term_meta = get_option( "taxonomy_$t_id" );
				 $term_meta_content = $term_meta['custom_term_meta'];
				 if ( $term_meta_content != '' ) {
					 echo '<p class="container-cat-001__banner-text">';
					 echo $term_meta_content;
					 echo '</p>';
				 }	
				?>
				</div>
			</div>
			<div class="container-cat-001__breadcrumbs">
				<?php if( function_exists('kama_breadcrumbs') ) kama_breadcrumbs(' // '); ?>
			</div>
		</div>
	</div>





	<?php
	if ( is_product_category() ) {
		$term = get_queried_object();
		$taxonomy = $term->taxonomy;
		if ( $term_children = get_term_children( $term->term_id, $taxonomy ) ) {
			?>
			<div class="container-cat-003">
				<div class="container-cat-003-content" style="padding: 40px 10px 10px 10px;">
					<div class="container-cat-003__items">
						<?php
						foreach ( $term_children as $key => $term_child ) {
						$term_child = get_term_by( 'id', $term_child, $taxonomy );
						echo '<div class="container-cat-003__items-itm mini">';
						echo '<div class="container-cat-003__items-itm-info">';
						echo '<p class="container-cat-003__items-itm-info-title">' . $term_child->name . '</p>';
						echo '<a class="container-cat-003__items-itm-info-link" href="' . get_term_link( $term_child->term_id, $taxonomy ) . '">Подробнее</a>';
						echo '</div>';
						echo '</div>';
						}
						?>
					</div>
				</div>
			</div>
			<?php
		}
	  }
	?>





	<div class="container-cat-002">
		<div class="container-cat-002-content">

			<!--ЛЕВАЯ ЧАСТЬ-->
			<div class="container-cat-002-left">
				<div class="container-cat-002-left-title">
					<p class="container-cat-002-left-title-text">Каталог продукции Miele</p>
				</div>
				<div class="container-cat-002-left-menu">
					<div class="accordion" id="accordionMenu">
						
					<?php echo $left_menu; ?>
						
					</div>
				</div>
				<div class="container-cat-002-left-banner overlay-black" style="background-image: url(/wp-content/themes/mielemos/assets/images/mainback.jpg);">
					<p class="container-cat-002-left-banner-title">MieleMos</p>
					<p class="container-cat-002-left-banner-text">Расширенная гарантия на всю сушильную технику</p>
					<a class="container-cat-002-left-banner-link" href="">Подробнее</a>
				</div>
				<div class="container-cat-002-left-partners">
					<p class="container-cat-002-left-partners-title">Покупка в рассрочку</p>
					<div class="container-cat-002-left-partners-logos">
						<img class="container-cat-002-left-partners-logos-img" src="/wp-content/themes/mielemos/assets/images/bank_alfa.jpg" alt="">
						<img class="container-cat-002-left-partners-logos-img" src="/wp-content/themes/mielemos/assets/images/bank_tinkoff.jpg" alt="">
						<img class="container-cat-002-left-partners-logos-img" src="/wp-content/themes/mielemos/assets/images/bank_sber.jpg" alt="">
						<img class="container-cat-002-left-partners-logos-img" src="/wp-content/themes/mielemos/assets/images/bank_tochka.jpg" alt="">
					</div>
					<a class="container-cat-002-left-partners-link" href="">наши партнеры</a>
				</div>
				<div class="container-cat-002-left-callback">
					<p class="container-cat-002-left-callback-title">Есть вопросы?<br>С удовольствием ответим</p>
					<a class="container-cat-002-left-callback-link" href="">Заказать звонок</a>
				</div>
			</div>
			<!--КОНЕЦ ЛЕВОЙ ЧАСТЬ-->

			<!--ПРАВАЯ ЧАСТЬ-->
			<div class="container-cat-002-right">
				<div class="container-cat-002-right-title">
					<div class="container-cat-002-right-title-sort">
						<p class="container-cat-002-right-title-text">Сортировать по: </p>
					</div>
					<a class="container-cat-002-right-title-link" href="#filter_Panel">Фильтр</a>
				</div>

				<div class="container-cat-002-right-items">
					
					<?php
					$category = get_queried_object();
					$current_cat_id = $category->term_id;
					$current_cat_name = $category->name;
					//echo $current_cat_id;
					//echo $current_cat_name;

					$args = array(
					'post_type'	=>	'product',
					'showposts'	=>	'7',	
					//'orderby'	=>	'rand',
						'tax_query' => array(
							array(
								'taxonomy' => 'product_cat',
								'field'    => 'id',
								'terms'    => $current_cat_id
							)
						)
					);
					$query = new WP_Query( $args );
					while ( $query -> have_posts() ) {
					$query -> the_post();
					?>
					<!--НАЧАЛО КАРТОЧКИ-->
					<div class="container-cat-002-right-items-itm">
						<div class="container-cat-002-right-items-itm-image">
							<img class="container-cat-002-right-items-itm-image-img" src="<?the_post_thumbnail_url();?>" alt="<?the_title();?>">
						</div>
						<div class="container-cat-002-right-items-itm-options">
							<?$tip = get_field('tip');?>
							<p class="container-cat-002-right-items-itm-options-title"><?=$tip;?></p>
							<?$model = get_field('model');?>
							<a class="container-cat-002-right-items-itm-options-link" href="<?php echo esc_url(get_the_permalink());?>"><?=$model;?></a>
							<div class="container-cat-002-right-items-itm-options-items">
								<?php
								global $product;
								$product->list_attributes();
								?>
								<?$flag_proizvoditelya = get_field('flag_proizvoditelya');?>
								<img class="container-cat-002-right-items-itm-options-items-img" src="<?=$flag_proizvoditelya;?>" alt="">
							</div>
						</div>
						<div class="container-cat-002-right-items-itm-buyblock">
							<div class="container-cat-002-right-items-itm-buyblock-btn">
								<a class="container-cat-002-right-items-itm-buyblock-btn-lnk" href="">
									<img class="container-cat-002-right-items-itm-buyblock-btn-lnk-img" src="/wp-content/themes/mielemos/assets/images/heart.png" alt="">
								</a>
								<a class="container-cat-002-right-items-itm-buyblock-btn-lnk" href="">
									<img class="container-cat-002-right-items-itm-buyblock-btn-lnk-img" src="/wp-content/themes/mielemos/assets/images/plus.png" alt="">
								</a>
							</div>
							<div class="container-cat-002-right-items-itm-buyblock-price">
								<?php
								$product_id = get_the_ID();
								$product = wc_get_product( $product_id );
								?>
								<p class="container-cat-002-right-items-itm-buyblock-price-text"><? echo $product->get_price_html(); ?> руб.</p>
							</div>
							<div class="container-cat-002-right-items-itm-buyblock-avalible">
								<?php
								if (get_post_meta(get_the_ID(), '_stock_status', true) == 'outofstock') {
								  echo '<p class="container-cat-002-right-items-itm-buyblock-avalible-text"><span style="color: red;">Нет в наличии</span></p>';
								} else {
								  echo '<p class="container-cat-002-right-items-itm-buyblock-avalible-text">В наличии</p>';
								}
								?>
							</div>
							<div class="container-cat-002-right-items-itm-buyblock-cartbtn">
								<a class="container-cat-002-right-items-itm-buyblock-cartbtn-lnk" href="">В корзину</a>
							</div>
							<div class="container-cat-002-right-items-itm-buyblock-link">
								<a class="container-cat-002-right-items-itm-buyblock-link-lnk" href="">Купить в 1 клик</a>
							</div>
							<div class="container-cat-002-right-items-itm-buyblock-icons">
								<img class="container-cat-002-right-items-itm-buyblock-icons-img" src="/wp-content/themes/mielemos/assets/images/option001.png" alt="">
								<img class="container-cat-002-right-items-itm-buyblock-icons-img" src="/wp-content/themes/mielemos/assets/images/option001.png" alt="">
								<img class="container-cat-002-right-items-itm-buyblock-icons-img" src="/wp-content/themes/mielemos/assets/images/option001.png" alt="">
								<img class="container-cat-002-right-items-itm-buyblock-icons-img" src="/wp-content/themes/mielemos/assets/images/option001.png" alt="">
								<img class="container-cat-002-right-items-itm-buyblock-icons-img" src="/wp-content/themes/mielemos/assets/images/option001.png" alt="">
								<img class="container-cat-002-right-items-itm-buyblock-icons-img" src="/wp-content/themes/mielemos/assets/images/option001.png" alt="">
								<img class="container-cat-002-right-items-itm-buyblock-icons-img" src="/wp-content/themes/mielemos/assets/images/option001.png" alt="">
							</div>
						</div>
					</div>
					<!--КОНЕЦ КАРТОЧКИ-->
					<?php
					};
					wp_reset_postdata();
					?>

				</div>
			</div>
			<!--КОНЕЦ ПРАВОЙ ЧАСТЬ-->

		</div>
	</div>





<!--БОКОВАЯ ПАНЕЛЬ-->
<div class="panel" id="filter_Panel">
	<a class="close-block" href="#close-block"><i class="fa-solid fa-xmark"></i></a>
	<div class="panelcontent">
	<div class="panel__title">
		<p class="panel__title-text">
			Фильтр
		</p>
	</div>
	<div class="panel__body">

		ФИЛЬТР

	</div>
	</div>
</div>





<?php
}
else
{
?>





	<div class="container-cat-001 overlay-black" style="background-image: url(/wp-content/themes/mielemos/assets/images/mainback.jpg);">
		<div class="container-cat-001-content">
			<div class="container-cat-001__title">
				<div class="container-cat-001__title-content">
				<p class="container-cat-001__title-text"><?php woocommerce_page_title(); ?></p>
				<?php
				 $t_id = get_queried_object()->term_id;
				 $term_meta = get_option( "taxonomy_$t_id" );
				 $term_meta_content = $term_meta['custom_term_meta'];
				 if ( $term_meta_content != '' ) {
					 echo '<p class="container-cat-001__banner-text">';
					 echo $term_meta_content;
					 echo '</p>';
				 }	
				?>
				</div>
			</div>
			<div class="container-cat-001__breadcrumbs">
				<?php if( function_exists('kama_breadcrumbs') ) kama_breadcrumbs(' // '); ?>
			</div>
		</div>
	</div>





	<div class="container-cat-003">
		<div class="container-cat-003-content">
			<div class="container-cat-003__items">
				<?php
				if ( woocommerce_product_loop() ) {

					woocommerce_product_loop_start();

					if ( wc_get_loop_prop( 'total' ) ) {
						while ( have_posts() ) {
							the_post();
							do_action( 'woocommerce_shop_loop' );
							wc_get_template_part( 'content', 'product' );
						}
					}

					woocommerce_product_loop_end();

					do_action( 'woocommerce_after_shop_loop' );
				} else {
					do_action( 'woocommerce_no_products_found' );
				}

				do_action( 'woocommerce_after_main_content' );
				?>
			</div>
		</div>
	</div>





<?php
}
?>





<?php
get_footer();

content-product-cat.php

<?php
/**
 * The template for displaying product category thumbnails within loops
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-product-cat.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 4.7.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>



	<?php
	$small_thumbnail_size = apply_filters( 'subcategory_archive_thumbnail_size', 'woocommerce_thumbnail' );
	$dimensions = wc_get_image_size( $small_thumbnail_size );
	$thumbnail_id = get_term_meta( $category->term_id, 'thumbnail_id', true );
	$image = wp_get_attachment_image_src( $thumbnail_id, $small_thumbnail_size );
	$image = $image[0];
	?>	

	<div class="container-cat-003__items-itm">
		<div class="container-cat-003__items-itm-info">
			<p class="container-cat-003__items-itm-info-title"><?php echo esc_html( $category->name );?></p>
			<p class="container-cat-003__items-itm-info-text"><?php echo esc_html( $category->description );?></p>
			<a class="container-cat-003__items-itm-info-link" href="<?php echo esc_url(get_term_link($category,'product_cat'));?>">Подробнее</a>
		</div>
		<div class="container-cat-003__items-itm-image">
			<img class="container-cat-003__items-itm-image-img" src="<?php echo esc_url($image);?>" alt="<?php echo esc_html( $category->name );?>">
		</div>
	</div>

	

single-product.php

<?php
/**
 * The Template for displaying all single products
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see         https://docs.woocommerce.com/document/template-structure/
 * @package     WooCommerce\Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

get_header(); ?>






	<div class="container-card-001">
		<div class="container-card-001-content">
			<div class="container-card-001__gallery">
				<div id="slider" class="flexslider">
					<ul class="slides">
						
						<?php while ( have_posts() ) : ?>
						<?php the_post(); ?>
						<?php $attachment_ids = $product->get_gallery_image_ids(); ?>
						<?php foreach ( $attachment_ids as $attachment_id ) { ?>
						<li>
							<a href="<?php echo wp_get_attachment_url( $attachment_id ); ?>" data-fancybox="gallery">
								<img src="<?php echo wp_get_attachment_url( $attachment_id ); ?>" alt="">
							</a>
						</li>
						<?php } ?>
						<?php endwhile; ?>
						
					</ul>
				</div>
				<div id="carousel" class="flexslider navigation">
					<ul class="slides">
						
						<?php while ( have_posts() ) : ?>
						<?php the_post(); ?>
						<?php $attachment_ids = $product->get_gallery_image_ids(); ?>
						<?php foreach ( $attachment_ids as $attachment_id ) { ?>
						<li class="minislide">
							<img class="miniimg" src="<?php echo wp_get_attachment_url( $attachment_id ); ?>" />
						</li>
						<?php } ?>
						<?php endwhile; ?>

					</ul>
				</div>
			</div>

			<div class="container-card-001__info">
				<?$tip = get_field('tip');?>
				<p class="container-card-001__info-title"><?=$tip;?></p>
				<?$model = get_field('model');?>
				<p class="container-card-001__info-model" ><?=$model;?></p>
				<div class="container-card-001__info-items">
					<?php
					global $product;
					$product->list_attributes();
					?>
				</div>
				<p class="container-card-001__info-description">
					<?php echo the_excerpt(); ?>
				</p>
			</div>

			<div class="container-card-001__buyblock">
				<div class="container-card-001__buyblock-avalible">
					<?php
					if (get_post_meta(get_the_ID(), '_stock_status', true) == 'outofstock') {
						echo '<p class="container-card-001__buyblock-avalible-text"><span style="color: red;">Нет в наличии</span></p>';
					} else {
						echo '<p class="container-card-001__buyblock-avalible-text">В наличии</p>';
					}
					?>
				</div>
				<div class="container-card-001__buyblock-price">
					<p class="container-card-001__buyblock-price-text"><? echo $product->get_price_html(); ?> руб.</p>
				</div>
				<div class="container-card-001__buyblock-cartbtn">
					<a class="container-card-001__buyblock-cartbtn-lnk" href="">В корзину</a>
				</div>
				<div class="container-card-001__buyblock-link">
					<a class="container-card-001__buyblock-link-lnk" href="">Купить в 1 клик</a>
				</div>
				<div class="container-card-001__buyblock-rentbtn">
					<a class="container-card-001__buyblock-rentbtn-lnk" href="">Купить в рассрочку</a>
				</div>
			</div>

		</div>
	</div>





	<div class="container-card-002">
		<div class="container-card-002-content">
			<div class="container-card-002__tabs">
				<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
					<li class="nav-item" role="presentation">
					<button class="nav-link active" id="pills-about-tab" data-bs-toggle="pill" data-bs-target="#pills-about" type="button" role="tab" aria-controls="pills-about" aria-selected="true">Характеристики</button>
					</li>
					<li class="nav-item" role="presentation">
					<button class="nav-link" id="pills-option-tab" data-bs-toggle="pill" data-bs-target="#pills-option" type="button" role="tab" aria-controls="pills-option" aria-selected="false">Инструкции</button>
					</li>
					<li class="nav-item" role="presentation">
					<button class="nav-link" id="pills-planhome-tab" data-bs-toggle="pill" data-bs-target="#pills-planhome" type="button" role="tab" aria-controls="pills-planhome" aria-selected="false">Отзывы</button>
					</li>
				</ul>
				<div class="tab-content" id="pills-tabContent">
					<?$harakteristiki = get_field('harakteristiki');?>
					<div class="tab-pane fade show active" id="pills-about" role="tabpanel" aria-labelledby="pills-about-tab">
						<?=$harakteristiki;?>
					</div>
					<?$instrukczii = get_field('instrukczii');?>
					<div class="tab-pane fade" id="pills-option" role="tabpanel" aria-labelledby="pills-option-tab">
						<?=$instrukczii;?>
					</div>
					<div class="tab-pane fade" id="pills-planhome" role="tabpanel" aria-labelledby="pills-planhome-tab">
						ОТЗЫВЫ
					</div>
				</div>
			</div>
		</div>
	</div>





<?php
get_footer();