Це знайомство розробника-початківця з плагіном WordPress WooCommerce. У цій публікації ми розглянемо основи роботи WooCommerce і як ми можемо налаштувати його в нашій темі або плагіні за допомогою хуків і шаблонів.
По-перше, WooCommerce пропонує велику гнучкість для розробників тем і плагінів, щоб налаштувати його функціональність. Для простих модифікацій зазвичай є принаймні дві альтернативи. Вибір того, як ви змінюєте, залежить від того, як ви віддаєте перевагу роботі, наскільки гнучким і розбірливим має бути ваш код і як ви віддаєте перевагу продовжувати обслуговування свого сайту в майбутньому, коли мова заходить про оновлення плагінів (і WordPress).
Перш ніж почати вивчати модифікацію функціональності WooCommerce за допомогою коду, вам слід перевірити, чи можна досягти того, що ви хочете, змінивши налаштування. WooCommerce постачається з величезною сторінкою налаштувань, на якій можна дещо змінити. У новіших версіях WooCommerce також додав і переніс додаткові налаштування до WordPress Customizer. Тут ви зможете, наприклад, налаштувати кількість стовпців і налаштувати деякі поля перевірки.
Шаблони WooCommerce
WooCommerce пропонує великий набір файлів шаблонів, які ви як розробник теми можете змінити. Для цього потрібно створити копію оригінального шаблону WooCommerce у папці вашої теми. Потім ви вносите зміни у файл у своїй темі.
Перейдіть до папки плагіна WooCommerce у /wp-content/plugins/woocommerce/. Тут ви знайдете вкладену папку templates. Весь вміст файлів (його багато!), /wp-content/plugins/woocommerce/templates/включаючи його вкладені папки, є файлами шаблонів, які ви можете замінити у своїй темі.
Щоб WooCommerce знаходив ваші змінені шаблони, вам потрібна підпапка в кореневому каталозі теми під назвою woocommerce. Якщо слаг вашої теми має значення «awhitepixel», то ваша папка має бути розташована за адресою /wp-content/themes/awhitepixel/woocommerce/. У цій папці ви можете розмістити свої змінені копії файлів шаблонів WooCommerce. Майте на увазі, що файли шаблонів, розташовані у підпапках, потрібно розмістити у відповідних підпапках вашої папки woocommerce. Наприклад; Перевизначення WooCommerce /templates/single-product/add-to-cart/simple.phpвимагає від вас розмістити свою копію simple.phpв /woocommerce/single-product/add-to-cart/папці вашої теми.
Можливо, ви також помітили, що в шаблонах є багато дій і фільтрів. Більшість із них заповнені do_action()с. Для оптимального використання WooCommerce вам не слід видаляти жодні хуки в шаблонах. У більшості випадків ви можете змінити функціональність за допомогою дій і фільтрів замість заміни шаблонів. Дозвольте мені пояснити чому!
Важлива примітка щодо заміни шаблонів і оновлень плагінів
Для новачка перевизначення шаблону може здатися найпростішим і найбільш інтуїтивно зрозумілим виправленням. Навіщо возитися з хуками, якщо ви можете відразу змінити шаблон, який виводить те, що ви хочете змінити? Відповідь: тому що ця стратегія створює більше роботи для підтримки вашого веб-магазину.
WooCommerce часто оновлюється, іноді вони оновлюють файл шаблону. Щоб підтримувати свій веб-магазин в актуальному стані, вам також потрібно буде оновити файли замінених шаблонів у вашій темі. Зазвичай вам потрібно буде замінити весь файл шаблону найновішим оновленим файлом, а потім повторно додати свої зміни. Це швидко стає набагато складніше, якщо ви не пам’ятаєте всі зроблені зміни. Візьміть це від мене, який має багаторічний досвід виправлення файлів шаблонів WooCommerce інших розробників під час оновлення плагінів. Повірте, це не весела робота!
Тепер, коли ми знаємо, що хуки є кращою стратегією, давайте подивимося, як це зробити.
Хуки WooCommerce
WooCommerce пропонує величезну кількість хуків, як дій, так і фільтрів. Користуватися гачками насправді дуже просто!
За допомогою хуків ви також можете змінити набагато більше, ніж просто результат шаблонів. Ви можете налаштувати ціни на продукти, поля оформлення або змусити веб-магазин робити щось, коли продукт додається в кошик.
Якщо ви розробляєте плагін, хуки також є єдиним шляхом. Перевизначати шаблони можна лише в темі, а не в плагіні. (Добре, є способи подолати це, але це дуже рідко і не рекомендується).
Якщо ви заглянули в деякі файли шаблонів WooCommerce, ви повинні були побачити багато do_action(). Це гачки; контрольні точки, до яких можна підключитися та додати свій код або змінити змінну. Якщо ви не впевнені, як працюють хуки, у мене є допис, який докладно пояснює це.
Якщо ви хочете вивести щось, наприклад текст або щось подібне, шукайте дії (do_action()). Наприклад, виводячи щось у шаблон кошика, ви можете вибрати підключення до woocommerce_before_cart, woocommerce_before_cart_table, woocommerce_before_cart_contents, woocommerce_cart_contents, woocommerce_cart_actions, woocommerce_after_cart_contents, woocommerce_after_cart_table, woocommerce_cart_collateralsабо woocommerce_after_cart. Просто виберіть той, який розташований там, де ви хочете отримати результат. Це приклад відображення тексту перед таблицею та формою на сторінці кошика:
add_action('woocommerce_before_cart', function() {
_e('Here are the products you have added in the cart so far', 'textdomain');
});Фільтри (шукайте apply_filters()) призначені для зміни результату або змінної. Поширеним використанням фільтрів у WooCommerce є зміна тексту «Додати до кошика» на кнопках «Купити». WooCommerce пропонує для цього кілька фільтрів, що дозволяє контролювати текст на різних сторінках. Наприклад, ви можете налаштувати текст у циклі магазину або у перегляді одного продукту. Фільтри часто надають кілька аргументів для подальшого керування, наприклад, об’єкт продукту. Ось простий приклад того, як змінити тексти «Додати в кошик» у перегляді одного продукту:
add_filter('woocommerce_product_single_add_to_cart_text', function($original_text, $product) {
return __('Buy this', 'textdomain');
}, 10, 2);Маючи певні знання про те, як працюють хуки, і просто дивлячись у файли шаблонів, ви можете знайти досить багато функціональних можливостей, які можна легко змінити. Очевидно, що WooCommerce пропонує набагато більш просунуту модифікацію, зміну цін, способів оплати, модифікацію продукту або імпорт, усе це можливо за допомогою хуків.
Висновок
Мета цієї публікації — дати початківцю основи того, як вносити зміни в WooCommerce, і наслідки того, як ви вносите зміни. Я завжди рекомендую використовувати хуки для перезапису файлів шаблонів, якщо це не є абсолютно необхідним.
Наступним кроком є занурення в розширені модифікації шляхом знайомства з хуками, процесами та об’єктами в WooCommerce. Оскільки WooCommerce є найпопулярнішою платформою електронної комерції, у мережі є багато ресурсів і прикладів коду. Подивіться на категорію Woocommerce тут, на цьому сайті, щоб дізнатися більше.