Это третья часть, здесь вторая.
Сначала добавляем новые (вариативные) атрибуты товаров. Данные параметры мы потом сможем выбирать и заполнять при создании/редактировании товаров магазина (помимо базовых опций).
Итак, переходим в раздел Товары - Атрибуты. Эта страница админки визуально и функционально похожа на процесс создания категорий. Добавляем нужные нам атрибуты и значения к ним.
Теперь для создания вариативного товара нам нужно:
Для этого в function.php вставляем код:
Код
function new_taxonomies_for_pages() {
register_taxonomy_for_object_type( 'post_tag', 'page' );
register_taxonomy_for_object_type( 'category', 'page' );
}
add_action( 'init', 'new_taxonomies_for_pages' );
if ( ! is_admin() ) {
add_action( 'pre_get_posts', 'tag_cat_archives' );
}
function tag_cat_archives( $wp_query ) {
$my_taxonomies_array = array('post','page');
if ( $wp_query->get( 'category_name' ) || $wp_query->get( 'cat' ) )
$wp_query->set( 'post_type', $my_taxonomies_array );
if ( $wp_query->get( 'tag' ) )
$wp_query->set( 'post_type', $my_taxonomies_array );
}
Как вывести на страницу каталога наши категории, страницы которых созданы в разделе "страницы" и добавлены в определенную категорию страниц. Этот вариант подойдет когда мы не хотим использовать стандарт каталога WooCommerce, а хотим организовать свои правила вывода категорий, подкатегорий и товаров.
Пример кода
<div class="uk-page-001">
<div class="uk-page-001-content uk-margin-auto">
<div class="uk-002-items uk-grid-medium uk-flex-center" uk-grid>
<?php query_posts('cat=25' . "&order=ASC");
while (have_posts()) : the_post();
?>
<div class="uk-002-items-itm uk-width-1-2@s uk-width-1-1">
<a class="uk-002-items-itm-link" href="<?php the_permalink(); ?>">
<?$banner = get_field('banner');?>
<img class="uk-002-items-itm-link-img" src="<?=$banner;?>" alt="" uk-img>
</a>
</div>
<?php
endwhile;
wp_reset_query();
?>
</div>
</div>
</div>
Этот метод подойдет, если нас устраивает структура каталога WooCOmmerce, но мы хотим поменять отображение этих страниц и написать для них свои стили и правила отображения.
Начнем. Прежде всего избавимся от ul и li что в последнее время использует WooCommerce, за это отвечают два файла в папке loop - loop-start.php и loop-end.php. Закомментируем в них не нужные нам строки.
loop-start.php
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<!--<ul class="products columns-<?php //echo esc_attr( wc_get_loop_prop( 'columns' ) ); ?>">-->
loop-end.php
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<!--</ul>-->
Файл archive-product.php отвечает за шаблон самого каталога в котором будет организован цикл отображения категорий, подкатегорий и карточек товара. Как его менять под нужный нам вид, я рассматривал во 2 части этой шпаргалки.
Файл content-product-cat.php отвечает в цикле за отображение категорий и подкатегорий, вот как вывести в нем ссылку, изображение и наименование категорий или подкатегорий.
content-product-cat.php
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
?>
<a class="" href="<?php echo esc_url(get_term_link($category,'product_cat'));?>">
<?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];
?>
<img src="<?php echo esc_url($image);?>" class="" alt='<?php echo esc_html( $category->name );?>'>
<h4 class=""><?php echo esc_html( $category->name );?></h4>
</a>
Файл content-product.php отвечает за отображение карточек товаров на странице категорий или подкатегорий, вот как в нем вывести ссылку, изображение и наименование товаров. Так же в другой шпаргалке (которая еще пока в разработке) я опубликую примеры как можно оформлять эти карточки, как в них выводит цены, акции, размеры, как можно сделать покупку прямо из этой карточки не заходя на страницу самого товара.
content-product.php
defined( 'ABSPATH' ) || exit;
global $product;
// Ensure visibility.
if ( empty( $product ) || ! $product->is_visible() ) {
return;
}
?>
<a href="<?php echo esc_url(get_the_permalink());?>">
<img src="<?php echo wp_get_attachment_url($post_thumbnail_id);?>" class="" alt='<?php echo $product->get_title(); ?>'
</a>
<a class="" href="<?php echo esc_url(get_the_permalink());?>">
<h4 class=""><?php echo $product->get_title(); ?></h4>
</a>
Файл single-product.php - это шаблон страницы карточки товара. Для начала покажу как в ней выводить основное изображение, галерею, заголовок и цену. Так же в другой шпаргалке (которая еще пока в разработке) я опубликую примеры как можно оформлять эти страницы, и как можно выводить много других параметров и использовать функции.
single-product.php
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
get_header(); ?>
<img class="" src="<?the_post_thumbnail_url();?>" alt="<?php single_post_title(); ?>"><br>
<?php while ( have_posts() ) : ?>
<?php the_post(); ?>
<?php $attachment_ids = $product->get_gallery_image_ids(); ?>
<?php foreach ( $attachment_ids as $attachment_id ) { ?>
<img src="<?php echo wp_get_attachment_url( $attachment_id ); ?>" alt='<?php single_post_title(); ?>' />
<?php } ?>
<?php endwhile; ?>
<p class="">
<?php single_post_title();?>
</p>
<p class="">
Цена: <? echo $product->get_variation_price();?> <span>₽</span>
</p>
<?php
get_footer();
На этом все. Теперь мы можем все это оформить, написать стили и привести к виду так как нужно нам.