YITH WooCommerce самые лучшие плагины – Подборка InBenefit. 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, однако позже решил рассказать сразу о нескольких фишках для ее модификации. Хочу заметить, что в данном блоге есть специальный раздел про , т.к. этот вопрос включает в себя множество нюансов. Сегодня статья будет посвящена больше внешнему виду и отображению информации на сайте. Начнем с настроек самого модуля, потом рассмотрим вопрос удаления доставки и заодно изменение шаблона корзины. Думаю, пост пригодится не только новичкам.

На одном из начальных шагов на 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 принято считать блоговой CMS. Но на самом деле, на CMS WordPress можно строить сайты практически любой сложности. В доказательство этому, мы покажем вам, как можно создать Интернет магазин на WordPress с помощью плагина WooCommerce.

Это только первая часть урока, после которой мы рекомендуем прочесть "Интернет магазин на WordPress с помощью плагина WooCommerce - часть 2".

Для начала нужно , чтобы далее с ней работать. Для размещения сайта на хостинге рекомендуем . Для создания Интернет магазина на Вордпресс, вам необходимо владеть базовыми знаниями работы с WordPress. Для этого следует ознакомиться с разделом " ". Если вы умеете работать с WordPress, читайте далее.

Скачайте плагин WooCommerce

Для создания Интернет магазина на WordPress вам потребуется плагин WooCommerce <- перейдите по ссылке и скачайте плагин. Если плагин скачали, то можете сразу , а затем активировать его. После активации плагина, в админке WordPress вы увидите новый тип записи Products и новую вкладку для настройки плагина WooCommerce.

Настройка WooCommerce

Настройка WooCommerce, пожалуй, самый важный этап в создании Интернет магазина на Вордпресс.

WooThemes - шаблоны для вашего Интернет магазина

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

Русификация WooCommerce

Чтобы вам было удобней работать с вашим Интернет магазином, рекомендуем русифицировать плагин WooCommerce. Для этого вам нужно установить плагин Saphali Woocommerce Russian . После этого весь интерфейс плагина будет переведен на Русский язык и будут добавлены русские валюты. Также вы можете с помощью кода.

Настройка страниц Интернет магазина

После установки плагина WooCommerce, вам будет предложено настроить страницы вашего Интернет магазина. Это нужно сделать в первую очередь. Чтобы перейти к настройкам страниц вы можете щелкнуть по кнопке "Установить страницы WooCommerce" или перейти на вкладку WooCommerce -> Настройки -> Страницы.

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

Создание специальных страниц для WooCommerce

Если по каким-то причинам страницы не были созданы автоматически, сделайте это вручную, следующим образом. Создайте WordPress страницу с именем, например "Корзина". Чтобы активировать корзину на этой странице добавьте shortcode в содержимое страницы:

Это можно сделать с помощью кнопки в визуальном редакторе, как показано на рисунке ниже.

Аналогичным образом нужно создать другие страницы.

shortcode для WooCommerce

На всякий случай, ниже опубликуем все необходимые shortcode для WooCommerce.

Изменить мой адрес

Изменить пароль

Посмотреть заказ

Оплатить

Новые товары

На этом основная работа закончена, как и первая часть. Читайте далее "Интернет магазин на WordPress с помощью плагина WooCommerce - часть 2".

Расскажите друзьям

Нравится блог? - Читайте ВКонтакте

Подписывайтесь и получайте полезные статьи на почту!

Плагин 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://мой сайт/страница/ – работает
Как ни крути - всё не получается и товары и статьи посмотреть… В чем проблема?