3 эффективных способа настроить и отредактировать страницу оформления заказа WooCommerce

Ищете лучший способ редактировать страницу оформления заказа WooCommerce ?

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

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

Мы также рассмотрим все встроенные функции, которые WooCommerce предлагает для настройки процесса оформления заказа.

Давайте начнем…

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

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

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

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

Как отредактировать страницу оформления заказа WooCommerce

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

Ниже мы рассмотрим три лучших метода:

1. Собственные настройки WooCommerce. WooCommerce включает в себя множество встроенных опций для настройки оформления заказа, которые мы подробно рассмотрим в первом методе. Ваша тема также может предлагать свои собственные параметры для настройки дизайна страницы оформления заказа.
2. Elementor Pro — теперь Elementor Pro предлагает собственный виджет оформления заказа, который позволяет полностью настроить дизайн страницы оформления заказа. Это отличный вариант, если вы специально хотите отредактировать дизайн страницы.
3. Редактор полей оформления заказа — это отличный вариант, если вы хотите редактировать поля формы, которые отображаются на странице оформления заказа. Вы можете использовать его для добавления новых полей, удаления полей по умолчанию и изменения порядка всего по мере необходимости.

Пройдемся по ним..

Способ 1: используйте настройки оформления заказа WooCommerce по умолчанию

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

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

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

Шаг 1. Добавьте налоговые расчеты и поле купона при оформлении заказа.

WooCommerce имеет встроенные настройки для автоматизации расчета налогов и приема купонов при оформлении заказа.

Чтобы включить или выключить, перейдите в WooCommerce > Настройки в WordPress.

Выберите вкладку « Общие » и прокрутите вниз до раздела « Включить налоги ». Установите флажок, чтобы включить налоговые ставки и расчеты во время оформления заказа. Это генерирует и отображает налоговые сборы на основе ставок, которые вы настраиваете в WooCommerce ( WooCommerce > Настройки > Налоги > Стандартные ставки ).

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

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

Шаг 2. Отображение цен на товары с налогами или без них

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

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

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

Прокрутите страницу вниз, чтобы найти поле «Отображать цены во время корзины и оформления заказа».

Выберите из выпадающего списка:

• В том числе налог
• За исключением налога на

Щелкните Сохранить изменения .

Шаг 3. Укажите, какие позиции доставки будут отображаться при оформлении заказа.

Кроме того, в разделе WooCommerce > Настройки вы можете отметить, какая зона доставки, методы и расчеты отображаются в оформлении заказа WooCommerce.

Просто перейдите на вкладку « Доставка » и настройте:

• Расчеты: включить калькулятор доставки на странице корзины
• Расчеты: чтобы скрыть стоимость доставки в кассе, пока адрес не будет вставлен
• Место доставки: установить адреса доставки по умолчанию при оформлении заказа.

Щелкните Сохранить изменения .

Шаг 4. Управляйте учетными записями и конфиденциальностью при оформлении заказа

Оставаясь в WooCommerce > Settings , перейдите на вкладку Accounts & Privacy .

В верхней части страницы вы увидите два поля:

• Гостевая проверка: включить/удалить гостевые проверки и входы в существующую учетную запись.
• Создание учетной записи: разрешите клиентам создать учетную запись или начать подписку во время оформления заказа.

Перейдите вниз по странице « Учетные записи и конфиденциальность », чтобы найти область « Политика конфиденциальности» .

Заполните текстовое поле « Политика конфиденциальности при оформлении заказа» , чтобы клиенты видели политику при оформлении заказа. Оставьте поле пустым, если не хотите отображать политику конфиденциальности в этой области.

Шаг 5. Выберите фактическую страницу оформления заказа и другие дополнительные настройки.

Перейдите на вкладку « Дополнительно », чтобы открыть раздел «Параметры страницы »; это побуждает продавцов сообщать WooCommerce, куда отправлять клиентов при оформлении заказа.

По умолчанию WooCommerce создает страницы « Корзина », « Оформить заказ », «Моя учетная запись » и « Условия и положения », которые вы можете найти, перейдя в « Страницы» > «Все страницы » в WordPress.

Однако у вас есть возможность создать совершенно новую страницу и связать ее здесь. Это переопределяет страницы оформления заказа по умолчанию и отправляет клиентов на настраиваемые страницы.

Другой вариант на вкладке « Дополнительно » — принудительная безопасная проверка , для которой требуется сертификат SSL.

Шаг 6. Измените оформление оформления заказа вашей темы в настройщике WordPress.

Темы WordPress с функциональностью WooCommerce часто устанавливают инструменты WordPress Customizer, чтобы легко настроить стиль оформления заказа.

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

Для начала перейдите в « Внешний вид» > «Настроить в WordPress».

Если доступно, ваша тема должна отображать кнопку WooCommerce где-то в настройщике WordPress. Нажмите на это.

Это всего лишь пример с темой Storefront (поэтому вы можете не увидеть то же самое), но темы довольно часто имеют вкладку Checkout в Customizer. Выберите это или что-то подобное, что может указывать на контроль над кассой.

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

• Поле названия компании
• Поле адресной строки 2
• Поле телефона

Также возможно выделить обязательные поля звездочкой.

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

Способ 2. Используйте конструктор страниц для редактирования полей оформления заказа WooCommerce и общего стиля.

Создатели страниц, такие как Elementor, Beaver Builder и Themify, предлагают виджеты контента WooCommerce, чтобы переопределить то, что в данный момент находится на странице оформления заказа WooCommerce.

Создатели страниц почти исключительно резервируют свои модули проверки WooCommerce для своих планов Premium, поэтому есть большая вероятность, что вам придется заплатить за эту функциональность. Например, вы получаете виджет Elementor Checkout с планом Pro.

Сказав это, конструктор страниц дает вам почти полный контроль над страницей оформления заказа, поэтому это простой способ редактировать оформление заказа WooCommerce без знаний программирования и всего за 50–100 долларов в год.

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

Шаг 1. Откройте указанную страницу оформления заказа в Elementor.

Чтобы отредактировать оформление заказа WooCommerce в Elementor, вы должны перейти на страницу оформления заказа , автоматически созданную WooCommerce. Найдите это в разделе «Страницы» > «Все страницы» .

Откройте страницу с надписью «Страница оформления заказа», затем нажмите « Редактировать с помощью Elementor ».

Шаг 2. Удалите шорткод оформления заказа WooCommerce.

WooCommerce автоматически добавила свой «WooCommerce checkout» в редактор, который отображает модуль оформления заказа WooCommerce по умолчанию.

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

Шаг 3. Вставьте виджет Elementor Checkout

Теперь пришло время найти виджет проверки конструктора страниц. Elementor предлагает один из них под названием Checkout , который вы можете найти с помощью панели поиска или просмотрев под заголовком WooCommerce. Нажмите и перетащите виджет Checkout на пустую страницу, где написано «Перетащите виджет сюда».

Примечание. Вы можете не увидеть виджет « Оплата », если вы не обновились до Премиум-версии Elementor. Это относится к большинству конструкторов страниц.

Шаг 4. Настройте содержимое, стиль и дополнительные функции

После перетаскивания виджета оформления заказа Elementor отображает предварительный просмотр оформления заказа. Затем вы можете нажать на эти вкладки слева, чтобы настроить каждый аспект оформления заказа:

Например, вы можете переключить общий макет на один столбец и настроить текст-заполнитель для поля имени.

Другие вкладки настройки включают в себя:

• Платежные реквизиты
• Дополнительная информация
• Твоя очередь
• Купон
• Оплата

Есть также бесконечные способы редактирования оформления заказа WooCommerce на вкладке « Стиль ».

Используйте эти вкладки:

• Разделы
• Типография
• Формы
• итог заказа
• Кнопка покупки

Например, мы заменили синюю кнопку « Купить » на зеленую.

Наконец, вкладка « Дополнительно » предлагает еще более мощные инструменты для редактирования:

• Макеты
• Эффекты движения
• Преобразования
• Фоны
• Границы
• Маски
• Ответная реакция
• Атрибуты
• Пользовательские CSS

Пока вы придерживаетесь страницы, ранее установленной как «Страница оформления заказа» для WooCommerce, и заменяете шорткод оформления заказа WooCommerce на виджет оформления заказа компоновщика страниц, вы можете сохранить изменения и завершить процесс!

Способ 3. Установите плагин настройщика для редактирования полей.

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

Большинство плагинов для оформления заказа WooCommerce предоставляют дополнительные инструменты настройки для изменения и добавления полей, но есть и такие, которые полностью обновляют дизайн, например плагин Multi-step Checkout.

Мы предлагаем вам изучить все рекомендуемые плагины выше, но мы рассмотрим краткое руководство с плагином Checkout Field Editor, чтобы помочь вам понять, как редактировать WooCommerce Checkout с помощью плагина.

Шаг 1. Установите и активируйте плагин Checkout Field Editor.

Установите подключаемый модуль Checkout Field Editor, затем выполните процесс активации подключаемого модуля.

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

Шаг 2. Отредактируйте текущие поля

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

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

• Платежные поля
• Поля доставки
• Дополнительные поля

Чтобы изменить поля оформления заказа WooCommerce, нажмите « Изменить » рядом с полем, которое вы хотите изменить. В этом примере мы изменим поле «Название компании» .

В окне « Редактировать поле » вы можете изменить параметры поля, например:

• Этикетка
• Заполнитель
• Значение по умолчанию
• Учебный класс
• Проверка

Также можно снять флажок « Обязательно », чтобы клиенты не были обязаны заполнять это поле. Вы также можете отключить поле, чтобы оно вообще не отображалось в кассе. Обязательно нажмите Сохранить и закрыть .

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

Как видите, мы удалили поле «Название компании» из области оформления заказа.

И это исчезло из оформления заказа.

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

В поле « Имя » в нашей кассе теперь отображается новый текст-заполнитель.

Шаг 3. Добавьте новое поле в кассу WooCommerce.

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

Выберите тип поля, выбрав один из вариантов, таких как:

• Текст
• Число
• Скрытый
• Пароль
• Телефон
• Флажок
• Месяц
• URL-адрес
• и многое другое

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

Убедитесь, что вы установили флажок « Включено », затем нажмите « Сохранить и закрыть ».

Шаг 4. Просмотрите результаты

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

И новое поле также появляется в модуле проверки внешнего интерфейса.

Создайте идеальную страницу оформления заказа сегодня

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

Каковы ваши основные вопросы о том, как редактировать оформление заказа WooCommerce? Поделитесь своими мыслями в комментариях!