Метод изменения шаблонов woocommerce

В данной статье будет рассмотрен метод изменения шаблонов плагина Woocommerce.

Разделение шаблонов категории и товара

Первым делом надо разделить общий шаблон woocommerce.php на woocommerce-product.php и woocommerce-category.php. Делаем это простой проверкой:

<?php get_header(); ?>

<div align="center" class="wrapper">
<div class="wrapper-2">

<div id="main-content">

<?php if ( is_product() ) : ?>

<?php get_template_part( 'woocommerce-product' ); ?>

<?php else: ?>

<?php get_template_part( 'woocommerce-category' ); ?>

<?php endif; ?>

</div> <!-- end main-content -->
</div>
</div>
<?php get_footer(); ?>

Редактирование шаблона WC

В специально созданном include файле для функций woocommerce прописываем и комментируем отключение всех хуков шаблонов WC.

// Отключаем стандартные хуки wordpress (категория товара)

//remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 ); // sale_flash вставлен в сам шаблон + percentage
//remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

//remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );

//remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
//remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );

//remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );



// Отключаем стандартные хуки wordpress (карточка товара)

//remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
//remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 ); add_action( 'the_woocommerce_single_title', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );  add_action( 'the_woocommerce_single_title', 'woocommerce_template_single_rating', 7 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );

//remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
//remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
//remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );



// Добавить хлебные крошки под заголовок
add_action( 'woocommerce_before_shop_loop', 'woocommerce_breadcrumb', 4 ); //В категориях
add_action( 'the_woocommerce_single_title', 'woocommerce_breadcrumb', 6 ); //В карточке товара

Если нужно воздействовать на какой-либо из элементов шаблона — открываем соответствующую строку и чтоб не запутаться следом приписываем «пункт назначения» (если необходимо) и порядковый номер.

• do_action( ‘woocommerce_before_single_product’ );
• do_action( ‘woocommerce_after_single_product’ );

При этом их можно так же задействовать для переноса в них других элементов шаблона.

Собственный хук для шаблона WC

Любой элемент WC можно поместить в произвольное место. Для этого открываем соответствующую строку удалив элемент из стандартной и структуры и привязываем его к собственному хуку:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );  
add_action( 'the_woocommerce_single_title', 'woocommerce_template_single_rating', 7 );

В самом шаблоне в том месте где нужно выводить хук ставим

<?php do_action( 'the_woocommerce_single_title' ); ?>

Изменение стилей Woocommerce

Пользовательские стили для WC лучше подключать НЕ через общее подключение стилей в functions, а в специальном include для WC. В этом случае стили из нашего файла css будут перекрывать стандартные стили WC без !important.

// Добавляем свою таблицу стилей для woocommerce

function wp_enqueue_woocommerce_style(){
	wp_register_style( 'tester-woocommerce', get_template_directory_uri() . '/woocommerce.css' );
	
	if ( class_exists( 'woocommerce' ) ) {
		wp_enqueue_style( 'tester-woocommerce' );
	}
}

add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );

Можно полностью отключить стандартные стили woocommerce

add_filter( 'woocommerce_enqueue_styles', '__return_false' );

Поделиться в соц. сетях: