Как изменить расположение элементов WooCommerce в WordPress?

Question

[brabrubra]

Привет!
WordPress с собственной темой и подключенным WooCommerce.
Стандартные стили и расположение элементов (название товара, изображение, описание и др.) не используется. Точнее со стилями все понятно, и о перемещении нужных файлов woocommerce/template в шаблон известно. Но не могу понять как изменить порядок и расположение элементов (название товара, изображение, описание и др.). Я искал и вроде бы понял, что нужно использовать @hooked, но не понял как. Наведите на правильный путь

Например, часть из "content-single-product.php"

<div itemscope itemtype="http://schema.org/Product" id="product-<?php the_ID(); ?>" <?php post_class(); ?>>

	<?php
		/**
		 * woocommerce_show_product_images hook
		 *
		 * @hooked woocommerce_show_product_sale_flash - 10
		 * @hooked woocommerce_show_product_images - 20
		 */
		do_action( 'woocommerce_before_single_product_summary' );
	?>
	
	<? do_action( 'woocommerce_template_single_title' ); ?>
	<div class="summary entry-summary">

		<?php
			/**
			 * 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' );
		?>

	</div><!-- .summary -->

	<?php
		/**
		 * woocommerce_after_single_product_summary hook
		 *
		 * @hooked woocommerce_output_product_data_tabs - 10
		 * @hooked woocommerce_output_related_products - 20
		 */
		do_action( 'woocommerce_after_single_product_summary' );
	?>

</div><!-- #product-<?php the_ID(); ?> -->

Спасибо за внимание!

Comments

[chusika]

Вопрос! У меня выводятся товары в каталоге (по 3 или 4 в ряд). В стандартной версии заголовки товаров под изображением. В каком файле находятся хуки, чтобы внести изменения в перестановку элементов? В файле content-single-product.php только конкретно карточка товара, а мне нужен каталог, где отображается несколько товаров.

[brabrubra]

Каталог в файле archive-product.php, который подгружает карточку content-product.php

[chusika]

brabrubra: спасибо огроменное!

Answer 1

[Mr Crabbz]

В папке плагина woocommerce есть файл со всеми хуками - woocommerce_hooks.php . Находите в нем отрезок, который отвечает за нужный вам кусок шаблона (в вашем случае woocommerce_single_product_summary), смотрите вызовы add_action.
У вас они будут как раз такие, как закоментировано в коде выше, то есть:

@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

В данном случае числа - это последовательность (приоритет) активации action'ов.
Теперь вам нужно в functions.php вашей темы деактивировать эти action'ы методом remove_action и выполнить их активацию в нужном вам порядке.
Например, вам нужно, чтобы сначала выводилось название товара, затем краткое описание, затем цена и тд.
Код будет примерно такой:

*тут перечисляем все строки с методом remove_action:

remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10);
... и т.д.

*Теперь вызываем те же действия по хуку woocommerce_single_product_summary, но в нужной нам последовательности:
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 10);
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 15);
... и т.д.

Числовой приоритет вызова обычно делают кратным 5 для того, чтобы можно было потом еще что нибудь впихнуть между вызовами. Например, захотите потом добавить вывод ключевых слов или уникального поля товара между названием и кратким описанием. Тогда приоритет вызова можно будет сделать 6-9 без необходимости заново перебирать весь массив вызова хука.

Подробнее про понятия hook, action и filter читайте в официальном руководстве: Introduction to hooks: actions and filters

Comments

[brabrubra]

Спасибо за подробное разъяснение. Благодарен!

[chusika]

Простите, у меня вопрос! У меня выводятся товары в каталоге (по 3 или 4 в ряд). В стандартной версии заголовки товаров под изображением. В каком файле находятся хуки, чтобы внести изменения в перестановку элементов? В файле content-single-product.php только конкретно карточка товара, а мне нужен каталог, где отображается несколько товаров.

[chusika]

chusika: уже не актуально

[Алексей Черепанов]

Если что-то меня в папке с плагином, то при следующем обновлении плагина всё слетит, к сожалению.

[Mr Crabbz]

Udjine: Все эти манипуляции нужно проводить в functions.php вашей темы - тогда при обновлении ничего не слетит.

[Руслан Бегалиев]

Алексей Черепанов: так же, если из папки плагина перенести папку templates в свою тему и переименовать её в woocommerce, то с ними тоже ничего не случится

[alashgrand]

А можно ли каким-то образом добавить сопутствующие (апсейл) товары для вариации на карточке товара? Хочу чтобы это выглядело так, как на этом изображений nursace.kz/wp-content/uploads/2018/10/sdfsdf.png

Answer 2

[Юрий Молотов]

У меня подобная ситуация прямо сейчас. Как я решил задачу:

1. Скопировал и закомментировал содержимое price.php
2. Вставил его в конец short-description.php

Всё. Блок стоимости идёт после описания.

Если честно не совсем понимаю смысл разбиения всего содержимого карточки товара на десятки файлов, я бы вообще всё поудалял и вставил одно за другим в content-single-product.php
Если кто-нибудь пояснит буду благодарен.

Comments

[Mr Crabbz]

price.php используется не только в single-product, но и по всему сайту. В корзине при отображении этого товара, в каталоге и т.д.

Answer 3

[by_haskell]

Достаточно в стилях order прописать, быстрее будет, так как не всегда помогает предложенные варианты.

Answer 4

[Алексей]

Вот тут подробнее написано - https://wordpresslab.ru/e-commerce/huki-straniczy-...