Byg og design en fantastisk WooCommerce-produktside med Elementor

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

Elementor er en af ​​de førende WordPress-webstedsbyggere 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 funktionsblokke eller style dem ved hjælp af Elementor-builder. Temmelig godt, ikke?

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

Lad os komme igang.

• Oprettelse af en Elementor-skabelon
• Building Elementor produktbillede eller galleri
• WooCommerce produkttitel, pris og tilføj til indkøbskurv
• Opsætning af Elementor-produktfaner
• Elementor produkt kort beskrivelse
• Elementor og WooCommerce produkt upsells
• Konklusion - Elementors produktsidebygger

Oprettelse af en Elementor-skabelon

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

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

Building Elementor produktbillede eller galleri

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

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

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

WooCommerce p roduct titel, pris og tilføj til indkøbskurv

Vi tilføjer Elementor-modulerne til produkttitel, produktpris og tilføj til indkøbskurv 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 ovenstående rækkefølge; dette er fuldt funktionelt, men vi vil tilpasse det til at matche stylingen som ovenstående afsnit Hello Elementor-tema. Styling moduler med Elementor er let, alt hvad du skal gøre er at klikke på modulet, og editoren skal åbne styling mulighederne til venstre.

Indholdet af disse moduler er fremragende. Således skal vi arbejde under fanen Style. Lad os først opdatere skrifttypen og farven på produkttitlen for at matche dem, der bruges i Hello Elementor-temaet.

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

Dernæst opdaterer vi et par ting på modulet Tilføj til indkøbskurv. Baggrundsfarven på knappen og kantens radius ved hjælp af nedenstående indstillinger:

• Indstil indholdet til 'Tilføj til indkøbskurv'.
• Indstil baggrundsfarven til '# cc3366'
• Indstil kantradius til 0

Jeg ændrede grænseradius for beløbsvælgeren til 0, som du kan gøre i 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 ofte gennem produktfaner.

Opret en ny række under den øverste sektion, og træk modulet Produktdata-faner 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 til indsendelse af anmeldelse.

For at gøre dette har vi brug for en lille smule tilpasset CSS igen. Begynd at redigere produktdata-fanerne, og klik derefter på fanen Avanceret, og rul ned til Custom CSS. Indtast nedenstående CSS, og du kan justere farverne i henhold til dit design.

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

Elementor p roduct kort beskrivelse

Ok, så vi har hidtil et anstændigt, enkelt design, men det ser lidt sparsomt ud. Tilføjelse af et produkt Kort beskrivelse modul til den øverste del kan hjælpe med at padde dette ud og tilføje mere kontekst.

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

Der er ingen styling påkrævet her endnu, da den har arvet stilarterne fra Hello Elementor.

Elementor og WooCommerce p RODUKTINFORMATION eftersalg

At øge din gennemsnitlige kurvværdi er afgørende for hvert WooCommerce-websted, hvorfor det er rart, at Elementor inkluderer et Product Upsells-modul, så du nemt kan integrere tilpasning i din butik.

Søg efter produktet Upsells-modulet i Elementor-builderen, og indsæt det i en ny række bag fanerne Produktdata.

Som du kan se, kræver det en smule justering for at supplere 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 baggrundsfarven på knappen til - # cc3366
• Indstil knapfarven til - #fff
• Indstil knapgrænseradius t0 - 0

Det færdige produkt vil se ud som ovenfor. Du kan justere farve hex-koden, som du finder passende, hvis du bruger denne vejledning som et startpunkt for din skabelon.

Når du er færdig, offentliggør 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 inden for 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 skrifttypefarve og typografi, til at blive vist, når de bruger Elementor. Udseendet på din WooCommerce-butik kan blive påvirket, hvis du bruger et WordPress-tema, der kan kontrollere udseendet af din butik. Hvis du støder på dette problem, skal du huske, at din artikel i nogle tilfælde muligvis tilsidesætter dine tilpassede sideindstillinger.

Du kan også vælge en tom side og oprette en fra bunden ved hjælp af produktwidgets til et helt tilpasset udseende. Brug en tom side, luk pop op-vinduet til skabelonbiblioteket, når det vises, og begynd at bygge på den nyoprettede side. Den brugerdefinerede "Tilføj til indkøbskurv" -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 på alle de forskellige widgets, der aktuelt er tilgængelige, 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 passer til det ønskede udseende.

Du skal ændre din produktside for at skelne din e-handelsbutik fra konkurrencen og give dine kunder en unik oplevelse. Desuden er muligheden for at æstetisk personliggøre 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 anbefales stærkt. Udover at være enkel at bruge inkluderer sidebyggeren alle de nødvendige widgets og stylingmuligheder for at hjælpe dig med at oprette brugerdefinerede produktsider. Vi håber, at du fandt denne vejledning informativ og gav dig de oplysninger, du havde brug for til at tilpasse dit WooCommerce-produkt og produktarkivsider ved hjælp af Elementor. Har du brugt Elementor til at oprette WooCommerce-sider tidligere? Du er velkommen til at dele dine tanker i kommentarfeltet. Vi ser meget gerne ud.