Hopp til innhold
Simplio logoSIMPLIO
Prøv gratis
Tilbake til bloggen
wordpresselementortutorialwoocommerce

Slik bruker du Simplio3D WordPress-pluginen i Elementor

Simplio3D·
Slik bruker du Simplio3D WordPress-pluginen i Elementor

Programtillegget Simplio3D WordPress har ingen egne Elementor-widgeter, og trenger dem heller ikke. Hver Simplio3D-blokk er også en shortcode, og du plasserer den med Elementors egen Shortcode-widget, én widget per blokk. Shortcoden viser nøyaktig det samme som blokken, så en produktkonfigurator i Elementor fungerer akkurat som en som er bygget i WordPress-blokkeredigeringen: én live-konfigurasjon som deles av alle widgeter, 3D-verktøylinjen, dimensjoner, AR, live-prisen, sammendraget, pristilbudsforespørsler og WooCommerce-handlekurven.

Denne veiledningen dekker den raskeste veien: finn ID-ene dine, bygg oppsettet, legg i handlekurven og rett vanlige feil. Den er skrevet for programtilleggsversjon 2.0.3 og fungerer med gratisversjonen av Elementor.

En publisert garderobekonfigurator: 3D-visningen viser etiketter for bredde, høyde og dybde, mens dørstil, antall dører, størrelse og materiale velges ved siden av
Alle widgetene deler én aktiv konfigurasjon: Endre en størrelse, en dørstil eller et materiale, så oppdateres 3D-visningen umiddelbart.

Før du starter

  • Programtillegget Simplio3D, versjon 2.0.3 eller nyere, fra programtilleggsoversikten på WordPress.org, som kjører i Simplio3D v3-modus. Nye installasjoner starter i denne modusen. Et nettsted som er oppdatert fra versjon 1.x, forblir i Legacy-modus til du bytter under Simplio3D → Migrering.
  • Simplio3D-kontoen din er tilkoblet: Gå til Simplio3D → Logg inn på Simplio3D i WordPress.
  • Et publisert prosjekt: Åpne Del i Simplio3D, slå på delingslenken og la den være uten passord. Hvis du begrenser innebyggingsdomener, legger du til nettstedets domene.
  • Elementor. Gratisversjonen er tilstrekkelig.
  • For Legg i handlekurv: WooCommerce og et enkelt produkt med en pris.
Skjermbildet Simplio3D Konto og innstillinger i WordPress, med den tilkoblede kontoen, en sjekkliste for siden Bygg en konfigurator og knappen Ny side: Viewer + sidebar
Simplio3D → Konto og innstillinger: Koble til kontoen din her. Ny side: Viewer + sidebar oppretter utkastet du kopierer kortkodene fra.

De fem kortkodene

Hver av dem plasseres i sin egen Elementor-kortkodewidget. Erstatt PROJECT-ID og OPTION-ID med dine egne ID-er; trinnene nedenfor viser hvor du finner dem.

Simplio3D-kortkoder for Elementor
BlokkKortkodeHva den viser
Visningsprogram[simplio3d block="viewer" project="PROJECT-ID"]Den interaktive 3D-visningen, med verktøylinjen, AR og dimensjoner
Alternativer[simplio3d block="options" project="PROJECT-ID" option="OPTION-ID"]Ett alternativ, for eksempel et materiale, en størrelse eller en bryter. Bruk én widget per alternativ.
Pris[simplio3d block="price" project="PROJECT-ID"]Direkteprisen
Sammendrag[simplio3d block="summary" project="PROJECT-ID"]Konfigurasjonen med enkle ord
Send inn / Legg i handlekurv[simplio3d block="action" project="PROJECT-ID"]Et skjema for pristilbud eller en Legg i handlekurv-knapp (se nedenfor)

Bygg en produktkonfigurator i Elementor

Fra en tom side til en fungerende konfigurator.

  1. Finn prosjekt-ID-en din

    Prosjekt-ID-en er den 36 tegn lange koden som følger etter /share/ i delingslenken din, eller /project/ i adressefeltet når prosjektet er åpent i Simplio3D-editoren. Hvis prosjektet er nytt eller nettopp har blitt publisert, klikker du på Simplio3D → Diagnostics → Test connection én gang i WordPress, slik at nettstedet ditt kjenner til det.

  2. La blokkeditoren skrive kortkodene

    Alternativ-ID-er vises ikke i Simplio3D, så la programtillegget skrive kortkodene for deg. Gå til Simplio3D → Account & Settings → New page: Viewer + sidebar, som oppretter en utkastside med alle blokkene på plass. Velg prosjektet ditt i Viewer, velg et alternativ i hver Options-blokk og konfigurer dem slik du ønsker. Bruk deretter Copy shortcode (blokkinnstillinger → Simplio3D advanced) på hver blokk: den inkluderer alle innstillingene du har endret. La utkastet forbli upublisert som listen din over ID-er.

  3. Legg til et oppsett med to kolonner

    Åpne siden med «Rediger med Elementor», og legg til en beholder med to kolonner, omtrent 60 % og 40 %. På eldre Elementor-nettsteder bruker du en seksjon med to kolonner.

  4. Plasser 3D-visningen

    Søk etter Shortcode i Elements-panelet, dra widgeten inn i venstre kolonne og lim inn Viewer-shortcoden. Etter et øyeblikk vises 3D-visningen direkte i forhåndsvisningen i redigeringsprogrammet.

  5. Legg til alternativer, pris, sammendrag og knapp

    I høyre kolonne legger du til én Shortcode-widget for hvert alternativ, og deretter én hver for Price, Summary og Submit eller Add to Cart. Alle widgeter med samme prosjekt deler én aktiv konfigurasjon, og separate widgeter lar deg endre rekkefølge, avstand og skjule hver del med Elementors egne kontroller.

  6. Publiser og test

    Publiser, åpne siden og endre hvert alternativ: 3D-visningen, prisen og sammendraget skal oppdateres samtidig. Sjekk også Elementors mobilforhåndsvisning og en ekte telefon; widgetene stables, og visningen bytter til mobilhøyde.

WordPress-blokkeredigereren med Simplio3D Viewer- og Options-blokkene for en garderobekonfigurator, samt innstillingene for Options-blokken for valg av alternativ og oppsett
Trinn 2: Konfigurer hver blokk i blokkredigereren, og kopier deretter kortkoden.
Elementor-redigereren med Simplio3D-kortkodewidgeter: 3D-garderobekonfiguratoren og alternativene vises direkte i forhåndsvisningen av siden
Trinn 3 til 5: Lim inn hver kortkode i sin egen Elementor-kortkodewidget.

Legg i handlekurv med WooCommerce

I blokkeredigeringen kobler valg av et produkt i Legg i handlekurv-blokken det til prosjektet ditt. En shortcode kan ikke gjøre dette, så du må først koble produktet selv:

  1. I Produkter redigerer du et enkelt produkt med ordinær pris.
  2. Åpne Produktdata → Simplio3D, sett Simplio3D-prosjekt til prosjektet ditt og Handlekurvpris til Simplio3D beregnet pris (verifisert på serversiden), eller til produktets egen WooCommerce-pris. Klikk på Oppdater.
  3. Noter produkt-ID-en: Hold pekeren over produktet i produktlisten, eller les post=123 i adressefeltet på redigeringssiden.
  4. Erstatt Send inn-widgeten med [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]. Legg til quantity_mode="selector" for å la kundene velge antall, og after_add="cart" for å sende dem til handlekurven.

Handlekurven, kassen, ordre-e-poster og WooCommerce → Ordrer viser deretter konfigurasjonen, et bilde av den og den verifiserte prisen.

Et produkt koblet til Simplio3D-prisen kan bare kjøpes gjennom konfiguratoren, så den vanlige Legg i handlekurv-knappen til WooCommerce på produktsiden ber kundene konfigurere det først. Med gratis Elementor bør du ha konfiguratoren på en egen side og lenke til den fra produktet, for eksempel med en «Konfigurer din» -lenke i kortbeskrivelsen. Med Elementor Pro kan du bygge en mal for enkeltprodukt som bruker Simplio3D Shortcode-widgeter i stedet for Elementors Legg i handlekurv-widget; forhåndsvis dette oppsettet før du publiserer.

Innstillingene du bruker mest

Legg til innstillinger i shortcoden, med rette anførselstegn og understreker. Kopiering fra Word, Google Docs eller Slack kan gjøre anførselstegnene krøllete, og WordPress ignorerer da innstillingen.

  • height="620px" mobile_height="400px" på Viewer angir høyden på datamaskiner og på skjermer opptil 781 px brede.
  • loading="eager" på en Viewer øverst på siden laster den inn med én gang, i stedet for når den ruller inn i visning.
  • layout="dropdown" på en Options-widget endrer valgene til en rullegardinmeny. grid, list og buttons fungerer også, avhengig av alternativtypen.
  • columns="4" thumbnails="small" gir plass til flere valg på hver rad.
  • prefix="From" tax_display="exclude" på Price legger til tekst foran og viser prisen før skatt, noe som samsvarer med WooCommerce-handlekurven.
  • summary_mode="compact" hide_defaults="yes" på Summary plasserer hvert alternativ på én linje og utelater dem som står på standardverdien.
  • display="hosted" på Viewer viser hele Simplio3D-konfiguratoren, inkludert alternativer, i én enkelt widget uten behov for alternativ-ID-er.
  • instance="oak" på hver widget i et sett holder to konfiguratorer på samme side adskilt. Widgeter med samme instans deler én konfigurasjon.
Innstillingene for Simplio3D Price-blokken i blokkredigereren, med felt for etikett, valuta, prefiks og suffiks, ved siden av en konfigurator for en Eames-stol og knappen Legg i handlekurv
Innstillingene for Price-blokken i blokkredigereren. Hver blokk har et kortkodeattributt, og Kopier kortkode inkluderer også dem du endrer.

Tilpass til Elementor-designet ditt

  • Fanen Avansert i hver Shortcode-widget håndterer marg, utfylling, bakgrunn, kantlinje og responsiv synlighet. Vieweren fyller kolonnen sin, så angi kolonne- eller beholderbredden for å gjøre den bredere eller smalere.
  • Blokkene henter skrifttype og tekstfarge fra siden. Aksentfargen (det valgte alternativet, fokusringen og knappene) faller tilbake til nesten svart i klassiske temaer som Hello Elementor, så sett den til Elementor-aksentfargen din under Utseende → Tilpass → Ekstra CSS: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
  • Andre egenskaper inkluderer --s3d-radius for hjørner, --s3d-thumb for miniatyrbildestørrelse og --s3d-button-bg for knappen. For å style bare én widget legger du til class="my-finish" i shortcoden og målretter .my-finish i CSS-en din.

Feilsøking

Utvidelsen er ikke aktiv, eller kortkodenavnet er feil. Bruk [simplio3d …], ikke [simplio3d_configurator …], som er Legacy-kortkoden.

Selger du gjennom WooCommerce?

Slik overfører Simplio3D den konfigurerte prisen, konfigurasjonen og et bilde av den til handlekurven i WooCommerce.

Konfigurator for WooCommerce →

Bygger du konfiguratoren først?

Slik går et prosjekt fra en 3D-modell til valgmuligheter, betinget logikk og prissetting før det når nettstedet ditt.

Slik bygges en konfigurator →

Fra bloggen

Guider, veiledninger og nyheter fra Simplio3D-teamet.

Alle innlegg

Bygg, distribuer og skaler 3D-handel.

Eie en 3D produktkonfigurator for å øke salget og generere tilbud direkte fra nettstedet ditt.

Prøv gratisBestill en demo

Relaterte artikler

Vi verdsetter ditt personvern

Vi bruker informasjonskapsler for å drive dette nettstedet, huske dine preferanser, og — med ditt samtykke — måle trafikk slik at vi kan forbedre Simplio3D. Godta alle, avvis ikke-essensielle, eller velg hvilke informasjonskapsler du vil tillate. Informasjonskapselpolicy.