Детальний аналіз налаштованих полів оформлення замовлення у WooCommerce: від створення до обробки даних.

Під час створення онлайн-магазину досвід покупців під час процесу оформлення покупки має вирішальне значення. Стандартна форма оформлення покупки в WooCommerce може не відповідати усім бізнес-вимогам – наприклад, необхідності збору інформації про адресу відправки, вітань з днем народження чи особливих побажань щодо доставки. У таких випадках користування власними полями для оформлення покупки стає потужним інструментом для розширення функціоналу системи. Це не лише дозволяє підвищити рівень персоналізації досвіду покупців, але й допомагає продавцям зібрати важливі бізнес-дані, що сприяє оптимізації

За допомогою системи хуків WordPress та розширеної API платформи WooCommerce розробники можуть досить легко додавати різні типи елементів інтерфейсу – текстові поля, випадаючі списки, опційні поля тощо – у різні частини сторінки оформлення замовлення (після поляв з адресами доставки чи відправки, а також у нові блоки інтерфейсу). Важливим є не лише зовнішній вигляд цих елементів, а й процес обробки даних на серверній стороні: необхідно переконатися, що дані, введені користувачем, правильно та безпечно зберігаються у замовленні, а також що вони чітко відображаються на сторінці адміністрування замовлень, на сторінці користувацького облікового запису та у повідомленнях про замовлення.

Спосіб реалізації власних полів для оформлення платежу

WooCommerce надає два основні типи хуків (hooks) для обробки даних, введених під час процесу оформлення покупки:woocommerce_checkout_fields 和 woocommerce_checkout_update_order_metaПерший інструмент використовується для визначення та відображення полів, а другий – для зберігання даних, які знаходяться у цих полях.

Рекомендуємо до прочитання. Розробка плагінів для WordPress від початківця до майстра: покрокове навчання створенню власних функцій。

Використовуйте хаки для додавання полів

Найважливіший крок полягає у тому, щоб… woocommerce_checkout_fields Фільтр-хук дозволяє додавати власні поля до масиву полів для оформлення платежу. Цей масив має чітку структуру, що дає можливість розташовувати поля у відповідних розділах форми для оформлення рахунку.billing“Доставка”shipping“Order Notes”orderІснуючі розділи диска, такі як %s, %1$s, {{var}}, можна використовувати для зберігання даних, а також можна створювати власні розділи на диску.custom）。

UltaHost – хостинг для сайтів, побудованих на платформі WordPress

Гарантія повернення грошей протягом 30 днів, необмежена пропускна здатність мережі та доступ до баз даних, безкоштовний захист від DDoS-атак; знижка 50% при покупці на термін 3 роки (варіанти об’ємів трафіку: 4 ТБ/5

сторінка доступу

Наведений нижче приклад коду демонструє, як у нижній частині відділу інформації про рахунок можна додати текстове поле для введення номера податкового ідентифікатора компанії та опційний перелік для вибору варіанта “Чи потрібна рахунок-

/**
 * 在结账页面添加自定义字段
 */
add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_fields' );
function custom_add_checkout_fields( $fields ) {

// 在“账单”字段组中添加一个“公司税号”文本字段
    $fields['billing']['billing_vat_number'] = array(
        'label'        => __( '公司税号 / VAT Number', 'your-text-domain' ),
        'placeholder'  => _x( '请输入您的公司税号', 'placeholder', 'your-text-domain' ),
        'required'     => false, // 非必填
        'class'        => array( 'form-row-wide' ), // 宽度样式
        'clear'        => true, // 清除浮动
        'priority'     => 25, // 显示顺序，数字越小越靠前
    );

// 在“账单”字段组中添加一个“是否需要发票”单选框
    $fields['billing']['billing_invoice_needed'] = array(
        'type'         => 'radio',
        'label'        => __( '是否需要纸质发票？', 'your-text-domain' ),
        'required'     => true,
        'class'        => array( 'form-row-wide' ),
        'clear'        => true,
        'priority'     => 30,
        'options'      => array(
            'yes' => __( '是，需要纸质发票', 'your-text-domain' ),
            'no'  => __( '否，不需要', 'your-text-domain' )
        )
    );

return $fields;
}

Підтвердження та збереження даних з полів

Після додавання нових полів необхідно переконатися, що дані, введені користувачем, зберігаються у відповідних метаданих замовлення. Це можна досягти за допомогою наступних кроків: woocommerce_checkout_update_order_meta Це можна зробити за допомогою дій-хуків (action hooks). Коли користувач надсилає замовлення, WooCommerce викликає цей хук, і саме в цей момент ми можемо отримати та зберегти значення користувацьких полів.

/**
 * 保存自定义结账字段的值到订单元数据
 */
add_action( 'woocommerce_checkout_update_order_meta', 'custom_save_checkout_fields' );
function custom_save_checkout_fields( $order_id ) {

if ( ! empty( $_POST['billing_vat_number'] ) ) {
        // 使用 sanitize_text_field 进行清洁处理，防止恶意代码
        update_post_meta( $order_id, '_billing_vat_number', sanitize_text_field( $_POST['billing_vat_number'] ) );
    }

if ( ! empty( $_POST['billing_invoice_needed'] ) ) {
        update_post_meta( $order_id, '_billing_invoice_needed', sanitize_text_field( $_POST['billing_invoice_needed'] ) );
    }
}

Відображати дані з полів у фоновому режимі та в електронних листах.

Простого зберігання даних недостатньо – продавцям потрібно бачити цю інформацію під час керування замовленнями в бекенді, а клієнти також повинні мати можливість переглядати свої введені дані у листах з підтвердженням замовлень та на сторінці “Мі

Відображається на сторінці редагування замовлень у фоновому режимі.

Можна це зробити. woocommerce_admin_order_data_after_billing_address Подібно до інших механізмів, значення звичайних та користувацьких полів виводяться після розділів “Адреса для рахунку” чи “Адреса для доставки” на сторінці деталей замовлення в бекенді.

Рекомендуємо до прочитання. Вступне керівництво з розробки плагінів для WordPress: створення вашого першого функціонального розширення з нуля.。

/**
 * 在后台订单详情页显示自定义字段
 */
add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_display_admin_order_meta', 10, 1 );
function custom_display_admin_order_meta( $order ) {
    $vat_number = $order->get_meta( '_billing_vat_number' );
    $invoice_needed = $order->get_meta( '_billing_invoice_needed' );

if ( $vat_number ) {
        echo '<p><strong>' . __( '公司税号:', 'your-text-domain' ) . '</strong> '`. esc_html($vat_number)`.'</p>';
    }
    if ( $invoice_needed ) {
        $display_text = ( $invoice_needed == 'yes' ) ? __( '是', 'your-text-domain' ) : __( '否', 'your-text-domain' );
        echo '<p><strong>' . __( '需要纸质发票:', 'your-text-domain' ) . '</strong> '`.esc_html($display_text).`'</p>';
    }
}

Відобразити у електронному листі з замовленням та на сторінці подяки.

Щоб клієнти також могли бачити цю інформацію, нам потрібно додати її до електронних листів з замовленнями та на сторінки підтвердження замовлення (з подякою). woocommerce_email_order_meta_keys Фільтри можуть автоматично додавати вказані ключі метаданих до всіх повідомлень-електронних листів. Крім того, можна використовувати… woocommerce_order_details_after_order_table Акційні хаки можуть відображатися у деталях замовлення на передньому фронті.

/**
 * 将自定义字段添加到订单邮件中
 */
add_filter( 'woocommerce_email_order_meta_keys', 'custom_add_order_meta_to_email' );
function custom_add_order_meta_to_email( $keys ) {
    $keys[] = '_billing_vat_number';
    $keys[] = '_billing_invoice_needed'; // 邮件中会以键的格式显示，通常需要进一步美化
    return $keys;
}

/**
 * 在前台订单详情（感谢页面、我的账户-订单详情）中显示自定义字段
 */
add_action( 'woocommerce_order_details_after_order_table', 'custom_display_order_data_frontend', 10, 1 );
function custom_display_order_data_frontend( $order ) {
    $vat_number = $order->get_meta( '_billing_vat_number' );
    if ( $vat_number ) {
        echo '<h2>' . __( '附加信息', 'your-text-domain' ) . '</h2>'echo '<table class="shop_table shop_table_responsive additional_info">'echo '<tr><th>' . __( '公司税号:', 'your-text-domain' ) . '</th><td>'`. esc_html($vat_number)`.'</td></tr>'echo '</table>';
    }
}

Розширені застосування та логіка умов полів

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

Реалізація умовного відображення даних у полях

За допомогою JavaScript/jQuery ви можете динамічно відображати або приховувати певне поле в залежності від значення іншого поля (наприклад, країни, штату або вибраного опційного пункту). Наприклад, текстове поле з інструкціями щодо відправки рахунку-фактури відображатиметься тільки у випадку, якщо користувач обере варіант “Потрібен паперовий рахунок-фактура”.

hosting.com Віртуальний хостинг

Висока продуктивність завдяки процесорам AMD EPYC, SSD-накопичувачам NVMe і технології LiteSpeed, цілодобова експертна підтримка, розширені заходи безпеки, включаючи SSL, грубу силу, захист від шкідливих програм і DDoS, економія до 73%.

сторінка доступу

Щоб реалізувати цю функцію, необхідно додати відповідну логіку до файлу JavaScript теми, або ж використати інші способи для її реалізації. wp_enqueue_script Відправте скрипт у чергу та відстежуйте зміни у полях на сторінці оформлення покупки, щоб керувати станом відображення цільових полів.

Додати до поля власне перевірення (custom validation).

Хоча в WooCommerce є вбудована функція визначення обов’язкових полів для заповнення,required => true）验证，但有时你需要更复杂的验证规则，比如税号的特定格式。可以通过 woocommerce_checkout_process Використовуйте дії-хаки (action hooks) для додавання власної логіки перевірки.

/**
 * 在结账过程中验证自定义字段
 */
add_action( 'woocommerce_checkout_process', 'custom_validate_checkout_fields' );
function custom_validate_checkout_fields() {
    // 如果“公司税号”字段不为空，则检查其格式（示例：假设是15位数字）
    if ( ! empty( $_POST['billing_vat_number'] ) && ! preg_match( '/^d{15}$/', $_POST['billing_vat_number'] ) ) {
        wc_add_notice( __( '错误：公司税号格式不正确，应为15位数字。', 'your-text-domain' ), 'error' );
    }
}

Оптимізація продуктивності та кращі практики

Додавання занадто багатьох користувацьких полів на веб-сайт або неправильне їх оброблення може погіршити швидкість завантаження сторінки оформлення покупки та якість користувацького досвіду.

Рекомендуємо до прочитання. Повний посібник з розробки для керування власними полями в системі WooCommerce: від створення до їх відображення на сайті。

Оптимізація завантаження та відображення даних з полів

• Вибіркове завантаження скриптів: на сторінці оформлення покупки завантажуються лише ті JavaScript-скрипти, які необхідні для відображення поля, що підлягає умовному відображенню.
• Раціональне встановлення пріоритетів: як це зробити? priority Параметри слід розташовувати так, щоб послідовність полів була логічною, щоб уникнути непотрібного переупорядкування їхнього вигляду на екрані.
• Спростити. class Масив: додавайте лише необхідні стилеві класи. form-row-wide 或 form-row-first。

Безпека та очищення даних

• Завжди очищуйте та перевіряйте дані перед їх збереженням.update_post_meta) та відображення (echoПеред використанням користувацьких даних обов’язково слід… sanitize_text_field(), esc_html(), wp_kses_post() Функції, які використовуються для обробки даних, є ключовим елементом захисту від атак типу XSS (Cross-Site Scripting).
• Використовуйте правильні типи даних: для чисел або даних у певному форматі слід обирати відповідні типи даних. sanitize_key() Або використовуйте власні регулярні вирази для перевірки та очищення даних.

підсумок

Користування власними полями для оформлення покупки в системі WooCommerce є потужною функцією, яка сприяє ефективному обміну інформацією між продавцем та покупцем на ключових етапах покупки. woocommerce_checkout_fields Фіксатори (hookи) використовуються для визначення фронтенд-полів та їх подальшого використання в програмному коді. woocommerce_checkout_update_order_meta Дані зберігаються у безпечному вигляді за допомогою спеціальних механізмів („хуків“), а потім передаються на сервер, електронну пошту та на користувацький інтерфейс через кілька менеджерських інструментів та фільтрів електронної пошти. Усій цій процесі відповідає замкнуте коло обробки даних. Опанувавши ці основні методи та поєднавши їх зі складнішими техніками, такими як умовне відображення інформації та користувацька налаштування перевірок, розробники можуть створити інтерфейси для оформлення покупок, які є високо індивідуалізованими, зручними для користувачів та з

Часті запитання

Де зберігаються дані з власних полів?

Дані з власних полів зберігаються як “метадані замовлення”. Коли це використовується… update_post_meta( $order_id, ‘_field_key’, $value ); Під час збереження дані будуть завантажені до системи WordPress. wp_postmeta У таблиці бази даних існує зв’язок із замовленнями (який є типом власного створення статей). post_id Посилання. Імена ключів зазвичай починаються з підкреслення, що означає, що вони відносяться до прихованих метаданих.

Міжсерверний віртуальний хостинг

Віртуальний хостинг $2.50 USD на місяць, перший місяць $0.1 USD за промокодом tryinterserver, 461 скрипт хмарних додатків, встановлення в один клік.

сторінка доступу

Як забезпечити, щоб користувацькі власні поля також зберігалися у обліковому записі під час реєстрації?

Якщо ви дозволяєте створювати облікові записи під час оформлення покупки та бажаєте, щоб такі поля, як “Назва компанії”, зберігалися у даних користувача, необхідно оновлювати їх водночас із збереженням метаданих замовлення. Для цього можна скористатися від update_user_meta( $customer_id, ‘billing_company’, $value );Зверніть увагу: зазвичай для отримання правильного ідентифікатора користувача необхідно отримати його у контексті реєстрації або входу користувача.

Чому мої власні поля не відображаються правильно у електронному листі?

Якщо значення поля не відображається у листі, найпоширеніша причина – це забуття про необхідність його включення до вмісту листа. woocommerce_email_order_meta_keys Фільтр додає назви своїх ключів до змінних електронного листа. Крім того, у шаблоні листа може не бути коду для відображення цих користувацьких метаданих. Переконайтеся, що назви ваших полів правильно включені до масиву фільтрів, а також що сам шаблон листа підтримує відображення email-order-details.phpПідтримується відображення універсальних метаданих.

Чи можна додати блоки полів у різних місцях сторінки оформлення платежу?

Так. Окрім параметрів за замовчуванням… billing、shipping、order Групування – ви можете це зробити… woocommerce_checkout_fields Створіть у фільтрі абсолютно нову групу, наприклад… custom_sectionПотім використовуйте woocommerce_checkout_after_customer_details 或 woocommerce_before_order_notes Заставні функції для дій, у поєднанні… do_action(‘woocommerce_checkout_’ . $section); Ви можете відобразити ці поля нової групи в будь-якому місці на сторінці, де це потрібно. Для цього необхідно мати певне розуміння структури шаблону оформлення покупок у системі WooCommerce.