Меню

Woocommerce menu cart настройка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Каждый из них отвечает за определенные функции, например, в файле 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 варианта чтобы все это скрыть:

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

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

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

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

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

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

Источник

Создаем WooCommerce меню категорий и не только (через админку, виджеты, плагины)

Есть у некоторых разработчиков плагинов нехорошая привычка скрывать важные опции во вкладку «Настройки экрана». Отчасти из-за этого раньше я создавал навигацию для магазина через добавление произвольных ссылок, вручную прописывая URL’ы. Каково же было мое удивление, когда в одном из проектов увидел полноценное WooCommerce меню категорий товаров. Сегодня расскажу как легко его реализовать + рассмотрю другие смежные нюансы. В работе нам помогут некоторые виджеты и, рассмотренный ранее, модуль MegaMenu.

Читайте также:  Монитор samsung syncmaster 943 настройка

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

Меню категорий WooCommerce

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

Навигационное горизонтальное меню WooCommerce

Если разрабатываете тему с нуля, то вам придется использовать функции вывода меню. Однако в большинстве случаев речь идет о готовом шаблоне, а там зачастую изначально предусмотрены специальные области отображения навигации. В таком случае в этом же разделе админки переходите во вкладку «Управление областями».

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

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

Продвинутое меню категорий WooCommerce

Самый популярный навигационный плагин меню WooCommerce, с которым я непосредственно работал — это Max Mega Menu (по ссылке найдете его обзор и принцип настройки). Не буду сейчас повторяться, а лишь пару слов скажу о том, как можно использовать данный модуль в магазине. Радует, что его бесплатных функций вполне достаточно.

Итак, когда плагин уже установлен, при наведении на разные пункты увидите соответствующую кнопку:

WooCommerce меню в сайдбаре

Список категорий продукции, располагающийся на сайте в сайдбаре справа или слева — традиционный элемент интернет-магазинов. Теоретически вы можете использовать методику, описанную в самом начале статьи, но есть и второй способ — создание навигационного меню в WooCommerce с помощью виджета, который называется «Категории товара».

Из настроек элемента пользователю доступны:

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

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

Также сделать меню WooCommerce в сайдбаре вы можете, совместив первый метод из текущей статьи и специальный виджет «Произвольное меню»:

В настройках указываете заголовок (если нужно) и выбираете один из ранее созданных объектов. Затем сохраняете виджет. Отображается информация в виде списка, при желании ее можно оригинально оформить через CSS стили.

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

Дополнения и вопросы по статье традиционно пишите ниже.

Источник

WooCommerce: основные настройки и настройки товаров

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

От автора: WooCommerce – один из популярнейших E-Commerce аддонов для WordPress. На момент написания статьи его скачали не менее 3,6 миллионов раз. Базовый плагин WooCommerce бесплатный, но его можно усилить с помощью премиум аддонов. Тем не менее, для многих онлайн магазинов хватит и бесплатного плагина. В этой серии уроков я покажу, как происходит Woocommerce настройка товаров, а также добавление физических и виртуальных товаров. В первой части вы установите плагин и поработаете с основными настройками, настройками товаров и налогов.

Что вам потребуется

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

Читайте также:  Настройка камеры vray для маленького интерьера

Установка WooCommerce

Сперва необходимо установить плагин. Самый простой способ – через экран plugins в панели администратора WordPress. Также вы можете просто скачать файлы плагина из репозитория плагинов WordPress.

На странице плагина в репозитории приводится детальная информация о возможностях WooCommerce:

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

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

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

Будет добавлен ряд страниц на сайт, которые WooCommerce будет использовать для управления магазином. Среди них будут страницы shop, cart и т.д. Щелкните на кнопку Install WooCommerce Pages. После установки вам перенаправит на экран приветствия:

Вы заметите, что слева в меню появилось 2 новых пункта: WooCommerce и Products. В этом уроке вы будете работать со страницами в меню WooCommerce. WooCommerce установлен и готов!

Добавление страниц WooCommerce в меню

Прежде чем погружаться в настройки WooCommerce я хочу проверить, что мои страницы shop и т.д. присутствуют в главном меню сайта.

Откройте экран Appearance->Menus в панели администратора и добавьте новые страницы WooCommerce страницы в меню. Вы сами решаете, что добавлять, а что нет. Я выбрал shop, checkout, cart и my account, а также ссылку на домашнюю страницу:

Можете посмотреть все изменения на моем сайте. Теперь на нем появилась пустая страница shop, на которую можно перейти из основного меню:

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

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

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

Начнем с экрана general. WooCommerce->Settings вкладка general.

На этой вкладке я добавил расположение магазина и место продажи UK, где я живу. Вы можете добавить свое расположение. Можете выбрать страницы для продажи или же торговать по всему миру. Также я добавил торговую валюту. Вы можете выбрать свою валюту. Кликните save changes на экране настроек.

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

Следующая вкладка products, с помощью которой настраиваются страницы товаров.

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

Product Archive / Shop Page – главная страница магазина: по умолчанию это shop, автоматически созданная WooCommerce, и на ней отображаются ваши товары. Можете использовать другую страницу, но ее еще нужно создать.

Выпадающий список Shop Page Display содержит варианты отображения товаров, категорий товаров или и того и другого. Я выбрал «показывать все», так мои посетители будут видеть больше.

В выпадающем списке Default Category Display выберите, что вы хотите: отображать на страницах категорий товары, подкатегории или оба варианта. Я выбрал отображать товары. Я не буду задействовать подкатегории.

Default Product Sorting – выберите режим отображения товаров. Я оставил вариант по умолчанию пока что, однако после добавления товаров на последнюю страницу, могу передумать. Среди других опций: по популярности, рейтинг, сначала новые, по цене. Пользователи могут самостоятельно выбрать порядок сортировки.

Опции add to cart позволяют задействовать AJAX, а также задать редирект на страницу корзины при добавлении в нее товара. Я хочу, чтобы мои пользователи сначала пошопились и уже потом переходили в корзину, поэтому оставил вариант по умолчанию.

Секция product data отвечает за рейтинг и отзывы на товары. Я оставил по умолчанию.

Ниже представлен экран настроек для изображений товаров:

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

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

Здесь можно задать размер изображения товара на странице одного товара, а также размеры превью на экранах со списком товаров. WordPress сохранит физические изображения под выбранные размеры, поэтому перед загрузкой изображений на этой странице необходимо внести все требующиеся изменения.

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

Читайте также:  Как вернуть заводские настройки на ноутбуке dns windows 7

Последняя опция на экране Access Restriction связана с загрузками. Если на вашем сайте будут загружаемые товары, вы можете заставить пользователей авторизоваться перед скачиванием. Также покупателям можно предоставить доступ к загрузке уже в процессе оплаты.

Кликните save changes на странице настроек товаров.

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

В настройках товаров есть экран Inventory Options, на который можно перейти, кликнув на ссылку в верхней части экрана настроек товаров:

Если у вас будет штучный товар на сайте, здесь вы можете изменить настройки. То есть WooCommerce может управлять остатками товаров и уведомлять вас по email, если они подходят к концу. Также можно прятать товары, если они закончились, или показывать их с сообщением, что они закончились.

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

Внесите изменения и кликните save changes.

Налоговые настройки

На следующей вкладке tax можно задать скидки и налоги на доставку. В этом разделе несколько экранов, и все они относятся к разным налоговым ставкам. Начнем с экрана tax options:

Здесь есть ряд опций. Не буду разбирать все, так как некоторые и так понятны. Остановлюсь на некоторых:

Prices entered with tax: выберите, будете ли вы включать налог или нет. Если вы продаете странам с другими налоговыми ставками, вам необходимо нужно формировать цену отдельно от налога, WooCommerce сам вычислит налог. Если вы продаете внутри одной налоговой зоны, а покупатели не смогут вернуть налог с продаж, возможно, будет проще показывать цену уже с налогом.

Calculate Tax Based On: здесь вы можете указать способ формирования налога: по вашему адресу, физическому или адресу доставки покупателя. Вариант зависит от системы налогообложения, с которой вы работаете.

Shipping Tax Class: если вы применяете к товарам налог на доставку, вам нужно определиться с тем, как он будет рассчитываться. Его можно привязать к товарам, выбрать плоскую шкалу или вообще 0. Можно также создать новый класс доставки (что можно сделать в поле Additional Tax Classes).

Additional Tax Classes: с помощью этого поля можно добавить дополнительные налоговые классы, если стандартных в WooCommerce недостаточно. WooCommerce создаст экран настроек для каждого добавленного класса.

Display tax totals: здесь можно указать, отображать налог для каждого товара отдельно или общий.

После внесения изменений кликните save changes.

Налоговые настройки – фиксированная ставка

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

На этом экране вы добавляете страны, в которые будете продавать товар. WooCommerce вычислит налог на все выбранные страны. Кликните на ссылку на экране, чтобы получить код страны и вставить его в поле Country Code. Я продаю только в UK, поэтому добавил код GB.

Введите процент налога на страну в поле Rate %: в UK налог на добавленную стоимость (НДС) составляет 20%, что я и укажу. В поле shipping отметьте чекбокс, если этот процент должен применяться к доставке. После добавления всех кодов и ставок кликните save changes.

Налоговые настройки – нулевая ставка

Некоторые мои товары будут иметь нулевую налоговую ставку. Для этого на экране Zero Rate Rates необходимо вставить код моей страны со значением 0% в поле Rate%:

Если у вас есть дополнительные налоги, например, налог на доставку для различных типов товаров, их необходимо добавить как классы в поле Additional Tax Classes на экране Tax Options. После добавьте коды стран и ставки для каждого дополнительного налога.

Заключение

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

Автор: Rachel McCollin

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

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

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

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

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

Источник

Adblock
detector