Lag en tilpasset WooCommerce-produktside med et Flatsome-tema

Flatesome tema

Flatsome er et kraftig WordPress -tema designet for e -handelsnettsteder og leveres med WooCommerce -integrasjon.

Det er et av de mest populære WooCommerce -temaene på ThemeForest. På tidspunktet for skriving av denne opplæringen var det over 174.500 salg og en fantastisk 4.8-stjerners vurdering som kom fra over 6600+ anmeldelser.

Flatsome er først og fremst designet med tanke på nybegynnere og ikke-teknisk kunnskapsrike brukere.

Dette er flott for folk som ønsker å komme i gang med en online virksomhet, men som ikke vet hvordan de skal kode eller har budsjett til å ansette en profesjonell koder. Med Flatsome vil du kunne lage et profesjonelt nettsted med enkle og intuitive verktøy.

Nå kommer Flatsome fullpakket med tonnevis av fantastiske funksjoner og funksjoner. For å vise hva som er tilgjengelig og hvordan det fungerer, har vi en rask opplæring som viser deg hvordan du lager en WooCommerce -produktside ved hjelp av Flatsome.

Så, uten videre, la oss komme i gang:

Innholdsfortegnelse:

Forskjellen mellom Flatsome, WooCommerce og WordPress

Når vi ønsker våre nye lesere velkommen, må vi legge inn nødvendig informasjon for å sikre at alle våre lesere er på samme side. Her vil vi diskutere forskjellen i alle de tre terminologiene vi skal bruke gjennom denne artikkelen.

La oss starte med WordPress. Det er en plattform der du installerer forskjellige temaer og plugin er for å lage nettstedet ditt. Det er tusenvis av plugin og temaer tilgjengelig for å utføre andre oppgaver i henhold til dine krav.

WooCommerce er et plugin vi installerer på WordPress som lar deg legge til forskjellige funksjoner på nettstedet vårt. Med denne plugin -installasjonen kan vi lage nettstedet vårt og nettbutikken med tilleggsfunksjoner som handlekurv, betalingsbehandling, produktadministrasjon osv.

Til slutt, men absolutt, er et av de mest kritiske elementene utsiktene til nettstedet vårt. Flatsome er et tema som lar oss tilpasse nettstedets perspektiv i henhold til våre ønsker. For eksempel, hvis firmalogoen din er oransje, vil du reflektere over nettstedets farge. Det er hva Flatsome kan gi deg.

Lag en WooCommerce -produktside ved hjelp av Flatsome -temaet

Siden all vår leser har kunnskap om WordPress, WoCommerce og Flatsome, er det på tide for oss å gå videre til produktsidens tilpasning med den fantastiske UX-byggeren som følger med Flatsome-temaet. Det er en dra og slipp-funksjon som gjør livet til designeren ekstremt enkelt.

Nesten alle har handlet på nettet, sannsynligvis på grunn av de utfordrende tidene vi har opplevd de siste månedene. Å være hjemme var den tryggeste løsningen for oss alle. Det er grunnen til at alle våre lesere er enige om at en nettbutikk er mye mer komplisert sammenlignet med et vanlig nettsted.

Men med hjelp av WooCommerce og Flatsome har denne oppgaven blitt ekstremt enkel. Du må sette deg ned og planlegge hvordan nettstedet ditt vil se ut, og det er det. WooCommerce vil være der for å hjelpe deg med sine byggealternativer. Du kan opprette en fullverdig fungerende nettbutikk på bare noen få minutter med dra og slipp.

Med WooCommerce og Flatsome vil du kunne gi ideene dine om å ha en nettbutikk et helt nytt liv. Nettsiden din må ha et moderne og vakkert utseende slik at den kan tiltrekke seg kunder. Derfor er Flatsome den beste løsningen for alle dine problemer, så last den ned herfra og la oss komme i gang.

Flatsome har noen fantastiske funksjoner, men en av delene er at den har blitt et toppvalg for mer enn 300 000 brukere. Et ultimativt verktøy hjelper deg med å lage noen enorme responsive nettsteder uten å måtte kode en eneste linje. Videre gjør dens evne til å lage noen svært kreative og unike nettbutikker det enda mer verdig.

Så uten å kaste bort lenger tid, la oss gå videre til opplæringen. Denne opplæringen tar deg gjennom hele prosessen med å designe produktsiden. Bildene vil hjelpe deg med å få en bedre ide om hvordan oppgaven vil gå gjennom prosessen.

Trinn 1: Velg en oppsett for produktsiden

Først begynner vi med å velge et oppsett av produktsiden. Dette valget vil lage en grunnleggende side for vår nettbutikk, som vi vil tilpasse etter våre ønsker senere. Denne trinnvise guiden vil lede deg gjennom prosessen med å tilpasse siden.

For denne amp fortsetter vi med Classic Shop-alternativet. Imidlertid er det ingen begrensninger for deg. Prosessen med tilpasning vil være lik for hvert oppsett du velger. Den eneste forskjellen ville være at den grunnleggende strukturen på siden vil være forskjellig fra den andre.

Vi gikk videre til produkttilpasningen og ga navnet navnet Sidebjelke i full høyde.

Det er to alternativer tilgjengelig for å tilpasse produktsiden. Den første skal gjøres med UX-byggeren, mens den andre er å bygge siden manuelt. Hvis du velger det andre alternativet, må du gå til den offisielle dokumentasjonen og finne kortkoder. Hvis du er nybegynner og dette er din første opplevelse med å bygge en nettbutikk, anbefaler jeg at du går for dette første alternativet.

(Valgfritt) Trinn 2: Lag produktside manuelt

Her er et skjermbilde av den offisielle dokumentasjonssiden til Flatsome. Du kan skrive inn ordets kortkoder og søke etter dem.

Når du har søkt, vil det være en liste over kortkoder som vises på skjermen. Du kan velge kortkodene som er viktige for produktsiden. Å bruke kortkoder krever mindre innsats, men det er viktig at du har litt praktisk erfaring med WordPress og bruk av kortkoder.

Her er listen over kortkoder du kan bruke på nettstedet til å lage sider.

I denne amp tilpasser vi den venstre sidelinjelayouten i full høyde; dermed vil vi kopiere koden for designet. Følgende er et bilde av det anvendte, men du kan enkelt kopiere det fra strukturen.

Start med å lage en blokk med en tittel. Hvis du vil utvikle hodet, må du klikke på "Legg til nytt" tilgjengelig under UX -blokker plassert i dashbordet.

Du kan navngi blokken etter dine ønsker. Her i denne ex amp le har vi kalt unionen som 'Full høyde venstre sidelinjeoppsett.' Deretter kan du se kortkodene inne i blokkredigereren. Når du er ferdig med å kopiere de ønskede snarveiene, kan du trykke på publiser.

Vi vil være på nivå etter dette ene lille trinnet der vi kan tilpasse siden vår etter våre ønsker. Naviger nå til produktsidens temaalternativ og trykk på ikonet for tilpasset layout.

Når du er ferdig, vil du nå kunne opprette blokker fra rullegardinmenyen Tilpasset produktoppsett.

Velg blokken vi nettopp opprettet. Vårt hovedmål for å lage den blokken var å lage en produktside ut av den. I henhold til denne amp sidelinjelayout i full høyde blokken, mens den på slutten blir som du har navngitt.

Når du er ferdig, trykk bare på Publiser-knappen; det vil lagre innstillingene.

Trinn 3: Tilpass produktsiden

Det er på tide for oss å begynne å tilpasse. Først vil vi navigere i eksisterende produktside fra frontenden som vi satte tidligere i trinnene.

Det er viktig at du velger et bestemt produkt som vi trenger å sette opp. Du bør ha fullstendige detaljer, bilder av arbeidet vi trenger å tilpasse. På denne måten blir prosessen mer behagelig å visualisere sideseksjonen du vil lage.

UX Builder-alternativet er synlig. Bare trykk på knappen for å starte tilpasningen.

Etter at UX-byggmesteren er åpen, kan du se på bildet at elementene til produktsiden er tilgjengelige i panelet til venstre på produktsiden din.

Venstre sidepanel er blokken vi opprinnelig opprettet. Vi opprettet den ved hjelp av kortkodene hentet fra dokumentasjonen.

Du har muligheter for å omorganisere elementene fra venstre sidepanel og endre innstillingene fra elementalternativet. I denne amp vil vi omorganisere prisen som er tilgjengelig på menyen til venstre.

Videre lar den deg også omorganisere elementer fra byggherrens forhåndsvisning og sette på flere komponenter på byggers produktside. I denne demoen har Produktfaner -delen og det relaterte produktet blitt omorganisert med bare en enkel dra og slipp.

Med den betydelige dra-og-slipp-funksjonaliteten er Flatsome klar til å gi deg det du leter etter på nettstedet ditt. Med svært tilpassbare moduler kan du enkelt lage noen fantastiske sider. Dra og slipp-funksjonen gjør livet enda mer behagelig.

Pakk inn

Det er viktig å ha en online virksomhet i denne moderne tid fordi folk foretrekker å være hjemme for å være trygge. Så begynn å bygge virksomheten din første nettbutikk med Flatsome og trylle kundene dine med sin unike og kreative opplevelse. Videre er det ikke noe rot av kode i innholdsredigereren, bare noen få kortkodelinjer. Flatsome er utvilsomt det beste temaet jeg har kommet over. Så det er ikke nødvendig å lete etter noe annet tema, bare trykk på nedlastingsknappen og begynn å bygge din tilpassede nettbutikk med en gang.

Legg igjen en kommentar

E-postadressen din vil ikke offentliggjøres. Obligatoriske felt er merket med *