Divi Woo Kurv Produkter Modul: Guide og Tilpasning

I en verden hvor online shopping er blevet mere og mere udbredt, er en velfungerende og visuelt tiltalende indkøbskurv afgørende for succesfulde e-handelsvirksomheder. Divi, kombineret med WooCommerce, tilbyder kraftfulde værktøjer til at skabe netop dette. Et af de mest essentielle værktøjer er Divi Woo Kurv Produkter Modulet, som giver dig fuld kontrol over, hvordan dine kunders kurvindhold præsenteres. Dette modul integreres problemfrit med WooCommerce og er designet til at vise de produkter, dine kunder har tilføjet til deres kurv. Denne guide vil føre dig gennem alle trinene til at tilføje, konfigurere og tilpasse dette modul, så du kan optimere dine kunders shoppingoplevelse og potentielt øge konverteringerne på din hjemmeside. Uanset om du er nybegynder eller en erfaren Divi-bruger, vil du finde værdifuld information her.

Sådan Tilføjer du Divi Woo Kurv Produkter Modulet til Din Sideskabelon

Før vi kan dykke ned i brugen af Divi Woo Kurv Produkter modulet, er det vigtigt, at du har både Divi-temaet og WooCommerce-plugin'et installeret og aktiveret på din hjemmeside. Hvis du mangler at installere dem, findes der mange ressourcer til at guide dig gennem processen. Når disse fundamentale elementer er på plads, er du klar til at udnytte Divis avancerede funktioner. For denne demonstration vil vi fokusere på at tilføje modulet til kurv siden via Divi Theme Builder, som er et utroligt kraftfuldt værktøj til at opbygge og designe skræddersyede e-handelssideskabeloner.

Naviger til Divi Theme Builder

Start med at logge ind på dit WordPress-dashboard. I venstre sidebjælke skal du finde og klikke på "Divi" og derefter "Theme Builder". Dette fører dig til Theme Builder-dashboardet, hvor alle dine tilpassede skabeloner for hjemmesiden er samlet.

Tilføj Ny Skabelon

For at oprette en ny skabelon til kurv siden skal du klikke på "Tilføj Ny Skabelon". Rul ned til afsnittet "WooCommerce Pages" og vælg "Kurv", og klik derefter på "Opret Skabelon" nederst. Dette vil oprette en tom sideskabelon, hvor din globale header og footer automatisk er anvendt.

Når du har valgt "Opret Skabelon", får du flere muligheder for, hvordan du vil bygge din skabelon:

• Mulighed 1: Byg Ny Skabelon (Build New Template)
  Dette er den mulighed, vi vil bruge i vores demonstration. Klik på "Byg Ny Skabelon" for at starte designprocessen fra bunden.
• Mulighed 2: Tilføj Fra Bibliotek (Add From Library)
  Hvis du foretrækker at importere et færdigt layout fra Divi-biblioteket, kan du vælge denne mulighed.
• Mulighed 3: Import via Portabilitet (Import via Portability)
  Du kan også importere et præ-designet layout som en JSON-fil ved hjælp af Divis portabilitetsfunktion.

Indlæs Divi Woo Kurv Produkter Modulet

Når du er inde i den tomme sideskabelon, skal du klikke på det grå "+" ikon for at åbne modulbiblioteket. Rul ned til "Woo Moduler" og klik derefter på "Woo Kurv Produkter" for at indlæse modulet. Du kan også bruge søgefeltet øverst i modulbiblioteket til hurtigt at finde modulet.

Alle Divi Woo Kurv Produkter Modul Indstillinger Forklaret

Så snart modulet er tilføjet, vil modulindstillingerne automatisk poppe op. Dette er hjertet af din tilpasning, hvor alle indholds- og designstile for dette modul konfigureres. Disse indstillinger er organiseret i tre hovedgrupper via fanerne øverst i modulet: Indhold, Design og Avanceret.

Indholdsindstillinger (Content Settings)

Denne fane giver dig kontrol over de grundlæggende elementer og indholdet i dit kurvmodul.

Elementer

Her vælger du, hvilke produktoplysninger der skal vises i kurven:

• Vis Produktbillede (Show Product Image): Skift denne indstilling til "ja" eller "nej" for at vise eller skjule produktbilledet.
• Vis Kuponkode (Show Coupon Code): Styr synligheden af kuponkodefeltet.
• Vis Opdater Kurv Knap (Show Update Cart Button): Aktiver eller deaktiver knappen til at opdatere kurven.
• Vis Fjern Element Ikon (Show Remove Item Icon): Vælg om et ikon for at fjerne et produkt skal vises.

Baggrund (Background)

Dette afsnit giver dig mulighed for at tilføje visuelle baggrundseffekter til hele modulet. Du kan vælge mellem forskellige baggrundstyper:

• Baggrundsfarve: Vælg en solid farve fra din farvepalet.
• Baggrundsgradient: Opret en farveovergang med flere farvestop og retninger.
• Baggrundsbillede: Tilfød et billede som baggrund, med mulighed for parallakse effekt.
• Baggrundsvideo: Indsæt en video, og husk at uploade både MP4 og WebM versioner for bred kompatibilitet.
• Baggrundsmønster: Anvend et gentagende mønster med tilpasningsmuligheder for farve og transformation.
• Baggrundsmaske: Tilføj en maske med forskellige former, farver og størrelsesindstillinger.

Admin Etiket (Admin Label)

Admin etiketten er et internt navn, der kun er synligt for dig i backend. Den hjælper med at holde dine moduler organiseret og lette at identificere. Standardetiketten er modulnavnet, men du kan ændre den til noget mere beskrivende.

Designindstillinger (Design Settings)

Denne fane er der, hvor du finjusterer udseendet af dit Divi Woo Kurv Produkter Modul. Her finder du en bred vifte af stylingmuligheder, der giver dig fuld kontrol over designet.

Layout

Vælg, hvordan rækkerne i din kurv skal arrangeres: Standard, horisontal eller vertikal.

Tekst (Text)

Dette afsnit styrer den overordnede tekststyling i modulet, selvom specifikke tekstelementer kan have deres egne indstillinger. Du kan justere tekstjustering og anvende tekstskygge.

Tabel Overskrift (Table Header)

Tilpas udseendet af tabeloverskrifterne. Du kan ændre skrifttype, skriftvægt, stil (kursiv, store bogstaver osv.), tekstjustering, farve, størrelse, bogstavafstand og linjehøjde. Du kan også tilføje en tekstskygge til overskrifterne.

Brødtekst (Body Text)

Her styler du brødteksten i modulet, inklusive links, lister og blokcitater. Indstillingerne er de samme som for tabeloverskriften: skrifttype, vægt, stil, justering, farve, størrelse, bogstavafstand, linjehøjde og tekstskygge.

Tabel (Table)

Dette afsnit fokuserer på styling af selve tabelbeholderen. Du kan fjerne ekstra styling (gutters og borders), justere vertikale og horisontale gutters (mellemrum mellem rækker og kolonner), indstille baggrundsfarve, marginer, afrundede hjørner og tilføje kantlinjer med forskellige bredder, farver og stilarter. En boksskygge kan også tilføjes til tabellen.

Tabel Række (Table Row)

Her kan du style baggrundsfarven og boksskyggen for de enkelte tabelrækker.

Tabel Celle (Table Cell)

Dette giver dig kontrol over styling af de individuelle tabelceller. Du kan indstille baggrundsfarve, padding (indvendig afstand), afrundede hjørner, kantlinjer (bredde, farve, stil) og boksskygge.

Fjern Ikon (Remove Icon)

Tilpas udseendet af ikonet, der bruges til at fjerne produkter fra kurven. Juster baggrundsfarve, tekstfarve og tekststørrelse.

Billede (Image)

Dette afsnit giver dig mulighed for at style produktbillederne i kurven. Du kan afrunde hjørner, tilføje kantlinjer med forskellige stilarter, anvende en boksskygge med detaljerede positionerings- og sløringsindstillinger, samt justere billedfiltre som nuance, mætning, lysstyrke, kontrast, inversion, sepia, opacitet og sløring. Du kan også vælge en blandingsmodus.

Felter (Fields)

Her styler du udseendet af inputfelterne, såsom kuponkodefeltet eller mængdefeltet. Indstillinger inkluderer pladsholderfarve, feltbaggrundsfarve, tekstfarve, baggrundsfarve og tekstfarve for felter i fokus (når brugeren interagerer med dem). Du kan også justere marginer, padding, skrifttype, skriftvægt, stil, tekstjustering, størrelse, bogstavafstand, linjehøjde, tekstskygge, afrundede hjørner, kantlinjer (inklusive fokus-kantlinjer) og boksskygge.

Knap (Button)

Design stilen på knapperne i modulet, såsom "Opdater Kurv" knappen. Du kan aktivere brugerdefinerede stilarter og justere tekststørrelse, tekstfarve, baggrund (farve, gradient, billede), kantbredde, kantfarve, kantradius (afrundede hjørner), bogstavafstand, skrifttype, skriftvægt, stil, ikon (synlighed, farve, placering, visning ved hover), justering, tekstskygge, margin, padding og boksskygge.

Deaktiveret Knap (Disabled Button)

Dette afsnit giver dig mulighed for at style knapper, der er deaktiverede. Indstillingerne er identiske med dem for almindelige knapper, så du kan sikre en ensartet, men tydeligt deaktiveret, visuel fremtoning.

Størrelse (Sizing)

Definer modullets bredde og højde, herunder maks-bredde, maks-højde og min-højde. Du kan også justere moduljusteringen (venstre, center, højre).

Afstand (Spacing)

Tilføj marginer (afstand uden for modulet) og padding (afstand inden i modulet) for at kontrollere modullets placering og indre afstand.

Ramme (Border)

Tilføj en ramme til selve modulet. Du kan vælge at tilføje en ramme på alle sider eller kun på specifikke sider, justere bredden, farven og stilen (solid, stiplet osv.). Afrundede hjørner kan også indstilles.

Boksskygge (Box Shadow)

I dette modul påvirker en anvendt boksskygge de individuelle produktkort, ikke hele modulbeholderen. Du kan tilpasse positionen, sløringsstyrken og spredningsstyrken af skyggen, vælge en farve og definere, om skyggen skal være en indre eller ydre skygge.

Filtre (Filters)

Juster visuelle filtre som nuance, mætning, lysstyrke, kontrast, farvetoner (inverterede farver, sepia), opacitet og sløring for hele modulet. Du kan også vælge en blandingsmodus for, hvordan modulet blander sig med underliggende lag.

Transformering (Transform)

Skaler, oversæt (flyt), roter, skæv og indstil oprindelsespunkter for modulet. Disse indstillinger giver dig avanceret kontrol over modullets visuelle placering og orientering.

Animation (Animation)

Tilfød animationseffekter til modulet. Du kan vælge animationstype og justere varighed, forsinkelse, opacitet og hastighed samt om animationen skal gentages kontinuerligt.

Avancerede Indstillinger (Advanced Settings)

Denne fane indeholder avancerede tilpasningsmuligheder, der er nyttige for mere erfarne brugere eller specifikke designbehov.

CSS ID & Klasser (CSS ID & Classes)

Tildel en specifik CSS ID eller klasse til modulet. Dette er yderst nyttigt, hvis du ønsker at anvende brugerdefineret CSS via dit child-temas stylesheet for mere specifik styling.

Brugerdefineret CSS (Custom CSS)

Du kan indsætte brugerdefineret CSS direkte i denne fane. Der er individuelle sektioner, hvor du kan tilføje CSS til specifikke elementer inden i modulet, hvilket giver dig yderligere kontrol over designet.

Betingelser (Conditions)

Denne fane giver dig mulighed for at styre, hvornår modulet skal vises baseret på en række betingelser. Det kan være baseret på brugerens besøgstid, tidligere køb, browser, operativsystem og meget mere. Du kan tilføje en enkelt betingelse eller flere for at skabe komplekse visningsregler.

Synlighed (Visibility)

Definer modullets synlighed på forskellige enheder (telefon, tablet, desktop) ved at markere de tilsvarende afkrydsningsfelter. Du kan også styre, hvordan overløbende indhold skal vises (synligt, scroll, skjult, auto) for både horisontal og vertikal indhold.

Overgange (Transitions)

Kontroller overgangsvarigheden af hover-animationer, forsinkelsen og hastighedskurven, hvilket giver glattere interaktioner.

Position (Position)

Definer modullets position (standard, relativ, absolut, fast) samt offset-oprindelse, vertikale og horisontale offsets og z-indeks. Z-indeks er især nyttigt til at styre elementers stakrækkefølge, hvor et højere z-indeks overlapper elementer med et lavere z-indeks.

Rulleeffekter (Scroll Effects)

Dette afsnit definerer, hvordan modulet opfører sig ved rulning. Du kan gøre modulet sticky (klæbende til top, bund eller top og bund) og vælge, om modulet skal transformeres ved rulning. Du kan også aktivere vertikal bevægelse, som giver dig mulighed for at justere hastigheden, hvormed dette element ruller, uden at påvirke omkringliggende elementer. Bevægelsesudløseren lader dig vælge, hvornår rulleeffekten udløses: når elementets top, midte eller bund er i syne.

Gem Dit Design

Når du er færdig med at style og konfigurere modulet, er det afgørende at gemme dit arbejde.

• Gem Moduldesign: Klik på det grønne flueben nederst til højre i modulet for at gemme dine specifikke modulindstillinger. Hvis du lukker modulet uden at gemme, vil dit arbejde gå tabt.
• Gem Sidedesign: For at gemme hele sidedesignet kan du bruge tastaturgenvejen CMD + S (Mac) eller CTRL + S (PC). Du kan også udvide den nederste Divi-værktøjslinje ved at klikke på det lilla cirkelikon med de tre prikker "..." og derefter klikke på den grønne "Gem" knap nederst til højre.
• Afslut Visual Builder: Når alle dine ændringer er gemt, klik på det hvide X øverst til højre for at afslutte Visual Builder og vende tilbage til Theme Builder.
• Gem Theme Builder Indstillinger: Til sidst skal du klikke på den grønne "Gem ændringer" knap øverst på siden for at gemme dine Theme Builder indstillinger.

Ofte Stillede Spørgsmål

Hvordan Tilføjer Jeg 'Læg i Kurv' Ikonet i Divi?

Som standard vises 'Læg i kurv' ikonet ikke altid på mobilmenuen i Divi. Hvis du ønsker at tilføje ikonet, kan du indsætte et lille kodestykke i Divi Theme Options Custom CSS-området. Gå til dit WordPress Dashboard > Divi > Tema Indstillinger > Brugerdefineret CSS, og tilføj følgende CSS:

/* Add to Cart Icon to Mobile Menu */ .et_mobile_nav_menu .menu-item-has-children > a:after { content: "\e017"; /* This is a placeholder icon, you might need to find the correct Divi icon code for cart */ font-family: 'ETmodules'; font-size: 16px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } .et_mobile_nav_menu #menu-item-woocommerce-cart { /* Adjust this selector if your cart menu item has a different ID */ display: list-item !important; /* Ensures the cart item is visible */ } 

Bemærk: Det specifikke ikonkode (\e017) kan variere, og du skal muligvis justere CSS-selektoren (#menu-item-woocommerce-cart) afhængigt af din menuopsætning. Formålet med dette er at gøre kurvikonet synligt og give det en placering i mobilmenuen.

Hvorfor Bliver Jeg Sendt til Forsiden Efter at Have Lagt en Vare i Kurven?

Nogle brugere oplever, at de automatisk bliver sendt tilbage til forsiden, når de har tilføjet en vare til kurven, i stedet for at blive på butikssiden. Dette er en indstilling, der typisk styres direkte af WooCommerce og ikke af Divi Woo Kurv Produkter modulet. Selvom denne guide fokuserer på modulkonfiguration, er det en almindelig adfærd, der kan justeres i WooCommerces generelle indstillinger for at optimere brugerflowet.

Ved at mestre Divi Woo Kurv Produkter Modulet kan du skabe en strømlinet og engagerende indkøbskurvoplevelse, der bidrager positivt til din webshops succes. Med de mange tilpasningsmuligheder er det kun fantasien, der sætter grænser for, hvordan din kurv kan se ud og fungere.

Hvis du vil læse andre artikler, der ligner Divi Woo Kurv Produkter Modul: Guide og Tilpasning, kan du besøge kategorien Teknologi.