В этой статье вы найдете ряд подсказок, функций, хуков, которые позволяют расширить или изменить некоторые моменты работы с плагином Woocommerce.
Здесь мы рассмотрим такие моменты:
Сделать тему совместимой с WooCommerce
Добавляем поддержку Woocommerce
При установке Woocommerce плагин предлагает выбрать одну из совместимых тем из собственного репозитория. Однако таких там, конечно же, намного больше. Плюс вы хотите создать свою тему или отредактировать существующую, добавив к ней поддержку Woocommerce.
Для этого добавьте в файл functions.php код, размещенный ниже:
|
1 2 3 4 |
function mytheme_add_woocommerce_support() { add_theme_support( 'woocommerce' ); } add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' ); |
Этот код касается разработки классической, а не блочной темы. Однако таковых пока на рынке тем очень много.
Кстати, в официальной документации Woocommerce вы найдете следующую информацию:
WooCommerce отлично сочетается со всеми темами WordPress, начиная с версии 3.3, даже если они не являются темами, специфичными для WooCommerce, и официально не заявляют о своей поддержке. Шаблоны отображаются внутри контента, поэтому на вашем сайте все выглядит естественно.
Темы, отличные от WooCommerce, по умолчанию также включают:
- Включена функция масштабирования – возможность увеличивать/уменьшать изображение продукта.
- Включена функция лайтбокса: всплывают изображения галереи продуктов, чтобы рассмотреть их поближе.
- Включены комментарии, а не обзоры — посетители/покупатели могут оставлять комментарии, а не оценки продуктов или обзоры.
Если вам нужен больший контроль над макетом элементов WooCommerce или полная поддержка обзоров, вашу тему необходимо интегрировать с WooCommerce. Есть несколько способов сделать это, и они описаны ниже.
Кроме того, вы также можете добавить свои настройки в эту функцию. Они предполагают управление некоторыми настройками плагина Woocommerce, например, размером изображений или количеством колонок в каталоге товаров:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function mytheme_add_woocommerce_support() { add_theme_support( 'woocommerce', array( 'thumbnail_image_width' => 150, 'single_image_width' => 300, 'product_grid' => array( 'default_rows' => 3, 'min_rows' => 2, 'max_rows' => 8, 'default_columns' => 4, 'min_columns' => 2, 'max_columns' => 5, ), ) ); } add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' ); |
В случае, если вы хотите как-то изменить контент страниц, отвечающих за вывод товаров, стоит еще почитать документацию об этом на официальном сайте плагина Woocommerce.
Включение/выключение поддержки галереи для карточки товара Woocommerce
Галерея продуктов, представленная в версии 3.0.0, использует Flexslider, Photoswipe и плагин jQuery Zoom, чтобы предлагать пролистывание, лайтбоксы и другие полезные функции. Если вам это необходимо, вы можете включить галерею в вашей теме следующим образом:
|
1 2 3 |
add_theme_support( 'wc-product-gallery-zoom' ); add_theme_support( 'wc-product-gallery-lightbox' ); add_theme_support( 'wc-product-gallery-slider' ); |
Вам не обязательно поддерживать все три части галереи; вы можете выбирать функции. Если функция не включена, скрипты не будут загружаться и код галереи не будет выполняться на страницах продукта.
Если функции галереи включены (например, у вас есть тема, которая их включила, или вы используете тему, несовместимую с Woocommerce), вы можете отключить их с помощью функции remove_theme_support():
|
1 2 3 |
remove_theme_support( 'wc-product-gallery-zoom' ); remove_theme_support( 'wc-product-gallery-lightbox' ); remove_theme_support( 'wc-product-gallery-slider' ); |
Опять-таки, необязательно использовать все 3 строки кода. Вы можете отключить любые функции, которые вы считаете бесполезными или готовы заменить другим кодом.
Удаляем все стили плагина Woocommerce
С помощью кода ниже можно удалить все стили для Woocommerce, чтобы не переписывать их, а заменить своими:
|
1 2 3 |
if (class_exists('Woocommerce')){ add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' ); } |
Корзина
Изменить текст кнопки «В корзину»
Как изменить текст кнопки «В корзину» в интернет магазине WooCommerce. Код нужно вставить в файл functions.php
|
1 2 3 4 5 6 |
/* Меняем текст "Add to cart" на свой */ add_filter( 'woocommerce_product_single_add_to_cart_text', 'my_woo_custom_cart_button_text' ); add_filter( 'woocommerce_product_add_to_cart_text', 'my_woo_custom_cart_button_text' ); function my_woo_custom_cart_button_text() { return __( 'Зарезервировать', 'woocommerce' ); } |
Добавление товара в корзину без перезагрузки страницы
Обычно, когда пользователь добавляет товар в корзину, происходит обновление страницы. Для того чтобы чтобы страница не обновлялась, можно добавить такой код нужно в functions.php:
|
1 2 3 4 5 6 7 8 9 10 11 |
add_filter('woocommerce_add_to_cart_fragments', 'my_header_add_to_cart_fragment'); function my_header_add_to_cart_fragment($fragments) { global $woocommerce; ob_start(); ?> <span class="basket-counter"><?php echo sprintf($woocommerce->cart->cart_contents_count); ?></span> <?php $fragments['.basket-counter'] = ob_get_clean(); return $fragments; } |
Тут нужно еще будет сделать одно действие - добавить класс "basket-counter" к элементу, который у вас выводит количество товаров:
|
1 |
<span class="basket-counter"></span> |
Стили для этого span нужно прописать самостоятельно в зависимости от дизайна темы.
Удалить все товары из корзины
Для того чтобы сделать кнопку "Очистить корзину" в интернет-магазине, нужно сначала добавить код в то место на странице корзины, где нужна такая кнопка.
|
1 2 3 4 5 |
<form class="clear-cart" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post"> <button type="submit" onclick='javascript:if(!confirm("Удалить все товары из корзины?")) {return false;}' class="buttonClear" name="clear-cart">Очистить корзину</button> </form> |
Вместо использования встроенного в нативный JavaScript метода confirm() вы можете задавать вопрос в модальном окне либо вообще убрать атрибут onclick из кода и очищать корзину автоматически.
Следующий код нужно добавить в файл functions.php:
|
1 2 3 4 5 6 7 |
add_action('init', 'woocommerce_clear_cart'); function woocommerce_clear_cart() { global $woocommerce; if( isset($_REQUEST['clear-cart']) ) { $woocommerce->cart->empty_cart(); } } |
Страница оформления заказа
Заменяем текст Billing detail на нужный
В верху форма оформления заказа имеет заголовок, который в английской версии записан, как Billing detail, или по-русски "Детали платежа". Нам же, например, нужно заменить эту строку на "Данные заказчика". Для этого мы можем использовать хук-фильтр gettext.
В коде ниже показано, как это сделать с помощью строки на нужном вам языке и с помощью строки для перевода.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function wc_billing_field_strings( $translated_text, $text, $domain ) { //echo "<pre> translated=". $translated_text." text=". $text ." domain=".$domain ."</pre>"; //translated=Платіжні дані text=Billing details domain=woocommerce switch ( $text ) { case 'Billing details' : $translated_text = 'Данные заказчика'; break; case 'Additional information' : $translated_text = __( 'Your message', 'woocommerce' ); break; } return $translated_text; } add_filter( 'gettext', 'wc_billing_field_strings', 10,3); |
В самом верху функции закомментированы строки с атрибутами. Их имеет смысл раскомментировать, если вы не знаете, какой текст вам нужен, а затем совсем убрать из кода.
Поскольку перевод этих строк выполняется плагином Woocommerce, то вы сможете найти файл перевода в папке wp-content/languages/plugins с названием woocommerce-ru.po для русской версии сайта или woocommerce-uk.po для украинской. Его нужно будет обновить и добавить туда ваш вариант перевода.
Убираем поля из оформления заказа
Страница оформления заказа обычно перенасыщена полями ввода. Не все они бывают нужны.
Для того чтобы убрать какое-либо поле, нужно использовать функцию unset( $fields[ 'billing' ][ 'field_name' ] ). Для конкретного поля нужно знать его имя, поэтому в начале функции есть вывод всего массива внутри тегов <pre></pre>. Они закомментированы, но вы можете раскомментировать эти строки и посмотреть на данные.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
add_filter( 'woocommerce_checkout_fields', 'mytheme_woocheckout_remove_fields', 20 ); function mytheme_woocheckout_remove_fields( $fields ) { //выводим весь массив полей $fields, если нужно //echo '<pre>'; //print_r($fields); //echo '</pre>'; // возможные поля для удаления unset( $fields[ 'billing' ][ 'billing_company' ] ); // компания unset( $fields[ 'billing' ][ 'billing_country' ] ); // страна unset( $fields[ 'billing' ][ 'billing_address_1' ] ); // адрес 1 unset( $fields[ 'billing' ][ 'billing_address_2' ] ); // адрес 2 unset( $fields[ 'billing' ][ 'billing_city' ] ); // город unset( $fields[ 'billing' ][ 'billing_state' ] ); // регион, штат unset( $fields[ 'billing' ][ 'billing_postcode' ] ); // почтовый индекс unset( $fields[ 'order' ][ 'order_comments' ] ); // заметки к заказу return $fields; } |
На самом деле вы можете убрать и другие поля, например, имя, фамилия, телефон или email:
|
1 2 3 4 |
unset( $fields[ 'billing' ][ 'billing_first_name' ] ); // имя unset( $fields[ 'billing' ][ 'billing_last_name' ] ); // фамилия unset( $fields[ 'billing' ][ 'billing_phone' ] ); // телефон unset( $fields[ 'billing' ][ 'billing_email' ] ); // емайл |
Однако, эти поля важны в любом заказе. Поэтому их оставляем. Здесь просто приведены их названия для Woocommerce в массиве всех полей.
Например, нам нужно отказаться только от поля с названием страны, т.к. у нас доставка только в пределах Украины. Еще уберем второй адрес и название компании, т.к. в основном заказывают у нас обычные люди, т.е. "физические лица".
Сейчас наша функция будет выглядеть таким образом:
|
1 2 3 4 5 6 7 8 9 10 |
add_filter( 'woocommerce_checkout_fields', 'my_woocheckout_remove_fields', 20 ); function my_woocheckout_remove_fields( $fields ) { unset( $fields[ 'billing' ][ 'billing_company' ] ); // компания unset( $fields[ 'billing' ][ 'billing_country' ] ); // страна unset( $fields[ 'billing' ][ 'billing_address_2' ] ); // адрес 2 return $fields; } |
Преобразуем label в placeholder
На странице оформления заказа (checkout) обычно мы видим поля и над ними label с описанием, что нужно ввести. Для той же цели предназначен и атрибут placeholder, поэтому возникает желание убрать label и перенести текст из них внутрь поля. Для этой цели можно использовать следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 |
add_filter( 'woocommerce_checkout_fields', 'mytheme_labels_inside_checkout_fields', 50 ); function mytheme_labels_inside_checkout_fields( $fields ) { foreach ( $fields as $section => $section_fields ) { foreach ( $section_fields as $section_field => $section_field_settings ) { $fields[$section][$section_field]['placeholder'] = $fields[$section][$section_field]['label']; $fields[$section][$section_field]['label'] = ''; } } return $fields; } |
Результат будет выглядеть примерно так (в зависимости от стилей темы):
Больше данных о полях на странице оформления заказа - в официальной документации.
Добавляем свои поля в форму оформления заказа
Допустим, нам не только нужно удалять поля, но и добавить свои. Для этого мы можем воспользоваться хуком-фильтром woocommerce_billing_fields и вставить такой код:
|
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 |
add_filter( 'woocommerce_billing_fields', 'mytheme_add_custom_billing_field', 25 ); function mytheme_add_custom_billing_field( $fields ) { // массив данных нового поля $sale_field = array( 'billing_salemethod' => array( 'type' => 'radio', // text, textarea, select, radio, checkbox, password 'required' => true, // обязательное поле 'class' => array( 'form-row' ,'salemethod' ), // массив классов поля 'label' => 'Купівля чи прокат', // текст метки для поля 'label_class' => 'label-inline', // класс метки 'options' => array( // опции тольк для select и radio 'Купівля' => 'Купівля', // 'значение'=>'заголовок' 'Прокат' => 'Прокат' ) ) ); $size_field = array( 'billing_size' => array( 'type' => 'text', 'required' => true, 'label' => 'Розмір костюма', ) ); $date_field = array( 'billing_date' => array( 'type' => 'date', 'required' => true, 'label' => 'Дата свята', ) ); // вставляем поля в уже существующий массив $fields = array_slice( $fields, 0, 0, true ) + $sale_field + $size_field + $date_field + array_slice( $fields, 0, NULL, true ); return $fields; } |
Данные для полей можно найти в описании функции woocommerce_form_field().
В этом коде мы добавляем поле типа radio, text и date. Выглядеть теперь наша форма будет так:
В случае такого метода добавления полей они у нас будут появляться не только на странице оформления заказа, но и в личном кабинете, в секции адресов. Чтобы избежать этого, достаточно добавить проверку условия с помощью функции is_checkout()
|
1 2 3 |
if( ! is_checkout() ) { return $fields; } |
Сохранение дополнительных полей
Добавленные вами поля нужно еще отобразить в заказе. А для этого их нужно сохранить. Поэтому после добавления полей в форму оформления заказа, мы их сохраняем с помощью такого кода:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function mytheme_save_billing_extra_fields( $order_id ){ // Сохраняем billing_salemethod if( !empty( $_POST['billing_salemethod'] ) ){ update_post_meta( $order_id, 'billing_salemethod', sanitize_text_field( $_POST['billing_salemethod'] ) ); } // Сохраняем billing_size if( !empty( $_POST['billing_size'] ) ){ update_post_meta( $order_id, 'billing_size', sanitize_text_field( $_POST['billing_size'] ) ); } // Сохраняем billing_size if( !empty( $_POST['billing_date'] ) ){ update_post_meta( $order_id,'billing_date', date("d.m.Y", strtotime($_POST['billing_date']) )); } } add_action( 'woocommerce_checkout_update_order_meta', 'mytheme_save_billing_extra_fields' ); |
В результате сохранение будет в виде дополнительных пользовательских полей под основными полями заказа. Перейдя в редактирование заказа, мы получим такой примерно такой внешний вид в нижней части страницы:
Поскольку мы сохраняли дату, то ее в функции нужно преобразовать в формат дд.мм.гггг, т.к. без этого мы получим дату вида гггг-мм-дд, что не очень удобно для восприятия.
Если у вас есть checkbox в полях, то при выделении он вернет значение 1, соответственно в функции сохранения значения этого поля нужно проверять это значение:
|
1 2 3 4 5 6 7 8 9 10 |
// Функция сохранения checkbox function mytheme_save_fields( $order_id ){ // Сохраняем checkbox if( !empty( $_POST['subscribe'] ) && $_POST['subscribe'] == 1 ){ update_post_meta( $order_id, 'subscribe', 1 ); } } add_action( 'woocommerce_checkout_update_order_meta', 'mytheme_save_fields' ); |
Не обязательно это выносить в отдельную функцию. Вы можете добавить этот код в общую функцию для сохранения дополнительных полей в форме оформления заказа.
Добавление чекбокса о согласии на обработку данных
Сейчас почти во всех странах есть закон об использовании персональных данных. Чтобы его соблюсти, вы можете добавить соответствующий текст и <input type="checkbox"> при оформлении заказа в вашем интернет-магазине.
Код нужно вставить в файл functions.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
add_action('woocommerce_review_order_before_submit', 'mytheme_privacy_checkbox', 25); function mytheme_privacy_checkbox() { woocommerce_form_field('privacy_policy_checkbox', array( 'type' => 'checkbox', 'class' => array('form-row'), 'label_class' => array('woocommerce-form-privacy-label'), 'input_class' => array('woocommerce-form-input-privacy'), 'required' => true, 'label' => '<span class="input-text">Я даю согласие на обработку моих <a href="/confidentional-policy" target="_blank">персональных данных</a></span>', )); } // Валидация add_action('woocommerce_checkout_process', 'mytheme_billing_message', 25); function mytheme_billing_message() { if (empty($_POST['privacy_policy_checkbox'])) { wc_add_notice('Нужно дать согласие на обработку ваших <strong>персональных данных.</strong>', 'error'); } } |
Товары
Заменяем символ валюты
Чаще всего эта проблема украинской гривны. Дело в том, что символ гривны - ₴ - чем-то похож на доллар. А поскольку разница между курсом гривны и доллара прилична, то народ этот символ смущает. Проще заменить его на сокращение "грн." Этим мы и займемся в коде в functions.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
if ( ! function_exists( 'mytheme_change_currency_symbol' ) ) { /** * Change a currency symbol * * @param string $currency_symbol Existing currency symbols. * @param string $currency Currency code. * @return string $currency_symbol Updated currency symbol(s). */ function mytheme_change_currency_symbol( $currency_symbol, $currency ) { switch ( $currency ) { case 'UAH': $currency_symbol = 'грн.'; break; } return $currency_symbol; } add_filter( 'woocommerce_currency_symbol', 'mytheme_change_currency_symbol', 10, 2 ); } |
Если вам нужно заменить какой-либо иной символ, то его код можно найти в выпадающем списке валют в настройках Woocommerce (откройте Инспектор элементов браузера - CTRL + F5 или CTRL +Shift + I). Сам код функции взят отсюда.
Сортируем товары по количеству продаж
Товары, отсортированные по количеству продаж.
|
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 |
<?php $args = array( 'post_type' => 'product', 'posts_per_page' => 3, // вывод 3х товаров на страницу 'paged' => $current_page, 'orderby' => 'date', // Сортировка товаров по дате 'order' => 'DESC', // ASC or DESC 'meta_key' => 'total_sales', 'meta_query' => [ [ 'key' => 'total_sales', 'value' => 0, 'compare' => '>=', 'type' => 'NUMERIC' ], ], ); $query = new WP_Query($args); if ($query->have_posts()) { while ($query->have_posts()) { $query->the_post(); ?> <div class="slider"> <?php get_template_part('./parts/post-card'); ?> </div> <?php } } else { echo '<p>Товары не найдены</p>'; } // очищаем данные цикла wp_reset_postdata(); ?> |
Отображаем рекомендуемые товары
Рекомендуемые товары - это товары, отмеченные звёздочкой в админке сайта.
|
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 |
<?php $args = array( 'post_type' => 'product', 'tax_query' => array( array( 'taxonomy' => 'product_visibility', 'field' => 'name', 'terms' => 'featured', ), ), ); $featured = new WP_Query( $args ); if ($featured->have_posts()) { while ($featured->have_posts()) { $featured->the_post(); ?> <div class="slider"> <?php get_template_part('./parts/post-card'); ?> </div> <?php } } else { echo '<p>Товары не найдены</p>'; } // очищаем данные цикла wp_reset_postdata(); ?> |
Убрать с цены ссылку на товар
В карточке товара убрать с цены ссылку на товар.
|
1 2 |
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5); add_action('woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_link_close', 15); |
Оплата
Отключить метод оплаты
Не все интернет-магазины нуждаются в онлайн оплате на сайте. Частично они работают, как каталоги. При оформлении заказа в этом случае достаточно его сформировать и при подтверждении только отправить на почту.
Чтобы отключить методы оплаты, нужно добавить такой код в файле functions.php:
|
1 |
add_filter('woocommerce_cart_needs_payment', '__return_false'); |
Заключение
Наверняка эти функции не решают всего спектра задач, связанных с плагином Woocommerce, но они могут помочь вам найти решение проблемы. Кроме того, очень полезно заглядывать в официальную документацию, чтобы понять, какие у вас есть средства (хуки, функции, шорткоды) для решения проблемы.
