Май

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

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

<?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 после формы:

Это лишь один из примеров работы с шаблоном, надеюсь, суть вы уловили. В принципе, есть 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;

Теги: вордпресс веб-разработка, интернет-магазин, корзина WooCommerce, сниппеты, страницы сайта, электронная коммерция.

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

1 2 Далее →

Руслан 10.08.2017
Извиняюсь что не по теме, просто не знаю где еще спросить.. скажите пожалуйста на какой страничке можно заменить слово в кнопке ? к примеру у меня вариативный товар.. и там у меня написано «выбрать…» а я хочу добавить слово «выбрать модель»
СПасибо заранее
Tod 10.08.2017
Руслан, если нужно просто заменить текст, то можно попробовать сделать это через локализацию Woocommerce, например, с помощью Poedit. Второй вариант — попробовать хак для кнопки добавить в корзину там где приведен пример кода функции custom_product_link. Но там код только для кнопки на странице каталога. Вставляйте его в файл custom-function.php или function.php. Третий способ — я бы погуглил вашу задачу на английском — там информации побольше будет. Просто есть несколько хуков для Woocommerce (в каталоге, кнопка на странице товара и т.п.) и решения могут быть разные.
Максим 27.09.2017
Здравствуйте. Я не могу убрать значок корзины из меню сайта в заголовке. Как это сделать?
Tod 27.09.2017
Максим, скорее всего он добавляется в файле шаблона header.php или в нем вызывается какая-то функция для вставки иконки. Нужно внимательно изучить макет.
Максим 24.02.2018
добрый день! а меня, наоборот, интересует как добавить значок (иконку) корзины в шаблон сайта, именно в шапку сайта?
Tod 25.02.2018
Максим, если вам надо просто добавить ссылку на корзину (страницу cart), то в коде файла header.php (или похожем на него) добавляете изображенеии IMG и линк A (href).
В случае когда требуется отображать количество товаров и сумму, то нужно поискать информацию по функции/модулю mini cart woocommerce. Я к сожалению пока об этом не писал и детально задачу не рассматривал. Думаю, есть какие-то плагины по теме + как вариант, можно взять один из woocommerce шаблонов, где фишка реализована, и позаимствовать код.
Иван 27.02.2018
Добрый день! Спасибо за статью, очень полезно. У меня 2 вопроса:
1. Как сделать раскрывающийся список точек самовывоза. Пытался через Saphali Woocommerce Russian, но получается очень колхозно.
2. Как внести изменения в мобильную версию сайта? Некоторые поля очень широко отображаются.
Заранее спасибо!
Tod 27.02.2018
Иван, 1) В первом случае без сторонних модулей, думаю, не разобраться. В админке можно создать несколько вариантов доставки и указать им самовывоз, но сложность в оформлении их как выпадающий список. Если честно, Не уверен есть ли какой-то плагин подходящий, вполне вероятно, что придется вручную допиливать и дописывать свой php код.
2) Это вам надо погуглить как делаются адаптивный дизайны и как в стилях прописываются другие значения стилей для размеров экрана, например что-то вроде
@media (max-width: 768px) { .my-header {font-size: 12px; padding: 5px;} }
@media (max-width: 768px) { .my-header {font-size: 12px; padding: 5px;} }
Джек 10.03.2018
Чувствую себя туповатым, сделал всё как описано выше, но у меня не появляется вид доставки, прям руки опускаются из-за незнания что изменить в настройках, в woocom. страницы соответствуют (корзина-корзине), в настройках доставки всё указал, а при оформлении заказа, нету выбора вида доставки :( Может я плагины какие-то установил, которые типа друг-друга по функционалу перекрывают и нет возможности выбрать вид доставки?
Написал криво, но терпения уже постепенно не хватает :)
Tod 10.03.2018
Джек, первое что нужно сделать — деактивировать все лишние модули и поставить базовую тему. Если не работает, проблема в настройках — открываете официальную документацию https://docs.woocommerce.com/ и пошагово проходите пункт «Settings & Options» (ну или с первого начать или сразу глянуть Shipping). Возможно какой-то глюк с выбором региона/класса доставки, т.е. система не показывает вам «типа недоступные» пункты, хотя в админке они созданы — нужно еще раз с нуля пройти настройку.
Джек 10.03.2018
Tod, произошло чудо! :))) Всё оказалось намного проще :) Т.к. первый раз открываю интернет-магазин, смотрел урок по созданию магазина, и там в настройках товара указали свойство — виртуальный, я сделал тоже самое, вот тут была и «подстава», что виртуальный доставляться курьером/почтой не может :) Вот мне способы доставки и не показывались :) В любом случае, спасибо за ответ, очень полезный у Вас сайт, просто и доходчиво написано, если будут вопросы про Woocomm, обязательно напишу Вам :) Спасибо :)
Tod 11.03.2018
Джек, рад слышать, что все ок. Иногда подобный мелкий нюанс может заставить пару часов искать проблему, по себе знаю)
Юлия 04.04.2018
Здравствуйте, помогите, пожалуйста, создаю интернет-магазин и в корзину помимо самого товара, нужно чтобы появился не только сам товар, но и его цвет. Например, тени для век есть бежевые, белые, коричневые, покупатель выбирает товар и цвет, а в корзине отображается выбор только товара, а выбор цвета не указывается( Как реализовать выбор цвета. Заранее спасибо!
Tod 06.04.2018
Юлия, вопрос — для этой продукции вы создаете вариативный товары? Если нет, то попробуйте сделать так, как показано в статье. Если да, но ничего не срабатывает, то тут сложнее — во всех шаблонах, с которыми я работал, выбранная вариация (цвет, размер) выводились автоматически. Какие функции за это отвечают, к сожалению, не знаю. Можно выбрать один из WooCommerce шаблонов, где эта опция работает и подсмотреть в коде как именно она реализована.
Александр 18.05.2018
Добрый день!
А не подскажете, как сделать так, чтобы в корзине стоимость доставки не была одна при нескольких товарах, а чтобы добавлялась при каждом добавленном товаре? Например, сейчас, если в корзине более 1 товара, доставка стоит одна, но нужно, чтобы за каждый товар цена доставки удваивалась.
Спасибо!
Tod 19.05.2018
Александр, нужно гуглить в сторону модулей доставки — woocommerce shipping plugins, я увы с таким не сталкивался.
Александр 19.05.2018
Да, спасибо! Я уже по гуглу все нашел, просто нужно было немного разобраться))
Сега 05.06.2018
Доброго времени суток!
У меня следующая проблема. Впервые в жизни создаю интернет-магазин. Знаний по теме компьютера и интернет мало, мягко сказать) При создании магазина WordPress/Woocommerce удалил страницы созданные плагином (это я так думаю, хотя не помню точно). Теперь, если жму «просмотр корзины» и «оформление заказа», то остаюсь на той же главной странице, где отображается каталог. Как восстановить удаленные страницы. WooCommerce re-create page уже не существует, как я понял. Но в админ панели хостинга в файловом менеджере есть папка «cart» — это случаем не моя корзина удаленная. Если это она как ее восстановить?
Спасибо за отклик!
Tod 05.06.2018
Сега, папка на ФТП отношения к сайту не имеет. Вам нужно добавить на сайте основные страницы: «Каталог», «Корзина», «Оформление заказа» + по желанию «Аккаунт пользователя», «Условия и соглашения». Потом в настройках Woocommerce указываете в качестве соответствующих страниц созданные вами — раньше это делалось в пунктах меню «Товары» — «Отображение» и «Платежи», но в новый версиях, вроде как, опция переехала в отдельный раздел (не уверен).
Кстати, после удаления записи попадают в Корзину — находится на той же странице над списком элементов рядом с «Опубликованными» и «Черновиками» — посмотрите может прошлые страницы еще там.
Дима 01.07.2018
Добрый день!
У меня такая же проблема как у Сереги. При добавление товара в корзину (логотип эмблемки в углу) показывает товар, количество…и 2 кнопки просмотр корзины и оформление заказа. Не важно на какую бы не нажал бы из этих кнопок то меня выкидывает на главную страницу!
Залезть особо обширно там прописывать всякие коды не могу так как новичок.
Спасибо!
Tod 02.07.2018
Дима, единственное что могу посоветовать — проверить настройки модуля вкладку «Дополнительно», установлены ли там страницы оформления заказа и корзины? К сожалению, во многих случаях действия магазина определяются именно шаблоном и его кодом — без разбора не понять в чем фишка. Посмотрите работу модуля с базовой темой — работает ли там функция.
Зоя Галеева 28.08.2018
Если вы случайно или намеренно удалили плагин WooCommerce.
Затем одумались и решили вернуть, а страницы не восстанавливаются, то есть очень простое решение.
В установленном заново плагине WooCommerce находите кнопку СТАТУС (это в левой колонке, под самим WooCommerce, — ниже чем кнопка Заказы-Отчеты-Настройка).
Нажимаете на СТАТУС. Затем — ИНСТРУМЕНТЫ.
И находите строчку — Создать страницы WooCommerce по умолчанию.
Жмете — создать страницы.
Всё! Странички вернутся.
Не забудьте прописать меню. (Внешний Вид — Меню)
Tod 29.08.2018
Зоя, спасибо за дополнение статьи. Страницы действительно можно восстановить подобным образом.
Владимир 02.10.2018
Здравствуйте!
Первый раз пробую сделать магазин на WP и с Woocom и столкнулся с проблемой такого плана: собираю свой магазинчик, выставляю нужные настройки, добавляю товары, вроде все ОК, все отображается. если перейти на вкладку «Перейти в магазин». Но если перейти на вкладку «Перейти на сайт» — магазина нет. Вот все есть, что сделано с помощью других плагинов, а магазина нет! Причем проверял на разных браузерах и компьютерах — одно и то же.
Плюс добавилась еще одна раздражающая проблема — при смене значка корзины (и вообще ее параметров (кол-во купленных товаров, размер итд)) ничего не меняется, либо меняется через пень-колоду. То есть, в одном браузере изображение корзины может быть одно, а в другом браузере другое. С чем это все может быть связано, куда копать?
Tod 03.10.2018
Владимир, что-то конкретное, к сожалению, посоветовать не смогу, т.к. все это индивидуально.. поэтому лишь пару мыслей по теме.
Со стороны похоже на то, что кэш браузера не обновился. Теоретически один и тот же код (програмный, не CSS) не может отображаться в 2х браузерах по разному — попробуйте зайти на сайт через VPN от Оперы, например, чтобы наверняка убедиться как именно видят сайт посетители. С иконкой проблема может быть именно в CSS, но опять же если в коде четко прописан адрес картинки, но странно, что на разных компьютерах она по разному работает.
Чтобы докопаться до сути, кстати, советую отключить все сторонние модули пока не разберетесь — иногда плагины могут влиять на работу магазина.
Про страницы не совсем понял, но я бы еще раз зашел в настройки модуля Wocommerce во вкладку «Дополнительно» и посмотреть какие именно страницы установлены в качестве каталога магазина и др. — возможно эта опция не настроена.
Наталья 10.10.2018
Добрый день! Помогите разобраться — настраиваю прием пожертвований через плагин WooСommerce. При оформлении пожертвования не могу убрать следующие вещи:
1. появляется предупреждение об отложенном товаре: http://joxi.ru/Dr83Kx5f41YJzA
2. Где можно убрать надпись «Детали оплаты» http://joxi.ru/xAeYGRqHp1ab4A и собственно блок с подытогом. http://joxi.ru/xAeYGRqHp1ab4A
Если у вас есть инструкции, буду благодарна.
Увидеть эти блоки можно со страницы https://bfrp18.ru/test
Tod 10.10.2018
Наталья, если честно, я бы поискал бы какой-то более простой метод реализации пожертвований — т.е. использовать мощный (тяжелый для сайта) магазин чтобы перевести деньги не совсем логично. Однако подозреваю, что не все модули содержат оплату через Яндекс.Деньги и т.п. системы. Возможно, в самих платежных сервисах есть какой-то виджет/скрипт для внедрения — тоже полезно изучить этот вопрос… в Яндекс что-то должно похожее быть.
Что по магазину, то страница оплаты формируется из файлов, находящихся в папке checkout из шаблона WooСommerce. Чтобы подправить ее внешний вид нужно будет править данные файлы.
Наталья 10.10.2018
Спасибо за указание папки, разобралась — как убрать ненужные строки. А можете помочь — по алерту на странице: http://joxi.ru/KAxYeW4HMeQXLr
Если я нажала по кнопке и сразу перехожу на страницу оплаты — почему он может возникать? Может , есть у вас какие-то мысли на этот счет?
Tod 11.10.2018
Наталья, мне казалось если в настройках WooCommerce в «Товарах» отметить опцию «Перенаправить в корзину после успешного добавления», то пользователь будет сразу переходить на страницу платежа без каких-либо сообщений… или они все равно выводятся? В таком случае придется опять же разбираться с шаблоном — скорее всего, в файле функций functions или custom-functions есть какой-то фильтр для показа сообщения или вызывается wc_print_notice, которая отвечает за аналогичные действия. В заметке про вывод текста на странице заказа и корзине отчасти этот вопрос затрагивался, но увы не конкретно ваша задача. Нужно смотреть файлы макета.
Наталья 11.10.2018
Благодарю за активную помощь! Это очень ценно в наше время. Да, я поняла, что надо ковыряться в коде. В итоге уже ночью нашла плагин Лейка — и подключила Яндекс.кассу через нее.