Розробка користувальницької сторінки checkout WooCommerce
Стандартна сторінка checkout WooCommerce — функціональна, але шаблонна. Кастомізація дозволяє: спростити форму (видалити непотрібні поля), додати upsell-блоки, реалізувати одностраничний checkout, інтегрувати користувальницькі способи доставки та оплати.
Підходи до кастомізації
Хуки WooCommerce — найменш інвазивний спосіб. Переставити, додати, видалити блоки без переопалення шаблона.
Переопалення шаблона — скопіювати woocommerce/templates/checkout/form-checkout.php в your-theme/woocommerce/checkout/form-checkout.php та редагувати.
Плагіни-конструктори — CartFlows, FunnelKit — візуальні конструктори воронок продажу.
Хуки checkout: порядок блоків
// Переставити поля "Назва компанії" та "Телефон"
add_filter('woocommerce_checkout_fields', function (array $fields): array {
// Видалити непотрібні поля
unset($fields['billing']['billing_company']);
unset($fields['billing']['billing_address_2']);
// Зробити телефон обов'язковим
$fields['billing']['billing_phone']['required'] = true;
// Додати поле "Коментар до доставки"
$fields['billing']['delivery_comment'] = [
'type' => 'textarea',
'label' => 'Коментар до доставки',
'placeholder' => 'Код домофона, етаж, час доставки...',
'required' => false,
'class' => ['form-row-wide'],
'priority' => 120,
];
return $fields;
});
// Зберегти користувальницьке поле
add_action('woocommerce_checkout_update_order_meta', function (int $order_id): void {
if (!empty($_POST['delivery_comment'])) {
update_post_meta($order_id, '_delivery_comment', sanitize_textarea_field($_POST['delivery_comment']));
}
});
Upsell-блок
// Показати пропозицію апселла після форми доставки
add_action('woocommerce_checkout_after_customer_details', function (): void {
$upsell_product_id = 456;
$product = wc_get_product($upsell_product_id);
if (!$product || !$product->is_purchasable()) return;
?>
<div class="checkout-upsell">
<label class="checkout-upsell__label">
<input type="checkbox" name="add_upsell_product" value="<?php echo $upsell_product_id; ?>" />
<span>Додати "<?php echo esc_html($product->get_name()); ?>" за <?php echo $product->get_price_html(); ?></span>
</label>
</div>
<?php
});
// Додати товар апселла в кошик при оформленні
add_action('woocommerce_checkout_create_order', function (WC_Order $order): void {
if (!empty($_POST['add_upsell_product'])) {
$product_id = (int) $_POST['add_upsell_product'];
$product = wc_get_product($product_id);
if ($product) {
WC()->cart->add_to_cart($product_id);
}
}
});
Типові терміни: кастомізація полей checkout та додавання upsell-блока — 2–3 дні. Многошаговий checkout з користувальницьким способом оплати — 5–7 днів.