Настройка пользовательской страницы отображения продукта WooCommerce

Woocommerce кастомизация страницы продукта

Отображение продукта является одним из самых важных аспектов вашего магазина на WooCommerce. Эти страницы выступают в качестве витрины вашей продукции.

Тем не менее, стандартный вид страниц WooCommerce может не соответствовать вашим идеям или задачам вашего бизнес проекта. К счастью сделать полностью кастомизированые страницы продукта WooCommerce не так уж и сложно.

В этом уроке я расскажу о простых шагах, необходимых для гибкой настройки отображения ваших страниц продуктов.

Начнём с шаблона

Первым шагом является создание шаблона, основанного на странице продукта по умолчанию.

[code]

<?php
$params = array(‘posts_per_page’ => 5, ‘post_type’ => ‘product’);
$wc_query = new WP_Query($params);
?>
<?php if ($wc_query->have_posts()) : ?>
<?php while ($wc_query->have_posts()) :
$wc_query->the_post(); ?>
<?php the_title(); ?>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else:  ?>
<p>
<?php _e( ‘No Products’); ?>
</p>
<?php endif; ?>

[/code]

Как вы можете убедиться, это очень простой шаблон. Хотя он и справляется с базовыми задачами, вы можете расширить функциональные возможности этой страницы с помощью нескольких встроенных функций WooCommerce.

Далее я прикрепляю список, представляющий собой набор функций WooCommerce, которые включают широкий спектр информации для ваших страниц продукта:

  • the_permalink() – отображает URL-адрес продукта
  • the_content() – Отображает полное описание продукта
  • the_excerpt() – Отображает краткое описание продукта
  • the_ID() – Отображает ID продукта
  • the_title() – Отображает имя продукта
  • the_post_thumbnail() – Отображает изображение продукта

Отобразить категорию продукта WooCommerce

Категории являются важным способом сортировки ваших продуктов в магазине. Для того, что-бы отобразить категорию продукта на странице, поместите этот фрагмент в файл functions.php вашей темы:

[code]

<?php
if ( ! defined( ‘ABSPATH’ ) ) {
exit;
}
global $product;
?>
<div class=»product_meta»>
<?php do_action( ‘woocommerce_product_meta_start’ ); ?>
<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( ‘variable’ ) ) ) : ?>
<span class=»sku_wrapper»><?php esc_html_e( ‘SKU:’, ‘woocommerce’ ); ?> <span class=»sku»><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( ‘N/A’, ‘woocommerce’ ); ?></span></span>
<?php endif; ?>
<?php echo wc_get_product_category_list( $product->get_id(), ‘, ‘, ‘<span class=»posted_in»>’ . _n( ‘Category:’, ‘Categories:’, count( $product->get_category_ids() ), ‘woocommerce’ ) . ‘ ‘, ‘</span>’ ); ?>
<?php echo wc_get_product_tag_list( $product->get_id(), ‘, ‘, ‘<span class=»tagged_as»>’ . _n( ‘Tag:’, ‘Tags:’, count( $product->get_tag_ids() ), ‘woocommerce’ ) . ‘ ‘, ‘</span>’ ); ?>
<?php do_action( ‘woocommerce_product_meta_end’ ); ?>
</div>

[/code]

Показать картинку категории продукта

У каждой категории товаров есть возможность задать заглавное изображение. Если вам нужно включить его на странице продукта, поместите этот фрагмент в файл functions.php установленной темы:

[code]

<?php
function cwresponse_get_thumbnail(){
if(is_page(205)){
$args = array(
‘tax_query’ => array(
array(
‘taxonomy’ => ‘product_cat’,
‘field’ => ‘slug’
)
)
);
$random_products = get_posts( $args );
foreach ( $random_products as $post ) : setup_postdata( $post );
?>
<div><a href=»<?php the_permalink(); ?>»><?php the_post_thumbnail(); ?></a></div>
<?php
endforeach;
wp_reset_postdata();
}
}
add_action(‘wp_footer’, ‘cwresponse_get_thumbnail’);

[/code]

Заключение

В этом уроке я описал, как вы можете легко настраивать пользовательские страницы продуктов в Woocommerce. Кроме того, вы можете легко отображать категорию продукта и её изображение, например для вывода логотипа марки товара. Используя данные методы, вы можете найти и более интересные решения для вашего онлайн магазина.