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

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

Как изменить страницу Оформления заказа WooCommerceСтраница Оформления заказа — одна из самых главных страниц в процессе покупки товара.

На этой странице клиенты вводят личные данные и делают оплату.

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

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

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

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

Исследование Baymard, проведенное в 2020 году, показывает, что почти 70% покупателей бросают корзину во время оформления заказа. Одна из главных причин заключается в том, что оформление заказа слишком длинное или сложное.

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

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

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

Содержание:

  1. Сократите процесс оформления заказа
  2. Отредактируйте поля
  3. Автозавершение заказов
  4. Факторы доверия
  5. Цены в местной валюте
  6. Поп-ап при намерении выйти
  7. Напоминание о брошенной корзине
  8. Разные варианты оплаты
  9. Добавьте создание аккаунта
  10. Условные поля

Сократите процесс оформления заказа

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

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

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

Вы можете добавить кнопку быстрой покупки (Quick Buy) в магазин или товары, чтобы покупатели могли пропустить добавление товаров в корзину и сразу перейти к оформлению заказа.

  • 3 Способа отключить Корзину в WooCommerce

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

Отредактируйте поля

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

Кроме этого, вы можете изменить порядок полей, чтобы упростить их заполнение, или добавить собственные поля. Например, чтобы что-то спросить у посетителей, или добавить раздел ЧаВо / FAQ.

Обычно посетителям не нравятся длинные формы, поэтому оптимизируйте поля до необходимого минимума:

  • Отображайте только необходимые поля. Вы можете удалить необязательные поля, например, название компании.
  • Если вы продаете цифровые товары, уберите все поля доставки: индекс, город, улица, и так далее.
  • Отключите проверку почтового индекса, чтобы уменьшить количество действий при оформлении заказа.
  • Если вы продаете физические товары, сделайте платежные поля по умолчанию полями доставки, чтобы скрыть ненужные поля.
  • По возможности используйте автозаполнение, чтобы сократить время посетителей на заполнение форм.
  • Вместо отображения 2 полей (имя и фамилия) вы можете использовать одно поле для полного имени.

Это можно сделать вручную, или с помощью плагина:

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

Лучший платный плагин, который мне удалось найти, — WooCommerce Checkout Manager.

Плагин WooCommerce Checkout Manager

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

  • Как удалить ненужные поля вручную или с помощью плагина
  • Как редактировать поля на странице Оформления заказа WooCommerce

Автозавершение заказов

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

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

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

  • Как автоматически менять статус заказа в WooCommerce

Или используйте этот плагин:

Факторы доверия

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

Чтобы зашифровать личные данные пользователей и данные банковских карт во время оформления заказа установите SSL сертификат.

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

  • 10 Главных факторов ранжирования поисковых систем
  • Безопасность Вордпресс. Подробное описание

Еще одна вещь, которая вызывает доверие посетителей — логотипы сервисов платежных шлюзов, чтобы ваши посетители знали, что ваш сайт поддерживает все эти способы оплаты. Обычно это VISA, MasterCard, МИР, PayPal, Stripe и так далее.

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

Чтобы добавить картинки способов оплат перед кнопкой Подтвердить заказ, используйте этот снипет:

Замените путь к картинке на ваш в строке 3.

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

Способы оплаты / Значки доверия

Также вы можете добавить другие элементы или картинки на других местах страницы Оформления заказа (хуки Woocommerce), например, картинки с Гарантией.

  • Хуки WooCommerce на странице Оформления заказа

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

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

  • Как изменить текст на кнопке Оформления заказа в WooCommerce

Цены в местной валюте

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

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

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

Вы можете добавить переключение валют с помощью плагинов:

Если вы хотите использовать платный плагин, попробуйте плагин Currency Converter Widget с официального сайта WooCommerce:

Плагин конвертации валют WooCommerce Currency Converter Widget

Currency Converter Widget

Поп-ап при намерении выйти

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

Хотя многие считают, что такие поп-апы раздражают, исследования показывают, что они эффективны и могут увеличить конверсию на 10%.

Существует множество платных и бесплатных плагинов для добавления всплывающих окон, которые открываются при намерении выйти с сайта. Вы можете попробовать Optin Monster, Popup Maker, Elementor или плагин вашей CRM.

Поп-апы с появлением по условию есть во многих премиум-темах, например, Blocksy и Kadence.

Напоминание о брошенной корзине

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

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

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

Вот несколько популярных плагинов, с помощью которых вы можете напоминать о незавершенных покупках:

С помощью этих плагинов вы можете создать купон со скидкой на следующую покупку:

Разные варианты оплаты

Еще один способ сократить количество отказов от покупок — предоставить покупателям несколько разных способов оплаты.

Добавьте все популярные способы приема оплат, включая банковские карты, электронные кошельки, например, ЮМани и PayPal и сервисы типа Apple Pay, Google Pay и Samsung Pay.

  • Плагин приема платежей через Юмани с лайф-тайм лицензией на неограниченное число сайтов

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

Добавьте создание аккаунта

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

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

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

Условные поля

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

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

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

Плагин WooCommerce Checkout Manager

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

Читайте также:

  1. Как отключить уведомления WooCommerce
  2. Как отключить кнопку В корзину в WooCommerce
  3. Как вывести цену товара WooCommerce в любом месте сайта
  4. Как кастомизировать кнопку Оформления заказа WooCommerce
  5. Как редактировать поля на странице Оформления заказа WooCommerce

Оставляйте комментарии.

WooCommerce is a flexible and powerful plugin that you can use to turn your WordPress site into a dynamic ecommerce store. However, if you’re looking to reduce shopping cart abandonment, drive conversions, and boost revenue, it’s important to pay careful attention to your WooCommerce checkout page.

There are so many different ways to style and edit the checkout page in WooCommerce. Whether you’re starting your first online shop and seeking to understand how this page works, or you want to enhance the checkout experience on your existing WooCommerce site, we’ve got you covered.

In this post, we’ll explain what the WooCommerce checkout page is and how it functions. Then we’ll walk you through the many options you have to style, change, and leverage it to optimize conversions using plugins, code, themes, and more.

And remember, your ultimate goal is to increase your store’s revenue. So be sure to download our free ebook, 10 Ways to Boost Your WooCommerce Product Page Conversions.

Let’s jump right in!

An Overview of the WooCommerce Checkout Page

When you first set up your WooCommerce store, the plugin automatically creates and assigns a checkout page. If you preview it on the front end of your site, you’ll notice that it is rather simple:

woocommerce checkout page

The default WooCommerce checkout page.

By default, WooCommerce asks customers for some basic information. This includes:

  • Billing details
  • First and last name
  • Company name
  • Address (Town/City, Country, District, and Postcode/ZIP)
  • Phone number
  • Email address
  • Order notes
  • Privacy policy statement

This is important information to include on a WooCommerce checkout page. It provides the details necessary for a customer to complete their purchase, and for the website to process their payment information.

However, there’s nothing here that is necessarily helping to increase conversions or reduce checkout abandonment. What’s more, the default page may not offer the most relevant or useful information for your specific business. Therefore, like many WooCommerce site owners, you might be looking to change both the design and content of your checkout page.

Before we get into the different ways you can customize the checkout page in WooCommerce, there are a few things to understand first.

Let’s talk about where to find this page, as well as the various default settings and features available within the WooCommerce plugin.

Where to Find the Default WooCommerce Checkout Page and Settings

WooCommerce automatically creates a checkout page for your store once you activate the plugin. You can locate it by navigating to Pages > Checkout in your admin dashboard:

pages woocommerce checkout

The Checkout page in WooCommerce.

You can edit this page just as you would any WordPress content. For example, you can change the page’s title and permalink, add a featured image, modify the page attributes, etc. It also uses the [woocommerce_checkout] shortcode:

woocommerce checkout shortcode

The WooCommerce checkout page shortcode in WordPress.

There are a handful of standard options for configuring this page, some of which you can find under WooCommerce > Settings > Advanced:

woocommerce settings advanced

The ‘Advanced’ tab in WooCommerce settings

On this screen, under the Page Setup section, you can select a different page to use as the checkout screen for your store. You also have the option to force a secure HTTPS connection.

On the General settings page, you can enable coupons to be used at checkout, and configure how taxes will be calculated:

woocommerce coupons taxes

The general settings page in WooCommerce.

Under the Accounts & Privacy tab, you can also find a few options for account creation and guest checkouts:

woocommerce accounts privacy

The ‘Accounts & Privacy’ tab of WooCommerce settings

Below that, there is a Privacy policy section where you can modify the privacy policy text that displays on the checkout page:

woocommerce privacy policy

Privacy policy settings in WooCommerce

Beyond these built-in settings, you have limited options for customizing your checkout page using the WooCommerce plugin alone. Fortunately, there are other methods you can use to enhance its appearance and extend its functionality.

Why You Might Want to Change Your WooCommerce Checkout Page

The checkout page is the last thing customers see before completing their purchases. It can make the difference between whether they end up converting or abandoning your site altogether.

As such, it’s essential to make sure that your WooCommerce checkout page is designed well and functions in a way that encourages conversions. There are many ways you can provide a better experience, such as by:

  • Changing the design and page template
  • Creating a one-page checkout
  • Adding, removing, or rearranging fields
  • Changing input field labels and button text
  • Requiring certain fields to be filled out
  • Automatically triggering free shipping
  • Directly linking products to the checkout page

Whether you want to overhaul the default page completely or make minor modifications, the important thing is that you’re able to do so with ease. Fortunately, you have multiple options.

Want to… ✅ reduce shopping cart abandonment, ✅ drive conversions, and ✅ boost revenue? Then this article is for you.👇 Learn how to build a customized WooCommerce checkout page in minutes ⏱Click to Tweet

Methods You Can Use to Change Your WooCommerce Checkout Page

There are many ways to change your WooCommerce checkout page. The best one to use depends on a handful of factors, such as the specific edit you’re trying to make and your comfort level with coding.

Some of the methods you can use to enhance your WooCommerce checkout page include:

  • WooCommerce features, blocks, and shortcodes. WooCommerce does come with a few built-in features and settings that you can use to improve your store. For example, you can automatically trigger free shipping, as well as directly link products to the checkout page. There are also blocks and shortcodes for modifying the page.
  • Plugins and extensions. If you’re not tech-savvy or simply want a quick and hassle-free way to enhance your WooCommerce checkout page, there are plenty of plugins you can use. Most are easy to get started with and require little support. Some add-ons are provided by WooCommerce and available from the extension library, while others are developed and offered by third-party platforms.
  • Page templates and themes. If you want to change the style of your checkout page, you can use a pre-built template or theme. As with plugins, this is a solid option if you have limited coding experience and want to make changes to the overall appearance of the page, in order to better match your branding. The downside is that it does not offer as much flexibility as custom coding would.
  • Custom code. Another method you can leverage to change the WooCommerce checkout page is custom coding. This is a powerful route if you’re comfortable editing your site’s files and want to add a lot of personalization.

In the following sections, we’ll take a look at some of the most effective changes you can make to your WooCommerce page. For each, we’ll explain why you might want to make the edit, and walk you through the different methods you can use to go about it.

How to Customize the WooCommerce Checkout Fields

One of the most common changes you might make to a WooCommerce page is to modify its form fields. These typically take up the most space on the page, so they need to be relevant. Whether you want to remove fields, rearrange their order, or add new custom fields, you have a couple of options for going about it. You can either use a plugin or edit the code directly.

Using a Plugin to Change the WooCommerce Checkout Fields

If you want a quick and simple way to customize the checkout fields in WooCommerce, we recommend using a plugin. There are a handful of options to choose from.

One of the most popular is the Checkout Field Editor plugin:

checkout field editor

The Checkout Field Editor WooCommerce plugin

This is a freemium tool that lets you add or edit the form fields on your WooCommerce checkout page. You can enable or disable certain fields, as well as rearrange their order.

Although the free version lets you handle these basic tasks, WooCommerce Checkout Field Editor Pro comes with additional functionality. This includes 17 field types and custom hooks.

To use this plugin, you can install it on your WooCommerce site by navigating to Plugins > Add New and then searching for it. Once you find it, click on the Install Now button, followed by Activate.

When it’s activated, you can configure the settings by going to WooCommerce > Checkout Form:

checkout form editor

The Checkout Form Editor plugin in WooCommerce

There are three different types of fields you can edit:

  1. Billing
  2. Shipping
  3. Additional

You can select whichever field you want to change and then click on the Remove, Enable, or Disable button. To add a new field, select Add field.

If you want to change an existing form field, select the box to the left, and click on the Edit button. A panel will open where you can change the field type (in the premium version only), edit the field’s label, choose whether it will be required, and more:

edit checkout field

The edit checkout field panel in the Checkout Field Editor WooCommerce plugin

When you’re done, click on the Save button. Once you’re finished making all the changes you wish to the checkout page’s fields, be sure to hit Save Changes at the bottom of the screen.

For more detailed guidance, you can refer to WooCommerce’s documentation on using the Checkout Field Editor plugin.

Of course, this is just one of many plugins you can use to change your WooCommerce checkout fields. Additional options worth considering include Flexible Checkout Fields and WooCommerce Checkout Manager, which we’ll discuss more later in this post.

Editing the Checkout Fields Using Code

Another option for editing the fields on your WooCommerce checkout page is to use custom coding. Of course, this requires a certain level of technical knowledge and comfort working with your site’s files. The advantage is that you have more flexibility in terms of customization than you would with a third-party plugin.

You can edit your checkout fields using your site’s functions.php file and filters such as:

  • woocommerce_checkout_fields
  • woocommerce_billing_fields
  • Woocommerce_shipping_fields

WooCommerce actions and filters let you manipulate the checkout fields almost any way you wish. For example, you can remove them entirely, add new ones, or change the displayed text. Using the woocommerce_checkout_fields filter will enable you to override any field.

Let’s say you want to change the placeholder text for the order_comments field. By default, it is set as the following:

_x('Notes about your order, e.g. special notes for delivery.', 'placeholder', 'woocommerce')

To change it, you can add this snippet of code to your functions.php file:

// Hook in

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!

function custom_override_checkout_fields( $fields ) {

$fields['order']['order_comments']['placeholder'] = 'My new placeholder';

return $fields;

}

To remove a field, you can use the following:

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {

unset($fields['order']['order_comments']);

return $fields;

There are many changes you can make to the fields on your checkout page, so we won’t explore all of them here. You can find a helpful list of override checkout field codes on GitHub.

How to Change the WooCommerce Checkout Page Template

By default, your WooCommerce checkout page template will be based on your site’s theme. But maybe you want to change the design to better fit your branding or perhaps you just want to make slight changes to the content of the template page.

The two main methods you can use to change this are by using a pre-built template or adding code. Let’s start with the former.

Starting With a Pre-Built Template to Customize Your Checkout Page

The easiest way to change the design of your WooCommerce checkout page is by installing a pre-built theme, such as the ones in the WooCommerce Themes Store. There are a variety of free options available, as well as premium themes.

You can search for one-page checkout themes, for example, or any other kind of specific templates you’re interested in using. You can also find plenty of WooCommerce themes on Envato Market.

Using Code to Customize the WooCommerce Checkout Page Template

If you’re comfortable editing code, you can also manually change the checkout page template. Depending on your hosting provider, you may be able to do this via File Manager in cPanel or a Secure File Transfer Protocol (SFTP) client.

You can use action hooks to add, edit, or remove elements from your checkout page. There are nine main action hooks that WooCommerce uses for the checkout page:

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_checkout_shipping
  • woocommerce_checkout_after_customer_details
  • woocommerce_checkout_before_order_review
  • woocommerce_checkout_order_review
  • woocommerce_checkout_after_order_review
  • Woocommerce_after_checkout_form

These action hooks add markup to the page, which you can use to customize both its style and functionality. If you want to use these action hooks to modify your checkout page template, you can do so by editing the checkout form PHP file.

You can locate the WooCommerce template files under /woocommerce/templates. From your site’s root directory, you’ll need to navigate to wp-content/plugins/woocommerce:

woocommerce templates folder

The WooCommerce templates folder

Within these files, there are hooks you can use to add and rearrange content on the template page, without actually editing the template files. To create a custom theme template for your checkout page, you’ll first need to create a “woocommerce/checkout” folder within your theme’s folder.

Next, copy the WooCommerce checkout page template, which you can find at woocommerce/templates/checkout/form-checkout.php:

woocommerce checkout form

The WooCommerce checkout page template file

Then, add it to the new folder you just created. After that, you can edit the file to make your desired changes. When you save the file, the WooCommerce plugin will load this template and override the default page template.

How to Create a One Page WooCommerce Checkout

One of the ways to enhance the checkout experience for your customers, and in the process reduce abandonment rates, is to make it as quick and simple as possible. If you want to shorten the checkout process, you can do so by creating a one-page checkout in WooCommerce.

There are multiple ways to do this. As we mentioned earlier, you can look for a one-page theme or template that will provide a single checkout page. However, if you like your current theme, you may not want to change it.

If that’s the case, don’t worry. There are other options, such as the premium WooCommerce One Page Checkout extension:

woocommerce one page checkout extension

The WooCommerce One Page Checkout extension

Since this solution was developed by WooCommerce, you know that it’s safe, reliable, and offers plenty of support. In addition to letting you transform any page into a checkout page, it comes with a plethora of features for optimizing the one-page checkout process.

You can:

  • Display both product selection and checkout forms on one page.
  • Enable customers to add or remove items from their carts.
  • Let customers complete payments without leaving the page.
  • Add custom fields to pages.

After you purchase the extension through your WooCommerce account, you can download the plugin, and then install and activate it on your WooCommerce site.

To use it, navigate to Pages > Add New and select the One Page Checkout icon in the editor toolbar:

one page checkout icon

The One Page Checkout extension icon in the WordPress editor

In the panel that opens, you can click within the Products field, and begin typing the name of the product(s) that you want to add.

Next, choose the template you want to use (Product List, Product Table, Pricing Table, or Single Product) and click on Create Shortcode.

You can also manually insert the one-page shortcode into any post or page. To learn more about this plugin and how to use it, you can refer to the WooCommerce One Page Checkout documentation.

How to Trigger Free Shipping During the WooCommerce Checkout Process

As an ecommerce business owner, there are many different strategies you can leverage to encourage your customers to spend more. One of those is to offer free shipping.

Of course, you may not want to offer free shipping on every order. However, adding it as an incentive on order totals that reach a certain amount can help you encourage shoppers to spend more than they otherwise would.

Therefore, you may want to configure your WooCommerce checkout page to automatically trigger free shipping on orders above a certain number, such as $100.

The first thing you’ll need to do is to offer the free shipping method to the relevant Shipping Zone(s).

To do so, navigate to WooCommerce > Settings > Shipping:

woocommerce shipping zones

The WooCommerce Shipping settings

Hover over the Shipping Zone you want to modify, and then click on the Edit link. If you haven’t added any zones yet, select the Add shipping zone button first and follow the prompts before proceeding.

Next, click on Add Shipping Method. In the modal that opens, select Free Shipping from the dropdown menu, followed by Add shipping method again:

add free shipping

Adding a free shipping method in WooCommerce

Next, from the Shipping methods list on the settings page, hover over Free Shipping and click on the Edit link.

A Free shipping settings panel will open. From the Free shipping requires…. dropdown menu, select A minimum order amount:

free shipping settings

Free shipping settings in WooCommerce

You can then define the minimum order amount. When you’re done, click on the Save Changes button.

How to Directly Link Products to the WooCommerce Checkout Page

Another way you can enhance the checkout experience for your customers is to create direct checkout links. This is helpful for sending customers straight to checkout from product and sales pages.

Creating a Direct Checkout Link Manually

To create and add a direct checkout link in WooCommerce, you can use the following URL: exampledomain.com//checkout/?add-to-cart=ID.

Note: you’ll want to replace “exampledomain” and “ID” with your domain name and the specific product ID that you’re linking to the checkout page.

To find a product ID, navigate to Products > All Products in your admin dashboard. Browse to the product you want to create the direct link for, and then hover over the name of it to reveal the product ID number:

woocommerce product id

A WooCommerce product ID

Once you paste the product ID into the aforementioned URL, you can then place the link anywhere on your WooCommerce site. You can repeat this process for each of your products, even variable and grouped items.

Creating a Direct Checkout Link Using a Plugin

We realize that the above strategy may not be the most efficient method for all users. Depending on how many products you have in your WooCommerce store, it can be very time-consuming.

Fortunately, if you’re looking for a faster method you can also use the Direct Checkout for WooCommerce plugin:

direct checkout woocommerce

The Direct Checkout for WooCommerce plugin

This freemium tool lets you simplify the checkout process in a variety of ways, including by adding a direct link from a product page to the checkout screen. Once you install and activate the plugin on your WooCommerce site, navigate to WooCommerce > Direct Checkout:

direct checkout settings

The Direct Checkout for WooCommerce plugin settings

Under the General tab, select Yes for the Added to cart redirect option and then choose Checkout from the Added to cart redirect to dropdown menu. Click on Save changes when you’re done.

Next, navigate to the Products tab:

direct checkout redirect

The option to redirect to cart in Direct Checkout for WooCommerce

Enable the Redirect to the cart page after successful addition option. Again, click on the Save changes button. That’s it!

How to Test Your WooCommerce Checkout Page

At this point, you’ve hopefully implemented a variety of ways to enhance your WooCommerce checkout page. Now, it’s essential to make sure that your checkout process is working properly, in order to reduce abandonment and confirm that no errors will interrupt the customer journey.

Fortunately, there is an easy way that you can send a test order and payment through your WooCommerce shop, to make sure that everything is working as it should. To do this, you’ll first need to install the WooCommerce Payments plugin on your site (if you haven’t already):

woocommerce payments plugin

The WooCommerce Payments plugin

Once you install and activate the plugin, you can enable ‘test mode’. To do this, navigate to WooCommerce > Payments > Settings:

woocommerce test mode

The WooCommerce payments test mode

Remember to save your changes.

Once Test Mode is enabled, you can browse your WooCommerce store and select any product. Add it to your shopping cart and then move to the checkout page.

Fill out the checkout page form fields as necessary. For the payment information, you can use any of the dummy credit card numbers provided by WooCommerce. You can also use any three digits for the CVC code, and select any future date.

When you’re done, click on Place Order. Next, navigate to the Payments > Transactions screen:

test transaction woocommerce

Testing transactions in WooCommerce

Here, you should see the charge show up. If it’s there, you know that your checkout page is working as it should. Remember to turn Test Mode off when you’re done!

Learn how to style, change, and leverage your WooCommerce checkout page⚡️ to optimize conversions and 💰 boost your revenue here ⬇️Click to Tweet

The Best WooCommerce Checkout Plugins and Extensions

Throughout this post, we’ve covered a wide variety of ways to change your WooCommerce checkout page, including blocks, shortcodes, and custom code. We’ve also mentioned some key plugins that can help you add features and functionalities that wouldn’t otherwise be available.

However, there are some additional add-ons, plugins, and extensions we haven’t mentioned yet, but that provide you with more customization options for your WooCommerce checkout page. Some of the best ones worth considering include:

  • WooCommerce Cart Notices Add-On. This WooCommerce add-on lets you display actionable messages and notifications to your customers during the checkout process. For example, you can use it to notify them of relevant sales and promotions.
  • WooCommerce Checkout Manager. Made by the same team that developed Direct Checkout for WooCommerce, this plugin is a powerful extension that you can use to optimize your checkout page. You can use it to edit, remove, and add custom fields, as well as to create condition fields.
  • WooCommerce Checkout Add-Ons. This premium plugin lets you add free and paid add-ons at the checkout stage. It’s a helpful tool for increasing conversions and driving revenue.

Depending on the type of ecommerce site you have, you may be looking for even more options. If so, we recommend checking out the WooCommerce Extensions Library, which offers a ton of add-ons for extending the WooCommerce plugin’s features and functionality, including both free and paid solutions.

Summary

There are different ways you can implement to improve and optimize your WooCommerce checkout page.

Depending on the change you want to make and your experience level, you can leverage WooCommerce plugins and extensions, page templates and themes, and even custom code.

Do you have any questions about using or editing the WooCommerce checkout page? Let us know in the comments section below!


Get all your applications, databases and WordPress sites online and under one roof. Our feature-packed, high-performance cloud platform includes:

  • Easy setup and management in the MyKinsta dashboard
  • 24/7 expert support
  • The best Google Cloud Platform hardware and network, powered by Kubernetes for maximum scalability
  • An enterprise-level Cloudflare integration for speed and security
  • Global audience reach with up to 35 data centers and 275 PoPs worldwide

Test it yourself with $20 off your first month of Application Hosting or Database Hosting. Explore our plans or talk to sales to find your best fit.

WooCommerce is a flexible and powerful plugin that you can use to turn your WordPress site into a dynamic ecommerce store. However, if you’re looking to reduce shopping cart abandonment, drive conversions, and boost revenue, it’s important to pay careful attention to your WooCommerce checkout page.

There are so many different ways to style and edit the checkout page in WooCommerce. Whether you’re starting your first online shop and seeking to understand how this page works, or you want to enhance the checkout experience on your existing WooCommerce site, we’ve got you covered.

In this post, we’ll explain what the WooCommerce checkout page is and how it functions. Then we’ll walk you through the many options you have to style, change, and leverage it to optimize conversions using plugins, code, themes, and more.

And remember, your ultimate goal is to increase your store’s revenue. So be sure to download our free ebook, 10 Ways to Boost Your WooCommerce Product Page Conversions.

Let’s jump right in!

An Overview of the WooCommerce Checkout Page

When you first set up your WooCommerce store, the plugin automatically creates and assigns a checkout page. If you preview it on the front end of your site, you’ll notice that it is rather simple:

woocommerce checkout page

The default WooCommerce checkout page.

By default, WooCommerce asks customers for some basic information. This includes:

  • Billing details
  • First and last name
  • Company name
  • Address (Town/City, Country, District, and Postcode/ZIP)
  • Phone number
  • Email address
  • Order notes
  • Privacy policy statement

This is important information to include on a WooCommerce checkout page. It provides the details necessary for a customer to complete their purchase, and for the website to process their payment information.

However, there’s nothing here that is necessarily helping to increase conversions or reduce checkout abandonment. What’s more, the default page may not offer the most relevant or useful information for your specific business. Therefore, like many WooCommerce site owners, you might be looking to change both the design and content of your checkout page.

Before we get into the different ways you can customize the checkout page in WooCommerce, there are a few things to understand first.

Let’s talk about where to find this page, as well as the various default settings and features available within the WooCommerce plugin.

Where to Find the Default WooCommerce Checkout Page and Settings

WooCommerce automatically creates a checkout page for your store once you activate the plugin. You can locate it by navigating to Pages > Checkout in your admin dashboard:

pages woocommerce checkout

The Checkout page in WooCommerce.

You can edit this page just as you would any WordPress content. For example, you can change the page’s title and permalink, add a featured image, modify the page attributes, etc. It also uses the [woocommerce_checkout] shortcode:

woocommerce checkout shortcode

The WooCommerce checkout page shortcode in WordPress.

There are a handful of standard options for configuring this page, some of which you can find under WooCommerce > Settings > Advanced:

woocommerce settings advanced

The ‘Advanced’ tab in WooCommerce settings

On this screen, under the Page Setup section, you can select a different page to use as the checkout screen for your store. You also have the option to force a secure HTTPS connection.

On the General settings page, you can enable coupons to be used at checkout, and configure how taxes will be calculated:

woocommerce coupons taxes

The general settings page in WooCommerce.

Under the Accounts & Privacy tab, you can also find a few options for account creation and guest checkouts:

woocommerce accounts privacy

The ‘Accounts & Privacy’ tab of WooCommerce settings

Below that, there is a Privacy policy section where you can modify the privacy policy text that displays on the checkout page:

woocommerce privacy policy

Privacy policy settings in WooCommerce

Beyond these built-in settings, you have limited options for customizing your checkout page using the WooCommerce plugin alone. Fortunately, there are other methods you can use to enhance its appearance and extend its functionality.

Why You Might Want to Change Your WooCommerce Checkout Page

The checkout page is the last thing customers see before completing their purchases. It can make the difference between whether they end up converting or abandoning your site altogether.

As such, it’s essential to make sure that your WooCommerce checkout page is designed well and functions in a way that encourages conversions. There are many ways you can provide a better experience, such as by:

  • Changing the design and page template
  • Creating a one-page checkout
  • Adding, removing, or rearranging fields
  • Changing input field labels and button text
  • Requiring certain fields to be filled out
  • Automatically triggering free shipping
  • Directly linking products to the checkout page

Whether you want to overhaul the default page completely or make minor modifications, the important thing is that you’re able to do so with ease. Fortunately, you have multiple options.

Want to… ✅ reduce shopping cart abandonment, ✅ drive conversions, and ✅ boost revenue? Then this article is for you.👇 Learn how to build a customized WooCommerce checkout page in minutes ⏱Click to Tweet

Methods You Can Use to Change Your WooCommerce Checkout Page

There are many ways to change your WooCommerce checkout page. The best one to use depends on a handful of factors, such as the specific edit you’re trying to make and your comfort level with coding.

Some of the methods you can use to enhance your WooCommerce checkout page include:

  • WooCommerce features, blocks, and shortcodes. WooCommerce does come with a few built-in features and settings that you can use to improve your store. For example, you can automatically trigger free shipping, as well as directly link products to the checkout page. There are also blocks and shortcodes for modifying the page.
  • Plugins and extensions. If you’re not tech-savvy or simply want a quick and hassle-free way to enhance your WooCommerce checkout page, there are plenty of plugins you can use. Most are easy to get started with and require little support. Some add-ons are provided by WooCommerce and available from the extension library, while others are developed and offered by third-party platforms.
  • Page templates and themes. If you want to change the style of your checkout page, you can use a pre-built template or theme. As with plugins, this is a solid option if you have limited coding experience and want to make changes to the overall appearance of the page, in order to better match your branding. The downside is that it does not offer as much flexibility as custom coding would.
  • Custom code. Another method you can leverage to change the WooCommerce checkout page is custom coding. This is a powerful route if you’re comfortable editing your site’s files and want to add a lot of personalization.

In the following sections, we’ll take a look at some of the most effective changes you can make to your WooCommerce page. For each, we’ll explain why you might want to make the edit, and walk you through the different methods you can use to go about it.

How to Customize the WooCommerce Checkout Fields

One of the most common changes you might make to a WooCommerce page is to modify its form fields. These typically take up the most space on the page, so they need to be relevant. Whether you want to remove fields, rearrange their order, or add new custom fields, you have a couple of options for going about it. You can either use a plugin or edit the code directly.

Using a Plugin to Change the WooCommerce Checkout Fields

If you want a quick and simple way to customize the checkout fields in WooCommerce, we recommend using a plugin. There are a handful of options to choose from.

One of the most popular is the Checkout Field Editor plugin:

checkout field editor

The Checkout Field Editor WooCommerce plugin

This is a freemium tool that lets you add or edit the form fields on your WooCommerce checkout page. You can enable or disable certain fields, as well as rearrange their order.

Although the free version lets you handle these basic tasks, WooCommerce Checkout Field Editor Pro comes with additional functionality. This includes 17 field types and custom hooks.

To use this plugin, you can install it on your WooCommerce site by navigating to Plugins > Add New and then searching for it. Once you find it, click on the Install Now button, followed by Activate.

When it’s activated, you can configure the settings by going to WooCommerce > Checkout Form:

checkout form editor

The Checkout Form Editor plugin in WooCommerce

There are three different types of fields you can edit:

  1. Billing
  2. Shipping
  3. Additional

You can select whichever field you want to change and then click on the Remove, Enable, or Disable button. To add a new field, select Add field.

If you want to change an existing form field, select the box to the left, and click on the Edit button. A panel will open where you can change the field type (in the premium version only), edit the field’s label, choose whether it will be required, and more:

edit checkout field

The edit checkout field panel in the Checkout Field Editor WooCommerce plugin

When you’re done, click on the Save button. Once you’re finished making all the changes you wish to the checkout page’s fields, be sure to hit Save Changes at the bottom of the screen.

For more detailed guidance, you can refer to WooCommerce’s documentation on using the Checkout Field Editor plugin.

Of course, this is just one of many plugins you can use to change your WooCommerce checkout fields. Additional options worth considering include Flexible Checkout Fields and WooCommerce Checkout Manager, which we’ll discuss more later in this post.

Editing the Checkout Fields Using Code

Another option for editing the fields on your WooCommerce checkout page is to use custom coding. Of course, this requires a certain level of technical knowledge and comfort working with your site’s files. The advantage is that you have more flexibility in terms of customization than you would with a third-party plugin.

You can edit your checkout fields using your site’s functions.php file and filters such as:

  • woocommerce_checkout_fields
  • woocommerce_billing_fields
  • Woocommerce_shipping_fields

WooCommerce actions and filters let you manipulate the checkout fields almost any way you wish. For example, you can remove them entirely, add new ones, or change the displayed text. Using the woocommerce_checkout_fields filter will enable you to override any field.

Let’s say you want to change the placeholder text for the order_comments field. By default, it is set as the following:

_x('Notes about your order, e.g. special notes for delivery.', 'placeholder', 'woocommerce')

To change it, you can add this snippet of code to your functions.php file:

// Hook in

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!

function custom_override_checkout_fields( $fields ) {

$fields['order']['order_comments']['placeholder'] = 'My new placeholder';

return $fields;

}

To remove a field, you can use the following:

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {

unset($fields['order']['order_comments']);

return $fields;

There are many changes you can make to the fields on your checkout page, so we won’t explore all of them here. You can find a helpful list of override checkout field codes on GitHub.

How to Change the WooCommerce Checkout Page Template

By default, your WooCommerce checkout page template will be based on your site’s theme. But maybe you want to change the design to better fit your branding or perhaps you just want to make slight changes to the content of the template page.

The two main methods you can use to change this are by using a pre-built template or adding code. Let’s start with the former.

Starting With a Pre-Built Template to Customize Your Checkout Page

The easiest way to change the design of your WooCommerce checkout page is by installing a pre-built theme, such as the ones in the WooCommerce Themes Store. There are a variety of free options available, as well as premium themes.

You can search for one-page checkout themes, for example, or any other kind of specific templates you’re interested in using. You can also find plenty of WooCommerce themes on Envato Market.

Using Code to Customize the WooCommerce Checkout Page Template

If you’re comfortable editing code, you can also manually change the checkout page template. Depending on your hosting provider, you may be able to do this via File Manager in cPanel or a Secure File Transfer Protocol (SFTP) client.

You can use action hooks to add, edit, or remove elements from your checkout page. There are nine main action hooks that WooCommerce uses for the checkout page:

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_checkout_shipping
  • woocommerce_checkout_after_customer_details
  • woocommerce_checkout_before_order_review
  • woocommerce_checkout_order_review
  • woocommerce_checkout_after_order_review
  • Woocommerce_after_checkout_form

These action hooks add markup to the page, which you can use to customize both its style and functionality. If you want to use these action hooks to modify your checkout page template, you can do so by editing the checkout form PHP file.

You can locate the WooCommerce template files under /woocommerce/templates. From your site’s root directory, you’ll need to navigate to wp-content/plugins/woocommerce:

woocommerce templates folder

The WooCommerce templates folder

Within these files, there are hooks you can use to add and rearrange content on the template page, without actually editing the template files. To create a custom theme template for your checkout page, you’ll first need to create a “woocommerce/checkout” folder within your theme’s folder.

Next, copy the WooCommerce checkout page template, which you can find at woocommerce/templates/checkout/form-checkout.php:

woocommerce checkout form

The WooCommerce checkout page template file

Then, add it to the new folder you just created. After that, you can edit the file to make your desired changes. When you save the file, the WooCommerce plugin will load this template and override the default page template.

How to Create a One Page WooCommerce Checkout

One of the ways to enhance the checkout experience for your customers, and in the process reduce abandonment rates, is to make it as quick and simple as possible. If you want to shorten the checkout process, you can do so by creating a one-page checkout in WooCommerce.

There are multiple ways to do this. As we mentioned earlier, you can look for a one-page theme or template that will provide a single checkout page. However, if you like your current theme, you may not want to change it.

If that’s the case, don’t worry. There are other options, such as the premium WooCommerce One Page Checkout extension:

woocommerce one page checkout extension

The WooCommerce One Page Checkout extension

Since this solution was developed by WooCommerce, you know that it’s safe, reliable, and offers plenty of support. In addition to letting you transform any page into a checkout page, it comes with a plethora of features for optimizing the one-page checkout process.

You can:

  • Display both product selection and checkout forms on one page.
  • Enable customers to add or remove items from their carts.
  • Let customers complete payments without leaving the page.
  • Add custom fields to pages.

After you purchase the extension through your WooCommerce account, you can download the plugin, and then install and activate it on your WooCommerce site.

To use it, navigate to Pages > Add New and select the One Page Checkout icon in the editor toolbar:

one page checkout icon

The One Page Checkout extension icon in the WordPress editor

In the panel that opens, you can click within the Products field, and begin typing the name of the product(s) that you want to add.

Next, choose the template you want to use (Product List, Product Table, Pricing Table, or Single Product) and click on Create Shortcode.

You can also manually insert the one-page shortcode into any post or page. To learn more about this plugin and how to use it, you can refer to the WooCommerce One Page Checkout documentation.

How to Trigger Free Shipping During the WooCommerce Checkout Process

As an ecommerce business owner, there are many different strategies you can leverage to encourage your customers to spend more. One of those is to offer free shipping.

Of course, you may not want to offer free shipping on every order. However, adding it as an incentive on order totals that reach a certain amount can help you encourage shoppers to spend more than they otherwise would.

Therefore, you may want to configure your WooCommerce checkout page to automatically trigger free shipping on orders above a certain number, such as $100.

The first thing you’ll need to do is to offer the free shipping method to the relevant Shipping Zone(s).

To do so, navigate to WooCommerce > Settings > Shipping:

woocommerce shipping zones

The WooCommerce Shipping settings

Hover over the Shipping Zone you want to modify, and then click on the Edit link. If you haven’t added any zones yet, select the Add shipping zone button first and follow the prompts before proceeding.

Next, click on Add Shipping Method. In the modal that opens, select Free Shipping from the dropdown menu, followed by Add shipping method again:

add free shipping

Adding a free shipping method in WooCommerce

Next, from the Shipping methods list on the settings page, hover over Free Shipping and click on the Edit link.

A Free shipping settings panel will open. From the Free shipping requires…. dropdown menu, select A minimum order amount:

free shipping settings

Free shipping settings in WooCommerce

You can then define the minimum order amount. When you’re done, click on the Save Changes button.

How to Directly Link Products to the WooCommerce Checkout Page

Another way you can enhance the checkout experience for your customers is to create direct checkout links. This is helpful for sending customers straight to checkout from product and sales pages.

Creating a Direct Checkout Link Manually

To create and add a direct checkout link in WooCommerce, you can use the following URL: exampledomain.com//checkout/?add-to-cart=ID.

Note: you’ll want to replace “exampledomain” and “ID” with your domain name and the specific product ID that you’re linking to the checkout page.

To find a product ID, navigate to Products > All Products in your admin dashboard. Browse to the product you want to create the direct link for, and then hover over the name of it to reveal the product ID number:

woocommerce product id

A WooCommerce product ID

Once you paste the product ID into the aforementioned URL, you can then place the link anywhere on your WooCommerce site. You can repeat this process for each of your products, even variable and grouped items.

Creating a Direct Checkout Link Using a Plugin

We realize that the above strategy may not be the most efficient method for all users. Depending on how many products you have in your WooCommerce store, it can be very time-consuming.

Fortunately, if you’re looking for a faster method you can also use the Direct Checkout for WooCommerce plugin:

direct checkout woocommerce

The Direct Checkout for WooCommerce plugin

This freemium tool lets you simplify the checkout process in a variety of ways, including by adding a direct link from a product page to the checkout screen. Once you install and activate the plugin on your WooCommerce site, navigate to WooCommerce > Direct Checkout:

direct checkout settings

The Direct Checkout for WooCommerce plugin settings

Under the General tab, select Yes for the Added to cart redirect option and then choose Checkout from the Added to cart redirect to dropdown menu. Click on Save changes when you’re done.

Next, navigate to the Products tab:

direct checkout redirect

The option to redirect to cart in Direct Checkout for WooCommerce

Enable the Redirect to the cart page after successful addition option. Again, click on the Save changes button. That’s it!

How to Test Your WooCommerce Checkout Page

At this point, you’ve hopefully implemented a variety of ways to enhance your WooCommerce checkout page. Now, it’s essential to make sure that your checkout process is working properly, in order to reduce abandonment and confirm that no errors will interrupt the customer journey.

Fortunately, there is an easy way that you can send a test order and payment through your WooCommerce shop, to make sure that everything is working as it should. To do this, you’ll first need to install the WooCommerce Payments plugin on your site (if you haven’t already):

woocommerce payments plugin

The WooCommerce Payments plugin

Once you install and activate the plugin, you can enable ‘test mode’. To do this, navigate to WooCommerce > Payments > Settings:

woocommerce test mode

The WooCommerce payments test mode

Remember to save your changes.

Once Test Mode is enabled, you can browse your WooCommerce store and select any product. Add it to your shopping cart and then move to the checkout page.

Fill out the checkout page form fields as necessary. For the payment information, you can use any of the dummy credit card numbers provided by WooCommerce. You can also use any three digits for the CVC code, and select any future date.

When you’re done, click on Place Order. Next, navigate to the Payments > Transactions screen:

test transaction woocommerce

Testing transactions in WooCommerce

Here, you should see the charge show up. If it’s there, you know that your checkout page is working as it should. Remember to turn Test Mode off when you’re done!

Learn how to style, change, and leverage your WooCommerce checkout page⚡️ to optimize conversions and 💰 boost your revenue here ⬇️Click to Tweet

The Best WooCommerce Checkout Plugins and Extensions

Throughout this post, we’ve covered a wide variety of ways to change your WooCommerce checkout page, including blocks, shortcodes, and custom code. We’ve also mentioned some key plugins that can help you add features and functionalities that wouldn’t otherwise be available.

However, there are some additional add-ons, plugins, and extensions we haven’t mentioned yet, but that provide you with more customization options for your WooCommerce checkout page. Some of the best ones worth considering include:

  • WooCommerce Cart Notices Add-On. This WooCommerce add-on lets you display actionable messages and notifications to your customers during the checkout process. For example, you can use it to notify them of relevant sales and promotions.
  • WooCommerce Checkout Manager. Made by the same team that developed Direct Checkout for WooCommerce, this plugin is a powerful extension that you can use to optimize your checkout page. You can use it to edit, remove, and add custom fields, as well as to create condition fields.
  • WooCommerce Checkout Add-Ons. This premium plugin lets you add free and paid add-ons at the checkout stage. It’s a helpful tool for increasing conversions and driving revenue.

Depending on the type of ecommerce site you have, you may be looking for even more options. If so, we recommend checking out the WooCommerce Extensions Library, which offers a ton of add-ons for extending the WooCommerce plugin’s features and functionality, including both free and paid solutions.

Summary

There are different ways you can implement to improve and optimize your WooCommerce checkout page.

Depending on the change you want to make and your experience level, you can leverage WooCommerce plugins and extensions, page templates and themes, and even custom code.

Do you have any questions about using or editing the WooCommerce checkout page? Let us know in the comments section below!


Get all your applications, databases and WordPress sites online and under one roof. Our feature-packed, high-performance cloud platform includes:

  • Easy setup and management in the MyKinsta dashboard
  • 24/7 expert support
  • The best Google Cloud Platform hardware and network, powered by Kubernetes for maximum scalability
  • An enterprise-level Cloudflare integration for speed and security
  • Global audience reach with up to 35 data centers and 275 PoPs worldwide

Test it yourself with $20 off your first month of Application Hosting or Database Hosting. Explore our plans or talk to sales to find your best fit.

Разработка и продвижение сайта, особенно интернет-магазина, дело не простое и требует детальной проработки структуры, функционала и контента. Для интернет-магазина не последнюю роль играет удобство оформления заказа.

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

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

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

Устанавливается он как любой другой плагин. После установки и активации в разделе Woocommerce появляется пункт Saphali WC Lite.

Как редактировать поля:

1. Перемещать и менять местами.

Для этого наводим курсор на любое поле, при этом курсор у нас приобретает вид плюсика со стрелочками.

Зажимаем левую кнопку мыши и перетаскиваем это поле туда, куда нам нужно.

2. Можно редактировать поля, изменять надпись. Для этого ставим курсор в поле, где указан заголовок и меняем его значение на своё.

5. Так же, обращаю ваше внимание на столбец«Clear», если вы устанавливаете здесь галочку, то это будет указывать на то, что следующее поле будет начинаться с новой строки. Обычно, галочки здесь следует ставить тогда, когда в одной строке идет по два поля, и ставится она возле поля с классомform-row-last.

6.Так же вы можете сделать, что бы у вас в поле было задано значение по умолчанию. Например, для адреса здесь уже введен текст «Улица и т.д.». При этом на странице формы в данном поле будет по умолчанию отображается текст, который исчезает, когда покупатель начинает вводить свои данные.

7.Так же, вы можете выбрать тип поля. Это может быть:

Select — раскрывающийся список

Checkbox – это когда у вас доступно несколько вариантов, я человек ставит галочкуTextarea — большое поле, в которое можно вводить какой-то более или мене большой текст

Text – стандартное поле для ввода

8.Также можно выбирать обязательно ли данное поле для заполнения или нет, и публиковать это поле или нет.

Добавление новых полей

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

1.Спускаемся вниз страницы и нажимаем на кнопку«Добавить»:

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

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

Редактирование полей реквизитов доставки и дополнительных полей

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

Здесь есть вот такой раздел «Реквизиты доставки»:

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

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

Мы можем здесь либо это поле удалить совсем, либо добавить сюда какие-то еще свои дополнительные поля.

Есть еще один способ

Плагин Saphali Woocommerce Russian, который мы рассмотрели выше, не плохой инструмент, но он нагружает систему. Есть еще один хороший плагин для редактирования полей, им можно как и удалить так и создать нужные поля, WooCommerce Checkout Field Editor (Manager) Pro, но он также тяжеловат для такой простой манипуляции как просто убрать поля.

И так для такого чтобы просто удалить не нужные поля при оформлении заказа мы добавляем код в файл functions.php нашей темы:

add_filter( ‘woocommerce_checkout_fields’ , ‘custom_override_checkout_fields’ );

// Все $fields в этой функции будут пропущены через фильтр
function custom_override_checkout_fields( $fields ) {
unset($fields[‘billing’][‘billing_company’]);
unset($fields[‘billing’][‘billing_address_2’]);
unset($fields[‘billing’][‘billing_country’]);
unset($fields[‘billing’][‘billing_state’]);
unset($fields[‘billing’][‘billing_postcode’]);
return $fields;
}

Этим кодом мы удаляем поля Компанию, второй адрес, Страну, Город и Индекс.

Если вам нужно удалить еще какие-то поля, то просто продолжаем список подставляя нужные массивы.

Вот полный список полей массива, передаваемого в фильтр woocommerce_checkout_fields:

billing — это форма платежного адреса

billing_first_name

billing_last_name

billing_company

billing_address_1

billing_address_2

billing_city

billing_postcode

billing_country

billing_state

billing_email

billing_phone

shipping это форма адреса доставки (обычно опционально)

shipping_first_name

shipping_last_name

shipping_company

shipping_address_1

shipping_address_2

shipping_city

shipping_postcode

shipping_country

shipping_state

Надеемся, что статья будет для Вас полезной.

Благодарим за внимание.

Содержание
  1. Знакомство с фильтром woocommerce_checkout_fields
  2. Делаем обязательные поля не такими уж и обязательными 🙂
  3. Убираем лишние поля при оформлении заказа
  4. Меняем порядок полей
    1. Сортировка полей внутри группы
    2. Перемещение поля в другую группу
  5. Добавляем новые поля оформления заказа в WooCommerce

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

Фильтр, с которым будем работать – это woocommerce_checkout_fields.


Знакомство с фильтром woocommerce_checkout_fields

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

Итак, добавьте товар в корзину на вашем сайта и перейдите на страницу оформления заказа WooCoommerce. В качестве темы используется «Storefront» и нашем случае страница оформления заказа выглядит вот так:

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

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

Давайте посмотрим, из чего состоит эта страница, а для этого вставляем следующий код в functions.php:

add_filter( 'woocommerce_checkout_fields' , 'wpbl_show_fields' );
 
function wpbl_show_fields( $array ) {
	
	// Выводим список полей, но только если пользователь имеет права админа
	if( current_user_can( 'manage_options' ) ){
	
		echo '<pre>';
		print_r( $array);
		echo '</pre>';

	}
	
	return $array;
}

После вставки кода вы увидите массив всех полей оформления заказа в WooCommerce с параметрами. Как вы можете видеть в массиве, эти поля отсортированы по группам: billing, shipping, account, order.

А конкретный массив полей, например для поля «Название компании» выглядит так:

[billing_company] => Array
	(
		[label] => Название компании
		[class] => Array
			(
				[0] => form-row-wide
			)

		[autocomplete] => organization
		[priority] => 30
		[required] => 
	)

Посмотрели на все имеющиеся поля оформления заказа и продолжаем…


Делаем обязательные поля не такими уж и обязательными 🙂

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

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

Обязательные поля при оформлении заказа WooCommerce

Обязательные поля при оформлении заказа WooCommerce

В рамках этого руководства мы будем работать в основном с woocommerce_checkout_fields, но если вам одновременно нужны разные поля для выставления счета (Billing) и для доставки (Shipping), лучше использовать зацепку woocommerce_default_address_fields, потому что она влияет как на поля доставки, так и на выставление счетов одновременно.

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

add_filter( 'woocommerce_default_address_fields' , 'wpbl_fileds_validation' );
 
function wpbl_fileds_validation( $array ) {
	
	// Имя
	unset( $array['first_name']['required']);
	
	// Фамилия
	unset( $array['last_name']['required']);
	
	// Область / район
	unset( $array['state']['required']);
	
	// Почтовый индекс
	unset( $array['postcode']['required']);
	
	// Населённый пункт
	unset( $array['city']['required']);
	
	// 1-ая строка адреса 
	unset( $array['address_1']['required']);
	
	// 2-ая строка адреса 
	unset( $array['address_2']['required']);
	
	// Возвращаем обработанный массив
	return $array;
	
}

Ну а что там с полем телефона? К сожалению он не входит в массив полей адреса. Придется использовать woocommerce_checkout_fields, чтобы сделать поле не обязательным:

add_filter( 'woocommerce_checkout_fields', 'wpbl_phone_field_validation' );
 
function wpbl_phone_field_validation( $array ) {
	
	// Телефон
	unset( $array['billing']['billing_phone']['required'] );
	
	// Возвращаем обработанный массив
	return $array;
}

Убираем лишние поля при оформлении заказа

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

Избавить от лишних полей очень просто:

add_filter( 'woocommerce_checkout_fields', 'wpbl_remove_some_fields', 9999 );
 
function wpbl_remove_some_fields( $array ) {
 
	//unset( $array['billing']['billing_first_name'] ); // Имя
	//unset( $array['billing']['billing_last_name'] ); // Фамилия
	//unset( $array['billing']['billing_email'] ); // Email
	//unset( $array['order']['order_comments'] ); // Примечание к заказу
 
	unset( $array['billing']['billing_phone'] ); // Телефон
	unset( $array['billing']['billing_company'] ); // Компания
	unset( $array['billing']['billing_country'] ); // Страна
	unset( $array['billing']['billing_address_1'] ); // 1-ая строка адреса 
	unset( $array['billing']['billing_address_2'] ); // 2-ая строка адреса 
	unset( $array['billing']['billing_city'] ); // Населённый пункт
	unset( $array['billing']['billing_state'] ); // Область / район
	unset( $array['billing']['billing_postcode'] ); // Почтовый индекс
 	
	// Возвращаем обработанный массив
	return $array;
}

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

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

Первые четыре строчки закомментированы, так как в качестве примера мы оставляем Имя, Фамилия, Email и Примечание к заказу:

Убираем лишние поля при оформлении заказа WooCommerce

Убираем лишние поля при оформлении заказа WooCommerce

Меняем порядок полей

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

Сортировка полей внутри группы

Во-первых, вы должны помнить, что поля разделены на группы, а их всего 4:

  • billing – Адрес выставления счёта
  • shipping – Адрес доставки
  • account – Информация об аккаунте
  • order – Детали заказа

Каждая из этих групп содержит поля и можно легко изменить их порядок с помощью специального параметра приоритета.

В качестве примера давайте сделаем поле Email первым, а это всего пара строк кода:

add_filter( 'woocommerce_checkout_fields', 'wplb_email_first' );
 
function wplb_email_first( $array ) {
	
	// Меняем приоритет
	$array['billing']['billing_email']['priority'] = 4;
	
	// Возвращаем обработанный массив
	return $array;
}

А в результате страница оформления заказа будет выглядеть вот так:

Меняем приоритет поля оформления заказа в WooCommerce

Меняем приоритет поля оформления заказа в WooCommerce

Почему мы установили priority (приоритет) равный 4? Всё просто. Каждое из полей по умолчанию имеет свой приоритет, все они перечислены в таблице ниже. Итак, согласно таблице, чтобы сделать поле электронной почты первым, нужно использовать значение меньше 10.

Группа Название Приоритет
Billing billing_first_name 10
billing_last_name 20
billing_company 30
billing_country 40
billing_address_1 50
billing_address_2 60
billing_city 70
billing_state 80
billing_postcode 90
billing_phone 100
billing_email 110
Shipping shipping_first_name 10
shipping_last_name 20
shipping_company 30
shipping_country 40
shipping_address_1 50
shipping_address_2 60
shipping_city 70
shipping_state 80
shipping_postcode 90
Account account_password
Order order_comments

Иногда после игр с приоритетами можно поломать верстку и получится что-то вроде этого:

Поля при оформлении заказа отображаются не корректно

Поля при оформлении заказа отображаются не корректно

Почему так происходит? А всё просто – недостаточно отсортировать массив полей. Необходимо применить соответствующие классы и к каждому полю.

На самом деле каждое поле оформления заказа имеет свой стиль (класс CSS), в зависимости от его положения, есть 3 основных класса:

  • form-row-first – 50% в ширину, первый,
  • form-row-last – 50% в ширину, второй,
  • form-row-wide – 100% в ширину.

Давайте расставим правильные приоритеты и назначим плавильные CSS классы:

add_filter( 'woocommerce_checkout_fields', 'wplb_reorder', 9999 );
 
function wplb_reorder( $array ) {
	
	// Меняем приоритет
	$array['billing']['billing_email']['priority'] = 30;
	$array['billing']['billing_phone']['priority'] = 40;
	
	// Назначаем CSS классы
	$array['billing']['billing_email']['class'][0] = 'form-row-first';
	$array['billing']['billing_phone']['class'][0] = 'form-row-last';
	
	// Возвращаем обработанный массив
	return $array;
}

И как результат – всё выглядит правильно и приятно:

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

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

Всё просто да? 🙂

Перемещение поля в другую группу

К сожалению этот метод не всегда работает, да и не со всеми полями, но и обойти его стороной тоже нельзя. Для примера давайте переместим поле Email другую группу:

add_filter( 'woocommerce_checkout_fields', 'wpbl_move_to_order_group', 10000 );
 
function wpbl_move_to_order_group( $array ){
 
	// 1. Добавляем поле в новую группу
	$array['order']['billing_email'] = $array['billing']['billing_email'];
 
	// 2. Удаляем поле из предыдущей группы
	unset( $array['billing']['billing_email'] );
	
	// 3. Возвращаем полям прежний CSS классы (не нужно если до этого не меняли)
	$array['order']['billing_email']['class'][0] = 'form-row-wide';
	$array['billing']['billing_phone']['class'][0] = 'form-row-wide';
 
	// Возвращаем обработанный массив
	return $array;
 
}

И как результат:

Перемещение поля из одной группы в другую

Перемещение поля из одной группы в другую

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

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

  • woocommerce_before_checkout_billing_form – До формы адреса оплаты.
  • woocommerce_after_checkout_billing_form – После формы адреса оплаты.
  • woocommerce_before_checkout_registration_form – До формы регистрации.
  • woocommerce_after_checkout_registration_form – После формы регистрации.
  • woocommerce_before_checkout_shipping_form – До формы адреса доставки.
  • woocommerce_after_checkout_shipping_form – После формы адреса доставки.
  • woocommerce_before_order_notes – До примечания к заказу.
  • woocommerce_after_order_notes – После примечания к заказу.

Всё понятно из названий зацепок, ими мы воспользуемся ниже, но они могут не сработать только в одном случае – если шаблоны оформления заказа WooCommerce по умолчанию: form-shipping.php и form-billing.php были переопределены в теме. В этом случае придется вручную добавлять новые поля в файлы темы в каталоге /woocommerce/checkout.

Итак, вот собственно код:

// Добавляем поля
add_action( 'woocommerce_after_checkout_billing_form', 'wpbl_select_field' );
add_action( 'woocommerce_after_order_notes', 'wpbl_checkbox_filed' );
 
// Сохраняем поля
add_action( 'woocommerce_checkout_update_order_meta', 'wpbl_save_fields' );
 
// Поле select
function wpbl_select_field( $checkout ){
 
	// Описываем поле
	woocommerce_form_field( 'dron', array(
		'type'          => 'select', // Тип поля. Можно любое - text, textarea, select, radio, checkbox, password. В нашем случае это select
		'required'	=> true, // этот параметр добавляет звездочку "*" к полю
		'class'         => array('wpbl-field', 'form-row-wide'), // Массив CSS классов
		'label'         => 'Доставить договор дроном?', // Заголовок поля
		'label_class'   => 'wpbl-label', // CSS класс заголовка
		'options'	=> array( // Массив опций для типа "select" или "radio"
			''		=> 'Что-то нужно выбрать', // Пусто значение означает, что нужно что-то выбрать
			'Yes'	=> 'Да, я хочу увидеть дрона!', // 'value'=>'Name'
			'No'	=> 'Нет, я сам к вам приду'
			)
		), $checkout->get_value( 'dron' ) );
 
	// Сюда так же можно добавить чуть-чуть HTML кода например <hr> и что-то ещё.
	// В качестве примера мы добавляем стилевое оформление для выпадающего списка. Не далейте так. Все стили должны быть в CSS файле!
	echo '<style>#dron{padding:15px; background:#f1f1f1; border:none;}</style>';
 
}
 
// Поле checkbox
function wpbl_checkbox_filed( $checkout ) {
 
	woocommerce_form_field( 'subscribe', array(
		'type'	=> 'checkbox',
		'class'	=> array('wpbl-field form-row-wide'),
		'label'	=> ' Я хочу подписать на рассылку',
		), $checkout->get_value( 'subscribe' ) );
 
}
 
// Функция сохранения
function wpbl_save_fields( $order_id ){
 
	// Сохраняем select
	if( !empty( $_POST['dron'] ) ){
		update_post_meta( $order_id, 'dron', sanitize_text_field( $_POST['dron'] ) );
	}
		
	// Сохраняем checkbox
	if( !empty( $_POST['subscribe'] ) && $_POST['subscribe'] == 1 ){
		update_post_meta( $order_id, 'subscribe', 1 );
	}
		
}

И как результат:

Добавляем поля оформления заказа в WooCommerce

Добавляем поля оформления заказа в WooCommerce

А после оформления в информации о заказе (WooCommerce → Заказы) появятся новые, только что созданные поля:

Сохранение значения новых полей в ордере

Сохранение значения новых полей в ордере

К сожалении, даже с учетом того, что для нашего выпадающего списка мы поставили ‘required’ => true, поле всё еще по сути не обязательно для заполнения. 🙁

Добавив небольшой фрагмент кода мы решим эту задачку:

add_action('woocommerce_checkout_process', 'wpbl_select_field_validation');
 
function wpbl_select_field_validation() {
 
	// Можно как угодно проверять, а в нашем случае это простая проверка на наличие в $_POST[]
	if ( empty( $_POST['dron'] ) ){
		wc_add_notice( 'Дрона то отправлять или нет?.', 'error' );
	}
		
}

Посмотрите на второй параметр функции wc_add_notice – он также поддерживает типы уведомлений «success» и «notice», но параметр «error» – именно то, что нужно в нашем случае.

Вывод ошибки если пользователь не заполнил нужное нам поле при оформлении заказа

Вывод ошибки если пользователь не заполнил нужные нам поля оформления заказа в WooCommerce

На этом пока всё.

Если у вас есть вопросы или просто хотите поделиться своим мнением, то оставляйте комментарии ✌️

Спасибо.

Приветствую вас, дорогие друзья!

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

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

форма оформления заказа в Woocommerce

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

Навигация по статье:

  • Установка плагина Saphali Woocommerce Russian
  • Редактирование существующих полей
  • Добавление новых полей
  • Редактирование полей реквизитов доставки и дополнительных полей
  • Как сделать чтобы блоки формы размещались в один столбец?
  • Видеоинструкция

Установка плагина Saphali Woocommerce Russian

Для реализации данной задачи можно использовать плагин Saphali Woocommerce Russian.

Устанавливается он аналогично любому другому плагину. И после установки и активации у нас в разделе Woocommerce появляется пункт Saphali WC Lite.

плагин Saphali Woocommerce Russian

Для настройки и редактирования формы оформления заказов переходим в раздел «Управление полями».

управление полями в Woocommerce

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

Редактирование существующих полей

С данными полями мы можем делать следующие операции:

  1. 1.Перемещать и менять местами. Для этого наводим курсор на любое поле, при этом курсор у нас приобретает вид плюсика со стрелочками. Зажимаем левую кнопку мыши и перетаскиваем это поле туда, куда нам нужно.
  2. 2.Можно редактировать поля, изменять надпись. Для этого ставим курсор в поле, где указан заголовок и меняем его значение на своё
  3. изменения надписи полей

  4. 3.Удалять ненужные поля. Для удаления поля просто нажимаем на кнопку «Удалить», которая находится справа от названия данного поля.
  5. 4.Делать поля по одному или по 2 в строку. Для этого мы должны задать здесь соответствующий класс:
    • Если задан класс form-row-first, то это значит, что поле будет идти на половину строки, при чем, оно будет идти первым.
    • Если стоит класс form-row-last — это значит, что поле также будет идти на половину строки, он оно будет расположено последним. То есть вторым в строке.
    • Если нужно сделать, что бы какое-то поле шло на ширину всей строки, то в поле «Класс поля» нужно поставить класс form-row-wide.

    изменение расположения полей

  6. 5.Так же, обращаю ваше внимание на столбец «Clear», если вы устанавливаете здесь галочку, то это будет указывать на то, что следующее поле будет начинаться с новой строки. Обычно, галочки здесь следует ставить тогда, когда в одной строке идет по два поля, и ставится она возле поля с классом form-row-last.

    поле с новой строки

  7. 6.Так же вы можете сделать, что бы у вас в поле было задано значение по умолчанию. Например, для адреса здесь уже введен текст «Улица и т.д.». При этом на странице формы в данном поле будет по умолчанию отображается текст, который исчезает, когда покупатель начинает вводить свои данные.
  8. 7.Так же, вы можете выбрать тип поля. Это может быть:
    • Select — раскрывающийся список
    • Checkbox – это когда у вас доступно несколько вариантов, я человек ставит галочку
    • Textarea — большое поле, в которое можно вводить какой-то более или мене большой текст
    • Text – стандартное поле для ввода

    изменение типа поля

  9. 8.Также можно выбирать обязательно ли данное поле для заполнения или нет, и публиковать это поле или нет.

    поле обязательное для заполнения

Добавление новых полей

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

  1. 1.Спускаемся вниз страницы и нажимаем на кнопку «Добавить»:

    добавление поля

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

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

восстановить поля по умолчанию

Редактирование полей реквизитов доставки и дополнительных полей

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

Здесь есть вот такой раздел «Реквизиты доставки»:

редактирование полей доставки

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

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

Мы можем здесь либо это поле удалить совсем, либо добавить сюда какие-то еще свои дополнительные поля.

Как сделать чтобы блоки формы размещались в один столбец?

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

  1. 1.При помощи встроенного редактора WordPress, который находится в разделе «Внешний вид» => «Редактор». Здесь нам нужно найти файл таблицы стилей style.css, и в самом конце файла прописать необходимый набор стилей.

    редактор кода WordPress

  2. 2.Либо можно воспользоваться какой-то программой для редактирования кода с возможностью подключения к сайту по FTP. Я, например, обычно использую программу Notepad++.

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

#customer_details, #order_review_heading, #order_review{

width:100%!important;

float:none!important;

}

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

Далее сохраняем изменения и смотрим, что получилось.

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

Для этого припишем этим блокам еще два css-свойства, это свойство max-width, я задала здесь 900 пикселей, но вы можете задать ту ширину, которая вам нужна, и свойство margin: auto, которое позволяет выровнять эти блоки по центру страницы.

В сочетании с предыдущим кодом это будет выглядеть так:

#customer_details, #order_review_heading, #order_review{
width:100%!important;
float:none!important;
max-width:900px;
margin:auto!important;
}

Так же, сохраняем изменения и при обновлении получаем следующую картинку:

измененные поля формы заказа

Ширина нашей форму уменьшилась и если вам нужно сделать ее чуть уже или чуть шире, то вы изменяете значение max-width. Его я пишу без правила !important, так как по умолчанию в стилях Woocommerce это значение не задается вовсе.

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

Видеоинструкция

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

На этом у меня все, спасибо за то, что посетили мой сайт, и до встречи в следующих статьях!

С уважением Юлия Гусарь

Страница оформления плагина woocommerce имеет определенную структуру и функционал. Но данная структура не совсем удобна. Доработаем страницу оформления, разбив на логические блоки: Заказ, Доставка, Форма оплаты, Информация о заказчике и т.д.

Оформление заказа (базовая структура)

Шаблон form-checkout.php
form name=»checkout»

woocommerce_checkout_billing (информация о заказчике)
woocommerce_checkout_shipping (информация о доставке)

h3 Заказ /h3
div id=»order_review» Order-review /div

/form

Шаблон review-order.php (Order-review)
table
позиции товара к покупке
итого
shipping (cart-shipping.php, ajax зависимость от введенной в woocommerce_checkout_billing информации, подробнее про доставку)
/table

div id=»payment» Форма оплаты /div (подключена хуком)

Кнопка Оформить заказ

Подготовил более наглядную схему за какую область оформления отвечает какой шаблон Woocommerce

Блок «Выбор способа доставки»

Шаблон который отвечает за вывод блока с выбором вариантов доставки находиться (почему-то) здесь: cart/cart-shipping.php.

Надпись Доставка, которая изначально там присутствует выводиться этой строкой:

echo wp_kses_post( $package_name );

Добавить заголовок «Выберите способ доставки» и общий вес заказа непосредственно в блок с доставкой, можно хуком

function action_woocommerce_review_order_before_shipping(  ) { 

echo '<h3>Выбор способа доставки</h3>';
	
global $woocommerce;
echo '<small class="total-weight">Общий вес: '; 

$total_weight = $woocommerce->cart->cart_contents_weight;
$total_weight .= ' '.get_option('woocommerce_weight_unit');
echo $total_weight;

echo '</small>';

}; 
         
add_action( 'woocommerce_review_order_before_shipping', 'action_woocommerce_review_order_before_shipping', 10, 0 );

Дорабатываем элементы

Если мы не используем функционал расчета доставки и применения купонов — можно отключить ajax обновление. Если отключать ajax не нужно — ниже есть способ без отключения.

// Отключить Ajax на странице оформления
jQuery(document.body).on('update_checkout', function(e){
    //e.preventDefault();
    //e.stopPropagation();
    e.stopImmediatePropagation();
    //console.log(e);
});

Переместить блок Формы оплаты

remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );
add_action( 'woocommerce_after_order_notes', 'woocommerce_checkout_payment', 20 );
либо подключить к собственному хуку

Отключение расчета доставки

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

#shipping_method_0_flat_rate-6 — id поля с пунктом Доставка

$(document).ready(function() {

	if($("<strong>#shipping_method_0_flat_rate-6</strong>").is(':checked')) { $('.shipping_address').show(); }

	$('.shipping_method').click(function(){

		if($("<strong>#shipping_method_0_flat_rate-6</strong>").is(':checked')) {
			$('.shipping_address').show();
			$('.shipping_address').html('<h3>Информация о доставке</h3><p class="form-row form-row form-row-wide address-field validate-required" id="shipping_address_1_field"><label for="shipping_address_1" class="">Адрес доставки <abbr class="required" title="обязательно">*</abbr></label><input type="text" class="input-text " name="shipping_address_1" id="shipping_address_1" placeholder="Адрес доставки (улица, дом, подъезд)*" autocomplete="address-line1" value=""></p><p class="form-row form-row form-row-wide address-field validate-required " id="shipping_city_field"><label for="shipping_city" class="">Населенный пункт <abbr class="required" title="обязательно">*</abbr></label><input type="text" class="input-text " name="shipping_city" id="shipping_city" placeholder="Населенный пункт*" autocomplete="address-level2" value=""></p><p class="form-row form-row form-row-first address-field validate-required validate-state" id="shipping_state_field"><label for="shipping_state" class="">Область/регион <abbr class="required" title="обязательно">*</abbr></label><input type="text" class="input-text " value="" placeholder="Область/Регион/Район" autocomplete="address-level1" name="shipping_state" id="shipping_state"></p>');
		} else {
			$('.shipping_address').html('<p class="form-row form-row form-row-wide address-field validate-required woocommerce-validated" id="shipping_address_1_field"><label for="shipping_address_1" class=""><abbr class="required" title="обязательно">*</abbr></label><input type="text" class="input-text " name="shipping_address_1" id="shipping_address_1" placeholder="Адрес доставки (улица, дом, подъезд)*" autocomplete="address-line1" value=" "></p><p class="form-row form-row form-row-wide address-field validate-required woocommerce-validated" id="shipping_city_field"><label for="shipping_city" class="">Населенный пункт <abbr class="required" title="обязательно">*</abbr></label><input type="text" class="input-text " name="shipping_city" id="shipping_city" placeholder="Населенный пункт*" autocomplete="address-level2" value=" "></p><p class="form-row form-row form-row-first address-field validate-required validate-state" id="shipping_state_field"><label for="shipping_state" class="">Область/регион <abbr class="required" title="обязательно">*</abbr></label><input type="text" class="input-text " value=" " placeholder="Область/Регион/Район" autocomplete="address-level1" name="shipping_state" id="shipping_state"></p>');
			$('.shipping_address').hide();
		}

	});

});

Данный вариант реализации не является полноценным решением, т.к. имеет ряд недостатков, и в своей основе имеет довольно примитивный подход

Взаимосвязь варианта доставки и полей

Метод для 2-х вариантов доставки (для 3-х и более не подойдет)

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

Проблема woocommerce проявляется в том, что форма Детали доставки раскрывается при нажатии заголовка Доставка по другому адресу? (#ship-to-different-address) и вместе с сокрытием поля отключается верификация полей доставки. При двух вариантах доставки (Самовывоз и Доставка) при их переключении можно поставить с помощью jquery событие (click) на id ship-to-different-address. При этом необходимо сделать, чтоб одно из полей изначально было активным, в зависимости от необходимости.

$('#shipping_method_0_flat_rate-2').attr('checked',true);

$('input:radio[name="shipping_method[0]"]').on('change', function () {
    $("#ship-to-different-address-checkbox").click();
});

Для того чтобы поля доставки были изначально открытыми необходимо установить настройку доставки в опциях woocommerce
Назначение доставки > По умолчанию для адреса доставки клиента

В поле город можно по-умолчанию сделать автоподставление
$(«#shipping_city»).val(«Ростов-на-Дону»);

Метод для 3-х и более вариантов доставки

Изначально делаем доставку (один из вариантов) и поля доставки активными. Далее jquery-магия

$('input:radio[name="shipping_method[0]"]').on('change', function () {

	if($("#shipping_method_0_local_pickup-2").is(":checked")) {

		if($("#ship-to-different-address-checkbox").is(":checked")) {		
			$("#ship-to-different-address-checkbox").click();
		}	
		else {
			
		}

	}

	else {

		if($("#ship-to-different-address-checkbox").is(":checked")) {		
			
		}	
		else {
			$("#ship-to-different-address-checkbox").click();
		}

	}

});

В этом случае мы проверяем активно ли поле Самовывоз (#shipping_method_0_local_pickup-2) и в зависимости от этого проверяем скрытый (я его скрываю) checkbox (Доставка по другому адресу? #ship-to-different-address).

Без отключения ajax

Ajax на странице оформления заказа так или иначе нужен (для тех же купонов). Поэтому немного изменим (изменения коснулись первой строки, т.к. элементы DOM были еще не созданы) универсальный скрипт отключения доставочных полей. #shipping_method_0_local_pickup-3 — id поля с самовывозом.

$('body').on('change', 'input:radio[name="shipping_method[0]"]', function(e) {

	if($("#shipping_method_0_local_pickup-3").is(":checked")) {

		if($("#ship-to-different-address-checkbox").is(":checked")) {		
			$("#ship-to-different-address-checkbox").click();
		}	
		else {
			
		}

	}

	else {

		if($("#ship-to-different-address-checkbox").is(":checked")) {		
			
		}	
		else {
			$("#ship-to-different-address-checkbox").click();
		}

	}

});

Два пункта самовывоза

jQuery('body').on('change', 'input:radio[name="shipping_method[0]"]', function() {

	if(jQuery('#shipping_method_0_local_pickup-1').is(':checked')) {

		if(jQuery('#ship-to-different-address-checkbox').is(':checked')) {		
			jQuery('#ship-to-different-address-checkbox').click();			
		}

	} else if(jQuery('#shipping_method_0_local_pickup-2').is(':checked')) {

		if(jQuery('#ship-to-different-address-checkbox').is(':checked')) {			
			jQuery('#ship-to-different-address-checkbox').click();			
		}

	} else {

		if(jQuery('#ship-to-different-address-checkbox').is(':checked')) {	
			
		} else {
			jQuery('#ship-to-different-address-checkbox').click();			
		}

	}

});

И на всякий случаем включаем изначальный выбор на какую-либо доставку

$('#shipping_method_0_flat_rate-4').attr('checked',true);

Напоминание: в настройках доставки Назначение доставки должно быть выбрано — По умолчанию для адреса доставки клиента

Отключение платежного адреса при Самовывозе

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

jQuery('body').on('change', 'input:radio[name="shipping_method[0]"]', function() {

	var address = $('#billing_address_1_field input').val();
	setTimeout(function(){

		if( jQuery('#shipping_method_0_local_pickup-10').is(':checked') ) {
			$('#billing_address_1_field').hide();
			$('#billing_city_field').hide();
			if(address === ''){ 
				$('#billing_address_1_field input').val('_');
			};				
		} else {
			$('#billing_address_1_field').show();
			$('#billing_city_field').show();
			if(address === '_'){ 
				$('#billing_address_1_field input').val('');
			};				
		}

	}, 800);	

});

Изначально (при загрузке страницы) должен быть выбран любой другой вариант доставки, кроме Самовывоза.

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

Также добавил в это решение и отключение города доставки

jQuery('body').on('change', 'input:radio[name="shipping_method[0]"]', function() {

		var address = $('#billing_address_1_field input').val();
		var city = $('#billing_city_field input').val();
		setTimeout(function(){

			if( jQuery('#shipping_method_0_local_pickup-10').is(':checked') ) {
				$('#billing_address_1_field').hide();
				$('#billing_city_field').hide();
				if(address === ''){ 
					$('#billing_address_1_field input').val('_');
				};
				if(city === ''){ 
					$('#billing_city_field input').val('_');
				};
			} else {
				$('#billing_address_1_field').show();
				$('#billing_city_field').show();
				if(address === '_'){ 
					$('#billing_address_1_field input').val('');
				};	
				if(city === '_'){ 
					$('#billing_city_field input').val('');
				};				
			}

		}, 800);

});

Варианты оформления для физ. лица и юр. лица

Задача сделать 2 варианта оформления заказа для физ. лица и для юр. лица. Создание этого функционала описано в статье Юр. или физ. лицо при оформлении

Верификация телефона (ajax)

Если телефон введен не корректно, то при нажатии кнопки Оформить заказ выведется уведомление об этом. Но при этом если в поле ввести символы вместо цифр, то полю ajax добавится значение woocommerce-validated, т.е. как бы прошедшее валидацию.

Чтобы это исправить нужно в файл woocommerce/assets/js/frontend/checkout.js (причем на сайт загружается checkout.min.js) добавить внутри функции validate_field: function( e ) (примерно 200 строка) следующую проверку:

if ( $parent.is( '.validate-phone' ) ) {
	if ( $this.val() ) {

		var pattern = new RegExp(/^([0-9s/+-#_()]*)$/);

		if ( ! pattern.test( $this.val()  ) ) {
			$parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-phone' );
			validated = false;
		}
	}
}

[warning]Но при следующем обновлении WC данная проверка сотрется[/warning]

Поэтому данную функцию лучше прописать в своем файле скриптов:

jQuery('body').on('change', '.validate-phone input', function() {
	var pattern = new RegExp(/^([0-9s/+-#_()]*)$/);
	if ( ! pattern.test( $('.validate-phone input').val()  ) ) {
		$('.validate-phone').removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-phone woocommerce-invalid-required-field' );
	}
});

Но у данного метода есть небольшой изъян, при нажатии кнопки Оформить заказ (#place_order) полю, даже если оно заполнено не корректно добавляется класс woocommerce-validated. И даже при попытке привязать функцию к триггерам

jQuery(document).on( 'update_checkout', function(){  });
jQuery(document).on( 'init_checkout', function(){  });

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

Вот доп. функция которая решает (несколько примитивно) данный вопрос:

jQuery('body').on( 'click','#place_order', function(){
	var pattern = new RegExp(/^([0-9s/+-#_()]*)$/);

	if ( ! pattern.test( $('.validate-phone input').val()  ) ) {
		setTimeout(function(){ 
			$('.validate-phone').removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-phone woocommerce-invalid-required-field' ); 
		}, 1000);
	}	
});

Дополнительные условия магазина

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

// Add Checkboxes
add_action('woocommerce_after_checkout_billing_form', 'my_required_checkout_fields');
function my_required_checkout_fields()
{
    woocommerce_form_field('age_confirm', array(
        'type' => 'checkbox',
        'class' => array('input-checkbox'),
        'label' => __('I confirm that I am 21 years old or over.'),
        'required' => true,
    ), WC()->checkout->get_value('age_confirm'));
     
     
    woocommerce_form_field('tos_agreement', array(
        'type' => 'checkbox',
        'class' => array('input-checkbox'),
        'label' => __('I agree to the terms of use of this website.'),
        'required' => true,
    ), WC()->checkout->get_value('tos_agreement'));
     
}
 

// Process the checkout
add_action('woocommerce_checkout_process', 'my_custom_checkout_fields_process');
function my_custom_checkout_fields_process()
{
    if (!$_POST['age_confirm']) {
        wc_add_notice(__('Please confirm you are 21 years old or over'), 'error');
    }
     
    if (!$_POST['tos_agreement']) {
        wc_add_notice(__('Please agree to the terms of use first'), 'error');
    }
}
 
//Update the order meta with field values
add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_fields_update_order_meta');
function my_custom_checkout_fields_update_order_meta($order_id)
{
    if ($_POST['age_confirm']) {
        update_post_meta($order_id, 'Age Confirm', esc_attr($_POST['age_confirm']));
    }
    if ($_POST['tos_agreement']) {
        update_post_meta($order_id, 'Terms Of Use Agreement', esc_attr($_POST['tos_agreement']));
    }
}

Пример согласия с условия доставки, в данном примере удалена последняя функция сохранения в БД, т.к. этого не требуется.

// Согласие с Условиями доставки

add_action('woocommerce_checkout_terms_and_conditions', 'my_required_checkout_fields');
function my_required_checkout_fields() {
    woocommerce_form_field('delivery_confirm', array(
        'type' => 'checkbox',
        'class' => array('input-checkbox'),
        'label' => __('Нажимая кнопку Подтвердить заказ, я соглашаюсь с <a href="/usloviya-dostavki/" target="_blank">Условиями поставки</a>'),
        'required' => true,
    ), WC()->checkout->get_value('delivery_confirm'));
}
 
add_action('woocommerce_checkout_process', 'my_custom_checkout_fields_process');
function my_custom_checkout_fields_process() {
    if (!$_POST['delivery_confirm']) {
        wc_add_notice(__('Вы должны ознакомиться и согласиться с Условиями поставки'), 'error');
    }
}

Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.

102 комментария к “Как изменять WooCommerce. Эпизод #5. Страница оформления заказа”

  1. Какие все таки шикарные видео! Желаю тебе удачи и спасибо за такие видосы.

    Ответить

    • Спасибо! И тебе успехов!

      Ответить

  2. Отличный обзор, спасибо!

    Ответить

    • Спасибо, что смотрите

      Ответить

  3. все по полочкам! лойс и спасиб)

    Ответить

    • Всегда пожалуйста

      Ответить

  4. Спасибо за отличные уроки по woocommerce) Проблема с объединением корзины и checkout, на странице спасибо теперь тоже отображает корзину, как можно это решить) ?

    Ответить

    • Хм, специально проверил, у меня на Storefront ничего не вылезает, все четко. Видимо у вас так тема сделана, попробуйте на другой теме проверить

      Ответить

    • Да скорее всего тема так сделана

      Ответить

  5. ну а как быть с премиум темой FLATSOME, там очередность не меняеться етим способом

    Ответить

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

      Ответить

    • Проверил на этой теме, у меня все четко меняется без проблем

      Ответить

    • Спасибо что посмотрели, переписал ещё раз код и тожет поменялось, наверно где то был ошибку сделал впервый раз, ещё раз спасибо

      Ответить

  6. Приветствую!

    Отдельный респект за то что ткнул носом в yoast лайфхак – немного разнообразил тайтлы полями и аттрибутами.

    Вопросик такой. Ставил плагин по доставкам – он делает аналогичное скрытие полей (город,отделение почты берет по апи для расчета доставки), но фигня в том, что когда ставишь галочку появление этих полей нифига не видно (выше на странице вылазят, ведь галочка доставки в самом низу после контактного инфо и корзины. Верстка такова что блок корзины на всю ширину экрана под конт. информацией). Покупатели тупо не видят.
    можно ли их перевесить на другой хук?
    В “своем” плагине я так понял, что просто массив чекаут_филдс меняется через фильтр … как выводить поля доставки внизу возле чекбокса, чтото пока ума не хватает)

    Ответить

    • Привет! Не очень понял, в чем проблема. Если в зависимости от доставки на чекауте поля выводить, то вот так можно https://wpruse.ru/woocommerce/hiding-fields-on-chosen-delivery/

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

      Ответить

    • Приветствую.
      попробую объяснить иначе. На твоем примере, если верстка адаптивна, то на мобайле 2 колонки превращаются в одну (блок “ваш заказ” уплывает под “оплата и доставка”). при выборе доставки покупатели тупо не видят выше всплывающих полей.
      Возможно ли вывести поля с адресом доставки.. ну где угодно.. перед выбором формы оплаты… или после купона?

      Ответить

    • Можно конечно. Переподключи блок Ваш заказ и выводи его на мобилках через is_wp_mobile где хочешь

      Ответить

  7. Еще вопрос, если можно… маюсь второй день.. вроде все очевидно но.. не работает нифига

    add_filter(“woocommerce_checkout_fields”, “zzz_order_fields”);

    function zzz_order_fields( $fields ) {
    $fields[‘billing’][‘billing_phone’][‘priority’] = 31;
    $fields[‘billing’][‘billing_email’][‘priority’] = 32;
    return $fields;
    }
    но при выводе ничего не меняется.

    Хотя судя по коду в атрибутах data-priority присвоение явно происходит !
    уже не знаю куда копать…

    Ответить

    • Артем, уже голову сломал, но ПОБЕДИЛ.
      и знаешь в чем засада? тебе тож на заметку, может столкнешься или прольешь свет! чисто woo-шная заморочка.

      как только убрал
      unset($fields[‘billing’][‘billing_country’]);

      все заработало!!! приоритеты начали строиться как надо через woocommerce_checkout_fields. правда, чтобы адрес_1 задвинуть в конец пришлось еще и woocommerce_default_address_fields задействовать.
      +country тупо css убрал

      капут. вырванные годы.

      Ответить

    • Ну я про это вообще в видео сказал, что это поле нельзя удалять, на него много проверок завязано

      Ответить

    • Ага. Только тайна приоритетов далась с трудом 😉

      Ответить

    • Зато получил бесценный опыт)

      Ответить

    • Не говори. Надеюсь пригодится не только мне.)

      а вушникам я бы уши пооткрутил))
      костыль какойто дурацкий.

      Ответить

  8. Вопрос, а можно после ФИО и номера телефона поставить выбор способа доставки а потом сразу оплаты, что бы пользователю было удобно, и форма менялась по логической цепочке? А то выходит покупатель дошёл до конца формы и когда меняет способ оплаты и доставки в конце формы меняется сама форма…

    Ответить

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

      Ответить

  9. Можно все поля .val() формы записывать в объект localstorage, а при последующих кликах на оплату восстанавливать их по ее id, вставляя из сохраненного объекта.

    Ответить

    • Спасибо! Надо будет попробовать так сделать

      Ответить

  10. Добрый день.
    Мне нужно сделать чтобы при выборе оплаты после доставки была предоплата и при оформление заказа вибрасывало на лигпей опачевалась эта предоплата и формировался заказ тоесть с оплатой после доставки – стоимость предоплаты.
    На сайте уже работает лигпей и два вида оплаты. Нужно доделать предоплату для варианта когда оплата при получении.
    Раньше с таким не сталкивался.
    Спасибо за видео!
    Буду благодарен за помощь.

    Ответить

    • Добрый! Обычно предоплата используется. Но если предоплата.. Никогда такого не делал, но как вариант – Получаем стоимость заказа на чекауте
      Вычисляем процент предоплаты при выборе нужного способа оплаты.

      Как-то так

      Ответить

    • +WPRUSe · Финты WordPress спасибо за ответ!

      Ответить

  11. если глобал объект сохранить в переменную а после обновления вернуть?

    Ответить

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

    Firefox не может установить соединение с сервером mayson-lingerie.ru.

    Возможно, сайт временно недоступен или перегружен запросами. Подождите некоторое время и попробуйте снова.
    Если вы не можете загрузить ни одну страницу – проверьте настройки соединения с Интернетом.
    Если ваш компьютер или сеть защищены межсетевым экраном или прокси-сервером – убедитесь, что Firefox разрешён выход в Интернет.”

    В код я не лез, ничего не настраивал. Страницу Оформление заказа пробовал удалять и ставить заново. Не помогает. Что с этим можно сделать?

    Ответить

    • Добрый! Похоже хостинг не не справляется. Или поддержку пинать или попробовать сменить тему, может быть тема лишнее что-то генерирует

      Ответить

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

    Ответить

    • Добрый! Как дополнительное поле добавляйте. При желании можно что угодно добавить. Можно плагином, можно кодом, тут как удобнее

      Ответить

  14. Добрый день. Подскажите, пожалуйста, на некоторых шаблонах страниц, там где указано количество товаров в строке выводится × В русскоязычной версии это отображается как Ч, а должно быть х. Т.к оно выводится через sprintf, проблемно написать фильтр, как решаете проблему?)

    Ответить

    • Добрый! Никогда не встречал такой проблемы. Обычно это означает что на компьютере не загружаются шрифты или браузер криво отрабатывает

      И что-то не помню чтобы в количестве подобный знак отображался. Это же просто крестик. На какой страние вы его видите?

      Ответить

  15. Добрый день, проблема в том, что после оформления заказа с телефона высвечивается вместо нормальных данных (адреса доставки) всякие буквы а и е (это со стороны покупателя) как это исправить?

    Ответить

    • Добрый! Это больше похоже на не верную кодировку

      Ответить

  16. Добрый день! Подскажите, пожалуйста, как убрать пометку поля “НЕОБЯЗАТЕЛЬНОЕ”

    Ответить

    • Добрый! Только label править через хуки. Через фильтр woocommerce_default_address_fields можно изменить

      Ответить

  17. Нашел то что мне нужно корзина в форме + различные поля )))

    Ответить

  18. в файле class-wc-countries я в ручную расставил поля формы и приоритеты. Файл class-wc-order выводит значения Billing и shipping в админ панель. Не могу получить отображение значения поля в админ панели! Те поля которые я создал их значения не выводятся в админ панели! Пример: существующие поле address_2 я по такому же принципу добавил address_3, но значение поля address_3 не отображается а админке! Помогите решить проблему?

    Ответить

    • Плохая идея – править файлы плагина…
      Используйте плагин WooCommerce Checkout Fields. Должно помочь

      Ответить

    • @WPRUSe · Финты WordPress все через код получилось полностью без плагина

      Ответить

  19. Скажите, пожалуйста, у меня отображается “Ваши личные данные будут использоваться для обработки ваших заказов…” А фразы “я соглашаюсь” нет. В чем проблема.
    И как можно реализовать страницу оформления заказа в одну колонку? Чтобы Ваш заказ отображался ниже раздела оплата и доставка, а не справа. У меня на этой странице размещена боковая панель и плохо смотрятся эти две колонки. …В кодах совсем не сильна. Спасибо за подробные видео!

    Ответить

    • Эти настройки есть в консоли WordPress woocommerce-настройки вкладка-Учётки и приватность.
      а расположение блоков можете поискать в настройках страницы.

      Ответить

    • Скорее всего в кастомайзере “я соглашаюсь” надо включить
      И как можно реализовать страницу оформления заказа в одну колонку – только править файлы темы или использовать уже готовую тему. Например в теме OceanWP уже есть функционал пошагового оформления заказа

      Ответить

  20. Как можно изменить значение subtotal для товара, не общий, а именно товара(хочу написать свои скидки)

    Ответить

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

      Ответить

    • @WPRUSe · Финты WordPress нужно было желать это из function.php, спасибо я уже разобрался(:

      Ответить

    • Всегда пожалуйста

      Ответить

  21. Добрый день! Подскажите как убрать ненужные поля с блока-Детали оплаты. например: Фамилия, Почтовый индекс, Область/регион ?

    Ответить

    • Добрый! Можно, собственно в видео и рассказано как это сделать. Или можно воспользоваться плагином типа WooCommerce Checkout Fields

      Ответить

  22. как насчёт сделать видео о том, как можно сделать собственную систему скидок? такого в интернете не нашёл, а плагины не всегда удовлетворяют все потребности. Думаю многим была бы интересна эта тема.

    Ответить

    • Это разработка, такое видео записать не так просто, а отдачи от него минимум… Как насчет просто купить готовый плагин или использовать купоны?

      Ответить

    • ​@WPRUSe · Финты WordPress
      не мой случай, слишком специфические условия скидок, ни один готовый плагин не подходит.

      Ответить

  23. У меня все получилось при помощи кода! Есть только одна проблема! У меня подключен ключ google API к Billing полю address_2 для автоматического поиска адреса и номера дома клиента. Этот ключ перестает работать когда обновляется форма, проблема заключается в первом шаге кода! Когда Billing делает запрос на обновление формы при переключении. Вот примерно в этой строке проблема woocommerce_update_order_review_fragments. Может как то можно решить проблему ?

    Ответить

    • Любую проблему можно решить при желании. Только при чем тут мой код? Логично что ключ перестает работать, не думаю что это проблема моего кода. Скорее всего надо ключ обновлять при переключении. Но это не точно

      Ответить

    • @WPRUSe · Финты WordPress да, верно ключ нужно обновлять, но как это сделать пока голову ломаю за что его цеплять не пойму.

      Ответить

  24. Что нужно сделать?

    Все просто: как изменить гребаную структуру вывода филдов?

    Так как то что сделали разрабы – прото ппц

    p -> label + span->input и все это с кучей своих класов

    Ответить

    • @WPRUSe · Финты WordPress Спасибо!

      Ответить

    • WPRUSe · Финты WordPress все сделал, все получилось!)

      Чтоб все отвечали так как вы, спасибо ! =)))

      Ответить

    • @Maks Fisher Рад, что все получилось!

      Ответить

  25. К слову видео отличное, просто не совсем то что я искал(

    Ответить

    • Спасибо. Что искали?

      Ответить

  26. Все инфу не могу найти как изменить слово “Купон” на “Промокод”. Понимаю что вроде мелочь, а мозгов не хватает пока

    Ответить

    • Проще перевод просто изменить. Например плагином Loco Translate

      Ответить

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

    Ответить

    • Через настройки можно добавить нужные способы доставки

      Ответить

  28. Добрый день, не очень поняла, в каком файле Вы пишете код на 16:30. Это файл в теме или в плагине? Только начала в этом разбираться, подскажите, пожалуйста. Использую тему Oceanwp

    Ответить

    • Добрый! В файле functions.php дочерней темы. Я об этом говорю в начале видео. Так что, вам для начала надо сделать дочернюю тему для вашей Oceanwp или скачать готовую у них на сайте

      Ответить

  29. Убрал поле Страна через фильтр без CSS, заказ проходит, версия Woocommerce 3.6.4

    Ответить

    • Хм, хорошая новость, спасибо. Проверю

      Ответить

  30. Добрый день, при выборе любой оплаты через сайт (кроме оплаты при получении) не приходит письмо о заказе на почту ни администратору, ни покупателю, то есть если выбрать оплату картой то оплата проходит, после оплаты покупателя перекидывает на страницу с заказом, заказ отображается в админке со статусом “в ожидании оплаты”, а письма не приходят. Подскажите пожалуйста какие есть варианты решения этой проблемы?

    Ответить

    • Добрый! Может письма в спам попадают? Проверяли?

      Ответить

    • @WPRUSe · Финты WordPress Спам проверили, писем там нет ни у клиента, ни у админа. Забыл также уточнить, что все онлайн платежи проходят через систему “Онлайн чеки” подключенную к кассе, если “Онлайн чеки” включены, то клиенту приходит письмо с чеком от ОФД, но админу письмо не приходит, по этому вопросу уже обратились в поддержку, но все равно как я понимаю, помимо ОФД письмо также должно приходить и с сайта. По настройкам тоже пробежались проверили, отправка писем и админу и клиенту включена на пунктах: “Новый заказ”, “Отмененный заказ” и “Неудавшийся заказ”, остальные пункты как я понимаю редактировать нельзя, они отправляются только клиенту. Подскажите, может есть возможность вручную создать новое уведомление на почту о всех действиях с заказами и с новыми поступившими заказами, или возможно есть другие варианты решения проблемы?

      Ответить

    • @Александр Зорин Хм, тогда надо проверить вообще письма с сайта уходят или нет и настроить SMTP

      Ответить

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

    Ответить

    • В том, что апселы по дефолту выводятся на корзине, через хук. Если корзина и чекаут разносятся то апселы надо переключать

      Ответить

  32. А как быть с тем, что в дополнительных настройках Woo в Корзине нельзя назначить “Оформление заказа”, потому что нет ее в раскрывающемся меню?

    Ответить

    • Не понял вопроса. На оформлении заказа по дефолту вообще нет корзины. В чем задача состоит?

      Ответить

  33. Привет) я пилю свой первый интернет магазин и ничего не понимаю. Где вообще находятся все эти коды?

    Ответить

    • Привет! В файлах плагина Вукомерс

      Ответить

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

    Ответить

    • Будут, если они есть и тема не правлена

      Ответить

  35. Подскажите, как сделать, чтобы при нажатии на Подтвердить заказ вело сразу на оплату, а не на страницу Подтверждения заказа? Используем woocommerce, storefront

    Ответить

    • Для этого какой нибудь шлюз для оплаты надо подключить

      Ответить

  36. Добрый день. А можно поле второго адреса использовать под например НДС и разместить его под полем “название фирмы? Как это лучше сделать, какие нюансы?

    Ответить

    • @Edward Januszkiewicz Поставьте плагин и не мучайтесь

      Ответить

  37. Добрый день, подскажите для чайков, как все-таки убрать повторяющее поле “оформить заказ” в мини корзине? в самом конце видео.

    Ответить

  38. Здравствуйте!

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

    Если делали уже такое подскажите как или возможно ли такое реализовать?

    Ответить

Добавить комментарий

На чтение 2 мин Опубликовано 24.09.2017

Привет! Сегодня я покажу вам очень полезный плагин для интернет-магазина Woocommerce! Вы сможете очень просто и быстро редактировать поля на странице оформления заказа. Можно изменить поля, удалить, добавить новые, изменить название поля и т.д. Очень простой и полезный плагин! Смотрите далее!

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

Установить плагин Flexible Checkout Fields for WooCommerce вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины — Добавить новый, введите название плагина в форму поиска, установите и активируйте плагин.

Flexible Checkout Fields for WooCommerce

Далее, после установки и активации плагина, у вас откроется страница. Нажмите на кнопку Allow & Continue, чтобы начать работу с плагином.

плагин активация

Далее, перейдите на страницу: Woocommerce — Checkout Fields. Здесь вы можете редактировать поля, которые отображаются на странице оформления заказа.

плагин оформление заказа

Далее, откройте виджет поля, чтобы изменить его. Вы можете:

На вкладке General:

  • Enable Field, включить или отключить поле.
  • Required Field, сделать поле обязательным или нет.
  • Label, указать название поля.

изменить поле

На вкладке Appearance вы можете:

  • Placeholder, можно указать текст внутри поля по умолчанию.
  • CSS Class, указать стиль и класс поля.
  • Сохраните изменения.

текст поля настройки

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

оформление заказа Woocommerce

Вы можете добавить новое поле. Слева в блоке Add New Field, выберите тип поля, укажите название поля и нажмите на кнопку Add Field. Справа у вас появится новый виджет поля. Сохраните настройки.

новое поле

Перейдите на страницу оформления заказа. У вас появится новое поле.

новое поле заказа

Всё готово! Вот так легко и быстро вы можете управлять полями оформления заказа.

Остались вопросы? Напиши комментарий! Удачи!

Понравилась статья? Поделить с друзьями:

Читайте также:

  • Как изменить страницу на фейсбук на бизнес страницу
  • Как изменить страницу каталога woocommerce
  • Как изменить страницу записей вордпресс
  • Как изменить страницу загрузки сайта
  • Как изменить страницу входа геткурс

  • 0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии