WooCommerce – популярна платформа для електронної торгівлі на движку WordPress, яку розвивають люди з WooThemes. У цій статті йтиметься про те, як розпочати розробку тем під WooCommerce.
Перед початком читання переконайтеся, що:
- У вас встановлені WordPress та WooCommerce на сайті.
- Ви знаєте, як створювати теми для WordPress та вмієте працювати з HTML та CSS.
- Ви знаєте, як працювати із засобами розробки Chrome Developer Tools та з такими інструментами, як Firebug.
Налаштування WooCommerce CSS
З коробки WooCommerce є вбудована таблиця стилів і підтримка великої кількості тем. Таблиця стандартних стилів добре підходить для початку, але це не означає, що вона підійде для нашої кастомної теми.
Наприклад, якщо ви продаєте футболки різних кольорів, ви можете вказати кольори тут. У розділі «Додатково» ви можете створювати примітки для покупки для клієнтів та вмикати або вимикати зміни. Ви також можете вказати тут пункти меню і вибрати позиції замовлення для свого продукту.
Але що якщо ваш продукт віртуальний, переносимий або навіть зовнішній? Додавання кластерного продукту. . Щоб додати згрупований продукт, виберіть «Угруповання» у розділі «Тип продукту». Потім вам необхідно додати дочірній продукт до групового продукту.
Тому у нас є 2 шляхидля редагування CSS у темі оформлення WooCommerce:
- Можна використовувати базові стилі та переписати їх поверх існуючих.
- Можна вимкнути стилі за замовчуванням та замість них почати з нуля.
Пам'ятайте, що WooCommerce додає клас " woocommerceдо всіх своїх сторінок.
Відключаємо стилі за замовчуванням
Запис нових стилів поверх тих, що запропоновані за замовчуванням - це найпростіший і швидкий спосіб, що підійде більшості користувачів.
Додавання валюти «Російський рубль» до магазину на WooCommerce
Щоб додати дочірній продукт, створіть новий простий продукт, а в розділі «Пов'язаний продукт» виберіть батьківський продукт у меню «Угруповання». Додавання змінної продукту аналогічно додавання простого продукту. На вкладці «Варіанти» ви можете додати відомості про різні варіанти та їх відмінності.
При додаванні відгуку про товар відбувається переадресація і сторінка перестає завантажуватися
Щоб додати віртуальний продукт, встановіть прапорець «Віртуальний» у розділі «Тип продукту». Просто натисніть на прапорець "Переносимий продукт", щоб зробити його доступним для передачі. Після того, як ви встановили тип продукту і ввели дані продукту, прокрутіть сторінку вниз, де ви можете додати короткий описпродукту. Буде видно трохи нижче назви продукту.
Скопіюйте вміст всього файлу WooCommerce CSS, він розташований за адресою:
wp-content\plugins\woocommerce\assets\css\woocommerce.cssабо woocommerce.less
Видаліть звідти все непотрібне і внесіть свої правки. Щоправда, це може зайняти чимало часу та призвести до повторення коду у таблиці стилів.
- Знайдіть на сайті всі стилі, які потрібно замінити.
- Потім використовуйте Chrome Developer Tools (або аналогічний інструментарій) для ідентифікації класів і внесення правок в браузері, щоб бачити, що і як виглядатиме після редагування. Зробити це можна правим кліком на сторінці і вибравши інспектування елементів у меню, що випадає.
- Скопіюйте отриманий код CSS із Chrome Developer Tools у файл вашої теми з таблицею стилів.
- Не забудьте змінити значення змінних, щоб зберегти цілісність таблиці стилів та зв'язок стилів та контенту для різних браузерів.
- Якщо ви знайдете щось, що не змінюється в кастомізованому файлі, можете видалити це значення: якщо воно не змінюється, немає сенсу включати його в кастомний файл CSS.
Такий підхід добре заощаджує вам час.
У правій частині сторінки ви можете додати категорії товарів, теги, встановити виділене зображення та зображення галереї продуктів. Єдина відмінність – опція видимості каталогу, яка має наступні налаштування. Завершивши налаштування всього, натисніть кнопку «Опублікувати» та перевірте сторінку продукту.
Тут можна редагувати, видаляти, дублювати, характеризувати продукт. При виборі кількох продуктів можна застосовувати масові дії. Щоб дублювати продукт, знайдіть продукт у розділі продукту і натисніть кнопку «Дублювати».
- Це супер зручно, якщо у вас є багато схожих товарів для продажу!
- Ви також можете додати до закладок продукт, як показано.
- Натисніть піктограму «Зірка» у розділі «Продукти».
У Google Chromeможна натиснути правою кнопкоюмиші на елементі у вікні Developer Tools для перевірки різних станів елемента. Так ви побачите всі стани елементів без необхідності шукати їх у файлі таблиці стилів.
Щоб відредагувати або переглянути одне замовлення, натисніть кнопку «Змінити» під номером замовлення. Ви можете легко оновити статус односторінкового порядку сторінок та виконати інші завдання, включаючи зміну замовленого товару, ціни, податки тощо. Якщо потрібно відредагувати купон, натисніть на його ім'я і внесіть необхідні зміни. У розділі «Звіти» можна побачити успіх свого магазину. Ви можете побачити кілька куплених товарів, валові продажі, середньодобові продажі та інші статистичні дані.
Виберіть відповідний діапазон дат, для якого ви хочете створити звіт: минулого місяця, цього місяця, за останні 7 днів або в будь-якій тривалості користувача, і натисніть «Перейти», щоб згенерувати звіт. На сторінці «Налаштування» можна змінити основні параметри магазину. Тепер давайте розглянемо доступні посібники та короткий оглядте, що можна змінити тут. Ви також можете включити можливість отримання повідомлень електронній поштіколи продукт відсутній.
Відключаємо рідну таблицю стилів і починаємо з нуля
Вимкнути таблицю стилів за промовчанням можна додаванням короткого рядка у файлі functions.php:
Define("WOOCOMMERCE_USE_CSS", false);
Найпростіший і найшвидший спосіб створення всіх класів - скопіювати їх з існуючого оригінального файлу WooCommerce CSS в новий, а потім внести там усі необхідні редагування та зміни.
Як видалити доставку зі сторінки кошика
Налаштуйте способи завантаження файлів та обмеження доступу, якщо ви продаєте завантаження на вкладці «Завантажені товари». Вам сподобається цей розділ, якщо ви продасте товари по всьому світу. У судноплавстві ви можете додати зони доставки, способи доставки та тарифи. Ви навіть можете встановити іншу вартість доставки у різних місцях!
На цій вкладці можна змінити налаштування платежу та додати нові способи оплати. У цьому розділі також можна настроїти веб-камери. Вкладка «Журнали» витягує файл журналу з корисною інформацією для налагодження або усунення несправностей. В той час, як більшість розширень платять, вони стоять кожного пенні! Якщо у вас є будь-які питання або ідеї про це тутоніка, залиште коментар!
Включаємо підтримку WooCommerce у своїй темі
Це особливо важливо, якщо ви плануєте продавати готові теми або надавати їх як відкритий реліз для інших користувачів.
Якщо не вказати підтримку WooCommerce у вашій темі, користувачі стикаються з помилкою під час встановлення на WooCommerce. На щастя, вирішити цю проблему допоможе маленький фрагмент коду, доданий у файл functions.php:
Заробляння грошей в Інтернеті за допомогою віртуального магазину – мрія багатьох людей. Робота з дому чи десь у світі – це щось можливе, і більше того, це реальність багатьох цифрових підприємців. В Інтернеті ви можете продати все – одяг, взуття, іграшки, музику, технології та навіть мистецтво.
Необхідність працювати з більшою гнучкістю та свободою є одним із великих факторів для величезного зростання бізнесу, розробленого виключно в Інтернеті. Віртуальні магазини - більшість того, що ви можете зробити, щоб заробляти гроші сьогодні.
Add_theme_support("woocommerce");
Редагуємо шаблони
Редагування CSS у WooCommerce може забрати чимало часу. Але є спосіб зробити цю рутинну довгу роботу не такою нудною.
Плагін WooCommerce поставляється з набором шаблонів front-end на HTML, так само як із набором шаблонів для листів. Замість прямого редагування всіх цих файлів у плагіні (не дуже хороша ідея, тому що будь-яке оновлення плагіна призведе до того, що всі ваші зміни будуть видалені), ви можете скопіювати їх у свою тему, що настроюється:
Пам'ятайте, що вибір хорошого може мати велике значення між магазином і магазином. Незабаром ми завантажимо його, щоб ми могли встановити та налаштувати. З переведенням на екран ви побачите таке повідомлення. З перекладом зроблені повідомлення про встановлення сторінок та налаштування вашого магазину будуть португальською мовою.
Перший крок виконується на сторінці інсталяції. Тут майстер створить відповідальні та необхідні сторінки для і Моя обліковий запис. Тепер ви налаштуєте налаштування розташування магазину. Необхідно, щоб ви вказали базову країну свого магазину, яка валюта буде використовуватись, одиниця ваги та одиниця виміру, які використовуються для розмірів продукту.
- У папці з темою створюємо вкладену папку під назвою "woocommerce".
- Переходимо в папку з плагіном WooCommerceі відкриваємо папку "templates". Тут багато вкладених папок, у яких зберігаються шаблони, які у WooCommerce. На щастя, структура тут порівняно проста та візуально зрозуміла.
- У новій папці "woocommerce" помістимо всі файли шаблонів, скопійовані з джерела, які ми хочемо відредагувати. Не забудьте зберегти ту саму структуру папок, що й у першоджерелі. Не забудьте перейменувати пов'язані папки, якщо вносите зміни в назвах.
- Після редагування всіх необхідних файлівта папок зберігаємо зміни у папці "woocommerce".
Практичний приклад
Наприклад, нам потрібно змінити код у розділі із замовленими товарами у WooCommerce.
На цьому третьому етапі процесу за допомогою майстра налаштування ви зможете зробити основні налаштування. Наприклад, якщо ви доставляєте свої фізичні продукти і стягуватимете плату, встановіть прапорці. Ось тільки можливе налаштування. Щоб ввести додаткові специфікації, вам потрібно буде використовувати область конфігурації за промовчанням після завершення цього основного процесу, який ми запускаємо.
Загальні - загальні параметри та варіанти валют
Якщо ви бажаєте розпочати реєстрацію продуктів прямо зараз, натисніть «Створити свій перший продукт»! Однак вам потрібно буде створити сторінки «Магазин, Кошик, Оформити покупку та Мій обліковий запис», потім повернутися до налаштувань і додати їх до вказаних полів. Вони мають бути налаштовані один за одним, і це те, що ми збираємось робити зараз. Базове місце розташування - країна та стан вашого магазину. Це може вплинути на інформацію про часовий пояс та дату та час продажу. Потім виберіть правильну країну та стан.
Спочатку визначимо потрібний нам шаблон. Секція "My Orders" знаходиться в "My Account". Структура шляху до файлу виглядає так:
/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php
Робимо вкладену папку "woocommerce", а в ній - другу вкладену з назвою "myaccount". Копіюємо туди файл my-orders.php.
У вас повинен вийти шлях:
/wp-content/themes/вашатема/woocommerce/myaccount/my-orders.php
Місця збуту - ви можете продати всі країни або лише певні країни. Якщо ви хочете продати в 1 або більше конкретних країнах, з'явиться нова текстова область, і ви повинні ввести та вибрати зі списку країн, які відображатимуться. Місця доставки. Тут ви дізнаєтеся, чи буде ваш магазин виконувати доставку продуктів тільки в ті місця, де ви налаштовані як місця продажу, в різних місцях і навіть якщо ви хочете відключити доставку і, звичайно, розрахунок доставки.
Шаблон розташування клієнтів. Ви хочете встановити розташування за промовчанням для своїх клієнтів? Якщо ця опція підходить для вашого типу бізнесу та віртуального магазину, виберіть потрібний варіант. Якщо ні, залиште це як «Немає за промовчанням».
Тепер усі зроблені зміни переписуватимуть налаштування, задані за умовчанням.
WooCommerce та цикли
Якщо раніше створювали або редагували теми для WordPress, тоді вам знайоме поняття цикл (The Loop). WooCommerce має свої цикли для налаштувань своїх внутрішніх сторінок. Наприклад, ви можете їх застосовувати, якщо треба вивести іншу бічну панельдля сторінок WooCommerce.
Включити податки - встановіть прапорець, якщо ви хочете включити розрахунок податків і податків. Повідомлення про магазин. Якщо ви налаштовуєте свій магазин, але все одно тестуватимете, увімкніть відображення текстів повідомлень, що повідомляють потенційних клієнтів. Це може позбавитися основних головних болів для покупок, зроблених в той час, коли ваш магазин все ще знаходиться під тестом.
Валюта. У цьому варіанті ви повинні вказати, яку валюту використовуватиме ваш магазин для продажу ваших товарів. Навіть якщо ви продаєте інші країни, тут ви повинні вибрати тільки одну монету. Позиція валюти – виберіть, як ви хочете, щоб символ валюти відображався на початку або наприкінці; з простором чи без простору.
Базова інтеграція та створення настроюваного шаблону WooCommerceпередбачає застосування цього шаблону до всіх сторінок, включаючи категорії продуктів, продукти та архівні сторінки. Якщо ви не хочете вносити зміни до стандартного шаблону, то можете не створити шаблон для WooCommerce.
Створення шаблону відбувається за кілька кроків:
Якщо ви використовуєте монету, яка потребує різних специфікацій, можете вільно міняти. Після того, як ви внесете всі налаштування для вкладки "Загальні", натисніть кнопку "Зберегти зміни", а потім перейдіть до наступної вкладки. На вкладці «Продукти» ви знайдете 4 області: «Загальні», «Екран», «Інвентаризація» та «Завантажені продукти».
Загалом ви налаштуєте інформацію про вимірювання та оцінку. Налаштування частини заходів дуже важливе для віртуальних магазинів, які надсилатимуть продукти для доставки через відділення пошти. Так що, якщо це ваш випадок, будь ласка, повідомте одиниця ваги та вимірювання, які ви хочете використовувати. Область Оцінки має бути налаштована лише в тому випадку, якщо ви хочете працювати з рейтинговою системою своїх клієнтів, де вони мають думки про продукти, та інші клієнти можуть бачити таку думку.
- Робимо дублікат файлу теми page.php та перейменовуємо його на woocommerce.php
- Знаходимо цикл WordPress у файлі woocommerce.php. Він виглядає приблизно так:
- Замінюємо ваш цикл на цикл WooCommerce:
- Тепер можна робити будь-які бажані зміни.
Висновок
Тепер ви знаєте основи роботи з підключенням та налаштуванням тем для торгової платформи WooCommerce на WordPress.
Збережіть зміни, щоб нічого не загубилося. У Диску можна налаштувати базові сторінки вашого магазину, вибрати, що має статися, коли клієнт натискає кнопку «Додати в кошик» і задає параметри та параметри для зображень продукту. У наступних варіантах ви повинні вибрати, що буде відображатися на сторінці вашого магазину та категорії за промовчанням: Показати продукти, Показати категорії або Показати обидва. Потім виберіть, як ви хочете, щоб стандартне замовлення товарів з вашого магазину.
У розділі Дії додавання продукту до кошика ви повинні вибрати, що станеться, коли клієнт натискає кнопку, щоб купити продукт - якщо ви хочете, щоб він був перенаправлений на сторінку кошика, встановіть прапорець. У розділі «Зображення продукту» ви повинні ввести розмір зображень продукту в каталозі, сторінці продукту та розмірі зменшеного зображення продукту. У випадку продуктів з більш ніж одним зображенням цікаво залишити увімкненим у Галереї зображень зображень ефект «Лайтбокс».
Навичок, набутих у результаті прочитання цієї статті, вистачить для більшості випадків роботи з WooCommerce. Якщо вам потрібно більше прикладів гнучкої кастомізації, почитайте про фільтри, надбудови коду та умовні змінні для WooCommerce.
Спочатку планував написати про впровадження одного хаку на сторінці кошика WooCommerce, проте пізніше вирішив розповісти відразу про кілька фішок для її модифікації. Хочу зауважити, що в даному блозі є спеціальний розділ, , т.к. це питання включає безліч нюансів. Сьогодні стаття буде присвячена більше зовнішньому виглядута відображення інформації на сайті. Почнемо з налаштувань самого модуля, потім розглянемо питання видалення доставки і заразом зміна шаблону кошика. Думаю, пост стане в нагоді не лише новачкам.
Після внесення необхідних змін натисніть кнопку «Зберегти зміни», щоб нічого не втратилося. На вкладці «Доставка» ви побачите все, що стосується перевезення та доставки продуктів, придбаних вашими клієнтами. У цій частині конфігурації ви можете створювати дуже чітко визначені правила, специфічні для розташування клієнта.
А для інших місць, які не включені до доставки, які ви створюєте, ви можете додати способи доставки. Знайдіть назву "Інший світ", натисніть на знак і почніть додавати їх. Перший прапорець – включити опцію доставки у вашому магазині. Потім виберіть, чи повинен відображатися калькулятор фрахту на сторінці кошика, і, нарешті, вирішити, чи слід повідомляти вартість доставки тільки після введення адреси доставки клієнта. Призначення доставки.
На одному з початкових кроків WooCommerce система створює кілька ключових сторінок(Кошик у тому числі). Якщо подивіться в редакторі вміст, побачите шорткод .
Тут же можна змінити назву та додати трохи свого тексту на сторінку. Також задаєте МЕТА тег опису та тайтл за допомогою .
У налаштуваннях модуля є різні параметри керування кошиком. Деякі з них знайдете у вкладці "Доставка" - "Варіанти доставки".
У опції «Розрахунки» можна:
- включити у кошику калькулятор доставки;
- сховати відображення її вартості, якщо ще не заповнено адресу.
При включеному розрахунку доставки на сторінці WooCommerce кошика з'явиться відповідне посилання. При натисканні на неї користувач побачить поля для введення адреси.
Як видалити доставку зі сторінки кошика
Власне, наше наступне завдання — видалити на етапі формування замовлення все зайве, що не стосується вибору товарів та їхньої кількості. За замовчуванням у налаштуваннях плагіна, як бачите, це не передбачено, але в цьому є певний сенс. Чим менше різних факторів, що відволікають і заплутують, буде у вашому інтернет-магазині, тим більше ймовірність, що покупець зможе завершити.
Для вирішення завдання нам знадобиться вашої теми (custom-function.php або function.php) наступний хак:
| function delshipping_calc_in_cart( $show_shipping ) ( if ( is_cart() ) ( return false ; ) return $show_shipping ; ) add_filter( "woocommerce_cart_ready_to_calc_shipping", "delshipping_calc_in_cart", 99); |
function delshipping_calc_in_cart($show_shipping) ( if(is_cart()) ( return false; ) return $show_shipping; ) add_filter("woocommerce_cart_ready_to_calc_shipping", "delshipping_calc_in_cart"
Шаблон кошика WooCommerce
Усі основні файли шаблону для сторінки корзини у WooCommerce знаходяться у папці cart. Нагадую, що потрібно після того, як скопіюєте папку templates у свою дочірню тему. За замовчуванням директорія містить декілька файлів:
- cart-totals.php
- cross-sells.php
- cart-empty.php
- cart-item-data.php
- cart-shipping.php
- mini-cart.php
- proceed-to-checkout-button.php
- shipping-calculator.php
Кожен з них відповідає за певні функції, наприклад, у файлі cross-sells.php задається відображення крос продажів, cart-empty.php - виконується обробка порожнього кошика і т.п. Ви можете змінити виведення всіх елементів сторінки так, як це потрібно. Хоча деякі редагування прийнято робити через хакі/сніпети як наприклад у пості про .
Давайте розглянемо один приклад, щоб трохи прояснити логіку роботи. Після впровадження хаку з попереднього кроку налаштування WooCommerce кошика ми позбулися доставки, але сторінка все ще виглядає трохи дивно.
Якщо уважно вивчити файли шаблону кошика, то побачите, що відображення блоку під товарами відповідає рядок:
add_action("woocommerce_cart_collaterals", "woocommerce_cross_sell_display"); add_action("woocommerce_cart_collaterals", "woocommerce_cart_totals", 10);
Тепер, по суті, у вас є 3 варіанти, щоб усе це приховати:
- закоментувати рядок з do_action у cart.php;
- використовувати функцію remove_action у custom-function.php (або function.php);
- підправити файли cross-sells.php та cart-totals.php, які безпосередньо викликаються цими функціями.
Після застосування кожного з цих методів буде прихований не тільки блок підсумкової ціни, але і посилання на оплату замовлення. Тому потрібно повернути на сторінку кошика WooCommerce відповідну кнопку. Додаєте її до cart.php після форми:
Це лише один із прикладів роботи з шаблоном, сподіваюся, суть ви вловили. В принципі, є два варіанти його модифікації - у файлах безпосередньо (легше і наочніше), або робота через хуки і функції remove_action / add_action (начебто, вважається правильніше і гнучкіше). Який би варіант ви не вибрали, пам'ятайте, що правки потрібно вносити в копію макету магазину у дочірній темі.
Якщо будуть ще якісь питання/доповнення щодо настроювання кошика WooCommerce та модифікації відповідної сторінки на сайті, пишіть у коментарях.