Май
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”

  • Руслан   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;}
    }
  • Джек   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

    Благодарю за активную помощь! Это очень ценно в наше время. Да, я поняла, что надо ковыряться в коде. В итоге уже ночью нашла плагин Лейка — и подключила Яндекс.кассу через нее.

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


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

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

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

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

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

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

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