Интеграция на Beaver Builder WooCommerce 2024 – Как да използвате Beaver Builder за изграждане на страници за продукти и магазини на WooCommerce?

Може да бъде вълнуващо да създадете онлайн магазин. Допринася за успеха на вашия бизнес да имате страхотна витрина. Въпреки това, ако искате да проектирате магазин, който работи добре, може да се затрудните.

Сайт за електронна търговия, който е доволен както за вас, така и за вашите клиенти, може да бъде създаден с помощта на WooCommerce строител на страници. Нека да разгледаме WooCommerce плъгин. Следващата ни стъпка ще бъде да демонстрираме колко лесно е да създадете своя онлайн магазин с Beaver Builder. Хайде да започваме!

бобър строител

Кратко въведение в WooCommerce

С WooCommerce можете добавете функционалност за електронна търговия към вашия WordPress сайт, за да можете да продавате продуктите си онлайн:

Освен това ще се озовете в добра компания, тъй като се очаква WooCommerce да има пазарен дял от около 28 процента до 2020 г.

WooCommerce е решение с отворен код, с възможност за персонализиране, точно като WordPress. С него можете да настроите шлюзове за плащане и различни опции за доставка и да започнете веднага с вашата империя за електронна търговия.

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

Използването на плъгини за добавки на WooCommerce ви дава достъп до много други функции.  

Изграждане на WooCommerce магазин и продуктови страници с Beaver Builder (в 4 лесни стъпки)

Въпреки това, преди да можете да се справите с функциите на WooCommerce, първо се нуждаете от уебсайт, който да стартирате. Започнете, като инсталирате и активирате WordPress плъгините WooCommerce, Beaver Builder и Beaver Themer. Вече сте готови да създадете своя продукт и страници за магазини.

Стъпка 1: Създайте своя магазин, като добавите продукти

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

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

Ще научите как да създадете основен продукт, ако искате да започнете от нулата. Без значение какво планирате да продадете, другите раздели в тази публикация ще ви бъдат от полза.

Създайте нов продукт в таблото за управление на WordPress. Изберете Продукти > Добавяне на нов в менюто вляво. Попълнете следните полета за артикула, който искате да добавите към вашия магазин:

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

Решете дали вашият продукт може да бъде изтеглен или виртуален в общите настройки. Не поставяйте отметки в квадратчетата, ако продуктът е физически:

Освен управлението на инвентара, можете да започнете. Свързването на продукти ви дава възможност за кръстосани продажби и по-високи продажби.

Можете също така да добавите второ, по-кратко описание на вашия артикул в полето за кратко описание на продукта под панела с данни за продукта. Списъците на витрини обикновено съдържат тази информация.

Ще видите продуктови категории и тагове вдясно на екрана. Ето някои полезни организатори:

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

Можете да качите снимка от вашето устройство или да добавите изображение от вашата медийна библиотека. По същия начин можете да добавяте изображения към продуктови галерии. Изображенията могат просто да се плъзгат и пускат, за да се пренаредят.

Стъпка 2: Дизайн на нови продуктови страници

За да покажете вашите продукти, можете да създадете продуктови страници. Видеоурокът на Beaver Themer предоставя инструкции стъпка по стъпка как да персонализирате отделни продуктови страници на WooCommerce. 

Beaver Themer е мощен инструмент за разширяване на Beaver Builder в конструктор на страници WooCommerce. Можете да прилагате шаблони към целия си сайт с тази добавка.  

 Щракнете върху Оформления на теми > Добавяне на ново в Beaver Builder:

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

Вашето оформление трябва да има заглавие. Трябва да изберете вашето оформление и тип, преди да щракнете върху бутона Add Themer Layout.

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

Правилните настройки на оформлението на Themer за използване на Beaver Themer като създател на страници на WooCommerce.

Можете да редактирате оформлението си с Beaver Builder, след като запазите работата си. Започвайки от горния десен ъгъл, щракнете върху синия знак плюс. След като щракнете върху Шаблони, щракнете върху Нов:

Местоположението на продуктовия шаблон на WooCommerce в Beaver Thermer.

Заменете съществуващото оформление, като изберете Продукт > Замяна на съществуващо оформление. Няколко полезни настройки по подразбиране вече са налице, което превръща вашия шаблон в продуктова страница:

Продуктов шаблон по подразбиране на Beaver Builder

Добавянето или премахването на модули WooCommerce от основното ви оформление е възможно, след като го имате. Модулите на WooCommerce могат да бъдат достъпни чрез Модули > Тематични модули > WooCommerce. Освен оценки на продуктите, описания, надценки и много други, ще имате много опции:

Използване на модули на WooCommerce

Докато редактирате оформление, можете да превключите към виждане на друг продукт, като използвате функцията Preview As: в Beaver Builder:

Преглед на различни продукти в Beaver Builder

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

Стъпка 3: Създайте страница на магазин в WooCommerce

Време е да дадете на страницата на магазина същото третиране като на вашите WooCommerce продукти. Стандартното оформление на магазина на WooCommerce е много просто и не много вълнуващо:

Стандартното оформление на магазина на WooCommerce

Когато проектирате страницата на вашия магазин, Beaver Themer е по-добър избор. Започнете, като отидете на WooCommerce > Настройки, щракнете върху раздела на продукта и се уверете, че страницата на магазина сочи към магазин или друга персонализирана страница, която сте създали. Той показва вашите продукти като архивна страница, ако посочите такава.

Изберете Themer Layouts > Add New в Beaver Builder > Theme Builder и след това щракнете върху Add New. Изберете опцията Theme Layout под Type на следващия екран:

Създаване на оформление на страницата на магазина

Следният екран ще ви позволи да изберете местоположението на продуктовия архив. Продуктите на вашия магазин ще бъдат показани на страницата на магазина и на страниците с продуктови категории. Ако е необходимо, можете да го промените.

Персонализиране на страницата с продуктовия архив

Като щракнете върху Стартиране на Beaver Builder, ще можете да персонализирате оформлението си. Следната страница се появява, когато щракнете върху знака плюс в горната част на екрана и след това щракнете върху Шаблони:

Използване на шаблон на Beaver Builder

Нова страница на магазин може лесно да бъде създадена с помощта на шаблона за продукти. Използвайки всички инструменти, които разгледахме до този момент, можете да правите промени в шаблона, след като бъде създаден. 

Уверете се, че оформлението на вашия магазин пасва на стиловите настройки на модула Posts, като ги променяте, докато паснат. 

В горната част на екрана щракнете върху Готово > Публикуване, след като промените бъдат запазени в модула. 

Последното нещо, което трябва да направите, е да се уверите, че каквато и да е страница, която сте посочили като своя Магазин, се появява в навигационното меню на вашия сайт. В противен случай можете да го добавите от раздела Външен вид > Менюта на таблото за управление на WordPress.

Стъпка 4: Персонализирайте страницата на магазина си допълнително с оформления на WooCommerce

Модулът WooCommerce също е отлична функция на Beaver Builder, която го прави отличен създател на страници WooCommerce. Тя ви позволява да добавяте части от функционалността на WooCommerce към всяка структура на Beaver Builder на вашия сайт. В този модул са налични следните опции:

  • Единични и множество продукти: 
  • Можете да покажете избрани продукти въз основа на идентификатори на продукти или категории или можете да покажете продукти, които са в разпродажба, скорошни продукти, продукти с най-висок рейтинг или всичко друго, което искате.
  • Количка: Показва съдържанието на пазарската количка на WooCommerce.
  • Плащане: Показва страницата за плащане, както изглежда нормално.
  • Проследяване на поръчки: Въвежда информация за поръчки в този формуляр.
  • Моят акаунт: Тази страница съдържа информацията, която обикновено се намира на страницата Моят акаунт, като информация за акаунта, минали поръчки и подробности за адреса
Оформления на WooCommerce в Beaver Builder.

Бързи връзки

Заключение

Създаването на онлайн магазин, който представя вашата марка ефективно, е предизвикателство. Процесът обаче може да бъде улеснен с помощта на Beaver Builder, плъгин за WooCommerce.

Както можете да видите, очертахме четири важни стъпки за изграждане на вашата витрина с помощта както на WooCommerce, така и на Beaver Builder:

  1. Създайте магазин, като добавите продукти.
  2. Създайте нова продуктова страница.
  3. Създайте нова страница за магазин в WooCommerce.
  4. С оформленията на WooCommerce можете допълнително да персонализирате вашия сайт за електронна търговия.

Има ли нещо, което искате да знаете за използването на Beaver Builder за създаване на страници за продукти и магазини? Моля, споделете мислите си по-долу в секцията за коментари!

Айшвар Бабър

Aishwar Babber е страстен блогър и дигитален маркетинг. Той обича да говори и блогове за най-новите технологии и джаджи, което го мотивира да бяга GizmoBase. В момента той практикува своя опит в дигиталния маркетинг, SEO и SMO ​​като маркетолог на пълен работен ден по различни проекти. Той е активен инвеститор в AffiliateBay и режисьор в ImageStation.

Оставете коментар