Kunne du tænke dig at lære, hvordan du opretter en personlig butiksside? WooCommerce med Elementor?
Som du måske ved, kommer Elementor Pro med builder-funktion WooCommerce så du kan oprette et websted af personlig e-handel med WooCommerce uden kodning. Denne funktion giver dig mulighed for at oprette brugerdefinerede WooCommerce-sider ved hjælp af Elementors visuelle editor, som tilbyder en intuitiv grænseflade.
Se også: Sådan installeres Elementor på WordPress
På tidspunktet for denne artikels skrivning kan du oprette brugerdefinerede sider til butiksiden, produktsiden og produktarkivsiderne (tags og kategorier). Snart vil du også være i stand til at oprette brugerdefinerede sider til kassen og siden med indkøbskurv.
I denne artikel viser vi dig, hvordan du opretter en brugerdefineret WooCommerce-butikside ved hjælp af Elementor Pro's WooCommerce builder-funktion.
Selve butiksiden er en af standardsiderne i WooCommerce. Denne side fungerer som et udstillingsvindue for at vise dine produkter. Du kan få adgang til denne side ved at gå til dinside.com/butik. Som standard viser WooCommerce-butiksiden kun WooCommerce-produkter.
Ved at oprette en brugerdefineret butiksside ved hjælp af Elementor Pro kan du tilføje elementer for at gøre din butiksfacade mere attraktiv.
Sådan oprettes en brugerdefineret side i en WooCommerce-butik med Elementor
Der er mindst to Elementor-widgets, som du kan bruge til at oprette en brugerdefineret side i en WooCommerce-butik: Arkivér produkter , Produkter.
I dette eksempel bruger vi sidstnævnte.
Funktionen af widgeten Produkter svarer meget til widgetens Indlæg. Forskellen er, at widgeten Produkter bruges til at vise WooCommerce-produkter, mens indlæg-widgeten bruges til at vise blogindlæg.
Læs også: Sådan importeres eller eksporteres modeller i Elementor
Bemærk, at du kun kan finde widgeten Produkter, når WooCommerce-pluginet er installeret og aktiveret.
For at begynde at oprette en brugerdefineret WooCommerce-butikside ved hjælp af Elementor Pro, gå til først og fremmest à Skabeloner -> Theme Builder på dit WordPress-dashboard. Klik på fanen Produkter Arkiv på Theme Builder-siden, og klik derefter på knappen ajouter a PRODUKTARKIV.
Giv din model et navn, og klik på knappen Opret EN MODEL.
Der er tre brugerdefinerede websideskabeloner, du kan vælge imellem, hvis du vil oprette den brugerdefinerede websideside fra en skabelon. Hvis du vil oprette den tilpassede butikside fra bunden, kan du bare lukke skabelonbiblioteket.
Se også: Sådan bruges farveprøven i Elementor
I dette eksempel opretter vi den tilpassede butikside fra bunden. Som nævnt ovenfor bruger vi widgeten Produkter til at vise produkterne.
Før du tilføjer widgeten Produkter til redigeringsfeltet, kan du definere layoutet ved at tilføje sektioner og kolonner. Når layoutet er klar, kan du bare trække widgeten Produkter ind i redigeringsboksen.
Som du kan se, indlæses og viser widgeten Produkter automatisk de nyeste WooCommerce-produkter. Du kan ændre forespørgslen ved at åbne blokken Forespørgsel under fanen Indhold fra indstillingspanelet. Der er fem muligheder at vælge imellem:
- Nuværende forespørgsel - Aktuel forespørgsel
- Seneste produkter - Seneste produkter
- Salg - Salg
- Fremhævet - Fremhævet
- Manuel markering - Manuel markering
Du kan også indstille rækkefølgen, hvor produkterne vises, eller udelukke bestemte
For at indstille antallet af kolonner og rækker kan du åbne blokken Indhold under fanen Indhold. Fra denne blok kan du også aktivere paginering.
Du kan lege med indstillingspanelet, indtil du får de bedste indstillinger for widgeten Produkter. Når du er færdig med widgeten Produkter, kan du tilføje flere widgets til din side.
Læs også: Sådan bruges farvevælgeren i Elementor
Når du er færdig med at redigere siden, kan du klikke på knappen PUBLISH nederst i indstillingspanelet.
Tilføj en visningsbetingelse ved at klikke på knappen tilføj en betingelse. Da du vil oprette en brugerdefineret butiksside, skal du vælge indstillingen Shop Side. Klik på knappen GEM & LUK for at gemme ændringen.
Indtil videre har du oprettet den tilpassede WooCommerce-butikside ved hjælp af Elementor Pro. Du kan gå på dit site.com/store for at kontrollere resultatet.
Tilpas produkter-widgeten
Inden du udgiver din side, kan du tilpasse widgeten Produkter for at gøre den mere attraktiv. For at gøre det skal du klikke på widgeten i redigeringsfeltet og navigere til fanen stil fra indstillingspanelet. Der er fire blokke, du kan åbne som følger:
Produkter
Du kan åbne denne blok for at definere afstanden mellem kolonner og rækker. Fra denne blok kan du også indstille typografien (skrifttypefamilie, skriftstørrelse osv.) Såvel som tekstfarven på produktelementer såsom produkttitel, produktpris, produktvurdering, produkt osv .... Du kan også indstille grænsen for produktbilledet,
- Boks
I denne sammenhæng henviser Box til beholderen til hvert produkt. Du kan åbne blokken Boks at definere kantens bredde, kantradius, boksens skygge, baggrundsfarve, kantfarve osv.
- Paginering
Hvis du aktiverer indstillingen Paginering fra blokken Indhold, du kan åbne blokken Paginering under fanen stil for at tilpasse sideinddelingen. Du kan indstille ting som afstand, kantfarve, baggrundsfarve osv.
Du kan også definere forskellige parametre for hver tilstand (normal, pegende og aktiv).
- Dirty Flash
Når du tilføjer et nyt produkt i WooCommerce, kan du indstille en salgsprisattribut for at vise dine besøgende, at det tilknyttede produkt er nedsat. For at understrege dette kan du vise salgsattributten på butiksiden, så produkter med rabat har et salgsbadge.
Du kan åbne blokken Dirty Flash for at personalisere salgsmærket. Du kan definere elementer såsom tekstfarve, baggrundsfarve, typografi, kantradius, størrelse (bredde og højde), afstand osv.….
I sidste ende
WooCommerce Builder er en af funktionerne, der tilbydes af Elementor Pro. Det giver dig mulighed for oprette et websted personlig og unik e-handelsplatform med WooCommerce og uden kodning. Det er ikke nødvendigt at installere en WordPress tema som hævder at være designet til WooCommerce. I stedet kan du selv oprette brugerdefinerede WooCommerce-sider ved hjælp af Elementors visuelle editor.
Læs også: Sådan tilføjes skillevæg for at oprette sektion i Elementor
Op til version 3.2.2 giver Elementor Pro dig kun mulighed for at oprette sider med tilpasset butik, side med brugerdefineret enkelt produkt og tilpassede produktarkiver. Men Elementor annoncerede, at du i den næste version af Elementor Pro også vil være i stand til at oprette en brugerdefineret indkøbskurvside, en brugerdefineret kasseside og en tilpasset kundekontoside.
Hent Elementor Pro nu!
Konklusion
Her ! Det er det for denne artikel, der viser dig, hvordan du opretter en brugerdefineret side til en WooCommerce-butik med Elementor. Hvis du er bekymret for, hvordan du kommer dertil flad os vide det i kommentarer.
Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
