Установка и настройка новой WooCommerce темы для WordPress

Установка и настройка новой WooCommerce темы для WordPress

От автора: WooCommerce — самая популярная и настраиваемая E-Commerce платформа для создания интернет-магазинов. WooCommerce распространяется бесплатно, но всю силу можно увидеть при подключении плагинов WordPress WooCommerce и тем.

Но нужно ли использовать WooCommerce темы? Это не обязательно, но я крайне рекомендую. Темы WordPress тема WooCommerce не только спроектирована под E-Commerce, она полностью сосредоточена на стиле WooCommerce. CSS, используемый WooCommerce для отображения товаров, также используется темой WooCommerce WordPress для связки всех элементов, что выливается в самый красивый дизайн E-Commerce площадок.

Стоит отметить, что установка и настройка новой темы WordPress WooCommerce не сложнее настройки любой другой темы WordPress. Давайте я покажу.

Установка и настройка новой WooCommerce темы для WordPress

Если у вас уже установлен WooCommerce, замечательно! Если нет, очень рекомендую прочитать руководство Rachel McCollin для начинающих по WooCommerce. Оно познакомит вас с WooCommerce и поэтапно покажет, как поднять свой магазин. Давайте начнем с установки и настройки новой WooCommerce темы для WordPress.

Шаг 1: установка шаблонных данных

Если у вас уже есть товары, можете пропустить этот шаг и перейти к шагу 2.

WooCommerce: Быстрый старт, первые результаты

Создайте ваш интернет-магазин на WooCommerce с полного нуля уже сегодня!

Узнать подробнее

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

Шаблонные данные встроены в плагин WooCommerce. Если вы установили WooCommerce через панель администратора WordPress, загрузите плагин из WordPress Plugin Directory на компьютер.

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

Установка и настройка новой WooCommerce темы для WordPress

Не позвольте WooCommerce Tax Rates (CSV) запутать себя. Это можно настроить позже, если нужно. Шаблонные данные WooCommerce находятся в WordPress.

Установка и настройка новой WooCommerce темы для WordPress

Скорее всего, у вас нет плагина WordPress importer, поэтому установите его.

Установка и настройка новой WooCommerce темы для WordPress

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

Установка и настройка новой WooCommerce темы для WordPress

Шаблонные данные должны быть в распакованной папке: (woocommerce.version.number) > woocommerce > dummy-data.

Установка и настройка новой WooCommerce темы для WordPress

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

Установка и настройка новой WooCommerce темы для WordPress

Это последнее, что нужно сделать перед импортом всех шаблонных данных. Ниже показаны личные настройки, в частности мои (скриншот ниже):

Импортируйте стандартного автора wooteam, не создавайте нового и не используйте стандартных. Так вы сможете отличать импортированный/созданный контент по имени автора (рекомендую удалить автора при удалении шаблонных данных после завершения установки и настройки новой WooCommerce темы для WordPress).

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

Установка и настройка новой WooCommerce темы для WordPress

Откройте yourwebsite.com/shop/ — должен импортироваться весь тестовый магазин:

Установка и настройка новой WooCommerce темы для WordPress

Да, у вас получилось! Дизайн не очень, правда? Но мы установим хорошую WooCommerce тему для WordPress Savoy. (Обратите внимание: после установки и настройки темы не забудьте удалить товары и изображения из шаблонных данных перед добавлением настоящих товаров.)

Шаг 2: установка WooCommerce темы для WordPress

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

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

Если вам удобнее работать с FTP, подключитесь к серверу и найдите папку wp-content > themes. В эту папку необходимо загрузить вашу тему. Перед отправкой распакованной папки на сервер убедитесь, что это папка темы. Давайте разберем пример темы WordPress с ThemeForest. После распаковки вы увидите несколько папок:

Установка и настройка новой WooCommerce темы для WordPress

Не все загружаемые темы так упакованы. Иногда в архиве лежит сразу папка темы. Посмотрите, что в архиве заранее, содержимое может отличаться.

Savoy — минималистичная WooCommerce тема с AJAX. Вместе с ней идет дополнительный материал: документация, файлы и т.д. Если открыть папку Theme Files, там будет лежать сама тема savoy.zip.

Если вы работаете с FTP, загрузите распакованную папку темы (например, savoy) в папку themes. Если вам не нравится FTP, и вы предпочитаете установить тему через панель администратора WordPress, ничего страшного. Мне тоже больше нравится панель администратора.

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

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

Установка и настройка новой WooCommerce темы для WordPress

Add new theme:

Установка и настройка новой WooCommerce темы для WordPress

Upload theme:

Установка и настройка новой WooCommerce темы для WordPress

Помните, где лежит zip файл темы? Наш пример savoy.zip. Кликните choose file и найдите его:

Установка и настройка новой WooCommerce темы для WordPress

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

Установка и настройка новой WooCommerce темы для WordPress

WooCommerce: Быстрый старт, первые результаты

Создайте ваш интернет-магазин на WooCommerce с полного нуля уже сегодня!

Узнать подробнее

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

Шаг 3: настройка WooCommerce темы для WordPress

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

Рекомендуемые/обязательные плагины

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

Установка и настройка новой WooCommerce темы для WordPress

Иногда тема сама уведомляет вас о рекомендуемых плагинах, в других темах рекомендации могут содержаться в документации. Там можно найти дизайнерские функции темы (например, необязательные слайдеры), которые не зашиты в тему, но совместимы с ней. Кликните Begin installing plugins в теме Savoy, чтобы увидеть список рекомендуемых плагинов:

Установка и настройка новой WooCommerce темы для WordPress

Список может отличаться в других темах. В этом конкретном случае вы можете установить все плагины или отказаться от некоторых.

Например, Savoy рекомендует Contact Form 7, в теме есть стили для плагина, но вы можете отказаться от использования этого плагина в качестве контактной формы. Может, вы хотите использовать что-то вроде Gravity Forms или Ninja Forms.

Плагин Regenerate Thumbnails – замечательный инструмент для тех, у кого уже есть работающих магазин, а изображения настроены под старую тему. Этот плагин пройдется по медиа библиотеке WordPress и изменит размер всех изображений под новую тему. С шаблонными данными этого можно и не делать. Вы также можете вообще пропустить этот плагин (но я рекомендую сделать это в целях тестирования, чтобы все файлы четко подходили по размерам).

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

Советую установить все рекомендуемые плагины в самом начале. Плагин всегда можно удалить потом, если он не нужен. С другой же стороны, если вы не установили необходимый плагин, тема может «не работать» или не делать того, что вам понравилось в демо.

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

Установка и настройка новой WooCommerce темы для WordPress

Если вы купили тему на ThemeForest, как наш пример Savoy, не забудьте ввести Marketplace Username и Secret API Key в Envato WordPress Toolkit, чтобы обновлялась именно эта тема.

Настройка

В этой части по установке и настройке WordPress WooCommerce темы все пойдет интереснее, так как вы увидите, как оживает ваш сайт.

Открыть WordPress Customizer можно через меню в WordPress: Appearance > Customize. Или откройте страницу Themes под Appearance > Themes и кликните кнопку customize:

Установка и настройка новой WooCommerce темы для WordPress

Добро пожаловать в WordPress Customizer:

Установка и настройка новой WooCommerce темы для WordPress

Здесь мы внесем пару правок перед погружением в настройки. Первое, что вы увидите, это Site Identity. Здесь можно поменять заголовок сайта и слоган.

Установка и настройка новой WooCommerce темы для WordPress

Иногда здесь же можно добавить свое изображение в хедер и/или иконку сайта (все зависит от темы). Далее, настройте меню:

Установка и настройка новой WooCommerce темы для WordPress

Если вы только установили WooCommerce или просто не создали еще ни одной страницы, вам, возможно, еще нечего настраивать. Однако после установки WooCommerce автоматически добавляется несколько страниц, которые, я считаю, вы захотите добавить в меню. Вы легко можете добавить и создать новое меню:

Установка и настройка новой WooCommerce темы для WordPress

После добавления меню (или нескольких) можно выбрать расположение меню, а также различные элементы меню (например, кастомные ссылки, посты, страницы, товары и т.д.).

Установка и настройка новой WooCommerce темы для WordPress

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

Установка и настройка новой WooCommerce темы для WordPress

Отметьте Front page displays как A static page и в качестве страницы shop укажите front page. Страница shop автоматически создается при установке плагина WooCommerce.

Страница posts зависит от того, нужен вам или нет блог на WooCommerce сайте. Если нужен, то вам необходимо создать страницу блога и выбрать ее на этой странице WordPress Customizer или в WordPress Admin Settings > Reading.

Результат

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

Установка и настройка новой WooCommerce темы для WordPress

Страницы отдельных товаров выглядят поразительно:

Установка и настройка новой WooCommerce темы для WordPress

Даже есть сопутствующие товары:

Установка и настройка новой WooCommerce темы для WordPress

Savoy — минималистичная WooCommerce тема с AJAX, с помощью которой можно с легкостью тонко настроить множество элементов на сайте и зайти еще дальше. Далеко за рамки этого урока. Прочитайте документацию к своей теме, чтобы знать ее тонкости. Я показал лишь те изменения, которые можно внести через WordPress Customizer. Обычно они доступны в любой теме.

Заключение

Видно, насколько просты эти первые шаги в настройке WordPress WooCommerce темы, а насколько хорошо выглядит сама тема. Просто используйте WordPress тему, спроектированную специально для WooCommerce.

Автор: Eric Dye

Источник: https://code.tutsplus.com/

Редакция: Команда webformyself.

WooCommerce: Быстрый старт, первые результаты

Создайте ваш интернет-магазин на WooCommerce с полного нуля уже сегодня!

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

WooCommerce: быстрый старт, первые результаты

Создайте свой первый интернет-магазин на WooCommerce с полного нуля!

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree