Slik installerer og setter du opp et nytt WordPress WooCommerce-tema

WooCommerce er den mest populære og "mest tilpassbare e-handelsplattformen for å bygge din online-bedrift." Du kan laste ned WooCommerce gratis, men du begynner virkelig å se sin kraft når du begynner å bruke WordPress WooCommerce plugins og temaer.

Men trenger du virkelig å bruke et WooCommerce-tema?

Selv om det ikke er nødvendig, anbefaler jeg det.

Ikke bare er WooCommerce temaer eCommerce-sentrert av design, hele temaet er sentrert rundt WooCommerce-stiler. Den CSS som WooCommerce bruker for å definere hvordan produktene vises, brukes da av WordPress WooCommerce-temaet for å virkelig trekke alt sammen for å lage noen av de vakreste e-handelskortene.

For ikke å nevne det faktum at installasjon og oppsett av et nytt WordPress WooCommerce-tema ikke er vanskeligere enn å sette opp et annet WordPress-tema.

La meg vise deg hvordan du gjør det.

Slik installerer og setter du opp et nytt WordPress WooCommerce-tema

Hvis du allerede har WooCommerce installert, er det bra! Hvis ikke, anbefaler jeg Rachel McCollins nybegynners guide til bruk av WooCommerce. Dette vil introdusere deg til WooCommerce og ta deg gjennom alle trinnene som trengs for å få din nettbutikk oppe og i gang.

La oss nå begynne med hvordan du installerer og setter opp et nytt WordPress WooCommerce-tema.

Trinn 1: Installer Dummy Data

Hvis du allerede har lagt til produktene dine i WooCommerce, anbefaler jeg at du hopper over dette trinnet og starter med trinn 2.

Installering av dummy-data legger til fiktive produkter i butikken din for å hjelpe deg med å visualisere butikken din med produkter. Når du har fullført installasjonen og satt opp det nye WordPress WooCommerce-temaet, vil du vil slette alle Dummy data før du legger til dine produkter. Ellers risikerer du ved et uhell å slette dine egne produktdata.

Dummy-dataene er inkludert i WooCommerce-plugin. Hvis du har installert WooCommerce i WordPress-administratoren, kan du laste ned pluginet fra WordPress Plugin Directory til datamaskinen. Dette blir enklere enn å logge inn på FTP, gå inn i plugin-katalogen din og laste ned dummy-dataene derfra.

Når nedlastingen er fullført, pakker du ut filen slik at du er klar til å importere dummy-data.xml-filen.

Gå til din Verktøy og klikk på Importere:

Ikke la "WooCommerce Tax Rates (CSV)" forvirre deg. Dette kan gjøres senere hvis du vil. For WooCommerce Dummy Data, vil du ønske å velge WordPress.

Mer enn sannsynlig vil du ikke ha WordPress Importer plugin installert, så fortsett og Installere nå.

Når installert, gå videre og Aktiver Plugin & Run Importør.

Husker du hvor du lastet ned og pakket ut WooCommerce-plugin? Flott! Nå må du klikke Velg Fil og gjør veien til den.

Dummy-dataene dine skal ligge i utpakket mappe: (woocommerce.version.number)> woocommerce> dummy-data.

Åpne dummy-data mappen, velg dummy-data.xml, og du er klar til å laste opp filen og importere.

Dette er det siste du må gjøre før du importerer alle dummy-dataene.

Noen av dette er personlig preferanse, men her er det jeg gjør (skjermbilde videre under):

Importer standardforfatteren "wooteam" i stedet for å lage en ny forfatter eller ved hjelp av en forfatter som allerede eksisterer. På denne måten vet du hvilket innhold som ble importert / opprettet i denne prosessen basert på forfatternavnet (jeg anbefaler at du sletter forfatteren når du fjerner dummy-dataene etter at du har installert og satt opp det nye WordPress WooCommerce-temaet).

Jeg anbefaler også at du Last ned og importer vedlegg slik at du har bilder tilknyttet hvert produkt (igjen, vil du sørge for at mediet er fjernet når du er ferdig med dummy-dataene).

Når du har gjort disse valgene, send inn:

Gå til yourwebsite.com/shop/ og du bør se en fullt importert testbutikk:

Yeah! Du gjorde det!

Det er ikke veldig bra designet, er det? God ting vi skal installere et flott WordPress WooCommerce-tema som Savoy.

(Merk: Når du er ferdig med å installere og sette opp temaet, ikke glem å slette produktene og bildene fra dummy data importen før du begynner å legge til dine egne produkter.)

Trinn 2: Installer et WordPress WooCommerce-tema

Nå, la oss se på hvordan du installerer WooCommerce-temaet. Hvis du ikke har lastet ned WordPress Commerce-temaet ditt allerede, kan du laste det ned til datamaskinen din (sørg for at du vet hvor du laster ned den, slik at du får tilgang til det).

Det er to forskjellige måter du kan installere temaet på:

  1. Få tilgang til nettstedet ditt ved hjelp av FTP
  2. Fra WordPress Admin

FTP Ditt tema

Hvis du er komfortabel med å bruke FTP, kan du fortsette å koble til serveren din og komme deg til wp-innhold> temaer katalogen. Det er her du vil sende temaet ditt. Før du sender utpakket mappe til serveren din, må du imidlertid sørge for at du sender temaet ditt. La oss ta en nærmere titt ved å bruke vårt eksempel WordPress tema fra ThemeForest.

Etter at du har lastet ned nedlastingen, ser du at det finnes en rekke forskjellige mapper:


Ikke alle temaene du laster ned vil bli pakket slik. Noen ganger er den zippede mappen du laster ned, den aktuelle temamappen. Det er alltid en god ide å dobbeltsjekke, siden dette varierer fra sted til sted.

Det Savoy - minimalistiske AJAX WooCommerce-temaet inneholder noen ekstra ting som dokumentasjon, eiendeler, etc. Hvis du ser i Theme Files-mappen for Savoy, finner du temaet ditt (savoy.zip).

Hvis du installerer via FTP, går du videre og laster opp utpakket temamappe (for eksempel: "savoy") i tema-katalogen. Hvis du ikke er sikker på om du bruker FTP eller foretrekker å installere fra WordPress-administratoren, er det greit. Jeg foretrekker å bruke WordPress Admin også.

Fra WordPress Admin

Når du installerer et WordPress-tema fra administratoren, krever at temamappen zippes (themefolder.zip). Som vi diskuterte tidligere, vil du sørge for at du jobber med faktiske temamappe og ikke mappen ditt tema kan pakkes inn i.

Fra WordPress Admin, under Utseende, klikk temaer:

Legg til nytt tema:

Last opp tema:

Husker du hvor tema zip-filen din er plassert?

(Vårt eksempel tema er tittelen: savoy.zip)

Klikk Velg Fil og gjør veien til det:

Når du er installert, kan du besøke Utseende> Temaer i WordPress Admin for å se om det er installert eller klikk for å aktivere det med en gang.

Som du kan se (under), har Savoy-temaet installert vellykket, så musen over og Aktiver:

Nå som ditt WordPress WooCommerce-tema er installert og aktivert, la oss sette det opp.

Trinn 3: Konfigurer et WordPress WooCommerce-tema

Ikke alle temaer er tilpasset akkurat det samme. Hvordan et tema er utformet og utviklet, er en stor faktor, så det kan være noen forskjeller mellom denne opplæringen og hva du kanskje står overfor. Generelt sett bør dette imidlertid hjelpe deg med å få tak i ditt WordPress WooCommerce-tema, uansett hvilket WooCommerce-tema du bruker fra ThemeForest eller hvor som helst annet.

Anbefalte / nødvendige plugger

Etter at du har installert og aktivert Savoy-temaet, blir du varslet om anbefalte pluginprogrammer:

Noen ganger gir temaet deg beskjed om anbefalte programtillegg, mens andre inneholder anbefalinger i dokumentasjonen. Det kan være tema design funksjoner - for eksempel valgfrie skyveknapper - som ikke er kodet inn i temaet, men er innkvartert for.

Klikk på Begynn å installere plugins i Savoy-temaet for å se listen over anbefalte plugins:

Igjen, dette vil variere fra tema til tema, men i dette tilfellet kan du eller ikke vil installere alle disse.

For eksempel, mens Savoy anbefaler Contact Form 7 og inkluderer styling for det, kan du ikke bruke denne plugin-modulen til kontaktskjemaet. Du vil kanskje bruke noe som Gravity Forms eller Ninja Forms.

En plugin som Regenerate Thumbnails er et utmerket plugin å bruke for de som har en eksisterende butikk satt opp og har sine bilder konfigurert for et tidligere tema. Dette pluginet vil gå gjennom WordPress Media Library og endre størrelsen på alle bildene dine til å fungere med ditt nye tema. Du kan eller vil ikke gjøre dette med dummy-dataene, og du vil kanskje hoppe over dette pluginet helt (men jeg anbefaler at du gjør det uansett, slik at alle media er dimensjonert riktig for testing).

En plugin som Envato Toolkit er imidlertid svært viktig for temaer kjøpt gjennom ThemeForest, slik at du får beskjed om temaoppdateringer.

Jeg anbefaler å installere alle de anbefalte pluginene når du kommer i gang. Du kan alltid fjerne et plugin senere hvis du ikke trenger det, mens hvis du ikke installerer et plugin som trengs, kan du bli frustrert fordi temaet ikke "fungerer" eller gjør noe du likte på demoen.

Når du har installert alt, noen eller ingen av de anbefalte og / eller nødvendige pluginene, ikke glem å aktivere dem:

Hvis du bruker et tema kjøpt fra ThemeForest, for eksempel eksempeltemaet Savoy, må du ikke glemme å legge inn markedsnavn og Secret API-nøkkel i Envato WordPress Toolkit for å sikre riktige temaoppdateringer..

Tilpass

Dette er delen av å installere og sette opp WordPress WooCommerce-temaet ditt når det blir veldig morsomt, og du begynner å se at nettstedet ditt kommer til livs.

Du kan få tilgang til WordPress Customizer fra menyen i WordPress: Utseende> Tilpass. Eller gå til Temasiden under Utseende> Temaer og klikk deretter på Tilpass knapp:

Velkommen til WordPress Customizer:

Her er hvor vi skal gjøre noen tweaks før vi går inn i dypere konfigurasjon.

Det første du vil se er Nettsted Identitet. Dette er hvor du kan endre ditt nettstedstittel og -tegn.

Noen ganger er det her du kan legge til et egendefinert header bilde og / eller Site Icon også (dette vil variere fra tema til tema).

Neste opp, konfigurer menyene dine:

Hvis dette er et nytt WooCommerce-oppsett, eller du ikke har opprettet noen sider, kan det hende at det ikke er mye for deg å "tilpasse" ennå. Med WooCommerce installert, har den imidlertid automatisk lagt til noen sider som jeg er sikker på at du vil ha lagt til på menyen med en gang.

Du kan enkelt legge til og opprette en ny meny:

Når du har lagt til en meny (eller flere), kan du velge hvor du vil at menyen skal vises, så vel som de forskjellige menyelementene (for eksempel egendefinerte koblinger, innlegg, sider, produkter, etc.).

Dette gir deg stor fleksibilitet med hvordan du vil at WooCommerce-siden din skal fungere. Ikke vær redd for å leke med den eller endre den senere.

Før vi forlater WordPress Customizer, vil du fortelle WordPress å gjøre forsiden din butikk:

merke Forsiden vises som En statisk side og velg Forside å være din Butikk side. Butikksiden ble automatisk opprettet da du installerte WooCommerce-plugin.

Når det gjelder innlegg siden, dette avhenger av hvor eller ikke du vil ha en blogg på WooCommerce-siden din. Hvis det er tilfelle, må du opprette en bloggside og velge det på denne siden av WordPress Customizer eller i WordPress Admin Settings> Reading.

Resultatene

Med noen grunnleggende konfigurasjon kan du se hvor flott nettbutikken din kan se ut med et WordPress WooCommerce-tema:

De enkelte produktsidene ser fantastisk ut:

Det inkluderer også relaterte produkter:

Savoy - Minimalistisk AJAX WooCommerce Tema lar deg enkelt finjustere mange elementer på nettstedet ditt og kan gå langt bak alt jeg har dekket i denne opplæringen (pass på at du leser gjennom dokumentets tema for å lære mer om temaet ditt spesielt). Jeg viste deg bare endringer som kunne gjøres i WordPress Customizer, og kan vanligvis gjøres på omtrent hvilket som helst tema du kanskje bruker.

Konklusjon

Du kan tydelig se hvor enkelt disse første første trinnene i konfigurasjonen av det nye WordPress WooCommerce-temaet kan være, og hvor bra det ser ut - bare ved å bruke et WordPress-tema designet spesielt for WooCommerce.

Det er mange nyttige WordPress WooCommerce plugins tilgjengelig på CodeCanyon og noen vakkert designet og effektive WordPress WooCommerce temaer på ThemeForest.

Ser på noen av de bestselgende ThemeForest WooCommerce-temaene kan være et bra sted å starte (Savoy er fortsatt min favoritt). Jeg er sikker på at du finner noe som passer perfekt til din e-handelsbutikk. Eller bla gjennom vår utstillingsvindu for å finne akkurat den rette for din butikk: 

Hva bruker du WooCommerce til å selge?