Начало > Помощен център > Апликации > WordPress > WooCommerce - Безплатна тема Storefront

WooCommerce - Безплатна тема Storefront

Помощен център

WooCommerce - Безплатна тема Storefront

Storefront е официалната тема на WooCommerce, изградена по същите взискателни стандарти както WordPress, от същите разработчици на Automattic.

WooCommerce Storefront е интуитивна и гъвкава, безплатна WordPress тема, която предлага дълбока интеграция с WooCommerce. Темата предлага голям брой опции за персонализиране на оформление и цвят, множество widgets региони, адаптивен дизайн, подробна документация, сигурност, функционалност и актуализации на възможно най-високо (WordPress) ниво.

В статията ще инсталираме Storefront и ще разгледаме основни функции и елементи от нейната структура.

Инсталиране и персонализиране на

Кликаме Външен вид > Теми > Добавяне на нова, въвеждаме storefront в полето за търсене и инсталираме/активираме темата от разработчиците на Automattic, тъй като има и други теми, които съдържат storefront в името си:

Инсталиране на темата WooCommerce Storefront

През интерфейса за персонализиране Външен вид > Настройки (WordPress Customizer) имаме достъп до много възможности за промяна на основните елементи на дизайна на темата:

Настройки за персонализиране на Storefront

Панелът WooCommerce ни предоставя възможности за персонализиране на елементи от специализиранните страници на магазина:

Настройки за персонализиране на специализиранни страници

Така изглежда Storefront след инсталацията, в която променихме само заглавието и подзаглавието на сайта:

Общ изглед на магазин с Storefront тема

Имаме достъп до филтър за подреждане на продуктите в каталога по няколко признака:

Филтър за подреждане на продукти в каталога

Страница на продукт

При избор на продукт от каталога се зарежда страницата на продукта, която съдържа цялата информация за продукта - име на продукта, реална и намалена цена, информация дали продукта е част от промоционална оферта, брояч и бутон за добавяне в пазарната количка, продуктова категория, изображение на продукта с функция за увеличаване на разглежданата област:

Продуктова страница в Storefront

Следващата секция на продуктовата страница съдържа описание на продукта - тук трябва да предоставим описание на продукта по начин, който да предизвика желание у посетителя да притежава продукта:

Раздел Описание на продукта

В раздела Отзиви клиенти могат да поставят оценка на продукта:

Раздел Отзиви за продукта

и да споделят своето мнение за покупката:

Секция Свързани продукти автоматично предлага на вниманието на посетителя продукти от същата или близки категории:

Секция Свързани продукти

В двата края по средата на екрана се зарежда част от изображение на продукт, което като се посочи с мишката, се плъзга към средата на екрана и при кликане зарежда страницата на съответния продукт - в примера, очила:

Скрита промоция на продукт

При кликане на бутона Купи продукта се добавя в пазарната количка и текстово съобщение ни потвърждава успешното добавяне. Лентата със съобщението съдържа също и линк към пазарната количка - Преглед на количката:

Добавяне на продукт в пазарната количка

Пазарна количка

Преглед на продуктите в пазарната количка може да направим по няколко начина:

  • като кликнем линка Преглед на количката в лентата със съобщение при добавяне на продукт;
  • като посочим иконата със символ пазарна количка в хедър секцията на сайта:

Достъп до пазарната количка в хедър секцията на сайта

  • може да инсталираме widget Количка в страничната лента, който обаче се зарежда само когато има запазен продукт в пазарната количка:

Widget Количка в страничната лента sidebar

Секция Количка сортира в таблица продуктите, които сме избрали от каталога. За всеки продукт в таблицата имаме достъп до следните функции:

Таблица с продукти в пазарната количка

  • изтриване на продукт - при кликане на иконата със символ знак Х;
  • умалено изображение на продукта - при кликане ни връща в страницата на продукта;
  • име на продукта - ако желаем да се върнем на страницата на продукта може да кликнем линка с името;
  • реалната цена на продукта;
  • интерактивен брояч - показва динамично броят на поръчаните продукти и дава възможност за увеличаване или намаляване на този брой чрез кликане на съответната стрелка;
  • код за отстъпка - ако разполагаме с код за отстъпка трябва да го въведем в полето и да кликнем бутона Прилагане на промо код. При въвеждане на грешен код (напр. 12341234) се зарежда съобщение за невалиден код: Купонът "12341234" не съществува!:

Съобщение за грешка при невалиден код за отстъпка

  • Обновяване на количката - при въвеждане на коректен код или промяна на броят на продуктите кликаме бутона Обновяване на количката за да се преизчисли общата стойност на поръчките в пазарната количка;

Следващата секция от страницата ни предоставя обща информация за поръчката - цена на поръчката и на доставката, стойност на ДДС и обща крайна цена. В полето Може да се интересувате от... се зарежда предложение за закупуване на свързан продукт, ако такъв е зададен при създаването на някой от продуктите в количката. Кликането на бутона Приключване на поръчката ни прехвърля на страницата за плащане (касата):

Свързани продукти и информация за поръчката

Страница за плащане

Когато прегледаме съдържанието на количката и решим да закупим избраните продукти, кликаме бутона Приключване на поръчката, който е наличен и в трите интерфейса - в header секцията, в страницата на количката и в страничната лента, за да достъпим страницата за плащане (касата).

Ако разполагаме с промо код за отстъпка, но сме пропуснали да го въведем в пазарната количка, може да го направим на страницата за плащане:

Опция за въвеждане на промо код

На страницата за плащане клиента попълва своите данни в колоната Адрес за фактуриране, в колоната Вашата поръчка клиента избира начин на доставка (в примера безплатна доставка) и начин на плащане (в примера Наложен платеж). Над бутона Поръчване се зарежда съобщение за обработката на личните данни на клиента с линк към страницата с условията на ползване:

Интерфейс за попълване на лични данни, доставка и начин на плащане

С кликане на бутона Поръчване клиента потвърждава закупуването на продукта.

Допълнителни методи за плащане по банков път ще разгледаме в отделна статия.

Зарежда се страница с информация за получената поръчка - номер на поръчката, дата, имейл адрес на клиента, крайна цена за плащане и начин на плащане:

Информация за получената поръчка

Секция Данни за поръчката описва продуктите, междинна сума, доставка, ДДС сума и начин на плащане:

Информация в секция Данни за поръчката

Последната секция на страницата съдържа информация за адресите, посочени от клиента, за фактуриране и за доставка:

Информация за адресите на фактуриране и доставка

В администрацията на WordPress новата поръчка се добавя в WooCommerce > Поръчки:

Достъп до WooCommerce ><noscript><img alt= Поръчки" src="https://delivery.icnhost.net/media/files/wcm-storefront-theme-22.png"/>

Таблица с поръчки в WooCommerce

От меню Състояние може да променим статуса на поръчката от Обработка на Приключена след доставяне на поръчката и заплащане от клиента, като кликнем бутона Обновяване:

Промяна статус на поръчка

Поръчка с променен статус

Изтриване на поръчка

За да изтрием поръчка трябва да я маркираме в таблицата Поръчки, в менюто Масови действия да изберем опцията Преместане в кошчето и да кликнем бутона Прилагане:

Преместване на поръчка в кошчето

В следващия интерфейс маркираме опцията Изтриване завинаги в менюто Масови действия и клкаме бутона Прилагане или просто кликаме бутона Изпразване на Кошчето:

Изтриване на поръчка от кошчето

WooCommerce widgets (джаджи)

При инсталиране на WooCommerce темата Storefront се добавят няколко нови widgets, свързани с функциите на магазина в Външен вид > Джаджи.

В нашия магазин при инсталацията в дясната странична лента (sidebar) бяха добавени widget-ите About This Site и Find Us. Чрез плъзгане с мишката ги преместихме съответно в областите Footer Column 1 и Footer Column 2:

Widgets в страничната лента sidebar и footer секцията

Припомняме, че може да добавяме widget-ите в областите чрез плъзгане с мишката или като кликнем widget-a, изберем областта в менюто и кликнем бутона Добавяне на джаджа:

Интерфейс за добавяне на widget в област

След това добавихме в страничната лента Sidebar следните widget-и.

Филтър на продукти по цена - филтъра се настройва автоматично спрямо най-високата и най-ниската цена на продукт в избрания метод за подреждане с интервал 10лв.:

Widget Филтър на продукти по цена

Ако цените на продуктите с етикет Аccessories са в интервала 20лв. - 70лв., филтъра автоматично ще се настрои към съответния ценови диапазон:

Автоматично настройване на филтър

Ако настроим филтъра за определен ценови диапазон чрез плъзгане на единия край, в каталога ще се заредят продукти само от избрания диапазон:

Персонализиране диапазон на филтър

Продукти според оценката - продуктите ще се подреждат според получените от клиентите звезди:

Филтриране на продукти според оценката на клиентите

Категории продукти - показва списък с категориите на продуктите и броят на продукти в съответната категория:

Сортиране на продукти по категории

Количка - показва съдържанието на пазарната количка само когато в нея има запазени продукти (тази настройка може да бъде изключена в widget-a):

Показва съдържанието на пазарната количка

В области Footer Column 3 и 4 добавихме widget-ите Облак с етикети на продукти и Последни отзиви за продукти.

Общ изглед на Footer секцията след добавянето на widget-ите:

Общ изглед на Footer секцията

Обобщение

WooCommerce Storefront предлага изчистен дизайн и достатъчно на брой инструменти за да персонализираме нашия магазин в съответствие с дизайна на нашата търговска марка независимо дали ползваме WordPress Customizer, плъгин или под-тема (child theme).

WooCommerce предлага изключително подробна документация за инсталиране и конфигуриране на всички теми и плъгини, както и описание как работят основните функции и настройки в магазина.

Потребителите на безплатната тема Storefront могат да публикуват запитванията си във форумите за поддръжка на WordPress.org, когато се нуждаят от помощ. Общността е приятелска и много активна, затова повечето затруднения получават решения доста бързо.

При закупуване на самостоятелна или под-тема (child theme) потребителите получават достъп до помощната Helpdesk система на WooCommerce, от където може да изпратят запитването си в тикет и да получат професионална поддръжка.

Потребителите, които желаят магазин с уникален дизайн и модерни функционалности, могат да закупят професионално изработени теми и плъгини от сайта на WooCommerce.