Май
6
36

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

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

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

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

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

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

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

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

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

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

При включенном расчете доставки на странице 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 корзины мы избавились от доставки, но страница все еще выглядит немного странно.

Отображение корзины в WooCommerce

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

<?php do_action( 'woocommerce_cart_collaterals' ); ?>

С помощью утилиты 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 после формы:

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

Это лишь один из примеров работы с шаблоном, надеюсь, суть вы уловили. В принципе, есть 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</s> %s', $subtotal, $newsubtotal ); 
}
 
return $subtotal;
}

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

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

[shareaholic app=»share_buttons» id=»16398″]

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 3, средний балл: 5,00 из 7)
Загрузка...

категория Категории: WooCommerce;
теги Теги: , , , , , .

комментариев 36 к статье “Настройка страницы корзины в WooCommerce”

  • Tod   11.10.2018

    Наталья, глянул — плагин неплохой, как раз под вашу задачу. Спасибо за наводку)

  • Александр   26.10.2018

    Добрый день, можете порекомендовать кого то для отладки сайта(WPress) и корзины (WooC)? Процесcинг PayLiance

  • Tod   26.10.2018

    Александр, для решения нестандартных задач можете привлекать фрилансеров, например, с биржи Kwork о которой я когда-то рассказывал.

  • Кирилл   19.06.2020

    Здравствуйте! подскажите , как можно решить такую задачу . Показать определенный метод доставки только тогда , когда в корзине есть определенная сумма?

  • Tod   20.06.2020

    Кирилл, если речь о стандартной бесплатной доставке, то опцию можно задать в админке. Если нужно решение для своего варианта доставки, то тут придется либо искать плагины (по типу реализующих максимальный и минимальный заказ в WooCommerce) либо писать свою функцию, которая будет при переходе на страницу оплаты проверять сумму заказа и выводить/скрывать определенный метод оплаты. Теоретически, последний вариант возможен, т.к. в ходе работы я встречался с отдаленно похожими задачами по модификации методов доставки (нужно гуглить). Плагины, конечно, проще.

  • Калина   08.10.2021

    Как сделать опцию оплаты через выбор карточек типа Visa, MasterCard и др.

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

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

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости