/ Сайтостроение / Плагины / Разбираем woocommerce на молекулы

Разбираем woocommerce на молекулы

HIT

28.08.2015

28194

27

В данном материале разбираем некоторые хуки woocommerce, их последовательность, а также в структуру шаблонов WC и их проверку.

Добавляем стандартные хлебные крошки WC

<?php woocommerce_breadcrumb(); ?>

Файлы шаблона:

archive-product.php — шаблон вывода товаров / подкатегорий / меток (изменение самого файла мало что дает)
!Верстка заголовка находится в директории site.ru/wp-content/plugins/woocommerce/includes/wc-template-functions.php

content-product.php — вывод цикла товаров на странице категории
content-product_cat.php — вывод цикла подкатегорий товаров (без непосредственно товаров)

Области до и после цикла вывода товаров / подкатегорий
woocommerce_before_shop_loop
woocommerce_before_shop_loop

content-single-product.php — шаблон вывода товара

папка loop — элементы вывода цикла товаров на странице категории
папка single-product — элементы вывода страницы товара

Изменяем порядок элементов woocommerce

Нам нужно, например, поменять местами наименование (заголовок) и миниатюру товара в шаблоне вывода товаров категории.

  1. определяем нужный шаблон. В данном примере: content-product.php
  2. ищем необходимые для замены строки. В нашем случае такие строки
    <?php
     /**
     * woocommerce_before_shop_loop_item_title hook
     *
     * @hooked woocommerce_show_product_loop_sale_flash - 10
     * @hooked woocommerce_template_loop_product_thumbnail - 10
     */
     do_action( 'woocommerce_before_shop_loop_item_title' );
    
     /**
     * woocommerce_shop_loop_item_title hook
     *
     * @hooked woocommerce_template_loop_product_title - 10
     */
     do_action( 'woocommerce_shop_loop_item_title' );
    
     /**
     * woocommerce_after_shop_loop_item_title hook
     *
     * @hooked woocommerce_template_loop_rating - 5
     * @hooked woocommerce_template_loop_price - 10
     */
     do_action( 'woocommerce_after_shop_loop_item_title' );
     
     ?>
  3. Нам нужно поменять расположение одного элемента — будем менять расположение заголовка.
    Прописываем в файле functions.php удаление хука, и следом его инициацию, но в другом месте

    // Наименование выше миниатюры (на cтранице вывода товаров категории)
    remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
    add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_title', 5 );
    

Подробнее последний пункт:
remove_action( ‘woocommerce_shop_loop_item_title’, ‘woocommerce_template_loop_product_title’, 10 );
woocommerce_shop_loop_item_title — из какого места удаляем
woocommerce_template_loop_product_title — что удаляем
10 — порядковый номер элемента в структуре woocommerce — копируем из файла шаблона

add_action( ‘woocommerce_before_shop_loop_item_title’, ‘woocommerce_template_loop_product_title’, 5 );
woocommerce_before_shop_loop_item_title — куда добавляем
woocommerce_template_loop_product_title — что добавляем (совпадает с предыдущей строкой, т.к. мы добавляем только что удаленный элемент)
10 — порядковый номер элемента, который мы внедряем в структуру woocommerce. Надо посмотреть на порядковые номера элементов блока куда мы добавляем и добавляем необходимый номер: перед или после по-необходимости.

Запросы, проверки в woocommerce

Проверка: Если страница товара

<?php if ( is_product() ) : ?>

<div id="share-pannel" class="share-pannel-left"><?php get_template_part( 'social-share' ); ?></div>

<?php endif; ?>

Проверка: Если категория/подкатегория товаров

<?php if ( is_tax( 'product_cat' )) : ?>

какое-либо действие

<?php endif; ?>

Проверка: Если раздел woocommerce (любой категорий или товар)

<?php if ( is_woocommerce() ): ?>

Проверка: страница корзины или страница оформление товара
Данную проверку нужно вставлять в шаблон page.php, т.к. данные страницы реализованы в виде страниц:

<?php if ( is_cart() ) :?> // если страница корзины
<?php if ( is_checkout() ) :?> // если страница оформления товара

При переходе на страницу Оформление заказа с пустой корзиной, происходит редирект на страницу Корзина (Ваша корзина пуста..).

Список шаблонов woocommerce и какой за что отвечает

Задача отделить в верстке шаблон вывода товаров и шаблон вывода подкатегорий. woocommerce_product_subcategories

Проверка WooCommerce Page или стандартная страница

Проверка is_woocommerce не распространяется на страницы: корзина, заказ, личный кабинет, которые являются по сути простыми страницами с шорткодами woocommerce.
Чтобы сделать проверку для страниц WooCommerce Page нужно создать функцию проверки

// Добавляем проверку: Страница WC или нет
function is_realy_woocommerce_page () {
        if(  function_exists ( "is_woocommerce" ) && is_woocommerce()){
                return true;
        }
        $woocommerce_keys   =   array ( "woocommerce_shop_page_id" ,
                                        "woocommerce_terms_page_id" ,
                                        "woocommerce_cart_page_id" ,
                                        "woocommerce_checkout_page_id" ,
                                        "woocommerce_pay_page_id" ,
                                        "woocommerce_thanks_page_id" ,
                                        "woocommerce_myaccount_page_id" ,
                                        "woocommerce_edit_address_page_id" ,
                                        "woocommerce_view_order_page_id" ,
                                        "woocommerce_change_password_page_id" ,
                                        "woocommerce_logout_page_id" ,
                                        "woocommerce_lost_password_page_id" ) ;
        foreach ( $woocommerce_keys as $wc_page_id ) {
                if ( get_the_ID () == get_option ( $wc_page_id , 0 ) ) {
                        return true ;
                }
        }
        return false;
}

Теперь можно делать проверку

<?php  if ( is_realy_woocommerce_page() ) {

//Если страница с шорткодом WC, то..

  } ?>

Поменять местами полное и краткое описание

По различным причинам иногда требуется поменять местами полное и краткое описание товара. Только изменениями в файлах шаблонов не получается, т.к. краткое описание не выводится во вкладке Description.

Реализовал это так:

  1. Отключил вкладку Description и создал новую вкладку с кратким описанием (Как это сделать). Этими действиями мы сделали краткое описание во вкладке.
    Либо (это обнаружил позже) в файле single-product/tabs/description.php меняем в одном месте $post->post_excerpt на $post->post_content.
  2. В шаблоне single-product/short-description.php меняем в 2-х местах post_excerpt на post_content. Вместо краткого теперь будет выводится полное описание.

Типовой запрос по структуре WC

<?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_search() ) : ?>

<!-- Результат поиска -->

<?php else : ?>      

<!-- Каталог товаров -->   
 
<?php endif; ?>

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Виртуальный и Скачиваемый товар

Виртуальный и Скачиваемый товар

В интернет-магазине Woocommerce можно создавать Виртуальный и Скачиваемый товары. Разберемся как это выглядит и работает. Виртуальный товар Данная опция не меняет структуру товара. Если при оформлении в корзине только виртуальные Читать далее »

Исчезающие сообщения woocommerce

Исчезающие сообщения woocommerce

У woocommerce есть встроенная система сообщений: при добавлении товара в корзину, при удалении товара из корзины, при различных ошибках. Но они появляются перед основным контентом, нарушая исходную верстку. Сделаем их Читать далее »

Хлебные крошки WC

Хлебные крошки WC

Хлебные крошки WC имеют свои особенности. Их невозможно заменить стандартными хлебными крошками, т.к. в них еще не предусмотрена система для иерархических таксономий. Выводим хлебные крошки Первым делом надо назначить хлебные Читать далее »

Добавить комментарий

27 комментариев

  1. Аватар
    Стас

    Добрый день, подскажите, возможно сделать авто подстановку шаблонного текста в заголовок на странице товара? Конкретно интересует подставить в начале заголовка товара «Купить», а в конце «в городе».

    1. Alexandr
      Alexandr

      Просто в начале добавить Купить можно фильтром:

      add_filter('the_title', 'xcsn_single_product_page_title', 10, 2);
      function xcsn_single_product_page_title($title) {
      
      echo 'Купить ';
      return $title;
      
      }

      Если нужно добавить до и после заголовка содержимое, чуть сложнее — надо заменить вывод заголовка на свою функцию, Пример:

      remove_action('woocommerce_single_product_summary','woocommerce_template_single_title',5);
      add_action('woocommerce_single_product_summary', 'woocommerce_my_single_title',5);
      
      if ( ! function_exists( 'woocommerce_my_single_title' ) ) {
         function woocommerce_my_single_title() {
      ?>
                  <h1 itemprop="name" class="product_title entry-title">Купить <?php the_title(); ?> в городе _</h1>
      <?php
          }
      }

      Для автоматического определения города, можно использовать скрипт (правда, я давно им не пользовался).

    2. Alexandr
      Alexandr

      Можно и проще. Я попробовал и получилось:

      add_filter('the_title', 'xcsn_single_product_page_title', 10, 2);
      function xcsn_single_product_page_title($title) {
      
      echo 'Купить '.$title.' в городе _';
      
      }

      Сюда только нужно еще добавить функцию определения города.

      1. Alexandr
        Alexandr

        Для локализации только в карточке или только в архивах, используем условие (что-то одно):

        if( ( is_product() && in_the_loop() ) ) {
        
        }
      2. Аватар
        Константин Бегтин

        add_filter('the_title', 'xcsn_single_product_page_title', 10, 2);
        function xcsn_single_product_page_title($title) {
        echo 'Купить '.$title.' в городе _';
        }

        Если это была шутка, то малопонятная. Ведь $title может обрабатываться при выводе ВНЕ это процедуры другими фильтрами. Корректный вариант
        add_filter('the_title', 'xcsn_single_product_page_title', 10, 2);
        function xcsn_single_product_page_title($title) {
        global $mytown;
        return 'Купить '.$title.' в городе '.$mytown;
        }

        Естественно, вместо переменной $mytown можно (и нужно) добавить процедуру определения города

        1. Alexandr
          Alexandr

          Спасибо за дополнение. Вероятно Вы правы.

  2. Аватар
    Вадим

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

    1. Alexandr
      Alexandr

      Ответил на Ваш вопрос — на соответствующей странице добавил материал.

  3. Аватар
    Роман

    Прошу помочь узнать кто создал товар в каталоге и сколько какой пользователь создал товаров и категорий и товаров в определенной категории. Нигде не могу это найти.
    Коротко смысл в том, что есть определенное количество изделий. Их надо внести, но сколько уже внесено и откуда продолжать каждый раз долго приходится выяснять, поскольку все делают разные люди по очереди. А когда делают ошибки в наименовании, рассказать как пишется правильно, ну и чтобы каждый за собой исправлял.

    1. Alexandr
      Alexandr

      Я бы сделал очень просто: создал бы разные учётки для разных пользователей. Сразу было бы понятно, кто какой товар заводил и редактировал.

  4. Аватар
    Айдар

    Тут на части еле разобрано, какие молекулы?

  5. Аватар
    Gopher

    Хорошая статья, спасибо.
    Расписаны сразу по одной теме много вопросов.
    И сайт красивый, шрифт приятный.

    Единственный огромный минус — женщины в трусах. Не в тему они совсем)

  6. Аватар
    никита

    ситуация следующая:я сделал главной страницой у себя на сайте — страница МАГАЗИН.
    по моему плану у меня на главной странице одна верстка, а на страницах категорий другая верстка.
    но, когда я добавляю свою верстку в файл archive-product.php, то эта верстка появляится и на странице магазин, и в категориях.
    как можно решить эту проблему ?

    1. Alexandr
      Alexandr

      Я эту ситуацию решаю отдельным (не woocommerce) шаблоном для Главной страницы. И на нем вывожу уже элементы Woocommerce (каталог, новинки, акции и прочее).

  7. Аватар
    Илья

    Подскажите, в карточке товара хочу изменить место вывода цены товара. По умолчанию располагается под заголовком. Но необходимо перед кнопкой купить. Возможно ли реализовать?
    П.С. Большая просьба подробненько ответить, если есть такая возможность, так как чувствую моим знаниям еще далеко до Ваших)))
     

  8. Аватар
    Илья

    Я добавил следующие строки в functions:
    remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10 );
    add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 25 );
    Но вот как все-таки добавить цену именно после строки «В наличии» не могу разобраться.

    1. Alexandr
      Alexandr

      Вы все делаете правильно. Попробуйте в строке изменить число 25, например:
      add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 21 );
      т.к. цена выводится раньше чем происходит вывод наличия, либо сделать тоже самое (только наоборот) у хука с выводом статуса наличия.

  9. Аватар
    Илья

    В том то и дело, что не срабатывает))
    У меня есть предположение, что кнопка «Добавить в корзину» уже как-то связана с «В наличии», так как я ее не могу найти в content-single-product:
    Hook: woocommerce_single_product_summary.
    *
    * @hooked woocommerce_template_single_title — 5
    * @hooked woocommerce_template_single_rating — 10
    * @hooked woocommerce_template_single_price — 10
    * @hooked woocommerce_template_single_excerpt — 20
    * @hooked woocommerce_template_single_add_to_cart — 30
    * @hooked woocommerce_template_single_meta — 40
    * @hooked woocommerce_template_single_sharing — 50
    * @hooked WC_Structured_Data::generate_product_data() — 60

    1. Alexandr
      Alexandr

      Снова Вы правы. Тогда нужно искать хук вывода статуса наличия и привязывать его не к цене а к другому хуку, например к woocommerce_template_single_excerpt.

  10. Аватар
    Илья

    Помогите) Хэлп ми)))
    Сам не разберусь.

    1. Alexandr
      Alexandr

      Нужен доступ к админке. Пришлите на почту tiberium084@gmail.com

  11. Аватар
    Илья

    Ну что, есть успехи? Я позавчера высылал доступ к админке.

    1. Alexandr
      Alexandr

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

  12. Аватар
    Илья

    День добрый!
    Спешу обратиться за помощью) Есть стандартная карточка товара, которая состоит из блоков: картинка, цена, описание, похожие товары и т.д. Есть необходимость задать ей определенные стили, но так, чтобы они не касались «Похожие товары».
    Подозреваю, что есть 2 варианта решения вопроса:
    1) Обернуть в div все, что есть до «Похожих товаров»
    2) «Похожие товары» вывести за пределы карточки товара.
     
    Ни то, ни другое не могу реализовать, все файлы перерыл, ничего не найду.
    Подскажете?

    1. Alexandr
      Alexandr

      Я это делаю так:
      Отключаю изначальный хук вывода Похожие товары
      remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

      Подключаю хук вывода Похожие товары к своему созданному action (tab_woocommerce_related_products)
      add_action( 'the_woocommerce_related_products', 'woocommerce_output_related_products', 20 );

      И вывожу этот action, где нужно. Можно в шаблоне content-single-product.php, можно в woocommerce.php

  13. Аватар
    Илья

    Полагаю, что менять нужно в файле 
    content-single-product.php
     
    <?php
    /**
     * The template for displaying product content in the single-product.php template
     *
     * This template can be overridden by copying it to yourtheme/woocommerce/content-single-product.php.
     *
     * HOWEVER, on occasion WooCommerce will need to update template files and you
     * (the theme developer) will need to copy the new files to your theme to
     * maintain compatibility. We try to do this as little as possible, but it does
     * happen. When this occurs the version of the template file will be bumped and
     * the readme will list any important changes.
     *
     * @see     https://docs.woocommerce.com/document/template-structure/
     * @package WooCommerce/Templates
     * @version 3.6.0
     */
     
    defined( ‘ABSPATH’ ) || exit;
     
    global $product;
     
    /**
     * Hook: woocommerce_before_single_product.
     *
     * @hooked wc_print_notices — 10
     */
    do_action( ‘woocommerce_before_single_product’ );
     
    if ( post_password_required() ) {
    echo get_the_password_form(); // WPCS: XSS ok.
    return;
    }
    ?>
    <div id=»product-<?php the_ID(); ?>» <?php wc_product_class( », $product ); ?>>
    <div class=»product1″>
    <?php
    /**
    * Hook: woocommerce_before_single_product_summary.
    *
    * @hooked woocommerce_show_product_sale_flash — 10
    * @hooked woocommerce_show_product_images — 20
    */
    do_action( ‘woocommerce_before_single_product_summary’ );
    ?>
     
    <div class=»summary entry-summary»>
    <?php 
    /**
    * Hook: woocommerce_single_product_summary.
    *
    * @hooked woocommerce_template_single_title — 5
    * @hooked woocommerce_template_single_rating — 10
    * @hooked woocommerce_template_single_price — 10
    * @hooked woocommerce_template_single_excerpt — 20
    * @hooked woocommerce_template_single_add_to_cart — 30
    * @hooked woocommerce_template_single_meta — 40
    * @hooked woocommerce_template_single_sharing — 50
    * @hooked WC_Structured_Data::generate_product_data() — 60
    */
    do_action( ‘woocommerce_single_product_summary’ );
    ?>
    </div>
     
    <?php
    /**
    * Hook: woocommerce_after_single_product_summary.
    *
    * @hooked woocommerce_output_product_data_tabs — 10
    * @hooked woocommerce_upsell_display — 15
    * @hooked woocommerce_output_related_products — 20
    */
    do_action( ‘woocommerce_after_single_product_summary’ );
    ?></div>
    </div>
    <?php do_action( ‘woocommerce_after_single_product’ ); ?>
     

Разбираем woocommerce на молекулы
Slider v.1
Рекомендации для васSlider v.1Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.