Делаем магазин на WordPress (WooCommerce) часть 3

Это третья часть, здесь вторая.

 

Как добавить вариативный товар

Сначала добавляем новые (вариативные) атрибуты товаров. Данные параметры мы потом сможем выбирать и заполнять при создании/редактировании товаров магазина (помимо базовых опций).
Итак, переходим в раздел Товары - Атрибуты. Эта страница админки визуально и функционально похожа на процесс создания категорий. Добавляем нужные нам атрибуты и значения к ним.

Теперь для создания вариативного товара нам нужно:

 

Как добавить категории и теги страницам в WordPress

Для этого в 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();

На этом все. Теперь мы можем все это оформить, написать стили и привести к виду так как нужно нам.

Так же с моим портфолио можно ознакомиться на любой из представленной социальной сети, на своих страницах я публикую посты о своих работах, заданиях и целях.

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

С моим резюме можно ознакомиться по ссылке:

© 2020-2024 Портфолио Юдина Александра г.Пенза. Все права защищены