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

Опубликовано: 2020-07-21

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

Зачем настраивать кассу WooCommerce?

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

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

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

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

С плагинами
Программно

Если у вас нет навыков программирования, мы рекомендуем вам проверить эти плагины:

WooCommerce Direct Checkout : это отличный инструмент для упрощения процесса оформления заказа и перенаправления пользователей со страницы продукта на оформление заказа. У него есть бесплатная версия и премиум-планы, стоимость которых начинается от 19 долларов США.
WooCommerce Checkout Manager : с более чем 90 000 активных установок Checkout Manager — отличный плагин для повышения коэффициента конверсии. Он позволяет добавлять, настраивать и удалять поля на странице оформления заказа. Это бесплатный инструмент с бесплатной версией и профессиональными планами от 19 долларов США.

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

Добавление настраиваемых полей в кассу WooCommerce программно

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

Текст
Флажок
Типы радио входов

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

ПРИМЕЧАНИЕ . Имейте в виду, что если вы хотите добавить другие поля в свои проекты, вы должны реализовать проверку безопасности.

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

Вы можете кодировать свои скрипты в дочерней теме
Создать собственный плагин

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

Добавьте настраиваемые поля в кассу WooCommerce с помощью настраиваемого плагина.

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

Главный
Внешний интерфейс
Бэкенд

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

1. Откройте свою любимую IDE и создайте папку с тремя файлами:

QuadLayers_checkout_fields /__Classes /__/__class_qlccf_base.php (файл внешнего интерфейса) /__/__class_qlccf_back.php (файл внутреннего интерфейса) /__QuadLayers_checkout_fields.php (основной файл)

2. Основной файл

Основной файл — QuadLayers_checkout_fields.php :

 <?php
/**
 * @ссылка https://quadlayers.com/
 * @с 1.0.0
 * Название плагина: Пользовательские поля QuadLayers Checkout 
 * URI плагина: https://quadlayers.com/
 * Описание: Плагин для создания настраиваемых полей на странице оформления заказа WooCommerce, печати внутренних заказов и шаблонов электронной почты.
 * Версия: 1.0.0
 * Автор: Севастополис
 * URI автора: https://quadlayers.com/
 * Текстовый домен: qlccf
 */
если (! Определено ('ABSPATH')) {умереть ('-1');}
elseif(!class_exists('run_init')){
	окончательный класс run_init{	
		общедоступная статическая функция run(){
			return include_once plugin_dir_path( __FILE__ ).'classes/class_qlccf_base.php';
		}
	}
	run_init::run();
}
еще{
	echo "<h3>ОШИБКА - Существующий класс run_init в QuadLayers_checkout_fields.php!</h3>";
}

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

3. Файл класса внешнего интерфейса

Интерфейсный файл — class_qlccf_base.php . Здесь живет основной класс, и здесь вы можете включать неограниченное количество классов и функций. Абстрактный класс не может быть создан, поэтому он должен быть унаследован каким-либо другим классом. Вот внешний файл и подробное объяснение после кода:

 <?php
если (! Определено ('ABSPATH')) {умереть ('-1');}
elseif(!class_exists('базовый_класс')){

абстрактный класс base_class{   

    public const VERS = '1.1.0';// <-- Версия плагина
    public const PREFIX = 'qlccf';// <-- Префикс плагина
    public const PLDIR = __DIR__ ;// <-- Путь к каталогу плагина
    public const PLPAT = __FILE__ ;// <-- Путь к файлу  

    общедоступная функция add_base_hooks(){    
       add_action('woocommerce_after_order_notes', array($this,'quadlayers_subscribe_checkout'));       
       add_action('woocommerce_after_checkout_billing_form',array($this,'quadlayers_email_checkout'));
       add_action('woocommerce_before_order_notes', array($this,'quadlayers_radio_checkout'));
       add_action('woocommerce_checkout_update_order_meta',array($this, 'quadlayers_save_function'));
    }
    // вставляем флажок в кассе woocommerce — ловушка: after_order_notes
    общедоступная функция quadlayers_subscribe_checkout($checkout) {
            woocommerce_form_field('подписчик', массив(
                'тип' => 'флажок',
                //'требуется' => верно,
                'класс' => массив ('форма пользовательского поля для всей строки'),
                'label' => 'Подпишитесь на нашу рассылку.'                   
            ), $checkout->get_value('подписчик'));              
    }
    // Вставляем текст в кассу woocommerce — ловушка: after_billing_form
    общедоступная функция quadlayers_email_checkout($checkout2){
        woocommerce_form_field('альтпочта', массив(
            'тип' => 'электронная почта',
            //'требуется' => верно,
            'класс' => массив ('форма пользовательского поля для всей строки'),
            'label' => ' Альтернативный адрес электронной почты.'                             
        ), $checkout2->get_value('altmail'));  
    }
    // Вставляем настраиваемое поле радио в кассу woocommerce — ловушка: before_order_notes
    общедоступная функция quadlayers_radio_checkout($checkout3){
        woocommerce_form_field («канал», массив (
            'тип' => 'радио',
            //'требуется' => верно,
            'класс' => массив ('форма пользовательского поля для всей строки'),
            'label' => ' Как вы нас нашли?.',            
                'опции' => массив(
                    'Гугл' => 'Гугл',                  
                    'Друг' => 'Друг',
                    'Фейсбук' => 'Фейсбук',
                    'Ютуб' => 'Ютуб',
                    «Другое» => «Другое»            
                )
        ));
    }
    // сохраняем все значения пользовательских полей
    общедоступная функция quadlayers_save_function($order_id){ 
        если ( ! пусто ($_POST['suscriptor'] )) {
            update_post_meta($order_id, 'suscriptor', sanitize_text_field($_POST['suscriptor'] ));
        }
        если ( ! пусто ($_POST['altmail'] )) {
            update_post_meta($order_id, 'altmail',sanitize_text_field($_POST['altmail'] ));
        }
        если ( ! пусто ($_POST['канал'] )) {
            update_post_meta($order_id, 'канал',sanitize_text_field($_POST['канал'] ));
        }      
    }
}// Включаем базовый класс
    include_once(plugin_dir_path( __FILE__ ).'class_qlccf_back.php');
}
еще{
	echo "<h3>ОШИБКА ИНИЦИАЛИЗАЦИИ - Существующий класс base_class !</h3>";
}

После объявления класса мы определяем некоторые константы, которые мы можем использовать позже. Затем мы включаем все хуки WooCommerce, которые собираемся использовать, в один метод, который мы называем add_base_hooks() .

Поскольку абстрактный класс не может быть создан, мы запускаем этот метод из нашего бэкэнд-файла, чтобы он запускал все хуки, объявленные здесь. Мы используем каждый из хуков для разных задач, назначая каждому из них один из следующих методов. Т.е. этот хук: woocommerce_after_order_notes в нашем add_base_hooks() запускает метод quadlayers_subscribe_checkout() , оба определены в классе base_class .

Обратите внимание, как мы используем некоторые функции WordPress и WooCommerce: woocommerce_form_field() настраиваемое поле в форме оформления заказа WooCommerce. update_post_meta() Эта нативная функция WordPress широко используется для обновления метаданных базы данных сообщений, продуктов и других пользовательских типов сообщений. Кроме того, доступны следующие типы полей ввода:

текст	Выбрать	радио
пароль	дата и время	datetime-local
Дата	месяц	время
неделю	номер	электронное письмо
URL	тел

4. Бэкэнд-файл, `class_qlccf_back.php`

Здесь класс qlccf_back_class наследует base_class ранее определенный в class_qlccf_base.php file :

 <?php
если (! Определено ('ABSPATH')) {умереть ('-1');}
если(!class_exists('qlccf_back_class')):
    класс qlccf_back_class расширяет base_class{

        общедоступная функция __construct(){       
            родитель::add_base_hooks(); 
            если (is_admin()):
                add_filter('manage_edit-shop_order_columns', array($this,'qlccf_checkbox'));
                add_filter('manage_edit-shop_order_columns', array($this,'qlccf_email'));
                add_action('manage_shop_order_posts_custom_column',array($this, 'qlccf_column_content'));
                add_action('woocommerce_email_order_meta',array($this,'qlccf_email_template'));
            конец;
        }             
        # отображать значение настраиваемых полей в списке внутренних заказов 
        общедоступная функция qlccf_column_content ($ столбец) {
                глобальный $пост; 
                if ( 'suscriptor' === $column ) { # Флажок
                    $order = wc_get_order($post->ID);     
                    $c_meta = $order->get_meta('suscriptor');       
                    if($c_meta==1):$img_url='https://www.sebastopolys.com/wp-content/uploads/2020/07/true-icon.png';
                    еще: $img_url='https://www.sebastopolys.com/wp-content/uploads/2020/07/false-icon.png';
                    конец;                       
                    echo '<img src="'.$img_url.'"/>';
                } 
                elseif('altmail' === $column ){ # Альтернативная почта
                    $order = wc_get_order($post->ID);     
                    $e_meta = $order->get_meta('altmail');
                    эхо $e_meta;
                }   
                еще{}     
        }    
        # Установить столбец флажка
        общедоступная функция qlccf_checkbox($columns){
                $columns['suscriptor'] = __('Suscriptor');            
                вернуть $столбцов;
        }
        # Установить столбец альтернативной почты
        общедоступная функция qlccf_email($columns1){
                $columns1['altmail'] = __('Альтернативная почта');            
                вернуть $столбцы1;
        }
        # Включить поле Alt Mail в шаблон электронной почты WC
        общедоступная функция qlccf_email_template($order_obj){
            $is_set = get_post_meta($order_obj->get_order_number());           
                // возвращаем значение, если настраиваемое поле не задано
            если(пусто($is_set))
		    возвращение; 
	        // хорошо, мы идем дальше и выводим произвольное поле
            $alt_email = get_post_meta($order_obj->get_order_number(), 'altmail', true);            
            echo '<h2>Мое настраиваемое поле</h2><p>Альтернативный адрес электронной почты:'.$alt_email.'</p>';            
        }              
    }    
  $run=новый qlccf_back_class;    
конец;

В этом файле мы определяем конструктор для запуска интерфейсных хуков, которые мы указали в другом файле. Затем мы добавляем хуки, необходимые для отображения настраиваемых полей в списке бэкэнд-заказов и шаблонах электронной почты WooCommerce, используя условное выражение if() и функцию WordPress is_admin() , чтобы применять их, только если пользователь находится на экране админки. manage_shop_order_posts_custom_column() вставляет столбец в список заказов, поэтому мы можем отображать поля в нашей qlccf_column_content() .

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

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

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

wc_get_order() : получает объект текущего заказа со всеми прикрепленными к нему данными.

get_meta() : чтобы получить метаданные заказа

get_post_meta() : получает значения наших настраиваемых полей, сохраненных в базе данных.

get_order_number() : чтобы получить идентификатор текущего заказа

Подведение итогов

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

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

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

Если вы хотите улучшить свои конверсии в WooCommerce, мы рекомендуем вам ознакомиться с этими руководствами:

Лучшие кнопки быстрой покупки для WooCommerce
Как оптимизировать кассу в WooCommerce
Как редактировать страницу магазина в WooCommerce с помощью кодирования?