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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WooCommerce widgets (джаджи)

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

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

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

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

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

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

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

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

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

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

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

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

Обобщение

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

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

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

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

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