Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

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

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

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

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

Дизайн тем 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результати

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

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

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

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

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

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

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

Підсумки

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

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

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

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 4

nikolay:

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

Ірина:

Добридень! У мене є проблема Wordpress. Не можу знайти людину, яка може мені допомогти. Може, ви зможете.
Загалом є інтернет-магазин shagvpered.com.ua
Я хочу, щоб після натискання кнопки *додати в кошик* товар додався до кошика, а клієнт залишився в тій же рубриці і на тому товарі що він додав до кошика. А в мене перекидає одразу зовсім в інше меню, до каталогу товарів. Клієнт наприклад додав до кошика шорти і щоб йому додати наприклад футболку з цієї ж рубрики, йому потрібно знову увійти до каталогу товарів — дитячий одяг — шорти та футболки
Коли я вмикаю функцію *Увімкнути для Ajax кнопки додавання до кошика в архівах* — зберегти зміни. Пише *Налаштування збережені*. Виходжу із цього меню. І коли знову заходжу галочка навпроти ajax вже не варто. З кнопкою "Переслати в кошик після успішного додавання" теж саме. Тема Spacious від ThemeGrill. Активні плагіни стоять: All In One SEO Pack, Contact Form 7,WooCommerce Direct Checkout,WooCommerce,VKMarket for WooCommerce,Saphali Woocommerce

Іван:

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

Атхам:

посилання на тестові дані:
https://docs.woocommerce.com/document/product-csv-importer-exporter/dummy-data/

Додати коментар або відгук