Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. WooCommerce
Code

Як встановити і налаштувати нову тему WordPress WooCommerce

by
Difficulty:BeginnerLength:LongLanguages:

Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)

WooCommerce - найпопулярніша та «найбільш настроювальна платформа для електронної комерції для створення вашого онлайн-бізнесу». Ви можете безкоштовно завантажити WooCommerce, але ви дійсно виявите всю її міць, коли починаєте використовувати теми та плагіни WordPress WooCommerce.

Але вам дійсно потрібно використовувати тему WooCommerce?

Хоча це і не потрібно, я настійно рекомендую.

Дизайн не тільки пов'язаний з темами WooCommerce, але всі вони зосереджені навколо стилів WooCommerce. CSS, який WooCommerce використовує для визначення того, як відображаються товари, потім використовується темою WordPress WooCommerce, щоб зібрати всі разом - для деяких з найбільш красиво оформлених вітрин електронної комерції.

Не кажучи вже про те, що установка та налаштування нової теми WordPress WooCommerce не складніше, ніж настройка будь-який інший теми WordPress.

Дозвольте мені показати вам, як це зробити.

Як встановити та налаштувати нову тему WordPress WooCommerce

Якщо ви вже маєте ​​WooCommerce, це здорово! Якщо немає, я настійно рекомендую «Керівництво для початківців» Речел Макколлін по використанню WooCommerce. Воно познайомить вас з WooCommerce і проведе вас через всі кроки, необхідні для запуску вашого інтернет-магазину.

Тепер давайте почнемо з того, як встановити та налаштувати нову тему WordPress WooCommerce.

Крок 1: установка фіктивних даних

Якщо ви вже додали свої продукти в WooCommerce, я рекомендую пропустити цей крок і почати з кроку 2.

Установка фіктивних даних додає вигадані продукти до вашого магазину, щоб допомогти вам візуалізувати свій магазин за допомогою продуктів. Після того, як ви завершили установку і створили нову тему WordPress WooCommerce, ви повинні видалити усі фіктивні дані перед додаванням ваших продуктів. В іншому випадку ви ризикуєте випадково видалити свої власні дані про продукт.

Фіктивні дані включені в ваш плагін WooCommerce. Якщо ви встановили WooCommerce в панелі адміністратора WordPress, продовжуйте завантаження плагіна з каталогу плагінів WordPress на свій комп'ютер. Це буде простіше, ніж увійти в ваш FTP, увійти в свій каталог плагінів і завантажити фіктивні дані звідти.

Після завершення завантаження розархівуйте файл, щоб підготувати файл dummy-data.xml.

Перейдіть в Інструменти і натисніть Імпорт:

How to Install and Setup a New WordPress WooCommerce Theme

Не дозволяйте «Податкові ставки WooCommerce (CSV)» плутати вас. Це можна зробити пізніше, якщо забажаєте. Для WooCommerce Dummy Data вам потрібно вибрати WordPress.

How to Install and Setup a New WordPress WooCommerce Theme

Швидше за все, у вас не буде встановлений плагін WordPress Importer, так що давайте почнемо установку  зараз.

How to Install and Setup a New WordPress WooCommerce Theme

Після установки йдіть і активуйте Plugin & Run Importer.

Ви пам'ятаєте, де ви завантажили і розпакували плагін WooCommerce? Чудово! Тепер вам потрібно клацнути «Вибрати файл» і перейти до нього.

How to Install and Setup a New WordPress WooCommerce Theme

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

How to Install and Setup a New WordPress WooCommerce Theme

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

Це останнє, що вам потрібно зробити перед імпортом всіх фіктивних даних.

Деякі з них є особистими уподобаннями, але ось що я роблю (знімок екрана нижче):

Імпортуйте автора за замовчуванням «wooteam» замість створення нового учасника або використання існуючого автора. Таким чином, ви знаєте, який контент був імпортований, а який створений в цьому процесі на основі імені автора (я рекомендую видалити автора при видаленні фіктивних даних після того, як ви закінчили установку і настройку нової теми WordPress WooCommerce).

Я також рекомендую вам завантажувати і імпортувати вкладення, щоб у вас були зображення, пов'язані з кожним продуктом (знову ж таки, вам потрібно переконатися, що носій буде видалений, коли ви закінчите з фіктивними даними).

Після того, як ви зробили ці вибори, відправте:

How to Install and Setup a New WordPress WooCommerce Theme

Відвідайте веб-сайт yourwebsite.com/shop/, і ви побачите повністю імпортоване тестове сховище:

How to Install and Setup a New WordPress WooCommerce Theme

Так! Ти зробив це!

Хоча все це не дуже добре спроектовано, чи не так? Добре, що ми збираємося встановити чудову тему WordPress WooCommerce, таку як Savoy.

(ПРИМІТКА. Після завершення установки і налаштування теми не забудьте видалити продукти і зображення з фіктивного імпорту даних, перш ніж додавати власні продукти.)

Крок 2. Установка теми WordPress WooCommerce

Тепер давайте подивимося, як встановити тему WooCommerce. Якщо ви ще не завантажили свою тему електронної торгівлі WordPress, завантажте її на свій комп'ютер (переконайтеся, що знаєте, де її завантажуєте, щоб отримати до неї доступ).

Ви можете встановити свою тему двома способами:

  1. Доступ до веб-сайту за допомогою FTP
  2. З панелі адміністратора WordPress

FTP Вашої теми

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

Після розпакування завантаження ви побачите, що існує кілька різних папок:

How to Install and Setup a New WordPress WooCommerce Theme

Не кожна тема, котру ви завантажили буде упакована в такий спосіб. Іноді папка, яку ви завантажуєте, є фактичною папкою теми. Це завжди добре б перевірити, так як це варіюється від місця до місця.

Тема Savoy - Minimalist AJAX WooCommerce включає деякі доповнення, такі як документація, активи та ін. Якщо ви заглянете в папку Theme Files для Savoy, ви знайдете свою тему (savoy.zip).

Якщо ви встановлюєте за допомогою FTP, перейдіть в папку з темами і завантажте папку розпакованої теми (наприклад, «savoy»). Якщо ви не впевнені у використанні FTP або віддасте перевагу встановити в панелі адміністратора WordPress, це нормально. Я теж передаю перевагу за використовування адмін-панелі WordPress.

З панелі адміністратора WordPress

Для установки теми WordPress в панелі адміністратора потрібно перевірити, щоб папка теми була заархівована (themefolder.zip). Як ми вже обговорювали раніше, вам потрібно переконатися, що ви працюєте з фактичною папкою теми, а не з папкою, в яку може бути упакована ваша тема.

В адмін-панелі WordPress в розділі «Зовнішній вигляд» виберіть «Теми»:

How to Install and Setup a New WordPress WooCommerce Theme

додайте нову тему:

How to Install and Setup a New WordPress WooCommerce Theme

Завантажте тему:

Ви пам'ятаєте, де знаходиться ваш zip файл теми?

(Назва нашої теми: savoy.zip)

Натисніть «Вибрати файл» і пройдіть до нього:

Після установки ви можете відвідати «Зовнішній вигляд» > «Теми» в адмін-панелі WordPress, щоб дізнатися, чи встановлений він, або натисніть, щоб відразу активувати його.

Як ви бачите (нижче), тема Savoy успішно встановлена, тому мишкою переходимо і активуємо:

How to Install and Setup a New WordPress WooCommerce Theme

Тепер, коли ваша тема WordPress WooCommerce успішно встановлена ​​і активована, давайте налаштуємо її.

Крок 3. Налаштуйте тему WordPress WooCommerce

Не кожна тема налаштовується однаково. Те як тема розробляється, є великим фактором, тому можуть бути деякі відмінності між цим уроком і тим, з чим ви можете зіткнутися. В цілому, однак, це повинно допомогти вам налаштувати тему WordPress WooCommerce - незалежно від теми, яку ви використовуєте з ThemeForest або що-небудь ще.

Рекомендовані/Необхідні плагіни

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

How to Install and Setup a New WordPress WooCommerce Theme

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

Натисніть Почати установку плагінів в темі Savoy, щоб переглянути список рекомендованих модулів:

How to Install and Setup a New WordPress WooCommerce Theme

Знову, це буде варіюватися від теми до теми, але в цьому випадку ви можете і не встановлювати все це.

Наприклад, якщо Savoy рекомендує контактну форму 7 і включає в себе стиль для неї, ви можете не використовувати цей плагін для своєї контактної форми. Ви можете використовувати щось на зразок Gravity Forms або Ninja Forms.

Такий плагін, як Regenerate Thumbnails, є прекрасним для тих, у кого вже налаштований магазин, і налаштував їх зображення для попередньої теми. Цей плагін буде проходити через вашу медіа-бібліотеку WordPress і змінить розмір всіх ваших зображень для роботи з вашою новою темою. Ви можете або не хочете робити це з фіктивними даними, і ви можете взагалі пропустити цей плагін (але я все одно рекомендую це зробити, щоб всі носії були правильно розраховані для тестування).

Однак плагін, такий як Envato Toolkit, дуже важливий для тих, що були придбани через ThemeForest, гарантуючи, що ви будете повідомлені про оновлення теми.

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

Після того, як ви встановили все, деякі або жоден з рекомендованих і/або необхідних плагінів, не забудьте активувати їх:

How to Install and Setup a New WordPress WooCommerce Theme

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

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

Це частина установки і настройки теми WordPress WooCommerce, коли вона стає дійсно цікавою, і ви починаєте бачити, як ваш сайт оживає.

Ви можете отримати доступ до Настроювача WordPress з меню в WordPress: Зовнішній вигляд > Налаштувати. : Або перейдіть на сторінку Теми в розділі Зовнішній вигляд > Теми і потім натисніть кнопку Налаштувати:

How to Install and Setup a New WordPress WooCommerce Theme

Ласкаво просимо в Настроювач WordPress:

How to Install and Setup a New WordPress WooCommerce Theme

Тут ми зробимо кілька налаштувань, перш ніж переходити до більш глибокого налаштування.

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

How to Install and Setup a New WordPress WooCommerce Theme

Іноді тут ви також можете додати власну "шапку" сайту та/або значок сайту (це буде варіюватися від теми до теми).

Потім потрібно вказати меню:

How to Install and Setup a New WordPress WooCommerce Theme

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

Ви можете легко додати і створити нове меню:

How to Install and Setup a New WordPress WooCommerce ThemeHow to Install and Setup a New WordPress WooCommerce Theme

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

How to Install and Setup a New WordPress WooCommerce Theme

Це дає вам велику гнучкість в тому, як ви хочете, щоб ваш сайт WooCommerce функціонував. Не бійтеся пограти з ним або змінити його пізніше.

Перш ніж ми покинемо Настроювач WordPress, ви захочете повідомити WordPress, щоб на першій сторінці вашого магазину було:

How to Install and Setup a New WordPress WooCommerce Theme

Помітити головну сторінку в якості статичної сторінки і вибрати головну сторінку для своєї сторінки магазину. Сторінка «Магазин» була автоматично створена, коли ви встановили плагін WooCommerce.

Що стосується сторінки Записів, це залежить від того, де ви хочете вести блог на своєму сайті WooCommerce. Якщо це так, вам потрібно створити сторінку в блозі і вибрати її на цій сторінці у Настроювачі WordPress або в Настройках адміністратора WordPress > Читання.

Зезультати

З деякою базовою конфігурацією ви можете побачити, як виглядає ваш інтернет-магазин за допомогою теми WordPress WooCommerce:

How to Install and Setup a New WordPress WooCommerce Theme

Окремі сторінки продукту виглядають приголомшливо:

How to Install and Setup a New WordPress WooCommerce Theme

Він також включає в себе супутні продукти:

How to Install and Setup a New WordPress WooCommerce Theme

Тема Savoy - Minimalist AJAX WooCommerce дозволяє вам легко допрацьовувати багато елементів вашого сайту і ще багато чого може вам дати з того що, я описав в цьому уроці (не забудьте прочитати документацію по вашій темі, щоб дізнатися більше про вашу темі). Я тільки показав вам зміни, які можуть бути внесені в Настроювач WordPress, і, як правило, вони можуть бути зроблені практично по будь-якій темі, яку ви можете використовувати.

Висновок

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

Є багато корисних плагінів WordPress WooCommerce, доступних на CodeCanyon, і деякі красиво оформлені і ефективні теми WordPress WooCommerce на ThemeForest.

Якщо подивитися на деякі з найбільш популярних тем ThemeForest WooCommerce, можна почати з гарної (Savoy як і раніше залишається моєю любимою). Я впевнений, ви обов'язково знайдете те, що ідеально підходить вашому магазину електронної комерції. Або перегляньте нашу демонстраційну вітрину, щоб знайти підходящу для вашого магазину:

Що ви використовуєте в WooCommerce для продажу?

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.