Урок 4. Установка шаблона WooCommerce

paraschak.ru

Урок 4. Установка шаблона WooCommerce

Если мы сейчас посмотрим на внешний вид нашего интернет-магазина, то это будет не очень впечатляющее зрелище. Потому что в данный момент мы используем стандартный шаблон, который не заточен под WooCommerce.

И поэтому в данном уроке давайте с вами установим шаблон, который оптимизирован под движок нашего интернет-магазина. Скачать его можно по этой ссылке .

Теперь, чтобы его установить, перейдем в панель управления (консоль) — внешний вид — темы:

установка шаблона woocommerce

Далее нажимаем кнопку «Добавить новую» и «Загрузить тему»:

добавить тему woocommerce

добавить тему woocommerce2

В появившемся окне нажимаем на кнопку «выберите файл» и указываем тот файл, который скачали в начале урока, а затем кнопку установить:

установка темы woocommerce

После установки выбранной темы, появится информация о том, что тема установлена, а нам же лишь остается ее активировать:

утсновка темы woocommerce

Теперь мы видим, что тема Vogue у нас активна и используется на сайте:

установка тем woocommerce

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

установка темы woocommerce

Давайте приведем главную страницу к более приближенному облику интернет-магазина. Нажимаем на изображении темы кнопку «настроить» (можно увидеть в предыдущей картинке) и попадаем в меню изменений:

настройка темы woocommerce

Настроек в теме много и в рамках данного урока мы все не будем разбирать, а разберем лишь те, которые помогут привести нашу тему к виду настоящей интернет-витрины. Первая настройка — «Свойства сайта». Здесь мы указываем название сайта и его краткое описание. Смотреться это будет так:

настройка шаблона woocommerce

настройка шаблона woocommerce

Следующая настройка, которая нам пригодится — «Layout Options». Здесь нас интересует пункт «Enable a Back To Top Button.» на которым мы поставим «птичку». Эта настройка активирует кнопку, которая появляется при прокрутке страницы вниз. При ее нажатии клиента плавно переправит в начало страницы вашего сайта:

настройка шаблона woocommerce

 

В «Header Options» давайте выберем в настройке «Header Layout» вид «Header Standart»:

настройка темы woocommerce

Это придаст нашему хэдэру вот такой вид:

настройка темы woocommerce

В настройках слайдера «Slider Options» давайте его пока отключим:

настройка темы woocommerce

Самое главное — в настройках сайдбара (меню справа) «Sidebar» уберем ненужные меню, и добавим те, которые больше подходят к интернет-магазину:

настройка темы wooocommerce

Удаляем «Архивы», «Рубрики», «Отзывы», «Мета» и добавляем «WooCommerce Категории товаров», «WooCommerce Товары», «WooCommerce Товары с высоким рейтингом», «Недавние отзывы товаров»:

настройка темы woocommerce

После этого меню справа приобретет вот такой вид:

настройка темы woocommerce

Это уже больше похоже на меню интернет-магазина. И последнее, что мы сделаем, это выведем на главную страницу каталог товаров. Для этого в настройке «Статическая главная страница» укажем «На главной странице отображать» статическую страницу. Главная страница — «Витрина»:

настройка шаблона woocommerce

Теперь остается нажать вверху кнопку «Сохранить и опубликовать»:

save_button

Идем на главную страницу нашего сайта и смотрим что получилось (кликабельно):

тема в woocommerce

Теперь это больше похоже на витрину интернет-магазина, чем на блог. А на этом здесь все. Спасибо за внимание и до встречи в следующих моих уроках.

comments powered by HyperComments

Похожие записи