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.