В этом примере 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();