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

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

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

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

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

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

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

Есть два способа настроить страницу:

Пользовательский шаблон оформления заказа — в документации WooCommerce четко указано, что вы можете скопировать шаблон оформления заказа в свою тему в такой структуре папок: woocommerce/checkout/form-checkout.php. Это означает, что вы можете настроить form-checkout.php в зависимости от ваших требований.
Плагины — существует множество расширений для настройки страницы оформления заказа. Некоторые из них доступны бесплатно, а некоторые являются платными расширениями.
Пользовательский код . Этот метод немного сложен и требует от вас некоторых технических знаний для реализации решений. Тем не менее, это идеальное решение, если вы хотите внести небольшие изменения и не хотите покупать плагин. Мы собираемся использовать этот метод в этом уроке.

Шаги по редактированию страницы оформления заказа WooCommerce

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

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

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

Мы решили поделиться некоторыми примерами, чтобы помочь вам. Вот шаги, которые вам необходимо выполнить:

Войдите на свой сайт WordPress и получите доступ к панели инструментов в качестве пользователя-администратора.
В меню «Панель инструментов» нажмите « Меню внешнего вида» > «Меню редактора тем». Когда откроется страница редактора темы, найдите файл функций темы, в который мы добавим функцию, которая будет добавлять сообщение клиенту о деталях доставки .
Добавьте следующий код в файл php :

add_action( 'woocommerce_before_checkout_shipping_form', function() {

echo 'Don\'t forget to include your unit number in the address!';

});

Это результат:
Если вы хотите манипулировать каким-либо полем, вы можете использовать фильтр woocommerce_checkout_fields. Например, чтобы удалить поле с номером телефона для выставления счетов, добавьте в тот же файл следующий код:

// Hook in

add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );

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

function njengah_override_checkout_fields( $fields ) {

unset($fields['billing']['billing_phone']); return $fields; }

Чтобы добавить поле для номера телефона доставки, добавьте следующий код:

// Hook in

add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );

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

function njengah_override_checkout_fields( $fields ) {

$fields['shipping']['shipping_phone'] = array(

'label'   =&gt; __('Phone', 'woocommerce'),

'placeholder'=&gt;  _x('Phone', 'placeholder', 'woocommerce'),

'required' =&gt; false,

'class'    =&gt; array('form-row-wide'),

'clear'    =&gt; true

);

return $fields;

}

/**

* Display field value on the order edit page

*/

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'njengah_custom_checkout_field_display_admin_order_meta', 10, 1 );

function njengah_custom_checkout_field_display_admin_order_meta($order){

global $post_id;

$order = new WC_Order( $post_id );

echo '&lt;p&gt;&lt;strong&gt;'.__('Field Value').':&lt;/strong&gt; ' . get_post_meta($order-&gt;get_id(), '_shipping_field_value', true ) . '&lt;/p&gt;';

}

Чтобы изменить местозаполнитель поля Zip или Postal Code, добавьте следующий код:

add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );

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

function njengah_override_checkout_fields( $fields ) {

$fields['billing']['billing_postcode']['placeholder'] = 'Postal Code';

return $fields;

}

Вывод

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

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

Мы надеемся, что это руководство помогло вам найти решение вашей проблемы.

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

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

Шаги по редактированию страницы оформления заказа WooCommerce

Вывод

Похожие статьи