Итак, вы хотите добавить магазин в свою тему – круто! WooCommerce – отличный выбор. Технически говоря, ВСЕ темы совместимы с WooCommerce, потому что это плагин. Теоретически любой плагин должен работать с любой темой WordPress (которая написана правильно).

Однако, как разработчик темы, вы можете настроить вывод WooCommerce, чтобы он лучше соответствовал вашей теме, или чтобы предоставить конечным пользователям параметры, недоступные в настройках WooCommerce (например, изменение количества столбцов в магазине). Ниже вы найдете несколько полезных фрагментов, которые вы можете использовать для обеспечения «лучшей» поддержки WooCommerce в вашей теме и / или для изменения вещей для вашего конкретного дизайна.

Важно: многие из приведенных ниже фрагментов используют функции, доступные только в WooCommerce. Поэтому убедитесь, что эти фрагменты не просто сброшены в конец файла functions.php в теме, созданной для распространения. Если вы собираетесь поделиться своей темой с другими или продать ее, обязательно поместите фрагменты в их собственный файл, загружаемый только тогда, когда плагин WooCommerce активен.

Проверьте, включен ли WooCommerce

В своих темах мне нравится определять настраиваемую константу, которую можно использовать для проверки, включен ли WooCommerce. Таким образом, я могу включать файлы или запускать функции только тогда, когда WooCommerce активен (см. Важное сообщение выше, если вы еще этого не сделали).


// Add new constant that returns true if WooCommerce is active
define( 'WPEX_WOOCOMMERCE_ACTIVE', class_exists( 'WooCommerce') );
// Checking if WooCommerce is active
if (WPEX_WOOCOMMERCE_ACTIVE) {
    // Do something...
    // Such as including a new file with all your Woo edits.
}

Заявить о поддержке WooCommerce

Это первый и самый важный фрагмент кода, который нужно добавить в вашу тему, который «включает» поддержку WooCommerce и предотвращает появление предупреждений от плагина, сообщающих конечному пользователю о несовместимости темы.


add_action( 'after_setup_theme', function() {
    add_theme_support( 'woocommerce' );
} );

Удалить WooCommerce CSS

Лично я предпочитаю переопределять стили WooCommerce, чтобы предотвратить любые возможные проблемы со сторонними плагинами WooCommerce. Однако, если вы хотите удалить все стили WooCommerce, это очень просто.

Следующий фрагмент предназначен для удаления ВСЕХ стилей WooCommerce:


// Remove all Woo Styles
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

Этот фрагмент является примером условного удаления определенных стилей CSS:


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, масштабирование и лайтбокс (v3.0 +)

В WooCommerce 3.0 они представили новую галерею продуктов, масштабирование и лайтбокс. Все они должны быть включены через «add_theme_support», если вы хотите использовать их в своей теме.


add_theme_support( 'wc-product-gallery-slider' );
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );

Удалить название магазина

Многие темы уже имеют функции для отображения заголовков архивов, поэтому этот код удаляет лишний заголовок из WooCommerce, что лучше, чем скрывать его с помощью CSS.


add_filter( 'woocommerce_show_page_title', '__return_false' );

Изменить заголовок архива для магазина

Если ваша тема использует функции archive_title() или get_archive_title () для отображения заголовка для ваших архивов, вы можете легко настроить его с помощью фильтра, чтобы получить имя страницы вашего продукта вместо заголовка архива магазина.

Изменить количество товаров, отображаемых на странице в магазине.

Используется для изменения количества продуктов, отображаемых на странице в магазине и в архивах продуктов (категории и теги).


// 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 с правильными классами, которых нет на страницах магазина, поэтому нам нужны две функции.


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

Изменение стрелок перехода на следующую и предыдущую страницы

Этот фрагмент позволит вам настроить стрелки нумерации страниц в магазине, чтобы они соответствовали стрелкам в вашей теме.

Изменить текст значка OnSale

Особенно полезно на сайтах, использующих другой язык или для удаления восклицательного знака, что я не большой поклонник.

Изменение столбцов эскизов галереи товаров

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


function wpex_woo_product_thumbnails_columns() {
    return 4;
}
add_action( 'woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_columns' );

Изменить количество отображаемых сопутствующих товаров

Используется для изменения количества продуктов, отображаемых для связанных продуктов на одной странице продукта.


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

Измените количество столбцов в строке для связанных и дополнительных разделов продуктов

Как и в магазине, если вы хотите правильно изменить количество столбцов для связанных и проданных продуктов на страницах с одним продуктом, вы должны отфильтровать столбцы, а также соответствующим образом изменить классы тела.


// 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.

Заключение

WooCommerce будет работать с любой темой по умолчанию, но добавить дополнительную поддержку для плагина, чтобы он лучше соответствовал вашей теме, очень легко сделать. На самом деле я написал этот пост во время написания кода для нашей темы New York WordPress Blog & Shop, поэтому большинство этих настроек включены в нашу тему. Или, если вы предпочитаете, вы можете приобрести тему, чтобы посмотреть, как все было сделано (см. Файлы на wpex-new-york / inc / woocommerce) – это может быть более простой способ узнать, как правильно добавлять настраиваемая поддержка плагина WooCommerce, просматривая уже закодированную тему.

Есть ли еще какие-нибудь фрагменты, которые, по вашему мнению, принадлежат этому списку, или могут оказаться полезными при разработке новых тем для WooCommerce?

Источник записи: https://www.wpexplorer.com