Bygg og design en fantastisk WooCommerce-produktside med Elementor

Du må endre produktsiden din for å skille e-handelsbutikken din fra konkurrentene og gi kundene dine en unik opplevelse. Videre er muligheten for å estetisk tilpasse produktsiden din avgjørende for å opprettholde en konsistent visuell design i hele din nettbutikk.

Elementor er en av de ledende WordPress-nettstedbyggerne på markedet, men visste du også at du kunne bygge WooCommerce-butikker ved hjelp av det?

Mange innebygde Elementor WooCommerce-moduler lar deg sette inn WooCommerce-innhold eller funksjonalitetsblokker eller style dem ved hjelp av Elementor-byggmesteren. Ganske bra, ikke sant?

Styling og tilpassing av WooCommerce pleide å kreve PHP og CSS for hver liten endring, men ettersom verktøy som Elementor forbedres og blir mer komplekse, blir flere og flere alternativer tilgjengelige for å ta kontroll over måten butikken din ser ut og fungerer.

La oss komme i gang.

• Opprette en Elementor-mal
• Building Elementor produktbilde eller galleri
• WooCommerce produkttittel, pris og legg i handlekurven
• Sette opp Elementor-produktfaner
• Elementor produkt kort beskrivelse
• Elementor og WooCommerce produkt selger
• Konklusjon - Elementor produktsidebygger

Opprette en Elementor-mal

Det første trinnet i prosedyren er å bygge en ny Elementor-mal ved å navigere til Maler i WordPress-dashbordet. Klikk på 'Bygg nytt' og velg deretter Enkeltprodukt som malen du vil lage.

Når vi utvikler denne malen fra bunnen av, er det ikke nødvendig å sette noen blokker; gå ut av neste boks til du kommer til det vanlige Elementor-skjermbildet for en ny side.

Building Elementor produktbilde eller galleri

Hvert WooCommerce-produkt har et produktbilde eller bildegalleri som viser produktets fotografier til kundene. Elementor tilbyr en innebygd Product Images-modul som lar oss sette inn dette i malen vår.

Lag en enkel rad med to kolonner og skriv inn Product Images-modulen i venstre kolonne; Dette ser praktisk ut og utfører jobben, men la oss tilpasse salgsmerket for å matche Elementor Hello-temaet som brukes til denne artikkelen. For å gjøre dette må vi bruke en liten linje med tilpasset CSS, som kan introduseres ved å gå til Avansert> Egendefinert CSS og lime inn koden nedenfor.

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

WooCommerce p roduct tittel, pris og legg i handlekurven

Vi legger til Elementor-modulene for produkttittel, produktpris og Legg i handlekurv i høyre kolonne.

Søk etter disse tre modulene i Elementor-konstruktøren, og dra og slipp dem over for å ordne dem i sekvensen ovenfor; dette er fullt funksjonelt, men vi ønsker å tilpasse det til å matche stylingen som avsnittet ovenfor Hello Elementor-tema. Styling-moduler med Elementor er enkelt, alt du trenger å gjøre er å klikke på modulen, og redaktøren skal åpne stylingsalternativene til venstre.

Innholdet i disse modulene er utmerket. Dermed skal vi jobbe under fanen Style. For det første, la oss oppdatere skrifttypen og fargen på produkttittelen for å matche de som brukes i Hello Elementor-temaet.

Vi må da gjøre det samme for modulene Produktpris og Legg til i kurv ved å klikke på hver modul og endre tekstfargen. For produktprisen skal jeg bruke mørkegrå for å kontrastere overskriften, så skriv denne heksekoden hvis du følger med - # 54595f

Deretter oppdaterer vi noen få ting på Add To Cart-modulen. Bakgrunnsfargen på knappen og kantradien til knappen ved hjelp av innstillingene nedenfor:

• Sett innholdet til 'Legg i handlekurv.'
• Sett bakgrunnsfargen til '# cc3366'
• Sett kantradius til 0

Jeg endret grenseradiusen til mengdevalgeren til 0, som du kan gjøre i kategorien Stil for Mengde.

Sette opp Elementor-produktfaner

Hvert produkt må vise grunnleggende informasjon, for eksempel en produktbeskrivelse og omtaler hvis tilgjengelig; dette håndteres ofte gjennom produktfaner.

Opprett en ny rad under den øverste delen og dra modulen Produktdata-faner fra Elementor-byggmesteren inn i raden for å sette den inn. Det er ikke mye styling som kreves her, fordi det arver noen stiler fra Hello Elementor-temaet. La oss imidlertid endre stilen på knappen for innlevering av anmeldelse.

For å gjøre dette, trenger vi litt tilpasset CSS igjen. Begynn å redigere produktdata-fanene, og klikk deretter på kategorien Avansert og bla ned til Custom CSS. Skriv inn CSS nedenfor, og du kan justere fargene i henhold til designet ditt.

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

Elementor p roduct kort beskrivelse

Ok, så vi har en anstendig, enkel design så langt, men det ser litt sparsomt ut. Å legge til en produktbeskrivelsesmodul til den øverste delen kan hjelpe deg med å legge dette ut og legge til mer sammenheng.

Søk etter WooCommerce kort beskrivelse-modulen, og dra og slipp den under produktprisen og over Legg i handlekurv-modulen.

Det er ingen styling nødvendig her ennå, siden den har arvet stilene fra Hello Elementor.

Elementor og WooCommerce p roduct upsells

Å øke den gjennomsnittlige kurvverdien er avgjørende for alle WooCommerce-nettsteder, og det er derfor det er hyggelig at Elementor inkluderer en Product Upsells-modul slik at du enkelt kan integrere tilpasning i butikken din.

Vennligst søk etter produktet Upsells-modul i Elementor-byggherren, og sett den inn i en ny rad bak produktdatafaner.

Som du ser, krever dette litt justering for å utfylle resten av vår stil. Begynn å endre modulen og gjør følgende endringer:

• Sett tittelfargen til - # cc3366
• Sett overskriftsfargen til - # cc3366
• Sett prisfargen til - # 54595f
• Sett knappens bakgrunnsfarge til - # cc3366
• Sett knappfargen til - #fff
• Still inn knappens radius t0 - 0

Det ferdige produktet vil se ut som ovenfor. Du kan justere heksekoden for farger etter eget skjønn hvis du bruker denne guiden som et utgangspunkt for malen.

Når du er ferdig, publiserer du malen. I neste vindu ser du spørsmålet "Hvor vil du vise malen din?". Klikk på “Legg til betingelse” for å bestemme når denne malen skal brukes. Du kan velge “Alle produkter” for å bruke malen på alle produktsidene dine. Du kan også velge å bruke denne malen bare for produkter som faller inn i en bestemt kategori eller som har en bestemt tag knyttet til seg.

Konklusjon – Elementor - produktsidebygger

Noen brukere kan ha problemer med å få tilpassede designinnstillinger, for eksempel skriftfarge og typografi, til å vises når de bruker Elementor. Utseendet til WooCommerce-butikken din kan bli påvirket hvis du bruker et WordPress-tema som kan kontrollere utseendet til butikken din. Hvis du støter på dette problemet, må du huske at artikkelen din i noen tilfeller kan overstyre dine tilpassede sideinnstillinger.

Du kan også velge en tom side og lage en fra grunnen av ved hjelp av produktwidgets for et helt tilpasset utseende. Bruk en tom side, lukk popup-vinduet for malbiblioteket når det vises, og begynn å bygge på den nylig opprettede siden. Den egendefinerte "Legg i handlekurven" -knappen, "Produktpris", "Produktbilde" og "Produkttittel og beskrivelse" er bare noen få av WooCommerce-widgetene du kan bruke til å tilpasse produktsiden. Du kan se på alle de forskjellige widgetene som er tilgjengelige for øyeblikket ved å gå til denne siden. Hvis du foretrekker det, kan du ordne widgetene hvor du vil på sidelayouten og tilpasse stilene slik at de passer til ønsket utseende.

Du må endre produktsiden din for å skille e-handelsbutikken din fra konkurrentene og gi kundene dine en unik opplevelse. Videre er muligheten for å estetisk tilpasse produktsiden din avgjørende for å opprettholde en konsistent visuell design i hele din nettbutikk. Elementor er et fantastisk verktøy for å tilpasse sidene i WooCommerce-butikken din, og det anbefales på det sterkeste. I tillegg til å være enkel å bruke, inneholder sidebyggeren alle nødvendige widgets og stylingsalternativer for å hjelpe deg med å lage tilpassede produktsider. Vi håper du fant denne veiledningen informativ og ga deg den informasjonen du trengte for å tilpasse WooCommerce-produkt- og produktarkivsidene dine ved hjelp av Elementor. Har du brukt Elementor til å lage WooCommerce-sider tidligere? Du er velkommen til å dele tankene dine i kommentarfeltet. Vi vil gjerne ta en titt.