От автора: вы захотели добавить в тему магазин – замечательно! WordPress WooCommerce – отличный выбор. Чисто технически, ВСЕ темы совместимы с WooCommerce, ведь это просто плагин. Чисто теоретически, любой плагин должен работать с любой темой WordPress (хорошо скроенной).
Со стороны разработчика тем вы, возможно, хотели бы лучше подогнать WooCommerce к теме или обеспечить опции для конечного пользователя, которых нет в стандартных настройках WooCommerce (например, изменение количества столбцов в магазине). Ниже вы найдете немного полезного кода, с помощью которого можно «улучшить» поддержку WooCommerce в теме и/или изменить что-то под свой дизайн.
Важно: многие куски кода ниже используют функции, доступные только в WooCommerce. Убедитесь, что этот код не просто сброшен в конец functions.php в теме. Если вы собираетесь распространять свою тему или продавать, то необходимо поместить весь код в своих файлах и загружать их только при активности плагина WooCommerce.
Проверяем активность WooCommerce
В своих темах я люблю задавать кастомную константу, с помощью которой можно проверять активность WooCommerce, чтобы подключать файлы или запускать функции только, когда он активен (см. важно сверху).
|
1 2 3 4 5 6 7 8 |
// Добавьте новую константу, которая будет возвращать true, если WooCommerce включен define( 'WPEX_WOOCOMMERCE_ACTIVE', class_exists( 'WooCommerce' ) ); // Проверяем WooCommerce на активность if ( WPEX_WOOCOMMERCE_ACTIVE ) { // Делаем что-нибудь... // Например, подключаем новый файл со всеми правками. } |
Объявляем поддержку WooCommerce
Это первый и самый важный код, который необходимо добавить в тему – он «включает» поддержку WooCommerce и прячет предупреждения от плагина, которые говорят пользователю, что тему не совместима.
|
1 2 3 |
add_action( 'after_setup_theme', function() { add_theme_support( 'woocommerce' ); } ); |
Удаляем WooCommerce CSS
Лично я лучше перепишу стили WooCommerce, чтобы избежать всех возможных проблем со сторонними WooCommerce плагинами. Однако если вы хотите удалить все стили WooCommerce, сделать это очень просто.
Следующий код удаляет ВСЕ стили WooCommerce:
|
1 2 |
// Remove all Woo Styles add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' ); |
Код ниже – пример условного удаления определенных стилей:
|
1 2 3 4 5 6 7 |
function wpex_remove_woo_styles( $styles ) { unset( $styles['woocommerce-general'] ); unset( $styles['woocommerce-layout'] ); unset( $styles['woocommerce-smallscreen'] ); return $styles; } add_filter( 'woocommerce_enqueue_styles', 'wpex_remove_woo_styles' ); |
Включаем WooCommerce галерею товаров, Zoom и LightBox (v3.0+)
В WooCommerce 3.0 была представлена новая галерея товаров, zoom и lightbox. Все это активируется через «add_theme_support», если хотите использовать их в теме.
|
1 2 3 |
add_theme_support( 'wc-product-gallery-slider' ); add_theme_support( 'wc-product-gallery-zoom' ); add_theme_support( 'wc-product-gallery-lightbox' ); |
Удаляем заголовок магазина
Множество тем уже имеют функции отображения архивных заголовков. Этот код удаляет дополнительный заголовок из WooCommerce, это лучше, чем прятать его с помощью CSS.
|
1 |
add_filter( 'woocommerce_show_page_title', '__return_false' ); |
Меняем архивный заголовок магазина
Если ваша тема использует функции archive_title() или get_archive_title() для отображения заголовка в архивах, то вы можете с легкостью заменить его с помощью фильтра. Вы можете вставить свое название страницы товаров вместо архивного заголовка.
|
1 2 3 4 5 6 7 |
function wpex_woo_archive_title( $title ) { if ( is_shop() && $shop_id = wc_get_page_id( 'shop' ) ) { $title = get_the_title( $shop_id ); } return $title; } add_filter( 'get_the_archive_title', 'wpex_woo_archive_title' ); |
Меняем количество товаров, отображаемых на странице магазина
Используется для изменения количества товаров, отображаемых за раз на странице магазина и архивов товаров (категории и теги).
|
1 2 3 4 5 |
// Alter WooCommerce shop posts per page function wpex_woo_posts_per_page( $cols ) { return 12; } add_filter( 'loop_shop_per_page', 'wpex_woo_posts_per_page' ); |
Меняем количество колонок, отображаемых в магазине
Не понимаю, почему WooCommerce так работает, но вы не можете просто так изменить фильтр loop_shop_columns. Нужно добавить уникальные классы в тег body, чтобы колонки заработали. В шорткодах Woo есть div с подходящими классами, которых нет на страницах магазина, поэтому нам понадобятся 2 функции.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// Alter shop columns function wpex_woo_shop_columns( $columns ) { return 4; } add_filter( 'loop_shop_columns', 'wpex_woo_shop_columns' ); // Add correct body class for shop columns function wpex_woo_shop_columns_body_class( $classes ) { if ( is_shop() || is_product_category() || is_product_tag() ) { $classes[] = 'columns-4'; } return $classes; } add_filter( 'body_class', 'wpex_woo_shop_columns_body_class' ); |
Меняем стрелки постраничной навигации (назад, вперед)
Этот код меняет стрелки постраничной навигации в магазине, чтобы они лучше подходили под вашу тему.
|
1 2 3 4 5 6 |
function wpex_woo_pagination_args( $args ) { $args['prev_text'] = '<i class="fa fa-angle-left"></i>'; $args['next_text'] = '<i class="fa fa-angle-right"></i>'; return $args; } add_filter( 'woocommerce_pagination_args', 'wpex_woo_pagination_args' ); |
Меняем текст бейджа OnSale
Особенно полезно на сайтах использовать разные языки или удалять восклицательные знаки – я не очень их люблю.
|
1 2 3 4 |
function wpex_woo_sale_flash() { return '<span class="onsale">' . esc_html__( 'Sale', 'woocommerce' ) . '</span>'; } add_filter( 'woocommerce_sale_flash', 'wpex_woo_sale_flash' ); |
Меняем колонки миниатюр в галерее товаров
Возможно, вы захотите сменить количество колонок миниатюр на странице галереи товаров под свой макет. Эта функция вам поможет.
|
1 2 3 4 |
function wpex_woo_product_thumbnails_columns() { return 4; } add_action( 'woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_columns' ); |
Меняем количество сопутствующих товаров
Используется для изменения количества сопутствующих товаров на странице одного товара.
|
1 2 3 4 5 6 |
// Set related products to display 4 products function wpex_woo_related_posts_per_page( $args ) { $args['posts_per_page'] = 4; return $args; } add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page' ); |
Меняем количество колонок для секций сопутствующих товаров и дополнительных продаж
Если хотите правильно менять количество колонок для секций сопутствующих и дополнительных продаж на странице одного товара и нескольких, вам необходимо отфильтровать колонки и сменить классы body.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// Filter up-sells columns function wpex_woo_single_loops_columns( $columns ) { return 4; } add_filter( 'woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns' ); // Filter related args function wpex_woo_related_columns( $args ) { $args['columns'] = 4; return $args; } add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10 ); // Filter body classes to add column class function wpex_woo_single_loops_columns_body_class( $classes ) { if ( is_singular( 'product' ) ) { $classes[] = 'columns-4'; } return $classes; } add_filter( 'body_class', 'wpex_woo_single_loops_columns_body_class' ); |
Добавляем динамическую ссылку на корзину и стоимость корзины в меню
Код ниже добавит корзину WooCommerce в меню, где отображается цена товаров. Также если у вас есть шрифт Font-Awesome, он отобразит маленькую иконку корзины. Важно: эти функции нельзя заворачивать в условие is_admin(), так как они работают с AJAX для обновления стоимости. Необходимо знать, что функции доступны, когда is_admin() возвращает true и false.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
// Add the cart link to menu function wpex_add_menu_cart_item_to_menus( $items, $args ) { // Make sure your change 'wpex_main' to your Menu location !!!! if ( $args->theme_location === 'wpex_main' ) { $css_class = 'menu-item menu-item-type-cart menu-item-type-woocommerce-cart'; if ( is_cart() ) { $css_class .= ' current-menu-item'; } $items .= '<li class="' . esc_attr( $css_class ) . '">'; $items .= wpex_menu_cart_item(); $items .= '</li>'; } return $items; } add_filter( 'wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2 ); // Function returns the main menu cart link function wpex_menu_cart_item() { $output = ''; $cart_count = WC()->cart->cart_contents_count; $css_class = 'wpex-menu-cart-total wpex-cart-total-'. intval( $cart_count ); if ( $cart_count ) { $url = WC()->cart->get_cart_url(); } else { $url = wc_get_page_permalink( 'shop' ); } $html = $cart_extra = WC()->cart->get_cart_total(); $html = str_replace( 'amount', '', $html ); $output .= '<a href="'. esc_url( $url ) .'" class="' . esc_attr( $css_class ) . '">'; $output .= '<span class="fa fa-shopping-bag"></span>'; $output .= wp_kses_post( $html ); $output .= '</a>'; return $output; } // Update cart link with AJAX function wpex_main_menu_cart_link_fragments( $fragments ) { $fragments['.wpex-menu-cart-total'] = wpex_menu_cart_item(); return $fragments; } add_filter( 'add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments' ); |
Заключение
WooCommerce будет работать с любой темой по умолчанию, но нет ничего сложного в том, чтобы немного улучшить поддержку плагина, чтобы он лучше вписывался в тему. Я писал эту статью, пока кодил нашу тему New York WordPress Blog & Shop, т.е. большая часть твиков включена в нашу тему. Если хотите, можете купить тему, чтобы посмотреть, как все сделано (см. файлы в wpex-new-york/inc/woocommerce). На примере, возможно, будет легче изучить, как правильно добавлять кастомную поддержку плагина WooCommerce.
А вы знаете, какой код можно добавить в этот список, или он был бы полезен при разработке новой темы для WooCommerce?
Автор: AJ Clarke
Источник: //www.wpexplorer.com/
Редакция: Команда webformyself.
