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 til å estetisk tilpasse produktsiden din avgjørende for å opprettholde en konsistent visuell design i hele nettbutikken din.

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

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

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

La oss komme i gang.

• Opprette en Elementor-mal
• Bygg Elementor-produktbilde eller -galleri
• WooCommerce produkttittel, pris og legg i handlekurven
• Sette opp Elementor-produktfaner
• Elementor produkt kort beskrivelse
• Oppsalg av Elementor og WooCommerce-produkter
• 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 "Bygg nytt" og velg deretter Enkeltprodukt som malen du ønsker å 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 den vanlige Elementor-bygger-skjermen for en ny side.

Bygg Elementor-produktbilde eller -galleri

Hvert WooCommerce-produkt har et produktbilde eller bildegalleri som viser produktets fotografier til kunder. Elementor har en innebygd produktbilder-modul som lar oss sette inn denne i malen vår.

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

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

WooCommerce produkttittel, pris og legg i handlekurven

Vi vil legge til Elementor-modulene for produkttittel, produktpris og legg i handlekurv i kolonnen til høyre.

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

Innholdet i disse modulene er utmerket. Derfor skal vi jobbe under Style-fanen La oss først 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 i kurv ved å klikke på hver modul og endre tekstfargen. For produktprisen kommer jeg til å bruke en mørkegrå for å kontrastere mot overskriften, så skriv inn denne sekskantkoden hvis du følger med – #54595f

Deretter vil vi oppdatere et par ting på Legg i handlekurv-modulen. Bakgrunnsfargen til knappen og kantradiusen til knappen ved å bruke innstillingene nedenfor:

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

Jeg endret kantradiusen til mengdevelgeren til 0, noe du kan gjøre i kategorien Stil for Antall.

Sette opp Elementor-produktfaner

Hvert produkt må vise grunnleggende informasjon som en produktbeskrivelse og anmeldelser hvis tilgjengelig; dette håndteres vanligvis gjennom produktfaner.

Opprett en ny rad under den øverste delen og dra produktdatafanene fra Elementor-byggeren 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 innsending av anmeldelser.

For å gjøre dette, trenger vi litt tilpasset CSS igjen. Begynn å redigere produktdatafanene, klikk deretter på fanen 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 { background-color: #cc3366; farge: #fff; border-radius: 0px; }

Elementor produkt kort beskrivelse

Ok, så vi har et anstendig, enkelt utseende design så langt, men det ser litt sparsomt ut. Å legge til en kort produktbeskrivelse-modul til den øverste delen kan hjelpe til med å utdype dette og legge til mer kontekst.

Vennligst søk etter WooCommerce Short Description-modulen, og dra og slipp den under produktprisen og over Legg i handlekurv-modulen.

Det er ingen behov for styling her ennå, siden den har arvet stilene fra Hello Elementor.

Elementor og WooCommerce -produkter

Å øke den gjennomsnittlige kurvverdien din er avgjørende for hver WooCommerce-side, og det er derfor det er fint at Elementor inkluderer en produktoppsalgsmodul slik at du enkelt kan integrere tilpasning i butikken din.

Søk etter produktoppsalgsmodulen i Elementor-byggeren og sett den inn i en ny rad bak produktdatafanene.

Som du kan se, krever dette litt justering for å komplementere resten av stilen vår. 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 kantradius t0 – 0

Det ferdige produktet vil se ut som ovenfor. Du kan justere hex-fargekoden etter behov hvis du bruker denne veiledningen som et startpunkt for malen din.

Når du er ferdig, publiserer du malen din. I det neste vinduet vil du se spørsmålet "Hvor vil du vise malen?". 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 kun for produkter som faller inn i en bestemt kategori eller har en bestemt tag knyttet til seg.

Konklusjon – Elementor produktsidebygger

Noen brukere kan ha problemer med å få de tilpassede designinnstillingene, 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, husk at artikkelen din kan overstyre innstillingene for egendefinerte side i noen tilfeller.

Du kan også velge en tom side og lage en fra bunnen av ved å bruke produktwidgetene for et helt tilpasset utseende. Bruk en tom side, lukk popup-vinduet for malbiblioteket når det vises og begynn å bygge videre på den nyopprettede siden. Den egendefinerte "Legg i handlekurv"-knappen, "Produktpris", "Produktbilde" og "Produkttittel og beskrivelse" er bare noen av WooCommerce-widgetene du kan bruke til å tilpasse produktsiden din. Du kan se på alle de forskjellige widgetene som er tilgjengelige for øyeblikket ved å besøke denne siden. Hvis du foretrekker det, kan du ordne widgetene hvor du vil på sideoppsettet og tilpasse stilene deres for å matche ønsket utseende.

Du må endre produktsiden din for å skille e-handelsbutikken din fra konkurrentene og gi kundene dine en unik opplevelse. Videre er muligheten til å estetisk tilpasse produktsiden din avgjørende for å opprettholde et konsistent visuelt design i hele nettbutikken. Elementor er et fantastisk verktøy for å tilpasse sidene til WooCommerce-butikken din, og det anbefales på det sterkeste. I tillegg til å være enkel å bruke, inkluderer sidebyggeren alle nødvendige widgets og stylingalternativer for å hjelpe deg med å lage tilpassede produktsider. Vi håper du fant denne veiledningen informativ og ga deg informasjonen du trengte for å tilpasse WooCommerce-produktet 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 tar gjerne en titt.