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.
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.
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}
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:
Jeg endret kantradiusen til mengdevelgeren til 0, noe du kan gjøre i kategorien Stil for Antall.
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; }
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.
Å ø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:
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.
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.
Et nettsteds topp- og bunntekst er viktige elementer. I de fleste tilfeller gir toppteksten navigasjon...
To av de mest populære WordPress-temaene på markedet er Astra og OceanWP. Profesjonell…
Å lage et utmerket nyhetsnettsted krever ikke at du blir webdesigner. Vi…
Avis-temaet er et av de viktigste WordPress-temaene designet av tagDiv, en...
Når det gjelder å sette opp en nettbutikk, er WooCommerce go-to- plugin . Den…
En overskrift er vanligvis det første en person ser når de besøker nettstedet ditt,...
Se kommentarer
Har du en personlig tilpasning på siden, kan du være en assosiert med prodotto del negozio?
Hei, dette er konfigurert når du lagrer sidedesignet ditt første gang eller bruker den lille pilen over Lagre-knappen i Elementor