Как поменять местами контент на странице товара WooCommerce

В рубрике «Сделай Сам!» вы узнаете о тонкой настройке вашего Wordpress сайта. Здесь мы делимся полезной информацией, фрагментами кода, css стилями и другими вещами, которые могут вам быть полезны. Возможности Wordpress и безграничны, поэтому как только мы решаем очередную интересную задачу, мы выкладываем описание того, как это сделать. 

Шаблон Single Product

Недавно была задача поменять местами контент на странице товара в WooCommerce. Если точнее, то нужно было кнопку «Добавить в корзину» переместить под заголовок. То есть поменять местами краткое описание товара и кнопку. Здесь мы распишем, что нужно для этого сделать.

А также вы поймете основной принцип работы шаблона Single Product. Есть вопросы – пишите в комментариях.

Cтраница продукта в WooCommerce, как правило, содержит сведения о продукте, отсортированные и отображаемые определенным образом. Некоторые темы, совместимые с WooCommerce, иногда меняют порядок элементов на этой странице. В готовой теме Wordpress обычно порядок элементов на этой странице предопределен. Что, если вы хотите чего-то другого.

WooCommerce — это хорошо спроектированный плагин. Он предоставляет возможность перехватов исходного кода (hooks), которые вы можете использовать, чтобы изменить порядок содержимого на странице вашего продукта. Эти изменения должны быть сделаны в functions.php вашей темы.

Содержимое, отображаемое на странице продукта, отображается в трех действиях. Эти действия можно увидеть в файле:  ‘woocommerce / templates / content-single-page.php’.

/**
* woocommerce_before_single_product_summary hook
*
* @hooked woocommerce_show_product_sale_flash - 10
* @hooked woocommerce_show_product_images - 20
*/
do_action( 'woocommerce_before_single_product_summary' );
/**
* 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' );
/**
* 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' );

Каждый элемент отображается с определенным свойством (хуки). Число – это приоритет выполнения действия. Чтобы изменить порядок элементов на странице, вы должны изменить соответствующий приоритет, и WordPress позаботится о отображении содержимого в указанном порядке. Чтобы изменить приоритет, вам нужно удалить хук и добавить его снова с новым номером.

Таким образом, если вы хотите отобразить описание продукта после кнопки «добавьте в корзину», вес (приоритет) хука описания должен быть больше, чем хук кнопки «добавьте в корзину», что указывает на более низкий приоритет.

/** to change the position of excerpt **/
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 31 );

Итог

Если добавить этот код (выше) в шаблон вашей темы functions.php, вы сделаете так, чтобы кнопка «добавить в корзину» была выше, чем краткое описание товара. Добавить код нужно в самый низ.

About the author

Платформа для запуска и поддержки интернет сайта на CMS WordPress.

Написать