Как сделать заказ WooCommerce как Shopify

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

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

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

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

Проверка WooCommerce против Shopify Проверка

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

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

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

Как сделать WooCommerce Checkout похожим на Shopify

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

Блоки WooCommerce

WooCommerce Blocks — это бесплатный плагин, разработанный Automattic. В нем есть много блоков Гутенберга, специально разработанных для WooCommerce, и один, предназначенный для оформления заказа.

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

Ключевая особенность

• Упрощенный блок оформления заказа
• Несколько вариантов блока продуктов
• Отзывы по категориям и товарным блокам
• Отличная поддержка

Цена

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

Кассатуалет

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

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

Ключевая особенность

• Несколько шаблонов страницы оформления заказа
• Полностью адаптивный дизайн
• Автозаполнение адреса
• Редактирование корзины

Цена

CheckoutWC — это плагин премиум-класса, стоимость которого начинается от 15 долларов США в месяц или 149 долларов США в год. Он также включает 30-дневную гарантию возврата денег, бесплатные обновления и поддержку одного сайта.

Создайте Shopify Checkout в WooCommerce с помощью плагина

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

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

1. Установите и активируйте блоки WooCommerce

Сначала установите и активируйте плагин. Для этого перейдите в « Плагины» > «Добавить новый» на панели инструментов WordPress и найдите плагин WooCommerce Blocks. Как только вы найдете его, установите его, нажав « Установить сейчас» .

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

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

Теперь все, что вам нужно сделать, это зайти в Pages на панели управления, найти страницу Checkout и нажать Edit .

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

Затем нажмите Удалить блок , чтобы удалить шорткод. Кроме того, вы можете щелкнуть блок, а затем нажать Ctrl+Alt+Z , как показано в ярлыке параметров.

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

Теперь у вас есть два варианта: оставить как есть или настроить. Давайте посмотрим, как его отредактировать.

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

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

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

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

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

В панели управления WordPress просто перейдите на страницу Pages , найдите страницу корзины и удалите стандартный шорткод страницы корзины WooCommerce. Затем добавьте новый блок корзины со страницей корзины и обновите ее.

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

Еще один способ сделать вашу кассу WooCommerce похожей на Shopify

Если вы считаете, что настраивать страницу оформления заказа путем ее редактирования слишком сложно, для вас есть другая альтернатива. Вы можете использовать CheckoutWC , плагин премиум-класса, чтобы ваша касса WooCommerce выглядела как Shopify.

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

Теперь давайте посмотрим на процесс создания кассы Shopify в WooCommerce с помощью CheckoutWC.

1. Установите и активируйте CheckoutWC

Во-первых, вам нужно активировать и установить плагин, чтобы начать его использовать. На панели инструментов выберите « Плагины» > «Добавить новый» и нажмите «Загрузить плагин ». Загрузите ZIP-файл, который вы загрузили во время покупки, и после завершения загрузки нажмите « Установить сейчас» .

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

2. Выберите шаблон оформления заказа

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

Просто перейдите в « Настройки»> «Оформить заказ для WooCommerce»> «Шаблоны» на панели инструментов WordPress, и вам будут представлены четыре варианта шаблона:

• Дефолт
• Футурист
• Копировать
• Стекло

Шаблон Copify больше всего похож на страницу оформления заказа Shopify, но остальные три также имеют некоторые элементы Shopify.

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

Вот и все! Теперь проверьте оформление заказа в интерфейсе, и вы увидите страницу оформления заказа Shopify в своем магазине WooCommerce .

Бонус: удаление полей оформления заказа WooCommerce

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

Допустим, вы не хотите делать оформление заказа в WooCommerce точно таким же, как Shopify, но все же хотите упростить страницу оформления заказа и скрыть некоторые ненужные поля. Поскольку это ускорит процесс оформления заказа, это поможет вам повысить коэффициент конверсии и снизить количество отказов от корзины.

Самый простой способ удалить кассу — использовать плагин WooCommerce Checkout Manager .

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

Установите и активируйте плагин

Сначала перейдите в « Плагины»> «Добавить новый» и найдите плагин. Затем установите его и активируйте . Это бесплатный инструмент, поэтому вы можете загрузить бесплатную версию или получить один из премиальных планов с более расширенными функциями и стоимостью от 19 долларов США (единовременный платеж).

Изменить страницу оформления заказа

После того, как вы установили плагин, перейдите в WooCommerce > Настройки и откройте вкладку Checkout . Вы увидите все варианты редактирования страницы оформления заказа WooCommerce.

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

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

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

Вывод

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

Блоки WooCommerce бесплатны и используют блоки для редактирования страницы оформления заказа, тогда как CheckoutWC — это плагин премиум -класса, который поставляется с несколькими шаблонами оформления заказа, которые помогут вам настроить страницу оформления заказа. Оба плагина выполняют свою работу и очень просты в использовании, поэтому выберите тот, который лучше всего соответствует вашим потребностям.

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

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

• Как создать одностраничную кассу WooCommerce
• Различные способы добавления комиссий к кассе
• Как добавить условные поля в кассу WooCommerce