Иногда при редактировании темы WordPress стоит задача удалить или добавить разные сайдбары на страницы Woocommerce. На страницу категорий и магазина один сайдбар, на страницу продукта — другой. Это можно легко осуществить.
Регистрируем и добавляем новый сайдбар в магазине
Предположим, что в вашей теме уже есть одна боковая колонка и вам понадобилось добавить еще один сайдбар в любом другом месте магазина. Для этого откроем файл functions.php дочерней темы и зарегистрируем новую зону для виджетов:
function register_woo_widgets(){
register_sidebar( array(
'name' => "Новый сайдбар",
'id' => 'woo-right-sidebar',
'description' => 'Виджеты в новой колонке магазина',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>'
) );
}
add_action( 'widgets_init', 'register_woo_widgets' );
Теперь в нужном файле Woocommerce, будь то страница одиночного продукта, каталога или рубрики, вставим код вывода сайдбара:
<?php if ( is_active_sidebar( 'woo-right-sidebar' ) ) { ?>
<aside id="sidebar-right" class="sidebar">
<?php dynamic_sidebar( 'woo-right-sidebar' ); ?>
</aside>
<?php } ?>
Если есть задача вывести верхний или нижний сайдбар на страницах каталога, рубрик или карточки товара, воспользуемся хуками:
add_action('woocommerce_before_main_content', 'my_theme_top_sidebar', 10);
add_action('woocommerce_after_main_content', 'my_theme_bottom_sidebar', 10);
Пример для вывода сайдбара над контентом: повторяем шаг №1 и в том же файле functions.php размещаем данный код:
add_action('woocommerce_before_main_content', 'my_theme_top_sidebar', 10);
function my_theme_top_sidebar() {
// в 1 функции измените ID woo-right-sidebar на woo-top-sidebar
if ( is_active_sidebar( 'woo-top-sidebar' ) ) { ?>
<aside id="sidebar-top" class="sidebar">
<?php dynamic_sidebar( 'woo-top-sidebar' ); ?>
</aside>
<?php } ?>
<?php
}
Чтобы сайдбар выводился на нужной странице используйте следующие функции.
Этот код проверяет, использует ли отображаемая страница шаблон WooCommerce:
<?php if ( is_woocommerce() ): ?>
Данный код проверит, есть ли страница одиночного товара:
<?php if ( is_product() ) : ?>
Для вывода содержимого на разных страницах Woocommerce используем код:
<?php if ( is_single() || is_page() ) : ?>
<!-- Товар/Пост/Страница -->
<?php elseif ( is_tax() ) : ?>
<?php if ( is_tax( 'product_cat' ) ) : ?>
<!-- Категория -->
<?php elseif ( is_tax( 'product_tag' ) ) : ?>
<!-- Метка -->
<?php else : ?>
<!-- Другие таксономии -->
<?php endif; ?>
<?php elseif ( is_cart() ) : ?>
<!-- Корзина -->
<?php elseif ( is_checkout() ) : ?>
<!-- Страница заказа -->
<?php elseif ( is_account_page() ) : ?>
<!-- Мой аккаунт -->
<?php elseif ( is_search() ) : ?>
<!-- Результат поиска -->
<?php else : ?>
<!-- Каталог товаров -->
<?php endif; ?>
Чтобы данные не перезаписались при обновлении, создайте в дочерней теме файл woocommerce.php или single-product.php, используя в качестве основы шаблон родительской темы (подробнее о файлах плагина читайте в документации). Это позволит вам внести любые правки, вставить сайдбар или закомментировать ненужный. Как всё это организовать, читаем документацию: настройка дочерней темы и кастомизация файлов Woocommerce.
Как удалить сайдбар со страниц Woocommerce
Воспользуйтесь этим хуком если требуется удалить сайдбар со страницы одиночного продукта:
/**
Remove Sidebar @ Single Product Page
*/
add_action( 'init', 'theme_remove_sidebar_product_pages' );
function theme_remove_sidebar_product_pages() {
if ( is_product() ) {
remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
}
}
Удалим сайдбар со всех страниц Woocommerce.
add_action( 'wp', 'theme_remove_sidebar_all_woo_pages' );
function theme_remove_sidebar_all_woo_pages() {
remove_action('woocommerce_sidebar','woocommerce_get_sidebar',10);
}
Удаляем боковую колонку со страниц продукта в популярной теме Storefront.
/**
Remove Sidebar @ Single Product Page
*/
add_action( 'get_header', 'remove_storefront_sidebar' );
function remove_storefront_sidebar() {
if ( is_product() ) {
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
add_filter( 'body_class', function( $classes ) {
return array_merge( $classes, array( 'page-template-template-fullwidth page-template-template-fullwidth-php ' ) );
} );
}
}
Этот хук полностью удалит сайдбар в теме Storefront, что сделает область содержимого страницы продукта шириной 100% без дополнительного CSS.
/**
* Remove sidebar on product pages in Storefront.
*/
function theme_remove_sidebar( $is_active_sidebar, $index ) {
if( $index !== "sidebar-1" ) {
return $is_active_sidebar;
}
if( ! is_product() ) {
return $is_active_sidebar;
}
return false;
}
add_filter( 'is_active_sidebar', 'theme_remove_sidebar', 10, 2 );
Этот код удалит боковую панель на страницах категорий, на одиночной странице продукта, в постах, на странице корзины, проверки заказа и аккаунта в теме Storefront.
add_action( 'wp', 'custom_remove_sidebar_shop_page' );
function custom_remove_sidebar_shop_page() {
if ( is_category() || is_single() || is_product() || is_cart() || is_checkout() || is_account_page() ) {
remove_action( 'storefront_sidebar', 'storefront_get_sidebar', 10 );
add_filter( 'body_class', 'custom_remove_sidebar_class_body', 10 );
}
}
function custom_remove_sidebar_class_body( $wp_classes ) {
$wp_classes[] = 'page-template-template-fullwidth-php';
return $wp_classes;
}
⚠️ Так как WordPress и его плагины могут изменяться, тестируйте любой кастомный код на промежуточном веб-сайте перед переходом в рабочую среду.
Здравствуйте!
Снова я. Опять не получилось, что не так?
Цель: создать новый сайдбар и научиться размещать его в разных местах.
вставил в функции.php темы rife free девятой строчкой:
function register_woo_widgets(){
register_sidebar( array(
'name' => "Новый сайдбар",
'id' => 'woo-right-sidebar',
'description' => 'Виджеты в новой колонке магазина',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => ''
) );
}
add_action( 'widgets_init', 'register_woo_widgets' );
Затем в single-product.php (к примеру) после
get_header( 'shop' ); ?> вставил:
Ожидал, что в настройках виджетов появится новая область, которую можно будет наполнить виджетами)
Заранее благодарю!)
Спасибо! Сработало)