Как изменить расположение блоков на странице товара woocommerce
Визуальное руководство по работе с выводом контента на странице товара WooCommerce. Настройка вывода товара, изменение порядка вывода блоков, перестановка вывода цены, перемещение артикула, убрать отображение категории в карточке товара.
home › category › product
woocommerce_before_single_product
woocommerce_before_single_product_summary
woocommerce_before_single_product_summary
Sale
Thumbnails
woocommerce_show_product_thumbnails
woocommerce_single_product_summary
Product Title
★★★★★ (comments)
$20.00 — $30.00
short description
woocommerce_before_add_to_cart_form
woocommerce_before_variations_form
↻woocommerce_before_add_to_cart_button
woocommerce_before_single_variation
woocommerce_single_variation
$25.00 $20.00
in stock
woocommerce_before_add_to_cart_quantity
woocommerce_after_add_to_cart_quantity
woocommerce_after_single_variation
woocommerce_after_add_to_cart_button
woocommerce_product_meta_start
SKU: 003845678-1
Category: product category
Tags: my tags
woocommerce_product_meta_end
woocommerce_share
woocommerce_after_single_product_summary
Additional Information
| Weight | 10 kg |
| Dimensions | 30 x 40 x 20 sm |
| Option | value |
Related Products
Product title
$20.00
Product title
$25.00
Product title
$30.00
Product title
$35.00
С помощью событий указанных выше можно управлять контентом в карточке товара woocommerce. Так как выводом блоков в карточке товара нельзя управлять напрямую из редактора, настройка вывода товара осуществляют с помощью хуков, они позволяют изменить вывод, удалить или заменить требуемым. Для редакции используют add_filter, для добавления add_action , для удаления — remove_action.
Удалить вывод категории на странице товара
Для примера посмотрите как можно удалить категорию из карточки товара, ее не желательно там выводить, т.к. она обычно присутствует в хлебных крошках.
add_action( 'init', 'custom_remove_product_meta', 11 );
function custom_remove_product_meta() {
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
add_action( 'woocommerce_single_product_summary', 'custom_template_single_meta', 40 );
}
function custom_template_single_meta() {
global $product;
$sku = $product->get_sku();
if ( ! empty( $sku ) ) {
echo '<span class="sku">' . esc_html__( 'SKU:', 'woocommerce' ) . ' ' . esc_html( $sku ) . '</span>';
}
}Здесь мы удаляем мета данные товара которые включают в себя артикул товара, категорию и его метки. После возвращаем в уже отредактированном виде, в котором присутствует только артикул.
Чаще всего вывод артикула требуется сразу после названия товара, чтобы переместить его поставим более высокий приоритет (заменяем 40 на 9) в коде выше изменив следующую строку add_action( 'woocommerce_single_product_summary', 'custom_template_single_meta', 9 );
Настройка вывода товара — перемещение кнопки add to cart
Теперь попробуем разобраться как изменить положение кнопки добавления в корзину. Ее можно передвинуть только вместе с полем выбора кол-ва товара. Ниже представлены приоритеты выводы блоков по умолчанию.
/**
* woocommerce_single_product_summary hook
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
*/
do_action( 'woocommerce_single_product_summary' );Если нужно изменить приоритет вывода формы, и вывести его выше цены используется следующий код:
<?php
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 9 );
?>Но иногда требуется разместить цену после выбора кол-ва товара и до кнопки добавить в корзину, здесь можно посоветовать использовать jquery для реализации, например так:
add_action( 'wp_enqueue_scripts', 'custom_move_price_with_jquery' );
function custom_move_price_with_jquery() {
wp_add_inline_script( 'jquery', '
jQuery(document).ready(function($) {
$(".single_add_to_cart_button").before($(".price"));
});
' );
}Вывод атрибутов товара перед формой с кнопкой заказа
Еще часто нужно вывести атрибуты товара перед кнопкой добавить в корзину. Сделать это можно следующим способом:
add_action( 'woocommerce_before_add_to_cart_button', 'custom_product_attributes', 10 );
function custom_product_attributes() {
global $product;
$attributes = $product->get_attributes();
if ( $attributes ) {
echo '<div class="woocommerce-product-attributes">';
foreach ( $attributes as $attribute ) {
$attribute_name = wc_attribute_label( $attribute->get_name() );
$attribute_options = $attribute->get_options();
if ( ! empty( $attribute_options ) ) {
echo '<p class="woocommerce-product-attribute">';
echo '<strong>' . esc_html( $attribute_name ) . ': </strong>';
echo '<span>';
foreach ( $attribute_options as $option ) {
echo esc_html( $option );
}
echo '</span>';
echo '</p>';
}
}
echo '</div>';
}
}Возможно после этого будет логичным убрать информацию об атрибутах из табов этой страницы, сделать это можно при помощи фильтра.
add_filter( 'woocommerce_product_tabs', 'remove_additional_information_tab', 98 );
function remove_additional_information_tab( $tabs ) {
unset( $tabs['additional_information'] );
return $tabs;
}Если вам помогло это руководство, то предлагаем также узнать как вносить изменения в woocommerce корзина
Не пропустите эти статьи
Woocommerce корзина, хуки, визуальное руководство
Woocommerce корзина, визуальное руководство, отображающее все доступные крючки (hooks) на странице корзины, с примерами реализации