Как настроить woocommerce cart

Настройка страницы корзины в WooCommerce

Изначально планировал написать про внедрение одного хака на странице корзины WooCommerce, однако позже решил рассказать сразу о нескольких фишках для ее модификации. Хочу заметить, что в данном блоге есть специальный раздел про WooCommerce корзину, т.к. этот вопрос включает в себя множество нюансов. Сегодня статья будет посвящена больше внешнему виду и отображению информации на сайте. Начнем с настроек самого модуля, потом рассмотрим вопрос удаления доставки и заодно изменение шаблона корзины. Думаю, пост пригодится не только новичкам.

На одном из начальных шагов разработки интернет-магазина на WooCommerce система создает несколько ключевых страниц (корзину в том числе). Если посмотрите в редакторе ее содержимое, то увидите шорткод [woocommerce_cart].

Здесь же можете изменить название и добавить немного своего текста на страницу. Также задаете МЕТА тег описания и тайтл с помощью модуля SEO Yoast.

Настройки корзины в WooCommerce

В настройках модуля есть разные параметры для управления корзиной. Некоторые из них найдете во вкладке «Доставка» — «Варианты доставки».

В опции «Расчеты» можно:

• включить в корзине калькулятор доставки;
• спрятать отображение ее стоимости, если еще не заполнен адрес.

При включенном расчете доставки на странице WooCommerce корзины появится соответствующая ссылка. При клике на нее пользователь увидит поля для ввода адреса.

Если данную опцию выключить, то ссылки на калькулятор видно не будет, но сама информация о вариантах доставки останется.

Как удалить доставку со страницы корзины

Собственно, наша следующая задача — удалить на этапе формирования заказа все лишнее, что не касается выбора товаров и их количества. По-умолчанию в настройках плагина, как видите, это не предусмотрено, но в этом есть определенный смысл. Чем меньше разных отвлекающих и запутывающих пользователя факторов будет в вашем интернет-магазине, тем больше вероятность, что покупатель сможет завершить оформление заказа.

Для решения задачи нам понадобится разместить в файле функций вашей темы (custom-function.php или function.php) следующий хак:

function delshipping_calc_in_cart( $show_shipping ) < if( is_cart() ) < return false; >return $show_shipping; > add_filter( ‘woocommerce_cart_ready_to_calc_shipping’, ‘delshipping_calc_in_cart’, 99 );

Шаблон корзины WooCommerce

Все основные файлы шаблона для страницы корзины в WooCommerce находятся в папке cart. Напоминаю, что редактировать шаблон WooCommerce нужно после того как скопируете папку templates в свою дочернюю тему. По умолчанию директория содержит нескольких файлов:

• php
• cart-totals.php
• cross-sells.php
• cart-empty.php
• cart-item-data.php
• cart-shipping.php
• mini-cart.php
• proceed-to-checkout-button.php
• shipping-calculator.php

Каждый из них отвечает за определенные функции, например, в файле cross-sells.php задается отображение кросс продаж, в cart-empty.php — выполняется обработка пустой корзины и т.п. Вы можете изменить вывод всех элементов страницы так, как вам это нужно. Хотя некоторые правки принято делать через хаки/сниппеты как например в посте про обновление Ajax корзины.

Давайте рассмотрим один пример дабы немного прояснить логику работы. После внедрения хака с предыдущего шага настройки WooCommerce корзины мы избавились от доставки, но страница все еще выглядит немного странно.

Если внимательно изучить файлы шаблона корзины, то увидите, что за отображение блока под товарами отвечает строка:

С помощью утилиты WinGrep можете найти где именно используется эта функция либо подсмотреть информацию в интернете. Оказывается она задает отображение двух элементов — кросс продаж и блока итого (который виден на скриншоте выше). Соответствующий код размещен в /includes/wc-template-hooks.php:

add_action( ‘woocommerce_cart_collaterals’, ‘woocommerce_cross_sell_display’ ); add_action( ‘woocommerce_cart_collaterals’, ‘woocommerce_cart_totals’, 10 );

Теперь, по сути, у вас есть 3 варианта чтобы все это скрыть:

• закомментировать строку с do_action в cart.php;
• использовать функцию remove_action в custom-function.php (или function.php);
• подправить файлы cross-sells.php и cart-totals.php, которые непосредственно вызываются данными функциями.

После внедрения любого из этих способов будет скрыт не только блок итоговый цены, но и ссылка на оплату заказа. Поэтому вам нужно вернуть на страницу корзины WooCommerce соответствующую кнопку. Добавляете ее в cart.php после формы:

Это лишь один из примеров работы с шаблоном, надеюсь, суть вы уловили. В принципе, есть 2 варианта его модификации — в файлах напрямую (легче и нагляднее), либо работа через хуки и функции remove_action / add_action (вроде как, считается правильнее и более гибко). Какой бы вариант вы не выбрали, помните, что правки нужно вносить в копию макета магазина в дочерней теме.

Хак для купонов

Если вы используете промокоды в магазине то можно добавить отображение новой цены напротив каждой позиции. Найденный сниппет имеет вид:

add_filter( ‘woocommerce_cart_item_subtotal’, ‘bbloomer_if_coupon_slash_item_subtotal’, 99, 3 ); function bbloomer_if_coupon_slash_item_subtotal( $subtotal, $cart_item, $cart_item_key )< global $woocommerce; // Note: use your own coupon code here $coupon_code = 'barmada'; if ( $woocommerce->cart->has_discount( $coupon_code )) < // Note: apply your own coupon discount multiplier here // In this case, it's a 99% discount, hence I multiply by 0.01 $newsubtotal = wc_price( $cart_item['data']->get_price() * 0.01 ); $subtotal = sprintf( ‘%s %s’, $subtotal, $newsubtotal ); > return $subtotal; >

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

Если будут еще какие-то вопросы / дополнения по настройке корзины WooCommerce и модификации соответствующей страницы на сайте, пишите в комментариях.

Источник

WooCommerce: настройки корзины, доставки и профиля

Дата публикации: 2017-09-27

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

Итак, в данный момент у вас должны быть настроены следующие разделы сайта:

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

В этой части вы познакомитесь с оставшимися настройками:

После настройки данных разделов вы сможете приступить к наполнению магазина товарами!

Что вам понадобится

Для выполнения урока вам потребуется рабочая установка WordPress с доступом к панели администратора для установки и администрирования плагинов.

Настройка параметров WooCommerce

Вы уже настроили товары, налоги и основные параметры. Теперь перейдем к корзине.

Настройки корзины

Для просмотра экрана настроек корзины откройте вкладку checkout:

На этом экране можно включить купоны, настроить возможность покупки без авторизации, а также выбрать страницы, используемые для покупки товара. WooCommerce не создает для вас всего одну страницу terms and conditions (условия и положения): если у вашего сайта они есть, выберите их в выпадающем списке. Я оставлю настройки по умолчанию.

Прокрутите экран вниз для редактирования точек корзины и способов оплаты:

Здесь можно изменить словесную часть ссылки страниц, участвующих в процессе покупки, а также выбрать способы оплаты для магазина. Я использую стандартные точки корзины. В качестве способа оплаты по умолчанию выбрал Paypal. Можно выбрать сколько угодно.

Кликните save changes для сохранения настроек. После перейдите на экраны способов оплаты.

Настройки способов оплаты

WooCommerce создает экран для каждого способа оплаты. Понятно, что вам нужны только те экраны, с которыми вы будете работать в магазине. Я использую Paypal, поэтому у меня следующий экран:

Чекбокс Enable/Disable активен по умолчанию, так как в бесплатной версии WooCommerce для совершения оплаты покупателям необходимо покинуть ваш сайт и перейти на сайт Paypal, после чего уже будет совершен редирект назад в магазин. Если хотите использовать Paypal внутри сайта, вам придется купить премиум аддон PayPal Advanced для WooCommerce.

Введите email от аккаунта Paypal и токен идентификации, если таковой есть. Остальные настройки я оставил по умолчанию. Прокрутите экран, чтобы завершить настройки Paypal:

Последние 2 опции полезны при тестировании сайта. Опция PayPal sandbox позволяет совершать платежи без передачи денег третьим лицам: для этого понадобится настроить профиль разработчика в paypal. Опция Debug Log создает лог всех транзакция Paypal и нужна для отладки. Полезная опция, если у вас возникли проблемы при тестировании сайта.

Кликните save changes для сохранения настроек paypal. После этого необходимо провести настройки на экранах других способов оплаты.

Настройки доставки

WooCommerce предоставляет целый набор настроек доставки, что означает, что можно использовать фиксированную стоимость доставки или же плавающую, основанную на продаваемом товаре. Стоимость доставки можно привязать к весу или месту доставки, однако для этого понадобится премиум аддон Table Rate Shipping. Начните с экрана Shipping Options:

Здесь вам потребуется задать способы доставки. Можно кликнуть на кнопку Settings рядом с каждым способом для его настройки или использовать ссылки в верхней части экрана. Только не забудьте сначала сохранить изменения.

Для доставки по умолчанию я выбрал фиксированную цену. Это не значит, что вы обязаны задавать фиксированную цену для всего заказа. На следующем экране показано, что я имею в виду.

Настройки доставки – фиксированная цена

На экране Flat Rate я могу указать принцип работы моей доставки с фиксированной стоимостью:

Вы можете редактировать:

Страны, на которые действует доставка: я выбираю все разрешенные страны, так как буду доставлять всего в одну страну, в любом случае

Налоговый статус: настройка меняется в зависимости от того, облагается ли налогом доставка в вашей стране или нет

Дополнительные цены для этого класса доставки. Это дополнительные платы поверх фиксированной стоимости доставки. Например, доставка на следующий день

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Экстра цены, которые можно задать на заказ, предмет заказа или на класс доставки. Например, если вы хотите рассчитать все затраты по доставке каждого предмета, вам придется указать Cost per order (цену за заказ) 0 и добавить экстра цены для каждого предмета

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

После настройки фиксированной ставки кликните save changes и переходите к настройке других способов доставки.

Бесплатная доставка

Чтобы простимулировать людей тратить больше денег, я разрешу бесплатную доставку на определенную сумму! Для этого мне необходимо настроить параметры на экране Free Shipping:

Здесь я просто выбираю A minimum order amount в выпадающем списке Free shipping requires…, после чего задаю минимальную сумму заказа и кликаю save changes.

Настройки профиля

Я настроила способы доставки и перехожу на следующую вкладку Accounts.

Этот экран позволяет настроить работу профилей ваших клиентов. WooCommerce создает набор стандартных страниц для управления аккаунтами. Я не буду их менять и включу регистрацию на странице checkout и отключу ее на странице my account, так как авторизованным пользователям регистрация не нужна.

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

После внесения изменений на экране профиля кликните save changes для сохранения настроек.

Настройки email

WooCommerce автоматически уведомляет вам по почте при создании новых заказов, чтобы вы могли принять соответствующие действия. Также можно посылать сообщение покупателям. Начните с экрана Email Options:

Здесь можно указать имя и адрес отправки сообщений, а также внести правки в шаблон сообщения, добавить свой логотип и настроить цвета под бренд. Можно изменить текст футера в сообщении.

После внесения необходимых изменений кликните save changes и переходите к настройке состояний, при которых WooCommerce будет посылать письмо на почту. Состояния:

Новый заказ: письмо отправляется при размещении нового заказа

Обработка заказа: письмо отправляется покупателям после получения оплаты, уведомляя их о том, что вы обрабатываете заказ

Заказ завершен: письмо отправляется покупателям после того, как заказ помечается вами как завершенный – обычно когда вы отправили товар

Счет покупателю: выставление счета покупателю по email, если платеж не принимается средствами сайта

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

Сброс пароля: письмо посылается покупателям, запросившим сброс пароля

Новый аккаунт: приветственное письмо для покупателя при создании нового профиля

Все статусы можно настроить на соответствующих экранах. Если вы умеете редактировать файлы шаблонов тем WordPress, то вы можете переписать контент всех писем. Для этого необходимо создать файл шаблона в теме сайта с именем файла шаблона в плагине WooCommerce. Подробная информация о файлах, которые необходимо создать, находится под каждым экраном настроек email.

Для примера давайте рассмотрим экран New Orders:

Экран похож на другие и предлагает следующие опции:

Enable/disable для отправки писем по email

Можно указать получателя (недоступно для адресов покупателей)

Тема письма и заголовок

Можно послать письмо в виде HTML или чистого текста

Кликните save changes после внесения всех изменений и повторите процесс для всех типов писем

Другие экраны WooCommerce

Стоит кратко упомянуть другие доступные экраны в меню WooCommerce, не на вкладке settings. Среди них:

Orders: после запуска магазина в онлайн используйте этот экран для отслеживания, обработки, завершения и добавления заметок в заказы

Reports: генерируем отчеты о продажах и клиентах

System status: доступ к отчету о состоянии вашего магазина

Add-ons: загружайте и активируйте премиум аддоны для WooCommerce.

Заключение

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

Автор: Rachel McCollin

Редакция: Команда webformyself.

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Источник