Як налаштувати інтернет магазин на прикладі теми WordPress для WooCommerce

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

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

Це необов'язково, але ми наполегливо рекомендуємо.

Дивіться також:

• Flatsome — найпопулярніша WordPress тема для інтернет магазину на WooCommerce
• 20 нових та безкоштовних тем WordPress для інтернет магазину на WooCommerce
• 20 корисних плагінів WooCommerce для WordPress, доступних на CodeCanyon
• Покращуємо SEO магазин на WooCommerce за допомогою розширення від Yoast
• 17 безкоштовних WordPress-плагінів для фреймворку WooCommerce

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

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

Ми покажемо вам, як це зробити.

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

Для початку вам потрібно встановити плагін WooCommerce на свій WordPress сайт. Це робиться безкоштовно:

А зараз давайте почнемо з встановлення та налаштування нової теми WordPress для WooCommerce.

Крок 1. Встановіть тестові дані (Dummy Data)

Якщо ви вже додали ваші товари на WooCommerce, пропустіть цей крок і переходьте до кроку 2.

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

Фіктивні дані вбудовані в плагін WooCommerce. Завантажте плагін із директорії плагінів WordPress на ваш комп'ютер. Після завантаження розархівуйте файл і ви готові до імпорту файлу dummy-data.xml

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

Для WooCommerce Dummy Data виберіть WordPress.

Швидше за все, у вас не встановлено плагін Імпорт WordPressякщо це так, то встановіть його зараз.

Ви пам'ятаєте куди зберегли та розархівували плагін WooCommerce? Чудово! Тепер знову зайдіть в Імпорт, натисніть Choose File і знайти його.

Ваші фіктивні дані повинні бути в розархівованій папці: woocommerce → dummy-data.

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

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

Все частково залежить від особистих переваг, але ось, що зробимо ми (скриншот буде нижче):

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

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

Після цього натисніть «Sподати'

Зайдіть на ваш сайт.com/shop/ та побачите повністю імпортовану тестову версію магазину.

Так! Ви це зробили!

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

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

Крок 2. Встановлення WooCommerce теми

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

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

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

Тема Savoy включає кілька додаткових переваг, наприклад, документація, активи, і т.д. Якщо ви заглянете в папку Theme Files у пошуках Savoy, ви знайдете її там (savoy.zip).

Після встановлення теми на ваш сайт зайдіть у Зовнішній вигляд → Теми, щоб перевірити установку та активувати її прямо там.

Як ви бачите (нижче), тема Savoy була успішно встановлена, тому ми натискаємо «активувати'

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

Крок 3. Налаштування WooCommerce теми

Кожну тему потрібно налаштовувати по-своєму. Все залежить від дизайну та розробки теми, так що, напевно, будуть відмінності між нашою інструкцією та налаштуванням вашої теми. Але в будь-якому випадку, наша стаття допоможе вам зрозуміти основні принципи налаштування тем WooCommerce і неважливо, яку ви оберете в результаті.

Рекомендовані плагіни

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

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

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

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

Наприклад, Savoy рекомендує Contact Form 7 і має відповідне для нього оформлення, але ви можете вибрати щось інше, як гравітаційні форми або Ninja Форми.

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

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

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

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

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

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

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

У вас є доступ до WordPress Customizer з меню Зовнішній вигляд → Налаштувати.

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

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

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

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

Далі налаштуйте ваше меню:

Якщо ви ще не створювали сторінки, то налаштовувати майже нема чого. Але WooCommerce автоматично додає кілька нових сторінок, які ви захочете додати до меню.

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

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

У вас є свобода налаштування функціональності вашого сайту. Не бійтеся експериментувати.

Перш ніж ми закінчимо роботу з WordPress Customizer, ви захочете створити головну сторінку вашого сайту:

Позначте «Front page displaysякСтатична сторінка» та виберіть у випадаючому меню «Головна сторінка» - «магазин». Shop сторінка була створена автоматично при встановленні плагіна WooCommerce.

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

Результати

Після базових налаштувань ви побачите, як чудово може виглядати ваш онлайн магазин за допомогою WooCommerce теми.

Сторінки товарів виглядають приголомшливо:

Тут навіть є блок зі схожими товарами:

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

Підсумки

Бачите, як легко зробити ці перші кроки в налаштуванні нової теми WooCommerce, і як красиві теми, створені спеціально для WooCommerce? Але це ще не все!

Ви можете знайти багато відмінних плагінів для WooCommerce, а також безкоштовних та преміум тем оформлення для вашого магазину

Ми впевнені, що ви знайдете класну тему WooCommerce, яка ідеально підійде вашому інтернет магазину.

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/