Byg og design en fantastisk WooCommerce-produktside med Elementor

Du skal ændre din produktside for at adskille din e-handelsbutik fra konkurrenterne og give dine kunder en unik oplevelse. Desuden er muligheden for æstetisk at personalisere din produktside afgørende for at opretholde et ensartet visuelt design i hele din onlinebutik.

Elementor er en af ​​de førende WordPress hjemmesidebyggere på markedet, men vidste du også, at du kunne bygge WooCommerce butikker ved hjælp af det?

Mange indbyggede Elementor WooCommerce-moduler giver dig mulighed for at indsætte WooCommerce-indhold eller funktionalitetsblokke eller style dem ved hjælp af Elementor-builderen. Ret flot, ikke?

Styling og tilpasning af WooCommerce krævede tidligere PHP og CSS for hver lille ændring, men efterhånden som værktøjer som Elementor forbedres og bliver mere komplekse, bliver flere og flere muligheder tilgængelige for at tage kontrol over, hvordan din butik ser ud og fungerer.

Lad os komme i gang.

• Oprettelse af en Elementor-skabelon
• Building Elementor produktbillede eller galleri
• WooCommerce produkttitel, pris og tilføj til kurv
• Opsætning af Elementor-produktfaner
• Elementor produkt kort beskrivelse
• Mersalg af Elementor og WooCommerce-produkter
• Konklusion – Elementor produktsidebygger

Oprettelse af en Elementor-skabelon

Det første trin i proceduren er at bygge en ny Elementor-skabelon ved at navigere til skabeloner i WordPress-dashboardet. Klik på 'Byg nyt' og vælg derefter Enkelt produkt som den skabelon, du ønsker at oprette.

Når vi udvikler denne skabelon fra bunden, er der ingen grund til at sætte nogen blokke; afslutte den næste boks, indtil du når den sædvanlige Elementor builder-skærm for en ny side.

Building Elementor produktbillede eller galleri

Hvert WooCommerce-produkt har et produktbillede eller et billedgalleri, der viser produktets fotografier til kunderne. Elementor har et indbygget produktbilleder-modul, der giver os mulighed for at indsætte dette i vores skabelon.

Opret en simpel række med 2 kolonner, og indtast modulet Produktbilleder i venstre kolonne; dette ser praktisk ud og udfører jobbet, men lad os tilpasse salgsmærket, så det matcher Elementor Hello-temaet, der bruges til denne artikel. For at gøre dette skal vi anvende en lille linje tilpasset CSS, som kan introduceres ved at gå til Avanceret > Brugerdefineret CSS og indsætte nedenstående kode.

selector .onsale { \sbackground-color: #cc3366 ; \s}

WooCommerce- produkttitel, pris og tilføj til kurv

Vi tilføjer Elementor-modulerne for produkttitel, produktpris og læg i kurv i højre kolonne.

Søg efter disse tre moduler i Elementor-konstruktøren, og træk og slip dem derefter for at arrangere dem i rækkefølgen angivet ovenfor; dette er fuldt funktionelt, men vi ønsker at tilpasse det til at matche stylingen som ovenstående afsnit Hello Elementor-tema. Styling af moduler med Elementor er nemt, alt hvad du skal gøre er at klikke på modulet, og editoren skal åbne stylingmulighederne til venstre.

Indholdet af disse moduler er fremragende. Derfor kommer vi til at arbejde under fanen Stil. Lad os først opdatere skrifttypen og farven på produkttitlen, så den matcher dem, der bruges i Hello Elementor-temaet.

Vi skal derefter gøre det samme for modulerne Produktpris og Læg i kurv ved at klikke på hvert modul og ændre tekstfarven. Til produktprisen vil jeg bruge en mørkegrå som kontrast mod overskriften, så skriv denne hex-kode, hvis du følger med – #54595f

Dernæst vil vi opdatere et par ting på Add To Cart-modulet. Knappens baggrundsfarve og knappens kantradius ved hjælp af nedenstående indstillinger:

• Indstil indholdet til 'Læg i indkøbskurv'.
• Indstil baggrundsfarven til '#cc3366'
• Indstil kantradius til 0

Jeg ændrede grænseradius for mængdevælgeren til 0, hvilket du kan gøre på fanen Stil for Antal.

Opsætning af Elementor-produktfaner

Hvert produkt skal vise nogle grundlæggende oplysninger som en produktbeskrivelse og anmeldelser, hvis de er tilgængelige; dette håndteres normalt via produktfaner.

Opret en ny række under den øverste sektion, og træk modulet Produktdatafaner fra Elementor-builderen ind i rækken for at indsætte det. Der kræves ikke meget styling her, fordi det arver nogle stilarter fra Hello Elementor-temaet. Lad os dog ændre stilen på knappen for indsendelse af anmeldelse.

For at gøre dette får vi brug for en lille smule tilpasset CSS igen. Begynd at redigere produktdatafanerne, klik derefter på fanen Avanceret og rul ned til Custom CSS. Indtast nedenstående CSS, og du kan justere farverne efter dit design.

.woocommerce #review form #reply .form-submit input { background-color: #cc3366; farve: #fff; border-radius: 0px; }

Elementor produkt kort beskrivelse

Ok, så vi har et anstændigt, enkelt udseende design indtil videre, men det ser lidt sparsomt ud. Tilføjelse af et kort produktbeskrivelsesmodul til den øverste del kan hjælpe med at uddybe dette og tilføje mere kontekst.

Søg venligst efter WooCommerce Short Description-modulet, og træk og slip det derefter under produktprisen og over Add To Cart-modulet.

Der kræves ingen styling her endnu, da det har arvet stilene fra Hello Elementor.

Mersalg af Elementor- og WooCommerce-produkter

Forøgelse af din gennemsnitlige kurvværdi er afgørende for alle WooCommerce-websteder, og derfor er det rart, at Elementor inkluderer et produktopsalgsmodul, så du nemt kan integrere tilpasning i din butik.

Søg venligst efter produktet Mersalg-modulet i Elementor-builderen og indsæt det i en ny række bag produktdatafanerne.

Som du kan se, kræver dette en lille smule tilpasning for at komplementere resten af ​​vores stil. Begynd at ændre modulet og foretag følgende ændringer:

• Indstil titelfarven til – #cc3366
• Indstil overskriftsfarven til – #cc3366
• Indstil prisfarven til – #54595f
• Indstil knappens baggrundsfarve til – #cc3366
• Indstil knapfarven til – #fff
• Indstil knappens kantradius t0 – 0

Det færdige produkt vil se ud som ovenstående. Du kan justere farvens hex-kode, som det passer dig, hvis du bruger denne guide som et udgangspunkt for din skabelon.

Når du er færdig, udgiver du din skabelon. I det næste vindue vil du se spørgsmålet "Hvor vil du vise din skabelon?". Klik på "Tilføj betingelse" for at bestemme, hvornår denne skabelon skal bruges. Du kan vælge "Alle produkter" for at bruge skabelonen på alle dine produktsider. Du kan også vælge kun at bruge denne skabelon til produkter, der falder ind under en bestemt kategori eller har et bestemt tag tilknyttet.

Konklusion – Elementor p roduct sidebygger

Nogle brugere kan have svært ved at få deres tilpassede designindstillinger, såsom skriftfarve og typografi, vist, når de bruger Elementor. Udseendet på din WooCommerce-butik kan blive påvirket, hvis du bruger et WordPress-tema, der kan styre udseendet af din butik. Hvis du støder på dette problem, skal du huske på, at din artikel i nogle tilfælde kan tilsidesætte dine tilpassede sideindstillinger.

Du kan også vælge en tom side og oprette en fra bunden ved hjælp af produktwidgets for et helt tilpasset udseende. Brug en tom side, luk skabelonbibliotekets pop op-vindue, når det vises, og begynd at bygge videre på den nyoprettede side. Den tilpassede "Tilføj til kurv"-knap, "Produktpris", "Produktbillede" og "Produkttitel og beskrivelse" er blot nogle få af de WooCommerce-widgets, du kan bruge til at tilpasse din produktside. Du kan se alle de forskellige widgets, der er tilgængelige i øjeblikket, ved at besøge denne side. Hvis du foretrækker det, kan du arrangere widgets, hvor du vil, på sidelayoutet og tilpasse deres stilarter, så de matcher dit ønskede udseende.

Du skal ændre din produktside for at adskille din e-handelsbutik fra konkurrenterne og give dine kunder en unik oplevelse. Desuden er muligheden for æstetisk at personalisere din produktside afgørende for at opretholde et ensartet visuelt design i hele din onlinebutik. Elementor er et fantastisk værktøj til at tilpasse siderne i din WooCommerce-butik, og det kan varmt anbefales. Ud over at være enkel at bruge, inkluderer sidebyggeren alle de nødvendige widgets og stylingmuligheder for at hjælpe dig med at oprette tilpassede produktsider. Vi håber, at du fandt denne tutorial informativ og gav dig de oplysninger, du havde brug for for at tilpasse dine WooCommerce-produkter og produktarkivsider ved hjælp af Elementor. Har du tidligere brugt Elementor til at oprette WooCommerce-sider? Du er velkommen til at dele dine tanker i kommentarfeltet. Vi tager gerne et kig.