Введите часть искомого слова, названия или фразы...
↑ ↓
  1. Новые темы озаглавленные с маленькой буквы - удаляются без предупреждения!
  2. Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!

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

Тема в разделе "WooCommerce - основы, описания, уроки.", создана пользователем D&B, 3 мар 2017.

  1. D&B

    D&B Администратор Команда форума Местный

    Сообщения:
    3.699
    Симпатии:
    876
    Баллы:
    113
    Разработчик 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' );
    Источник
     
    • Нравится Нравится x 3