Настройка страницы оформления заказа woocommerce: 2 способа редактирвоания полей оформления заказа в WooCommerce — Маркетинг на vc.ru

Как создать шаблон страницы оформления заказа WooCommerce с Divi

Создание страницы оформления заказа WooCommerce обычно влечет за собой существенную настройку файла шаблона PHP в серверной части и значительное количество настраиваемого CSS. Однако эта процедура стала интересной и простой из-за модулей Divi Woo! Когда вы используете Divi для обновления страницы оформления заказа WC, шорткод WC преобразуется в структурированный макет динамических модулей оформления заказа Woo, которые готовы к визуальному оформлению с использованием сложных встроенных параметров дизайна. Это дает вам полный контроль над дизайном страницы оформления заказа.

Это руководство научит вас использовать Divi для создания совершенно уникальной страницы оформления заказа WooCommerce. Сначала мы создадим страницу оформления заказа WooCommerce, используя динамические модули Woo, доступные для страницы оформления заказа. Затем, когда вы закончите, мы покажем вам, как применить дизайн страницы оформления заказа к шаблону страницы оформления заказа в построителе тем. Итак, хотите ли вы изменить саму страницу оформления заказа или разработать шаблон страницы оформления заказа, Divi поможет вам. Вы сможете быстро создать визуально привлекательные страницы оформления заказа.

Предварительный просмотр дизайна

Таким будет наш дизайн.

WooCommerce Chceck Out Page и Divi

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

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

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

Модули Woo для создания страницы оформления заказа в Divi

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

Следующие модули необходимы для создания страницы или шаблона оформления заказа:

Заголовок сообщения: При создании шаблона страницы оформления заказа он будет динамически отображать заголовок страницы оформления заказа.

Уведомление Woo: Этот модуль можно назначить для многих типов страниц (корзина, продукт и оформление заказа). Он будет динамически отображать важные уведомления для пользователя по мере необходимости.

Woo Checkout Billing: Этот модуль отображает форму платежных данных, которая используется в процессе оформления заказа .

Woo Checkout Shipping: Â Этот модуль отображает форму сведений о доставке, которая появляется в процессе оформления заказа .

Woo Checkout Information: Этот модуль показывает форму дополнительной информации, которая используется в процессе оформления заказа .

Woo Checkout Details: Этот модуль отображает детали заказа во время оформления заказа, включая приобретаемые продукты и их цены.

Woo Checkout Payment: Этот модуль отображает выбор типа платежа и детали платежной формы во время оформления заказа.

Другой вариант модуля woo:

Woo Breadcrumbs: Отображается панель навигации WooCommerce Breadcrumb.

Создайте страницу оформления заказа или шаблон

Как было сказано ранее, мы можем легко создать настраиваемую страницу оформления заказа WooCommerce с помощью модулей Divi Woo. Однако вы можете использовать тот же процесс разработки для создания настраиваемого шаблона Checkout. В этом руководстве будет создан собственный макет страницы оформления заказа для страницы оформления заказа. Затем, используя конструктор тем Divi, мы покажем вам, как использовать настраиваемый макет страницы оформления заказа для создания шаблона страницы оформления заказа.

Использование Divi для создания макета страницы оформления заказа WooCommerce

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

Редактирование страницы оформления заказа WooCommerce

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

Щелкните параметр «Использовать Divi Builder» в верхней части редактора страницы.

Выберите редактировать с помощью конструктора Divi.

Начинать с нуля

Как указывалось ранее, страница загрузится со всеми настраиваемыми модулями Divi (включая важнейшие модули Woo), которые составляют содержимое страницы оформления заказа. Конечно, если хотите, вы можете использовать существующий макет и начать менять уже существующие модули. Но в этом руководстве мы начнем с нуля.

Войдите в меню параметров внизу страницы и выберите ДА для кнопки «Очистить макет» (значок корзины), чтобы очистить макет.

Фон раздела

Для начала добавьте цвет фона в новый регулярный раздел следующим образом:

• Цвет фона: # 264653

Строка и столбец

Следующим шагом будет добавление в этот раздел строки из одного столбца.

Создание заголовка страницы динамического оформления заказа

Чтобы сделать заголовок страницы динамическим для страницы оформления заказа, добавьте в столбец модуль заголовка сообщения.

Содержание заголовка сообщения

В настройках заголовка сообщения обновите элементы, чтобы отображался только заголовок, как показано ниже:

• Название шоу: ДА
• Показать мета: НЕТ
• Показать избранное изображение: НЕТ

Текст заголовка сообщения

Чтобы стилизовать текст заголовка сообщения, обновите следующее на вкладке дизайна:

• Шрифт заголовка: DM Serif Display
• Цвет текста заголовка: # e9c46a
• Размер текста заголовка: 80 пикселей (рабочий стол), 60 пикселей (планшет), 42 пикселей (телефон)
• Высота строки заголовка: 1,2 м

Модуль динамических уведомлений Woo

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

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

Тип страницы уведомления Woo и фон

Затем обновите тип страницы и цвет фона уведомления Woo следующим образом:

• Тип страницы: страница оформления заказа
• Цвет фона: # 2a9d8f

Текст заголовка

На вкладке дизайна обновите следующие настройки.

• Шрифт заголовка: Roboto
• Плотность шрифта заголовка: средний
• Цвет текста заголовка: # e9c46a
• Размер текста заголовка: 14 пикселей
• Высота строки заголовка: 1,8 м
• Цвет текста ссылки: # f4a261

Поля уведомлений Woo

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

• Цвет индикатора обязательного поля: # e9c46a
• Шрифт метки поля: Roboto
• Толщина шрифта метки поля: полужирный
• Цвет заполнителя: # e9c46a
• Цвет фона полей: прозрачный
• Цвет текста полей: # e9c46a
• Цвет текста в фокусе полей: # e9c46a
• Отступы полей: 12 пикселей сверху, 12 пикселей снизу.
• Ширина границы поля: 1px
• Цвет границы полей: rgba (255,255,255,0,32)

Кнопка уведомления Woo

Пришло время настроить кнопки.

1. Использовать собственные стили для кнопки: ДА
2. Размер текста кнопки: 14 пикселей
3. Цвет текста кнопки: # e9c46a
4. Цвет фона кнопки: # 2a9d8f
5. Ширина границы кнопки: 1 пиксель
6. Цвет границы кнопки: # e9c46a
7. Радиус границы кнопки: 0 пикселей
8. Расстояние между буквами кнопки: 1 пиксель
9. Шрифт кнопки: Roboto
10. Толщина шрифта кнопок: полужирный
11. Стиль шрифта кнопки: TT
12. Отступ кнопок: 12 пикселей сверху, 12 пикселей снизу, 24 пикселей слева, 24 пикселей справа

Форма уведомления Woo

В группе опций «Форма» можно задать стиль для каждой формы уведомления. Обновите следующее, чтобы придать формам светлую границу:

1. Закругленные углы формы: 0 пикселей
2. Ширина границы формы: 1px
3. Цвет границы формы: rgba (255,255,255,0. 32)

Woo Уведомление Box Shadow

Чтобы добавить дизайн в виде верхней границы в панель уведомлений woo, обновите параметры тени, как показано ниже:

1. Box Shadow: см. Снимок экрана
2. Горизонтальное положение тени блока: 0 пикселей
3. Вертикальное положение тени блока: 3 пикселя
4. Цвет тени: # 999e75

Платежный модуль Woo Checkout

Теперь, когда у нас есть заголовок страницы и уведомления, мы можем добавить контент Woo Checkout Billing, который является еще одним важным компонентом страницы оформления заказа.

Создайте новую строку с расположением столбцов 3/5/2/5 перед добавлением материалов для выставления счетов.

Добавьте модуль биллинга Woo Checkout в столбец 1.

Текст заголовка биллинга Woo Checkout

В модуле выставления счетов Woo Checkout откройте настройки и настройте следующие параметры на вкладке дизайна.

• Шрифт заголовка: DM Serif Display
• Цвет текста заголовка: #fff
• Размер текста заголовка: 30 пикселей (рабочий стол), 24 пикселей (планшет), 18 пикселей (телефон)
• Высота строки заголовка: 1,4 мкм

Платежное поле Woo Checkout и ярлыки полей

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

Вот как это сделать:

1. Откройте настройки модуля уведомлений вверху страницы.
2. На вкладке «Дизайн» щелкните правой кнопкой мыши группу параметров «Ярлыки полей».
3. В контекстном меню выберите «Копировать стили меток полей».

Вставьте скопированный стиль во вновь добавленный модуль.

И это будет выглядеть примерно так.

Уведомление о платежной форме Woo Checkout

Уведомление формы отвечает за динамическое отображение любых уведомлений или ошибок при заполнении формы. Чтобы оформить уведомление в форме, перейдите к настройкам выставления счетов Woo Checkout и внесите следующие изменения:

• Цвет фона уведомления о форме: # e58991
• Отступ для уведомления о форме: 8 пикселей сверху, 8 пикселей снизу
• Шрифт уведомления о форме: Roboto
• Размер текста уведомления о форме: 14 пикселей

Интервал и граница выставления счетов Woo Checkout

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

• Отступ: 16 пикселей сверху, 16 пикселей снизу, 16 пикселей слева, 16 пикселей справа
• Ширина границы: 1 пикс.
• Цвет границы: rgba (255,255,255,0.1)

Woo Checkout Информация о доставке и Woo Checkout

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

Добавление модулей

Теперь идите и добавьте модуль доставки Woo checkout.

Также добавьте информационный модуль Woo Checkout.

Каждый модуль woo (информация о доставке и оформлении заказа) должен выглядеть как модуль биллинга Woo Checkout. Мы можем копировать стили, которые нам нужны для каждого из них, в каждый из них. Скопируем и вставим сюда дизайн.

Модуль сведений о проверке Woo

Теперь, когда мы разработали контент для доставки и дополнительную информацию, мы готовы добавить контент Woo Checkout Details. Это еще один важный компонент страницы оформления заказа, на которой отображаются сведения о заказе на покупку. Он содержит список продуктов, промежуточные итоги и общую стоимость покупки. Он также показывает все использованные купоны, которые можно отозвать по ссылке.

Добавьте новый модуль Woo Checkout Details к деталям оформления заказа в столбце 2 той же строки.

Woo Checkout Details Текст заголовка

Обновите настройки текста заголовка следующим образом:

• Шрифт заголовка: DM Serif Display
• Толщина шрифта заголовка: полужирный
• Цвет текста заголовка: # e9c46a
• Размер текста заголовка: 24 пикселя (рабочий стол), 22 пикселя (планшет), 18 пикселей (телефон)
• Высота строки заголовка: 1,4 мкм

Ярлык столбца с подробностями оформления заказа Woo

Давайте стилизуем метки столбцов:

• Шрифт метки столбца: Roboto
• Толщина шрифта метки столбца: полужирный
• Цвет текста метки столбца: # ddb17c

Текст сообщения Woo Checkout Details

Чтобы стилизовать основной текст, нацеленный на элементы в каждом столбце списка, обновите следующее:

• Шрифт текста: Roboto
• Цвет основного текста: #fff

На вкладке ссылки обновите цвет текста ссылки:

• Цвет текста ссылки: # e0816b

Граница таблицы деталей оформления заказа Woo

Для этого дизайна мы собираемся полностью убрать границу таблицы. Для этого обновите следующее:

• Ширина границы таблицы: 0 пикселей

Ячейка таблицы деталей оформления заказа Woo

Чтобы стилизовать ячейки таблицы в таблице, обновите следующее:

• Отступ ячейки таблицы: 0 пикселей слева
• Стиль границы ячейки таблицы: нет

Woo Checkout Details Padding and Border

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

• Отступ: 16 пикселей сверху, 16 пикселей снизу, 16 пикселей слева, 16 пикселей справа
• Ширина границы: 1 пикс.
• Цвет границы: rgba (255,255,255,0.1)

Платежный модуль Woo Checkout

Мы готовы добавить контент Woo Checkout Details сейчас, когда мы создали контент для доставки и дополнительную информацию. Это еще одна важная часть страницы оформления заказа, на которой отображаются сведения о заказе на покупку. Он включает в себя список продуктов, промежуточные итоги и окончательную закупочную цену. Он также отображает все использованные купоны, которые можно отозвать, щелкнув ссылку.

Добавьте новый модуль Woo Checkout Details к деталям оформления заказа в столбце 2 той же строки.

Сделайте следующие настройки.

• Цвет фона уведомления о форме: # E58991
• Шрифт уведомления о форме: Roboto
• Толщина шрифта уведомления о форме: полужирный
• Размер шрифта уведомления о форме: 16 пикселей
• Настройка кнопок: как и раньше
• Интервал: 0 пикселей (сверху, снизу, слева, справа)

Конечный результат

Вот как выглядит наша последняя страница оформления заказа.

Заключение

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

WooCommerce: оформление заказа, доставка и настройки аккаунта

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

• Общая
• Товары
• налог

Во второй части вы проработаете остальные настройки, а именно:

• Проверять, выписываться
• Перевозка
• Счета
• Сообщения электронной почты

Как только вы это сделаете, вы будете готовы начать добавлять товары в свой интернет-магазин!

Для завершения этого урока вам понадобится следующее:

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

Вы уже настроили свои настройки для продуктов и налогов, а также общие настройки. Далее перейдите к настройкам оформления заказа.

Настройки оформления заказа

Откройте вкладку Checkout, чтобы увидеть экран Checkout Options :

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

Прокрутите вниз, чтобы редактировать конечные точки оформления заказа и шлюзы:

Здесь вы можете отредактировать страницы ваших конечных точек для процесса оформления заказа и выбрать, какие платежные шлюзы будет использовать ваш магазин. Я использую конечные точки по умолчанию и просто выбираю Paypal для своего платежного шлюза — вы можете выбрать столько, сколько вам нужно.

Нажмите « Сохранить изменения», чтобы сохранить настройки, а затем перейдите на экраны для ваших платежных шлюзов.

Настройки платежного шлюза

WooCommerce предоставляет экран для каждого платежного шлюза: очевидно, вам нужно работать только с теми, которые вы используете в своем магазине. Я использую PayPal, поэтому я буду работать с этим экраном:

По умолчанию флажок «Включить / Отключить» установлен, так как в бесплатной версии WooCommerce ваши посетители должны будут покинуть ваш сайт и перейти на сайт PayPal, чтобы произвести оплату, прежде чем они будут автоматически перенаправлены обратно. Если вы хотите использовать Paypal для приема платежей на своем сайте, вам нужно будет использовать расширенное дополнение PayPal Advanced для WooCommerce.

Введите адрес электронной почты для своей учетной записи PayPal и идентификационный токен, если он у вас есть. Я придерживаюсь настроек по умолчанию для остальных настроек. Затем прокрутите вниз, чтобы завершить настройки PayPal:

Последние два варианта здесь полезны, если вы тестируете свой сайт. Опция песочницы PayPal позволяет вам совершать платежи, не переходя из рук в руки: чтобы использовать его, вам нужно создать учетную запись разработчика в PayPal . Параметр « Отладочный журнал» позволяет вам создавать журнал всех транзакций Paypal, чтобы помочь отладить любые проблемы, и может быть полезен, если у вас возникают проблемы при тестировании вашего сайта.

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

Настройки доставки

WooCommerce предоставляет вам широкий выбор вариантов доставки, что означает, что вы можете взимать плату за доставку по фиксированной ставке или в зависимости от отправляемых продуктов. Вы также можете взимать плату за доставку по весу или зоне, но для этого вам понадобится еще одно премиум-дополнение: Table Rate Shipping .

Начните с экрана параметров доставки :

Здесь вам необходимо определить способы доставки, которые будет использовать ваш магазин. Вы можете нажать кнопку « Настройки» рядом с каждым из них, чтобы настроить его, или воспользоваться ссылками в верхней части экрана, но сначала сохраните изменения.

Я выбрал фиксированную ставку в качестве способа доставки по умолчанию. Это не означает, что вы должны просто брать одну ставку за весь заказ, как вы увидите на следующем экране.

Настройки доставки — фиксированная ставка

На экране « Единая ставка» я могу настроить, как будет работать доставка моей единой ставки:

Вот что вы можете редактировать:

• Название вашего тарифа доставки
• К каким странам это относится: я выбираю Все разрешенные страны, так как в любом случае отправляю только в одну страну.
• Налоговый статус: это будет зависеть от того, облагается ли доставка налогом в вашей стране или штате.
• Стоимость за заказ.
• Любые дополнительные цены для этого класса доставки. Это дополнительные сборы сверх вашей фиксированной стоимости доставки, например, доставка на следующий день.
• Дополнительные расходы, которые вы можете указать в соответствии с заказом, за деталь или за класс доставки. Так, например, если вы хотите рассчитать все ваши расходы по доставке за единицу, вы должны определить стоимость за заказ как ноль, а затем добавить дополнительную стоимость за единицу.

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

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

Бесплатная доставка

В моем магазине я разрешу бесплатную доставку заказов на определенную сумму, чтобы побудить людей тратить больше денег! Поэтому мне нужно настроить мои параметры на экране « Бесплатная доставка» :

Здесь я просто выбираю минимальную сумму заказа в раскрывающемся списке Бесплатная доставка , определяю минимальную сумму заказа и нажимаю Сохранить изменения .

Настройки аккаунтов

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

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

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

После настройки экрана «Учетные записи» нажмите « Сохранить изменения», чтобы сохранить настройки.

Настройки электронной почты

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

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

После внесения необходимых изменений нажмите « Сохранить изменения» и перейдите к настройке каждого электронного письма, которое отправляет WooCommerce. Эти:

• Новый заказ : электронное письмо, отправленное вам при размещении заказа
• Обработка заказа : электронное письмо, отправленное клиенту после получения оплаты, чтобы сообщить им, что вы обрабатываете заказ
• Завершенный заказ : электронное письмо, отправленное клиенту, когда заказ помечен как выполненный вами — обычно, когда вы отправили заказ
• Счет клиента : электронное письмо, выставляющее счет клиенту для оплаты, если вы не принимаете его через свой магазин
• Примечание клиента : электронное письмо, отправленное клиенту, когда вы добавляете примечание к его заказу, например, если есть задержка
• Сбросить пароль : электронное письмо, отправленное клиентам, запрашивающим сброс пароля
• Новая учетная запись : приветственное письмо, отправленное клиентам, создающим новую учетную запись.

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

Давайте посмотрим на экран « Новые заказы » в качестве примера:

Этот экран похож на другие и дает вам следующие возможности:

• Включить / отключить электронную почту
• Определите, кто будет получателем (недоступно для писем, отправляемых клиентам)
• Определите строку темы и заголовок письма
• Выберите, будет ли электронное письмо отправлено в виде HTML или обычного текста.
• Когда закончите, нажмите « Сохранить изменения» и повторите процедуру для каждого типа электронной почты.

Стоит взглянуть на другие экраны, доступные вам в меню WooCommerce , кроме вкладок « Настройки» . Эти:

• Заказы : как только ваш магазин будет запущен, используйте этот раздел для отслеживания, обработки, выполнения и добавления заметок к вашим заказам.
• Отчеты : генерировать отчеты о продажах и клиентах
• Состояние системы : доступ к отчету о состоянии вашего магазина
• Дополнения : Загрузите и активируйте премиум-дополнения для WooCommerce.

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

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

WooCommerce One Page Checkout — WooCommerce

Рейтинг 3,67 из 5 на основе 3 оценок покупателей

(3 отзыва покупателей)

1 из 10 человек, отказывающихся от своей корзины, делают это из-за того, что процесс оформления заказа слишком долгий ^* . Сократите количество отказов от корзины, предложив весь процесс покупки на одной странице с помощью WooCommerce One Page Checkout.

^* На основе опроса 1200 онлайн-покупателей, проведенного Webcredible.

---

Функции оформления заказа на одной странице

One Page Checkout позволяет превратить любую страницу в страницу оформления заказа. Это также упрощает для ваших клиентов процесс совершения покупок на этих настраиваемых страницах оформления заказа, поскольку на одной странице отображаются как выбор продукта, так и формы оформления заказа.

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

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

Product Selection + Checkout

One Page Checkout отображает формы выбора продукта и оформления заказа на одной странице. Покупатели могут добавлять товары в заказ (или удалять их) и совершать оплату, не покидая страницу.

Пользовательские целевые страницы

Создавайте уникальные целевые страницы для специальных мероприятий, рекламных акций или избранных клиентов. Добавьте шорткод на любую страницу (или публикацию) и добавьте свой контент над шорткодом, чтобы отобразить уникальную продающую копию перед процессом покупки.

Поддержка типов продуктов

One Page Checkout интегрируется с более чем дюжиной расширений, поэтому вы можете продавать подписки, бронирования, пакеты и многие другие уникальные типы продуктов.

Простая установка без кода

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

Рекомендуемые продукты

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

Встроенные и настраиваемые шаблоны

One Page Checkout включает несколько встроенных шаблонов, в том числе простую таблицу цен и список продуктов. Выберите шаблон, наиболее подходящий для вашей страницы, или, если встроенные шаблоны не соответствуют вашим потребностям, создайте собственный шаблон.

Продавайте больше с упрощенной кассой

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

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

С чего начать

1. Купить это расширение 🙂
2. Загрузите, установите и активируйте плагин в своем магазине WooCommerce
3. Создайте свою первую кассу на одной странице и запустите ее
4. Ознакомьтесь с нашей подробной документацией, которая поможет вам настроить страницы оформления заказа
5. Устройтесь поудобнее и получайте больше дохода!

Отзывы покупателей

Надстройки WooCommerce Checkout — WooCommerce

Рейтинг 5.00 из 5 на основе 7 оценок покупателей

(7 отзывов покупателей)

Предлагайте бесплатные или платные дополнения и услуги на кассе

Основной процесс оформления заказа WooCommerce охватывает все основы, необходимые для размещения заказа, но что, если вы хотите принять советы, предложить подарочную упаковку или позволить покупателям добавить подарочное сообщение к своему заказу? Вот где Добавлены надстройки WooCommerce Checkout ! С надстройками Checkout вы можете добавлять бесплатные или платные опции на страницу оформления заказа . Вы можете добавить несколько различных типов полей в зависимости от типа надстройки — текстовые поля, переключатели, загрузка файлов и многое другое!

Вот лишь несколько способов улучшить процесс оформления заказа с помощью надстроек Checkout:

• Принимать подсказки по заказу, используя процентную комиссию
• Предлагайте дополнительные услуги или бесплатные услуги, такие как страхование доставки, фирменные наклейки/сувениры или срочное обслуживание
• Добавить параметры подарка, такие как сообщения, варианты подарочной упаковки и подарочные квитанции

Настройка надстроек Checkout Надстройки отображаются на кассе

Что я могу делать с надстройками Checkout?

Checkout Add-On предлагает множество функций, позволяющих настроить процесс оформления заказа:

• Создайте множество типов настраиваемых полей для различных целей — текст, текстовая область, раскрывающиеся списки (т. е. поля выбора), множественный выбор, переключатели, флажки, списки с несколькими флажками и загрузка файлов.0065
• Добавить поля параметров для дополнительных услуг и дополнительных продаж (не поддерживает управление запасами)
• Необязательно Добавьте фиксированную сумму или процентную стоимость В зависимости от того, как клиенты взаимодействуют с полем
• Создание условных надстроек , которые появляются или изменяются в зависимости от таких факторов, как промежуточная сумма корзины, товары в корзине или стоимость другой надстройки
• Динамическое обновление сведений о заказе и общей суммы при оформлении заказа по мере выбора или изменения параметров
• Поддерживает подписки WooCommerce путем добавления надстроек к первоначальной покупке и, при необходимости, к заказам на продление
• Совместимость с One Page Checkout
• Клиенты могут просматривать выбранные надстройки на страницах сведений о заказе и в сообщениях электронной почты
• Администраторы могут сортировать и фильтровать страницу WooCommerce > Заказы на основе надстроек и их значений
• Сохраняет выбранные параметры и загружает , даже если клиенты уходят из кассы

С чего начать

1. Купить это расширение 🙂
2. Загрузите и установите в свой магазин WooCommerce
3. Создайте несколько полей заказа в разделе WooCommerce > Надстройки Checkout
4. Вот оно! Устройтесь поудобнее и наслаждайтесь новыми блестящими полями оформления заказа!

Если вам нужно добавить сборы или надстройки только при покупке определенного продукта, мы рекомендуем расширение «Дополнения к продукту».