wordpresselementortutorialwoocommerce

Как да използвате приставката Simplio3D WordPress в Elementor

Simplio3D·24 септември 2026 г.

Плъгинът Simplio3D WordPress няма отделни уиджети за Elementor и не се нуждае от тях. Всеки блок Simplio3D е също shortcode и го добавяте чрез собствения уиджет Shortcode на Elementor — по един уиджет за всеки блок. Shortcode извежда точно същото като блока, така че продуктов конфигуратор в Elementor работи точно като конфигуратор, създаден в редактора на блокове WordPress: една активна конфигурация, споделена от всички уиджети, 3D лентата с инструменти, размерите, AR, актуалната цена, обобщението, заявките за оферта и количката WooCommerce.

Това ръководство разглежда краткия път: намерете своите ID, създайте оформлението, добавете в количката и поправете обичайните грешки. То е написано за версия 2.0.3 на плъгина и работи с безплатната версия на Elementor.

Публикуван конфигуратор за гардероби: 3D изгледът показва етикети за ширина, височина и дълбочина, а до него се избират стилът на вратите, броят врати, размерът и материалът — Всеки уиджет споделя една конфигурация в реално време: променете размер, стил на вратите или материал и 3D изгледът се актуализира веднага.

Преди да започнете

Плъгинът Simplio3D, версия 2.0.3 или по-нова, от директорията с плъгини на WordPress.org, работещ в режим Simplio3D v3. Новите инсталации започват в този режим. Сайт, актуализиран от версия 1.x, остава в режим Legacy, докато не превключите от Simplio3D → Migration.
Свързан акаунт в Simplio3D: в WordPress отидете на Simplio3D → Log in to Simplio3D.
Публикуван проект: в Simplio3D отворете Share, включете връзката за споделяне и я оставете без парола. Ако ограничавате домейните за вграждане, добавете домейна на сайта си.
Elementor. Безплатната версия е достатъчна.
За Add to Cart: WooCommerce и прост продукт с цена.

Екранът Simplio3D Account & Settings в WordPress, със свързания акаунт, контролен списък за страницата Build a configurator и страницата New page: Viewer + sidebar — Simplio3D → Account & Settings: свържете своя акаунт тук. New page: Viewer + sidebar създава черновата, от която копирате кратките кодове.

Петте кратки кода

Всеки се поставя в отделен уиджет Elementor Shortcode. Заменете PROJECT-ID и OPTION-ID със собствените си идентификатори; стъпките по-долу показват къде да ги намерите.

Кратки кодове на Simplio3D за Elementor
Блок	Кратък код	Какво показва
Визуализатор	[simplio3d block="viewer" project="PROJECT-ID"]	Интерактивният 3D изглед с неговата лента с инструменти, AR и размери
Опции	[simplio3d block="options" project="PROJECT-ID" option="OPTION-ID"]	Една опция, например материал, размер или превключвател. Използвайте по един уиджет за всяка опция.
Цена	[simplio3d block="price" project="PROJECT-ID"]	Цената в реално време
Обобщение	[simplio3d block="summary" project="PROJECT-ID"]	Конфигурацията с прости думи
Изпрати / Добави в количката	[simplio3d block="action" project="PROJECT-ID"]	Формуляр за заявка на оферта или бутон „Добавяне в количката“ (вижте по-долу)

Създайте продуктов конфигуратор в Elementor

От празна страница до работещ конфигуратор.

Намерете идентификатора на проекта си
Идентификаторът на проекта е 36-символният код след /share/ във връзката ви за споделяне или след /project/ в адресната лента, когато проектът е отворен в редактора Simplio3D. Ако проектът е нов или току-що е публикуван, щракнете върху Simplio3D → Диагностика → Тествайте връзката веднъж в WordPress, за да може сайтът ви да го разпознае.
Нека редакторът на блокове създаде кратките кодове
Идентификаторите на опциите не се показват в Simplio3D, затова оставете приставката да създаде кратките кодове вместо вас. Отидете на Simplio3D → Акаунт и настройки → Нова страница: Viewer + странична лента, което създава чернова на страница с всички блокове на място. Изберете проекта си във Viewer, изберете опция във всеки блок „Опции“ и ги настройте според желанията си. След това използвайте „Копиране на кратък код“ (настройки на блока → Разширени Simplio3D) за всеки блок: той включва всяка настройка, която сте променили. Оставете черновата непубликувана като списък с идентификатори.
Добавете оформление с две колони
Отворете страницата си с „Редактиране с Elementor“ и добавете контейнер с две колони, приблизително 60% и 40%. При по-стари сайтове с Elementor използвайте секция с две колони.
Поставете 3D визуализатора
Потърсете Shortcode в панела Elements, плъзнете уиджета в лявата колона и поставете краткия код на визуализатора. След кратък момент 3D изгледът се появява на живо в предварителния преглед на редактора.
Добавете опциите, цената, обобщението и бутона
В дясната колона добавете по един уиджет Shortcode за всяка опция, след което по един за Цена, Обобщение и Изпращане или Добавяне в количката. Всички уиджети с един и същ проект споделят една конфигурация на живо, а отделните уиджети ви позволяват да пренареждате, раздалечавате и скривате всяка част чрез собствените контроли на Elementor.
Публикувайте и тествайте
Публикувайте, отворете страницата и променете всяка опция: 3D изгледът, цената и обобщението трябва да се актуализират заедно. Проверете и мобилния преглед на Elementor, както и на реален телефон; уиджетите се подреждат един под друг, а визуализаторът преминава към мобилната си височина.

Блоковият редактор WordPress с блоковете Viewer и Options на Simplio3D за конфигуратор на гардероб и настройките на блока Options за избор на опцията и нейното оформление — Стъпка 2: настройте всеки блок в редактора на блокове, след което копирайте неговия shortcode.

Редакторът Elementor с уиджети за shortcode Simplio3D: 3D конфигураторът за гардероб и неговите опции се виждат на живо в предварителния преглед на страницата — Стъпки 3 до 5: поставете всеки shortcode в отделен уиджет Elementor Shortcode.

Добавяне в количката с WooCommerce

В редактора на блокове изборът на продукт в блока Add to Cart го свързва с вашия проект. Shortcode не може да направи това, затова първо свържете продукта ръчно:

В Products редактирайте прост продукт с редовна цена.
Отворете Product data → Simplio3D, задайте Simplio3D project на вашия проект и Cart price на Simplio3D calculated price (verified server-side) или на собствената цена WooCommerce на продукта. Щракнете върху Update.
Запишете ID на продукта: задръжте курсора върху продукта в списъка Products или вижте post=123 в адресната лента на екрана за редактиране.
Заменете уиджета Submit с [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]. Добавете quantity_mode="selector", за да позволите на клиентите да избират количество, и after_add="cart", за да ги пренасочите към количката.

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

Продукт, свързан с цената Simplio3D, може да бъде купен само чрез конфигуратора, затова стандартният бутон Add to cart на WooCommerce на продуктовата му страница подканва клиентите първо да го конфигурират. С безплатния Elementor запазете конфигуратора на отделна страница и поставете връзка към нея от продукта — например връзка „Конфигурирайте своя“ в краткото описание. С Elementor Pro можете да създадете шаблон Single Product, който използва уиджетите Shortcode на Simplio3D вместо уиджета Add to Cart на Elementor; прегледайте тази настройка, преди да я публикувате.

Настройки, които ще използвате най-често

Добавяйте настройки в shortcode, с прави кавички и долни черти. Копирането от Word, Google Docs или Slack може да превърне кавичките в типографски и тогава WordPress игнорира настройката.

height="620px" mobile_height="400px" във Viewer задава височината му на настолни устройства и на екрани с ширина до 781 px.
loading="eager" във Viewer в горната част на страницата го зарежда веднага, вместо когато бъде превъртян до видимата част.
layout="dropdown" в уиджет Options превключва избора към падащо меню. grid, list и buttons също работят според типа опция.
columns="4" thumbnails="small" побира повече възможности на всеки ред.
prefix="From" tax_display="exclude" при Price добавя текст преди цената и я показва без данък, което съответства на количката WooCommerce.
summary_mode="compact" hide_defaults="yes" при Summary поставя всяка опция на отделен ред и пропуска тези, които са оставени със стойността си по подразбиране.
display="hosted" при Viewer показва пълния конфигуратор Simplio3D, включително опциите, в един уиджет, без да са нужни ID на опциите.
instance="oak" във всеки уиджет от даден набор разделя два конфигуратора на една страница. Уиджетите с един и същ екземпляр споделят една конфигурация.

Настройките на блока Simplio3D Price в редактора на блокове, с полета за етикет, валута, префикс и суфикс, до конфигуратор на стол Eames и неговия бутон „Добавяне в количката“ — Настройките на блока Price в редактора на блокове. Всеки има атрибут за shortcode, а „Копиране на shortcode“ включва и променените от вас атрибути.

Съобразете го с дизайна си в Elementor

Разделът Advanced на всеки уиджет Shortcode управлява външните и вътрешните отстояния, фона, рамката и видимостта на различни устройства. Viewer запълва своята колона, затова задайте ширината на колоната или контейнера, за да го направите по-широк или по-тесен.
Блоковете наследяват шрифта и цвета на текста от страницата. Акцентният цвят (избраната опция, контурът при фокус и бутоните) по подразбиране е почти черен в класически теми като Hello Elementor, затова го задайте като акцентния цвят на Elementor чрез Appearance → Customize → Additional CSS: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
Други свойства включват --s3d-radius за ъглите, --s3d-thumb за размера на миниатюрите и --s3d-button-bg за бутона. За да стилизирате само един уиджет, добавете class="my-finish" към неговия shortcode и насочете .my-finish във вашия CSS.

Отстраняване на проблеми

Плъгинът не е активен или името на shortcode е грешно. Използвайте [simplio3d …], а не [simplio3d_configurator …], което е Legacy shortcode.

Сайтът все още е в режим Legacy (превключете от Simplio3D → Migration) или името на блока е изписано неправилно. То трябва да бъде viewer, options, price, summary или action.

Само редакторите виждат тези подсказки. „Select a project for this block“ означава, че идентификаторът на проекта липсва или е непълен: проверете за типографски кавички, частичен идентификатор или останал PROJECT-ID. „Choose which option this block shows“ означава, че джаджата Options няма идентификатор на опция.

Проектът не е публикуван (Share → връзката за споделяне е включена, без парола) или WordPress все още не го разпознава. Щракнете върху Simplio3D → Diagnostics → Test connection, след което презаредете страницата.

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

Продуктът не е свързан в раздела си Simplio3D, не е прост продукт, няма цена или ID на продукта е неправилно. Simplio3D → Диагностика показва кой е проблемът.

Добавете tax_display="exclude" към уиджета „Цена“. Цената преди данъка съвпада с тази в количката WooCommerce.

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

Той продължава да работи в уиджета Shortcode на Elementor, докато сайтът е в режим Legacy, а Simplio3D → Миграция открива тези shortcode-и и в страниците на Elementor. След като преминете към v3, заменете всеки от тях с описаните по-горе уиджети.

Продавате чрез WooCommerce?

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

Конфигуратор за WooCommerce →

Първо изграждане на конфигуратора?

Как един проект преминава от 3D модел към опции, условна логика и ценообразуване, преди да достигне до вашия сайт.

Как се изгражда конфигуратор →

От блога

Ръководства, уроци и новини от екипа на Simplio3D.

27.05.2026 г.
Simplio3D Признат от G2 като висок изпълнител и най-лесен за администриране
С гордост обявяваме, че Simplio3D е признат от G2, водещата платформа за преглед на софтуер, като е спечелил както значката High Performer, така и значката Easiest Admin в G2 Grid.
12.11.2026 г.
Приложението Simplio3D Shopify вече е в Shopify App Store
Simplio3D вече е в Shopify App Store. Инсталирайте приложението, добавете 3D конфигуратор към темата си чрез блокове и позволете на количката да начислява цената, изчислена от вашия конфигуратор.
26.08.2025 г.
Подготовка на 3D модели за Simplio3D: Практическо ръководство
Структура, UV картографиране, оптимизация и pivot точки — четирите неща, които определят дали 3D моделът ще стане работещ конфигуратор или упражнение по отстраняване на проблеми.
10.08.2026 г.
Топ 10 Най-добри софтуерни решения за конфигуриране на продукти през 2026 г. (Сравнение на предимства и недостатъци)
Практическо сравнение на десет платформи за конфигуриране на продукти — за какво е изградена всяка, как се различават по визуализация, логика на ценообразуване и интеграция, и как да съставите списък без да губите време.
2.11.2026 г.
Алтернативи на Zakeke през 2026 г.: сравнение на 7 продуктови конфигуратора
Търсите алтернатива на Zakeke? Вижте какво предлага Zakeke днес, кога си заслужава да останете и сравнение на седем алтернативи по отношение на 3D, правила, магазини и публикувани цени.

Всички публикации

Изграждайте, разгръщайте и мащабирайте 3D търговия.

Притежавайте собствен 3D конфигуратор на продукти, за да увеличите продажбите и генерирайте предложения директно от вашия уебсайт

Опитайте безплатно Запазете демонстрация

Свързани статии

Плъгинът Simplio3D за ChatGPT: урок стъпка по стъпка

Как да използвате приставката Simplio3D WordPress в Elementor

Преди да започнете

Петте кратки кода

Създайте продуктов конфигуратор в Elementor

Намерете идентификатора на проекта си

Нека редакторът на блокове създаде кратките кодове

Добавете оформление с две колони

Поставете 3D визуализатора

Добавете опциите, цената, обобщението и бутона

Публикувайте и тествайте