В этой статье вы найдете ряд подсказок, функций, хуков, которые позволяют расширить или изменить некоторые моменты работы с плагином Woocommerce.
Здесь мы рассмотрим такие моменты:
Возможно, вам также будет полезна статья "Добавляем поля на странице оформления заказа 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(); } } |
Товары
Заменяем символ валюты
Чаще всего эта проблема украинской гривны. Дело в том, что символ гривны - ₴ - чем-то похож на доллар. А поскольку разница между курсом гривны и доллара прилична, то народ этот символ смущает. Проще заменить его на сокращение "грн." Этим мы и займемся в коде в 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, но они могут помочь вам найти решение проблемы. Кроме того, очень полезно заглядывать в официальную документацию, чтобы понять, какие у вас есть средства (хуки, функции, шорткоды) для решения проблемы.
