WooCommerce - популярная платформа для электронной торговли на движке WordPress, которую развивают люди из WooThemes. В этой статье речь пойдет о том, как начать разработку тем под WooCommerce.
Перед началом чтения убедитесь в том, что:
- У вас установлены WordPress и WooCommerce на сайте.
- Вы знаете, как создавать темы для WordPress и умеете работать с HTML и CSS.
- Вы знаете, как работать со средствами разработки Chrome Developer Tools и с такими инструментами, как Firebug.
Настройка WooCommerce CSS
Из коробки у WooCommerce есть встроенная таблица стилей и поддержка большого количества тем. Таблица стилей по умолчанию хорошо подходит для начала, но это не значит, что она подойдет для нашей кастомной темы.
Например, если вы продаете футболки разных цветов, вы можете указать цвета здесь. В разделе «Дополнительно» вы можете создавать примечания к покупке для клиентов и включать или отключать изменения. Вы также можете указать здесь пункты меню и выбрать пользовательские позиции заказа для своего продукта.
Но что, если ваш продукт виртуальный, переносимый или даже внешний? Добавление кластерного продукта. . Чтобы добавить сгруппированный продукт, выберите вариант «Группировка» в разделе «Тип продукта». Затем вам необходимо добавить дочерний продукт в групповой продукт.
Поэтому у нас есть 2 пути для редактирования CSS в теме оформления WooCommerce:
- Можно использовать базовые стили и переписать их поверх существующих.
- Можно отключить стили по умолчанию и вместо них начать с нуля.
Помните, что WooCommerce добавляет класс "woocommerce " ко всем своим страницам.
Отключаем стили по умолчанию
Запись новых стилей поверх тех, что предложены по умолчанию - это самый простой и быстрый способ, который подойдет большинству пользователей.
Добавление валюты «Российский рубль» в магазин на WooCommerce
Чтобы добавить дочерний продукт, создайте новый простой продукт, а в разделе «Связанный продукт» выберите родительский продукт в раскрывающемся меню «Группировка». Добавление переменной продукта аналогично добавлению простого продукта. На вкладке «Варианты» вы можете добавить сведения о различных вариантах и их различиях.
При добавлении отзыва к товару происходит переадресация и страница перестаёт загружаться
Чтобы добавить виртуальный продукт, установите флажок «Виртуальный» в разделе «Тип продукта». Просто нажмите на флажок «Переносимый продукт», чтобы сделать его доступным для передачи. После того, как вы установили тип продукта и выполнили ввод данных продукта, прокрутите страницу вниз, где вы можете добавить краткое описание продукта. Будет видно чуть ниже названия продукта.
Скопируйте содержимое всего файла WooCommerce CSS, он расположен по адресу:
wp-content\plugins\woocommerce\assets\css\woocommerce.css или woocommerce.less
Удалите оттуда всё ненужное вам и внесите свои правки. Правда, это может занять немало времени и привести к повторению кода в таблице стилей.
- Найдите на сайте все стили, которые надо заменить.
- Затем используйте Chrome Developer Tools (или аналогичный инструментарий) для идентификации классов и внесения правок в браузере, чтобы сразу видеть, что и как будет выглядеть после редактирования. Сделать это можно правым кликом на странице и выбрав инспектирование элементов в выпадающем меню.
- Скопируйте полученный код CSS из Chrome Developer Tools в файл вашей темы с таблицей стилей.
- Не забудьте сменить значения переменных, чтобы сохранить целостность таблицы стилей и связь стилей и контента для разных браузеров.
- Если вы найдете что-то, что не меняется в кастомизированном файле, то можете удалить это значение: если оно не меняется, нет смысла включать его в кастомный файл CSS.
Такой подход хорошо экономит вам время.
В правой части страницы вы можете добавить категории товаров, теги, установить выделенное изображение и изображения галереи продуктов. Единственное отличие - опция видимости каталога, которая имеет следующие настройки. Закончив настройку всего, нажмите кнопку «Опубликовать» и проверьте страницу продукта.
Здесь вы можете редактировать, удалять, дублировать, характеризовать продукт. При выборе нескольких продуктов вы можете применять массовые действия. Чтобы дублировать продукт, в разделе продукта найдите продукт и нажмите кнопку «Дублировать».
- Это супер удобно, если у вас есть много похожих товаров для продажи!
- Вы также можете добавить в закладки продукт, как показано.
- Нажмите значок «Звезда» в разделе «Продукты».
В Google Chrome можно кликнуть правой кнопкой мыши на элементе в режиме окна Developer Tools для проверки разных состояний элемента. Так вы увидите все состояния элементов без необходимости выискивать их в файле таблицы стилей.
Чтобы отредактировать или просмотреть один заказ, нажмите кнопку «Изменить» под номером заказа. Вы можете легко обновить статус одностраничного порядка страниц и выполнить другие задачи, включая изменение заказанного товара, цены, налоги и т.п. Если вам нужно отредактировать купон, нажмите на его имя и внесите необходимые изменения. В разделе «Отчеты» вы можете увидеть успех своего магазина. Вы можете увидеть несколько купленных товаров, валовые продажи, среднесуточные продажи и другие статистические данные.
Выберите подходящий диапазон дат, для которого вы хотите создать отчет: в прошлом месяце, в этом месяце, за последние 7 дней или в любой пользовательской продолжительности, и нажмите «Перейти», чтобы сгенерировать отчет. На странице «Настройки» вы можете изменить основные параметры магазина. Теперь давайте рассмотрим доступные руководства и краткий обзор того, что можно изменить здесь. Вы также можете включить возможность получения уведомлений по электронной почте, когда продукт отсутствует.
Отключаем родную таблицу стилей и начинаем с нуля
Отключить таблицу стилей, предлагаемую по умолчанию, можно добавлением короткой строки в файле functions.php :
Define("WOOCOMMERCE_USE_CSS", false);
Самый простой и быстрый способ создания всех классов - скопировать их из существующего оригинального файла WooCommerce CSS в новый, а затем внести там все необходимые правки и изменения.
Как удалить доставку со страницы корзины
Настройте способы загрузки файлов и ограничения доступа, если вы продаете загрузки на вкладке «Загружаемые товары». Вам понравится этот раздел, если вы продадите свои товары по всему миру. В судоходстве вы можете добавить зоны доставки, способы доставки и тарифы. Вы даже можете установить другую стоимость доставки в разных местах!
На этой вкладке вы можете изменить настройки платежа и добавить новые способы оплаты. В этом разделе также можно настроить веб-камеры. Вкладка «Журналы» извлекает файл журнала с полезной информацией для отладки или устранения неполадок. В то время как большинство расширений платят, они стоят каждого пенни! Если у вас есть какие-либо вопросы или идеи об этом тутонике, оставьте комментарий!
Включаем поддержку WooCommerce в своей теме
Это в особенности важно, если вы планируете продавать готовые темы или предоставлять их в качестве открытого релиза для других пользователей.
Если не указать поддержку WooCommerce в вашей теме, пользователи будут сталкиваться с ошибкой при установке на WooCommerce. К счастью, решить эту проблему поможет маленький фрагмент кода, добавленный в файл functions.php :
Зарабатывание денег в Интернете с помощью виртуального магазина - мечта многих людей. Работа из дома или где-либо в мире - это нечто возможное, и более того, это реальность многих цифровых предпринимателей. В Интернете вы можете продать все - одежду, обувь, игрушки, музыку, технологии и даже искусство.
Необходимость работать с большей гибкостью и свободой является одним из больших факторов для огромного роста бизнеса, разработанного исключительно в Интернете. Виртуальные магазины - большая часть того, что вы можете сделать, чтобы зарабатывать деньги сегодня.
Add_theme_support("woocommerce");
Редактируем шаблоны
Редактирование CSS в WooCommerce может отнять немало времени. Но есть способ сделать эту рутинную долгую работу не такой скучной.
Плагин WooCommerce поставляется с набором шаблонов front-end на HTML, равно как с набором шаблонов для писем. Вместо прямого редактирования всех этих файлов в плагине (не очень хорошая идея, потому что любое обновление плагина приведет к тому, что все ваши изменения будут удалены), вы можете скопировать их в свою настраиваемую тему:
Помните, что выбор хорошего может иметь большое значение между «магазином» и «магазином». Вскоре мы загрузим его, чтобы мы могли установить и настроить. С переводом на экран вы увидите следующее сообщение. С переводом сделанные уведомления об установке страниц и настройках вашего магазина будут на португальском языке.
Первый шаг выполняется на странице установки. Здесь мастер создаст ответственные и необходимые страницы для и Моя учетная запись. Теперь вы настроите настройки местоположения магазина. Необходимо, чтобы вы указали базовую страну своего магазина, какая валюта будет использоваться, единица веса и единица измерения, используемые для размеров продукта.
- В папке с темой создаем вложенную папку с названием "woocommerce ".
- Переходим в папку с плагином WooCommerce и открываем папку "templates ". Здесь много вложенных папок, в которых хранятся шаблоны, используемые в WooCommerce. К счастью, структура здесь сравнительно простая и визуально понятная.
- В новой папке "woocommerce " поместим все файлы шаблонов, скопированные из первоисточника, которые мы хотим отредактировать. Не забудьте сохранить ту же структуру папок, что и в первоисточнике. Не забудьте переименовать связанные папки, если вносите в названиях какие-то изменения.
- После редактирования всех необходимых файлов и папок сохраняем изменения в папке "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
Места сбыта - вы можете продать все страны или только в определенные страны. Если вы хотите продать в 1 или более конкретных странах, появится новая текстовая область, и вы должны ввести и выбрать из списка стран, которые будут отображаться. Места доставки. Здесь вы узнаете, будет ли ваш магазин выполнять доставку продуктов только в те места, где вы настроены как места продажи, в разных местах и даже если вы хотите отключить доставку и, конечно, расчёт доставки.
Шаблон расположения клиентов. Вы хотите установить местоположение по умолчанию для своих клиентов? Если эта опция подходит для вашего типа бизнеса и виртуального магазина, выберите нужный вариант. Если нет, оставьте это как «Нет местоположения по умолчанию».
Теперь все сделанные изменения будут переписывать настройки, заданные по умолчанию.
WooCommerce и циклы
Если вы ранее создавали или редактировали темы для WordPress, тогда вам знакомо понятие цикл (The Loop). У WooCommerce есть свои циклы для настроек своих внутренних страниц. Например, вы можете их применять, если надо вывести другую боковую панель для страниц WooCommerce.
Включить налоги - установите этот флажок, если вы хотите включить расчет налогов и налогов. Уведомление о магазине. Если вы настраиваете свой магазин, но все равно будете тестировать, включите отображение текстов уведомлений, уведомляющих потенциальных клиентов. Это может избавиться от основных головных болей для покупок, сделанных в то время, когда ваш магазин все еще находится под тестом.
Валюта. В этом варианте вы должны указать, какую валюту будет использовать ваш магазин для продажи ваших товаров. Даже если вы продаете в другие страны, здесь вы должны выбрать только одну монету. Позиция валюты - выберите, как вы хотите, чтобы символ валюты отображался в начале или в конце; с пространством или без пространства.
Базовая интеграция и создание настраиваемого шаблона WooCommerce предусматривает применение этого шаблона ко всем страницам, включая категории продуктов, сами продукты и архивные страницы. Если вы не хотите вносить изменения в стандартный шаблон, то можете не создать настраиваемый шаблон для WooCommerce.
Создание шаблона происходит в несколько шагов:
Если вы используете монету, требующую разных спецификаций, можете свободно менять. После того, как вы внесете все настройки для вкладки «Общие», нажмите кнопку «Сохранить изменения», а затем перейдите к следующей вкладке. На вкладке «Продукты» вы найдете 4 области: «Общие», «Экран», «Инвентаризация» и «Загружаемые продукты».
В целом вы настроите информацию об измерении и оценке. Настройка части мер очень важна для виртуальных магазинов, которые будут отправлять продукты для доставки через почтовое отделение. Так что, если это ваш случай, пожалуйста, сообщите единица веса и измерения, которые вы хотите использовать. Область Оценки должна быть настроена только в том случае, если вы хотите работать с рейтинговой системой своих клиентов, где у них есть мнения о продуктах, и другие клиенты могут видеть такое мнение.
- Делаем дубликат файла темы page.php и переименовываем его в woocommerce.php
- Находим цикл WordPress в файле woocommerce.php . Он выглядит примерно так:
- Заменяем ваш цикл на цикл WooCommerce:
- Теперь можно делать любые желаемые изменения.
Заключение
Теперь вы знаете основы работы с подключением и настройкой тем для торговой платформы WooCommerce на WordPress.
Сохраните изменения, чтобы ничего не потерялось. В Диске можно настроить базовые страницы вашего магазина, выбрать, что должно произойти, когда клиент нажимает кнопку «добавить в корзину» и задает параметры и параметры для изображений продукта. В следующих вариантах вы должны выбрать, что будет отображаться на странице вашего магазина и категории по умолчанию: Показать продукты, Показать категории или Показать оба. Затем выберите, как вы хотите, чтобы стандартный заказ товаров из вашего магазина.
В разделе Действия по добавлению продукта в корзину вы должны выбрать, что произойдет, когда клиент нажимает кнопку, чтобы купить продукт - если вы хотите, чтобы он был перенаправлен на страницу корзины, установите флажок. В разделе «Изображения продукта» вы должны ввести размеры изображений продукта в каталоге, странице продукта и размере уменьшенного изображения изображения продукта. В случае продуктов с более чем одним изображением интересно оставить включенным в Галерее изображений изображений эффект «Лайтбокс».
Навыков, приобретенных в результате прочтения данной статьи, хватит для большинства случаев работы с WooCommerce. Если вам надо больше примеров гибкой кастомизации, почитайте о фильтрах, надстройках кода и условных переменных для 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 и модификации соответствующей страницы на сайте, пишите в комментариях.