Сен
8
0

Як змінити розміщення кнопки оформлення замовлення в 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. Наприклад:

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

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

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

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

Хуки 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>' );
}

Актуальний код для кнопки завжди можна піддивитися в оригінальному файлі payment.php, але не забувайте визначити змінну order_button_text.

Ну, і ще раз нагадую(!) – ваше нове місце для кнопки має бути всередині блоку <form> для сторінки оформлення замовлення.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 10, средний балл: 3,30 из 7)
Загрузка...

категория Категории: WooCommerce;
теги Теги: , , , , .
Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

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

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости