Установка і настройка WooCommerce для WordPress

Якщо у вас вже встановлений WooCommerce, чудово! Якщо немає, дуже рекомендую прочитати керівництво Rachel McCollin для початківців по WooCommerce. Воно познайомить вас з WooCommerce і поетапно покаже, як підняти свій магазин. Давайте почнемо з установки і настройки нової WooCommerce теми для WordPress.

Крок 1: установка шаблонних даних

Якщо у вас вже є товари, можете пропустити цей крок і перейти до кроку 2.
Установка шаблонних даних додає не справжні товари в магазин, допомагаючи візуалізувати наповнення магазину товарами. Після установки і настройки нової WooCommerce теми для WordPress ви захочете видалити всі шаблонних дані перед додаванням своїх товарів. Інакше ви випадково можете видалити справжні товари.
Шаблонні дані вбудовані в плагін WooCommerce. Якщо ви встановили WooCommerce через панель адміністратора WordPress, завантажте плагін з WordPress Plugin Directory на комп’ютер.



Це легше, ніж підключитися по FTP, зайти в папку плагінів і завантажити шаблонні дані звідти. Після завантаження розпакуйте файл, щоб підготуватися до імпорту файлу dummy-data.xml. Перейдіть в tools і клікніть import:

Не дозволяйте WooCommerce Tax Rates (CSV) заплутати себе. Це можна налаштувати пізніше, якщо потрібно. Шаблонні дані WooCommerce знаходяться в WordPress.

Швидше за все, у вас немає плагіна WordPress importer, тому встановіть його.

Після установки активуйте плагін і запустіть importer. Пам’ятайте куди поклали розпакований плагін WooCommerce? Тепер потрібно клікнути choose file і знайти його.

Шаблонні дані повинні бути в розпакованій папці: (woocommerce.version.number)> woocommerce> dummy-data.

Відкрийте папку dumy-data і виберіть файл dummy-data.xml. Тепер можна завантажувати і імпортувати файл.

Це останнє, що потрібно зробити перед імпортом всіх шаблонних даних. Нижче показані особисті настройки, зокрема мої (скріншот нижче):
Імпорт стандартного автора wooteam, не створюйте нового і не використовуйте стандартних. Так ви зможете відрізняти імпортований / створений контент на ім’я автора (рекомендую видалити автора при видаленні шаблонних даних після завершення установки і настройки нової WooCommerce теми для WordPress).



Також рекомендую завантажити і імпортувати вкладення, щоб у вас на кожен товар було зображення (і знову їх потрібно буде видалити після того, як закінчите працювати з шаблонними даними). Після вибору файлів натисніть submit:

Відкрийте yourwebsite.com/shop/ – повинен імпортуватися весь тестовий магазин:

Так, у вас вийшло! Дизайн не дуже, правда? Але ми встановимо хорошу WooCommerce тему для WordPress Savoy. (Зверніть увагу: після установки і настройки теми не забудьте видалити товари і зображення з шаблонних даних перед додаванням справжніх товарів.)

Крок 2: установка WooCommerce теми для WordPress

Тепер давайте розберемо, як встановити WooCommerce тему. Якщо ви ще не завантажили свою WordPress Commerce тему, зараз саме час (не забудьте папку завантаження). Є 2 способи установки теми: через FTP і з панелі адміністратора WordPress.

Установка теми по FTP

Якщо вам зручніше працювати з FTP, підключіться до сервера і знайдіть папку wp-content> themes. У цю папку необхідно завантажити вашу тему. Перед відправкою розпакованої папки на сервер переконайтеся, що це папка теми. Давайте розберемо приклад теми WordPress з ThemeForest. Після розпакування ви побачите кілька папок:

Не всі файли теми так упаковані. Іноді в архіві лежить відразу папка теми. Подивіться, що в архіві заздалегідь, вміст може відрізнятися.
Savoy – мінімалістичний WooCommerce тема з AJAX. Разом з нею йде додатковий матеріал: документація, файли і т.д. Якщо відкрити папку Theme Files, там буде лежати сама тема savoy.zip.
Якщо ви працюєте з FTP, завантажте розпаковану папку теми (наприклад, savoy) в папку themes. Якщо вам не подобається FTP, і ви віддаєте перевагу встановити тему через панель адміністратора WordPress, нічого страшного. Мені теж більше подобається панель адміністратора.

Установка теми через панель адміністратора WordPress

Для установки через панель адміністратора необхідно, щоб папка теми була запакована (themefolder.zip). Вище ми вже згадали, потрібно переконатися, що ви працюєте з папкою теми, а не папкою, в яку може бути вкладена тема. В панелі адміністратора під appearance клікніть themes:

Додати нову тему

Загрузити ткму

Пам’ятайте, де лежить zip файл теми? Наш приклад savoy.zip. Натисніть choose file і знайдіть його:

Після установки відкрийте Appearance> Themes, щоб перевірити, встановилася тема чи ні. Там же можете активувати тему. На скріншоті нижче видно, що Savoy успішно встановилася. Наведіть курсор на тему і натисніть activate:

Ваша WooCommerce тема для WordPress успішно встановлена і активована. Давайте її налаштуємо.

Крок 3: настройка WooCommerce теми для WordPress

Не всі теми налаштовуються однаково. Дизайн і розробка теми сильно впливають на це, тому в уроці можуть бути деякі розбіжності з конкретно вашою темою. В цілому, цей крок повинен допомогти вам налаштувати WooCommerce WordPress тему незалежно від використовуваної вами теми (з ThemeForest вона чи ні).

Рекомендовані / обов’язкові плагіни

Після установки і активації теми Savoy ви отримаєте повідомлення про рекомендовані плагинах:

Іноді тема сама повідомляє вас про рекомендовані плагинах, в інших темах рекомендації можуть міститися в документації. Там можна знайти дизайнерські функції теми (наприклад, необов’язкові слайдери), що не зашиті в тему, але сумісні з нею. Натисніть Begin installing plugins в темі Savoy, щоб побачити список рекомендованих плагінів:

Список може відрізнятися в інших темах. У цьому конкретному випадку ви можете встановити всі плагіни або відмовитися від деяких.
Наприклад, Savoy рекомендує Contact Form 7, в темі є стилі для плагіна, але ви можете відмовитися від використання цього плагіна в якості контактної форми. Може, ви хочете використовувати щось на зразок Gravity Forms або Ninja Forms.



Плагін Regenerate Thumbnails – чудовий інструмент для тих, у кого вже є працюючих магазин, а зображення налаштовані під стару тему. Цей плагін пройдеться по медіа бібліотеці WordPress і змінить розмір всіх зображень під нову тему. З шаблонними даними цього можна і не робити. Ви також можете взагалі пропустити цей плагін (але я рекомендую зробити це з метою тестування, щоб всі файли чітко підходили за розмірами).
Плагін Envato Toolkit дуже важливий для тих, куплених на ThemeForest. Він перевіряє повідомлення про оновлення теми.
Раджу встановити всі рекомендовані плагіни на самому початку. Плагін завжди можна видалити потім, якщо він не потрібен. З іншого ж боку, якщо ви не встановили необхідний плагін, тема може «не працює» або не робити того, що вам сподобалося в демо.
Після установки всіх плагінів або повної відмови від рекомендованих і / або обов’язкових плагінів не забудьте активувати їх:

Якщо ви купили тему на ThemeForest, як наш приклад Savoy, не забудьте ввести Marketplace Username і Secret API Key в Envato WordPress Toolkit, щоб оновлювалася саме ця тема.

Налаштування

У цій частині по встановленню та налагодженню WordPress WooCommerce теми все піде цікавіше, так як ви побачите, як оживає ваш сайт.
Відкрити WordPress Customizer можна через меню в WordPress: Appearance> Customize. Існує інший спосіб сторінку Themes під Appearance> Themes і натисніть кнопку customize:

Ласкаво просимо в WordPress Customizer:

Тут ми внесемо пару правок перед зануренням в настройки. Перше, що ви побачите, це Site Identity. Тут можна поміняти заголовок сайту і слоган.

Іноді тут же можна додати своє зображення в хедер і / або іконку сайту (все залежить від теми). Далі, налаштуйте меню:

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

Після додавання меню (або декількох) можна вибрати розташування меню, а також різні елементи меню (наприклад, кастомниє посилання, пости, сторінки, товари і т.д.).

Кастомайзер допомагає гнучко налаштувати функціонал WooCommerce. Не бійтеся гратися з налаштуваннями, можете зробити це і потім. Перед відходом з WordPress Customizer ви захочете вказати першу сторінку магазину:

Відзначте Front page displays як A static page і в якості сторінки shop вкажіть front page. Сторінка shop автоматично створюється при установці плагіна WooCommerce.
Сторінка posts залежить від того, потрібен вам чи ні блог на WooCommerce сайті. Якщо потрібен, то вам необхідно створити сторінку блога і вибрати її на цій сторінці WordPress Customizer або в WordPress Admin Settings> Reading.

Результат

Внісши парочку базових налаштувань, ви бачите, як чудово виглядає ваш інтернет-магазин з темою WordPress WooCommerce:

Сторінки окремих товарів виглядають вражаюче Навіть є супутні товари:
Savoy – мінімалістичний WooCommerce тема з AJAX, за допомогою якої можна з легкістю тонко налаштувати безліч елементів на сайті і зайти ще далі. Далеко за рамки цього уроку. Прочитайте документацію до своєї теми, щоб знати її тонкощі. Я показав лише ті зміни, які можна внести через WordPress Customizer. Зазвичай вони доступні в будь-якій темі.




Висновок

Видно, наскільки прості ці перші кроки в налаштуванні WordPress WooCommerce теми, а наскільки добре виглядає сама тема. Просто використовуйте WordPress тему, спроектовану спеціально для WooCommerce.
Автор: Eric Dye

Якщо Вам сподобалась публікація, поділіться нею!

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *