YITH WooCommerce самые лучшие плагины – Подборка InBenefit. Основы - Начальная настройка плагина 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 ) ;

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. Напоминаю, что нужно после того как скопируете папку templates в свою дочернюю тему. По умолчанию директория содержит нескольких файлов:

  • 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 — выполняется обработка пустой корзины и т.п. Вы можете изменить вывод всех элементов страницы так, как вам это нужно. Хотя некоторые правки принято делать через хаки/сниппеты как например в посте про .

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


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

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 (вроде как, считается правильнее и более гибко). Какой бы вариант вы не выбрали, помните, что правки нужно вносить в копию макета магазина в дочерней теме.

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


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

Знакомство с WooCommerce

Плагин интернет магазина для Wordpress WooCommerce является результатом разработок команды из и представляет собой плагин с открытым исходным кодом, позволяющий создать интернет-магазин, на одной из популярнейших платформ WordPress. Выпуск WooCommerce на рынок произведен менее полутора лет назад и за это время его скачали более полутора миллиона раз, что свидетельствует о высокой популярности плагина. Кроме того, он распространяется по схеме ‘Freemium’, т. е. основа (собственно плагин) бесплатна, а за дополнения придется заплатить. Такая схема характеризуется высокой гибкостью, позволяя добиться необходимых индивидуальных настроек магазина при минимуме затрат за использование дополнительных платежных шлюзов, мультиязычности , автоматического пересчета валют и др. Следует отметить, что большинство из этих дополнений используются довольно редко.

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

Рекомендуется начинать работу с активации кнопки ‘Установить страницы WooCommerce’, приводящей к автоматическому созданию плагином страниц, необходимых для его функционирования: ‘Корзины’, ‘Каталога товаров’, ‘Страницы оплаты’ и др. В дальнейшем возможно редактирование содержимого этих страниц. Рассмотрим подробнее настройки WooCommerce.

Общие настройки WooCommerce

Будем производить настройку интернет магазина использую валюту рубль Росийской федерации. После завершения установки WooCommerce очень полезно будет установить Saphali WooСommerce LITE. ()


Этот плагин является отличным дополнением к WooCommerce и позволяет:

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

Таким образом удается избежать множества трудностей, с которыми приходится сталкиваться начинающим при выполнении настройки WooCommerce. Следует отметить регулярное появление обновлений Saphali WooCommerce LITE, соответствующее смене версий основного плагина.

Непосредственная настройка WooCommerce выполняется из его админ-панели. Для большего удобства настройки она реализована на русском языке.


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

Затем переходим к общей настройке политики магазина, состоящей из следующих пунктов:

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

А вообще настройки, предлагаемые по умолчанию, удовлетворяют требованиям пользователей в 90% случаев. Необходимо лишь изменить валюту и страну.

Настройки каталога WooСommerce


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

Стандартные страницы

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

  • Настройка страниц – эта опция позволяет переназначить созданные во время активации плагина страницы. Довольно редко используемая опция, поскольку все что необходимо для работы создается при активации, а редактировать нужно лишь содержимое самих страниц.
  • Настройка наличия (инвентаризация) – очень простая и наглядная опция, выполняющая настройку функций управления наличием товара.
  • Настройка налогов – тоже простая и интуитивно понятная опция: из списка разрешенных стран выбираем требуемую и устанавливаем процентную ставку. Результатом действия данной функции является автоматическое добавление к сумме рассчитанной величины налога.

Доставка


Разработчики реализовали в WooCommerce 5 различных способов доставки, хотя бесплатно использовать можно лишь 3 из них: самовывоз, бесплатную доставку и единую цену. Для использования других решений этой задачи необходимо воспользоваться платной схемой ‘Freemium’.

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

Платежные шлюзы


Для настройки платежного шлюза плагин имеет 5 встроенных решений – Paypal, чеки, кредитные карты, банковский перевод и наличные. В нашей стране применяются лишь две последние системы – в Paypal отсутствует поддержка рублей и гривен, чеки неактуальны, а кредитные карты мало распространены. В WooCommerce используется платежный шлюз Mijireh.

В большинстве случаев определение момента оплаты производится телефонным сообщением менеджеру. Однако имеются весьма стабильно и надежно работающие решения для ЯндексДенег и WebMoney. Все эти удобства предлагаются за дополнительную оплату.

Настройки интеграции и почтовых оповещений

Настройка интеграции состоит из трех подпунктов:

Для настройки почтовых оповещений используется шаблон в HTML-формате, хранящийся в одной из папок плагина. Имеется возможность его скачивания и редактирования под свои потребности. Кроме того, в указываются адреса получателя (для отправки сообщений о новом заказе и наличии малого количества товара) и настройки отправителя писем.

На этом заканчивается основная настройка интернет-магазина, реализованного на WooCommerce. Все нераскрытые вопросы (например, добавление новых товаров или кастомизация их вывода) будут рассмотрены в последующих статьях.

WooCommerce - популярная платформа для электронной торговли на движке WordPress, которую развивают люди из WooThemes. В этой статье речь пойдет о том, как начать разработку тем под WooCommerce.

Перед началом чтения убедитесь в том, что:

  1. У вас установлены WordPress и WooCommerce на сайте.
  2. Вы знаете, как создавать темы для WordPress и умеете работать с HTML и CSS.
  3. Вы знаете, как работать со средствами разработки Chrome Developer Tools и с такими инструментами, как Firebug.

Настройка WooCommerce CSS

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

Поэтому у нас есть 2 пути для редактирования CSS в теме оформления WooCommerce:

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

Помните, что WooCommerce добавляет класс "woocommerce " ко всем своим страницам.

Отключаем стили по умолчанию

Запись новых стилей поверх тех, что предложены по умолчанию - это самый простой и быстрый способ, который подойдет большинству пользователей.

Скопируйте содержимое всего файла WooCommerce CSS, он расположен по адресу:

wp-content\plugins\woocommerce\assets\css\woocommerce.css или woocommerce.less

Удалите оттуда всё ненужное вам и внесите свои правки. Правда, это может занять немало времени и привести к повторению кода в таблице стилей.

  1. Найдите на сайте все стили, которые надо заменить.
  2. Затем используйте Chrome Developer Tools (или аналогичный инструментарий) для идентификации классов и внесения правок в браузере, чтобы сразу видеть, что и как будет выглядеть после редактирования. Сделать это можно правым кликом на странице и выбрав инспектирование элементов в выпадающем меню.
  3. Скопируйте полученный код CSS из Chrome Developer Tools в файл вашей темы с таблицей стилей.
  4. Не забудьте сменить значения переменных, чтобы сохранить целостность таблицы стилей и связь стилей и контента для разных браузеров.
  5. Если вы найдете что-то, что не меняется в кастомизированном файле, то можете удалить это значение: если оно не меняется, нет смысла включать его в кастомный файл CSS.

Такой подход хорошо экономит вам время.


В Google Chrome можно кликнуть правой кнопкой мыши на элементе в режиме окна Developer Tools для проверки разных состояний элемента. Так вы увидите все состояния элементов без необходимости выискивать их в файле таблицы стилей.


Отключаем родную таблицу стилей и начинаем с нуля

Отключить таблицу стилей, предлагаемую по умолчанию, можно добавлением короткой строки в файле functions.php :

Define("WOOCOMMERCE_USE_CSS", false);

Самый простой и быстрый способ создания всех классов - скопировать их из существующего оригинального файла WooCommerce CSS в новый, а затем внести там все необходимые правки и изменения.

Включаем поддержку WooCommerce в своей теме

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

Если не указать поддержку WooCommerce в вашей теме, пользователи будут сталкиваться с ошибкой при установке на WooCommerce. К счастью, решить эту проблему поможет маленький фрагмент кода, добавленный в файл functions.php :

Add_theme_support("woocommerce");

Редактируем шаблоны

Редактирование CSS в WooCommerce может отнять немало времени. Но есть способ сделать эту рутинную долгую работу не такой скучной.

Плагин WooCommerce поставляется с набором шаблонов front-end на HTML, равно как с набором шаблонов для писем. Вместо прямого редактирования всех этих файлов в плагине (не очень хорошая идея, потому что любое обновление плагина приведет к тому, что все ваши изменения будут удалены), вы можете скопировать их в свою настраиваемую тему:

  1. В папке с темой создаем вложенную папку с названием "woocommerce ".
  2. Переходим в папку с плагином WooCommerce и открываем папку "templates ". Здесь много вложенных папок, в которых хранятся шаблоны, используемые в WooCommerce. К счастью, структура здесь сравнительно простая и визуально понятная.
  3. В новой папке "woocommerce " поместим все файлы шаблонов, скопированные из первоисточника, которые мы хотим отредактировать. Не забудьте сохранить ту же структуру папок, что и в первоисточнике. Не забудьте переименовать связанные папки, если вносите в названиях какие-то изменения.
  4. После редактирования всех необходимых файлов и папок сохраняем изменения в папке "woocommerce ".

Практический пример

К примеру, нам надо поменять код в разделе с заказанными товарами в WooCommerce.

Для начала определим нужный нам шаблон. Секция "My Orders " находится в "My Account ". Структура пути к файлу выглядит так:

/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php

Делаем вложенную папку "woocommerce ", а в ней - вторую вложенную с названием "myaccount ". Копируем туда файл my-orders.php .

У вас должен получиться путь:

/wp-content/themes/вашатема/woocommerce/myaccount/my-orders.php

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

WooCommerce и циклы

Если вы ранее создавали или редактировали темы для WordPress, тогда вам знакомо понятие цикл (The Loop). У WooCommerce есть свои циклы для настроек своих внутренних страниц. Например, вы можете их применять, если надо вывести другую боковую панель для страниц WooCommerce.

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

Создание шаблона происходит в несколько шагов:

  • Делаем дубликат файла темы page.php и переименовываем его в woocommerce.php
  • Находим цикл WordPress в файле woocommerce.php . Он выглядит примерно так:
  • Заменяем ваш цикл на цикл WooCommerce:
  • Теперь можно делать любые желаемые изменения.

Заключение

Теперь вы знаете основы работы с подключением и настройкой тем для торговой платформы WooCommerce на WordPress.

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

Плагин Regenerate Thumbnails понравится тем, у кого уже есть магазин, а все изображения подстроены под предыдущую тему. Этот плагин изменит размер всех ваших изображений из WordPress Media Library под требования новой темы. Вы можете не делать это с фиктивными данными или же вообще пропустить этот плагин (но мы всё равно рекомендуем воспользоваться его услугами, тогда все медиа-файлы будут правильного размера для тестирования).

Плагины типа Envato Toolkit, однако, очень важны для тем, купленных на ThemeForest, гарантируя, что вы будете уведомлены об обновлениях темы.


Если вы используете тему от ThemeForest, как в нашем примере с Savoy, не забудьте ввести ваш Marketplace Username и Secret API Key в Envato WordPress Toolkit, чтобы следить за обновлениями темы.

Настройка

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

У вас есть доступ к WordPress Customizer из меню Внешний вид → Настроить .


Добро пожаловать в WordPress Customizer:


Здесь мы изменим пару вещей, а потом перейдем к более глубоким настройкам.

Первое, что вы увидите, будет Site Identity . Тут вы можете изменить название и рекламный слоган сайта.


Иногда здесь вы можете добавлять изображение в шапке сайта или иконку сайта (это зависит от темы).


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

Вы можете легко добавлять и создавать новое меню:


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


У вас есть свобода настройки функциональности вашего сайта. Не бойтесь экспериментировать.

До того, как мы закончим работу с WordPress Customizer, вы захотите создать главную страницу вашего сайта:


Пометьте «Front page displays » как «A static page » и выберите в выпадающем меню «Front page » - «Shop ». Shop страница была создана автоматически при установке плагина WooCommerce.

Что насчёт страницы записей, тут всё зависит от того, хотите ли вы вести блог на вашем сайте WooCommerce. Если да, то вам нужно будет создать страницу блога и выбрать её в WordPress Customizer или в меню Настройки → Чтение.

Результаты

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


Страницы товаров выглядят потрясающе:


Тут даже есть блок с Похожими товарами:


Savoy позволяет вам настраивать много элементов вашего сайта, и не только те, о которых мы рассказали (внимательно изучите документацию вашей темы, чтобы узнать её особенности). Мы показали вам только те настройки, которые можно сделать с помощью WordPress Customizer и которые одинаковы для всех тем.

Итоги

Видите, как легко сделать эти первые шаги в настройке новой WooCommerce темы, и как красивы темы, созданные специально для WooCommerce? Но это еще не все!

Вы можете найти , а также для вашего магазина.

Мы уверенны, что вы найдете классную WooCommerce тему, которая идеально подойдёт вашему интернет магазину.

Вам понравился материал?

Переходим в раздел админки «WooCommerce -> Настройки»

Первым делом необходимо изменить страну в которой находитесь и планируете продавать товары. В выпадающем меню «Местонахождение» выберите страну размещения, например: Россия. Из списка «Торговая точка(и)» выберите пункт «Продавать только в определенных странах» и отметьте те страны в которых планируете вести продажи и организовать в них доставку купленного товара.

В выпадающем списке «Валюта» выберите тип валюты с которой планируете работать, а также оформление цены (разделители, позиции валюты…)

Налог

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

Оплата

Во вкладке «Оплата» можете настроить способы оплаты в магазине. Для этого нажмите на кнопку «Настроить» напротив нужного способа оплаты.



Там же можно изменить функциональные страницы интернет-магазина, но их трогать не рекомендую.

Доставка

Во вкладке доставка можете настроить способ доставки, адрес назначения и стоимость.

Настройка постоянных ссылок для WooCommerce

Первым делом, если вы еще этого не сделали, установите . Он служит для транслитерации кириллических символов Постоянных ссылок статей, новостей, страниц в латинские.

Потом переходим в раздел админ-меню WP «Настройки -> Постоянные ссылки». В настройки постоянных ссылок рекомендую прописать:



Название записи: /%postname%/
И ниже
Произвольная база: /shop/%product_cat%

Возможные проблемы при работе WooCommerce и их решения:

Как сделать, чтобы на странице отображались товары из определённой категории?

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

1) Создайте новую страницу, назовём её, например, Вентиляторы

2) Создаём в Товарах категорию, если ещё не создали и в свойствах товаров «Вентиляторы» присваиваем товарам данную категорию, отметив галочкой. Предположим категория называется «ventilyator»

2) Вставляем шорткод с названием категории в кавычках.

Array("per_page" => "12", "columns" => "4", "orderby" => "title", "order" => "asc", "category" => "")

Чтобы изменить значения шорткода нужно написать плагин или править код в файле wp-content\plugins\woocommerce\includes\shortcodes и в \woocommerce\includes\class-wc-shortcodes.php.

Настраиваемые значения:
per_page — количество товаров на каждой страницы.
columns количество колонок

Как клиент интернет-магазина будет оплачивать покупку?

Для возможности оплаты покупок мы можем подключить любой нужный нам платёжный шлюз. По умолчанию в уже имеет платёжный шлюз Paypal, что даёт покупателю возможность оплачивать покупки с помощью пластиковых карт Visa и Master Card. В данном случае нам нужно зарегистрировать кошелек в системе PayPal на юридическое лицо, куда будут перечисляться деньги за покупки. В настройках WooСommerce –> Настройки –> Платёжные шлюзы –> Paypal вводим название своей почты.

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

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

Как исправить размытие изображений товара?

Иногда после загрузки картинка товара размывается и становится не точной. Чтобы исправить это перейдите во вкладку –> Настройки –> Каталог и вводите свои значения миниатюры товаров, меняем размеры товаров. Обязательно установите плагин . После зайдите в панель управления «Инструменты», там появится новая вкладка Regen Thumbnails, перейдите в неё и запустите регенерацию изображений. Плагин обновит заново все миниатюры и изображения в системе. После чего проблем с изображениями не должны у вас возникать.

При добавлении отзыва к товару происходит переадресация и страница перестаёт загружаться

Проблема в основном возникает из-за того, что название товара на кирилице, для этого переходим в Параметры – Постоянные ссылки и в разделе Основа постоянной ссылки продукта делаем название произвольным и добавляем /product, как показано на скриншоте:

Получается:

http://мой сайт/catalog/категория/товар/ – работает
http://мой сайт/страница/ – НЕ работает!!!

А если поменять:
Основа постоянной ссылки продукта -> Произвольная основа -> /catalog
или Основа постоянной ссылки продукта -> Произвольная основа -> /catalog/%product_cat%
http://мой сайт/catalog/ – работает
http://мой сайт/catalog/категория/ – работает
http://мой сайт/catalog/категория/товар/ – НЕ работает!!!
http://мой сайт/страница/ – работает
Как ни крути - всё не получается и товары и статьи посмотреть… В чем проблема?