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

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

Чи дійсно вам потрібно використовувати тему 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 Importer. якщо це так, то встановіть його зараз.

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

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

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

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

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

Після цього натисніть «S ubmit»:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Натисніть «Begin installing plugins» в темі Savoy і ви побачите список рекомендованих плагінів:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

результати

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

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

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

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

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

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

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