Сен

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

Основна причина чому ви можете захотіти змінити місце розміщення кнопки замовлення в магазині WooCommerce – це внесення модифікацій в базовий стандартний дизайн сторінки замовлення. За замовчуванням кнопка «Place Order» знаходиться одразу після блоку вибору методів оплати за товар.

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

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

Логіка роботи

По-перше, треба зазначити, що для цієї задачі є 2 принципово різних підходи:

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

І той, і інший метод нормальні, немає різниці який використовувати. В моєму випадку я вже вносив певні зміни в файли WooCommerce макету, тому вибрав перший підхід.

Код кнопки

По-друге, безпосередньо сам код виводу кнопки знаходиться в файлі WooCommerce макету checkout/payment.php і виглядає наступним чином:

Ви можете скопіювати його та вставити в будь-який інший файл шаблону магазину. Але увага(!) ви маєте розмістити код всередині форми оформлення товару (<form>) щоб дана кнопка спрацьовувала саме для цієї форми.

Також вам треба буде додати значення для змінної order_button_text. Це можна зробити перед виводом кнопки таким чином:

$order_button_text = apply_filters( 'woocommerce_order_button_text', __( "Place order", "woocommerce" ) );

Перевизначення файлів макету

По-третє, я вже колись розказував як можна перезаписати той чи інший файл WooCommerce шаблону і налаштувати його під себе. Якщо коротко, то копіюєте будь-який файл з розділу плагіну(!) WooCommerce, де є папка templates. Наприклад:

Візьмемо файл plugins/woocommerce/templates/checkout/payment.php
Копіюємо і вставляємо його вже в нашому активованому макеті themes/НАЗВА_МАКЕТУ/woocommerce/checkout/payment.php
Цей другий файл буде «перевизначати» оригінальний варіант з папки плагіну.

Наскільки я розумію, вам у будь-якому випадку прийдеться створювати копію файлу payment.php і прибирати звідки код виводу кнопки оформлення замовлення, щоб потім вивести її в іншому місці.

Рішення через хуки

На кожній «системній» сторінці WooCommerce є досить багато різних хуків. В інтернеті є десятки статей з описами та демонстрацією розміщення цих хуків, наприклад, ось ця замітка (хоча не впевнений, що тут вказані всі):

Якщо ви хочете вивести кнопку замовлення через хук, то знаходите в схемі потрібний вам варіант і далі в файлі функції functions.php додаєте код по типу такого:

add_action( 'woocommerce_checkout_after_order_review', 'newplacefor_orderbutton', 5 );
function newplacefor_orderbutton() {
    $order_button_text = apply_filters( 'woocommerce_order_button_text', __( "Place order", "woocommerce" ) );
    echo apply_filters( 'woocommerce_order_button_html', '<button type="submit" class="button wc-backward btn btn-secondary" name="woocommerce_checkout_place_order" id="place_order" value="' . esc_attr( $order_button_text ) . '" data-value="' . esc_attr( $order_button_text ) . '">' . esc_html( $order_button_text ) . '</button>' );
}