Важно! Как сделать любую WP тему совместимой WooCommerce

[D&B]

Разработчик WP тем с сайта wpexplorer.com делиться советами об использовании сниппетов для совместимости с WooCommerce.

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

Важно: многие из представленных ниже сниппетов используют функции, доступные только WooCommerce. Если вы захотите поделиться модифицированной темой или начать продавать ее, убедитесь в том, что все сниппеты, упакованные в отдельный файл, загружаются только при активном плагине 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, это очень легко сделать.

Следующий сниппет удалит все стили WooCommercе:

// 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, что гораздо лучше, чем скрывать его при помощи CSS.

add_filter( 'woocommerce_show_page_title', '__return_false' );

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

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

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

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

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

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

Изменение навигации назад и вперед

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

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

Изменение текста бирки «На распродаже»

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

function wpex_woo_sale_flash() {
    return '<span class="onsale">' . esc_html__( 'Sale', 'woocommerce' ) . '</span>';
}
add_filter( 'woocommerce_sale_flash', 'wpex_woo_sale_flash' );

Изменение колонок миниатюр товарной галереи

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

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

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


Также как и в случае магазина, если вы хотите нормально изменить количество колонок для похожих товаров и апселлов на страницах единичных товаров, вы должны профильтровать колонки и соответственно изменить body-классы

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

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

Источник