E-handel med WordPress och WooCommerce (del 1/5)

FS Data är, som bekant, väldigt glada användare och stora förespråkare av WordPress. Vi har tidigare visat hur enkelt det är att installera WordPress hos oss, hur man får en säkrare och snabbare WordPress-sida, det enklaste sättet att flytta en WordPress-sida och mer därtill. FS Data är helt enkelt ett WordPress-vänligt webbhotell.

Även om WordPress är riktigt bra för snabb och enkel hantering av vanliga hemsidor och bloggar så har vi den senaste tiden fått väldigt många förfrågningar om förslag på lämpliga e-handelslösningar. Vi har därför gått igenom en hel uppsjö av olika e-handelssystem, med varierande resultat.

Faktum är att många av dagens e-handelslösningar är för komplexa, tunga och svåra att anpassa efter den svenska e-handelsmarknaden. Vi är dessutom lite “bortskämda” med enkelheten och möjligheterna med system såsom WordPress. Och varför skulle vi – och våra kära kunder – egentligen nöja oss med ett sämre alternativ?

Tack och lov så kan WordPress även användas för e-handel.

Det finns dock en uppsjö olika tillägg och lösning för att anpassa WordPress för e-handel. Vi har testat ett stort antal av dessa och funnit att en lösning fungerar bättre, enklare och smidigare (för den svenska e-handelsmarknaden) än alla andra. Vi talar givetvis om det utmärkta WordPress-tillägget WooCommerce.

Även om vi på FS Data kan väldigt mycket om WordPress, särskilt ur ett administrationsperspektiv, så är vi egentligen inte riktigt lämpade för att berätta allt om hur man arbetar med WordPress för e-handel. Där finns det bättre källor, såsom riktiga e-handlare eller WooCommerce-konsulter. Lyckligtvis så har vi hittat precis en sådan person.

Med start idag och fyra veckor här framöver så kommer den skickliga WordPress och WooCommerce-konsulten Björn Sennbrink att publicera en serie med blogginlägg om e-handel med WordPress och WooCommerce hos oss. Dagens inlägg är en introduktion, där Björn visar hur man enkelt installerar och kommer igång med WooCommerce.

Här framöver kommer han även berätta hur man tar betalt (med bl a Klarna och Paypal), hur man använder dynamiska priser (t ex för kampanjer) och verkligen maximerar sin försäljning. Följ nu med i denna serie redan från början, så kommer ni vara experter på e-handel med WordPress inom kort.

Här är den första delen (av totalt 5 delar) i vår serie om e-handel med WordPress och WooCommerce.

E-handel med WordPress – Installera WooCommerce och lägg till produkter

Många av FS Datas kunder använder WordPress CMS som plattform för webbnärvaro. En funktionalitet som efterfrågas allt mer är möjligheten att ha en e-butik på WordPress. För att möta behovet av mer kunskap kring e-handel på WordPress kommer här första delen i vår serie om tillägget WooCommerce. Hela bloggserien är författad av Björn Sennbrink, WordPress-konsult från Örebro.

Förutsättningar: Du behöver WordPress installerat och administratörsrättigheter för att kunna göra alla moment som beskrivs här. Om du är kund hos FS Data och inte kommit igång med ditt konto än rekommenderas att du börjar med att läsa: Kom igång med ditt webbhotellspaket hos oss..

Inledning
WooCommerce började utvecklas av företaget WooThemes hösten 2010 och släpptes efter många turer med olika utvecklare som färdig produkt i september 2011. Idag är WooCommerce ett av de ledande tilläggen för alla som vill bedriva e-handel på WordPress.

Visst finns det många andra applikationer för WordPress-e-handel och valmöjligheterna för WordPress-plattformen är idag flera. Vi har t.ex. Jigoshop, WP e-Commerce som bägge är kompetenta e-handelstillägg. Just WP e-Commerce har jag arbetat med en del och det tilläggets template liknar de för ett WP-tema.

En av många bra saker med WooCommerce som är värda att nämna redan här, är att modulerna för att hantera betalningar via Payson, Klarna, DIBS med flera, är utvecklade av ett svenskt företag. Krokedil AB i Arvika ligger bakom flera av modulerna som finns att köpa på WooCommerce-webbplatsen. Detta faktum underlättar om du skulle behöva support eller hjälp med specialanpassningar – alla talar svenska.

– Installation

Logga in i WordPress på din sajt (/wp-admin)
Gå till “Tillägg” och “Lägg till nytt”
Sök efter “woocommerce” och klicka på “Installera nu” när du ser:

När du installerat och aktiverat WooCommerce ges du valet att installera “WooCommerce Pages”. Det är rekommenderat att du gör den installationen. Du får då alla sidor skapade med rätt funktionalitet. Alternativet är att utifrån dokumentationen infoga WooCommerce-funktionaliteten på sidor du skapar själv senare.

– WooCommerce på svenska

Vi har i vår demobutik valt att installera WordPress på svenska. Detta gör att WooCommerce visar en stor del av menyer etc på svenska. Språkfilen som följer med WooCommerce innehåller dock flera brister och på sina håll blandas engelska med svenska. Vill du göra egna anpassningar av språkfilen kan du lära dig mer om metoder för detta på: WooCommerce Docs, Localization.

Uppdaterat: FS Data erbjuder en svensk översättning av WooCommerce. Läs mer här: Svensk översättning av WooCommerce

– Välj ett passande tema

WooCommerce fungerar bäst när du väljer något av deras egna teman. Det finns en handfull gratisteman att ladda ner från WooThemes och i vår demobutik använder vi Mystile. Installera temat via WP-admin och aktivera.

Nu har vi gått igenom hur du installerar WooCommerce och vi har aktiverat ett WordPress-tema för vår e-butik. Nästa steg är att börja lägga till produkter. Vi hade kunnat vänta med produktinmatningen och istället gett oss på att göra inställningar i WooCommerce. Detta med inställningar är dock ganska omfattande och vissa inställningar har direkt koppling till produkterna i e-butiken, varför vi gör på detta viset istället:

– Lägg till/redigera produkt

Logga in på din sajt och se menyn allra längst till vänster. Välj ”Produkter” och ”Lägg till produkt”. Det momentet ger oss inmatningsmöjligheter i stil med de för vanliga inlägg och sidor, skulle vi nu haft en WordPress-hemsida utan e-handelstillägget.

Produktnamn – Här matar vi in produktens namn. Här bestämmer vi vilken titel eller rubrik som vår produkt ska ha utåt sett i butiken, i sökningar och på arkivasidor samt platshållare för kompletterande köp och så vidare. Permalänken skapas automatiskt av WordPress, precis som när du skapar nya inlägg eller sidor.

Produktbeskrivning – Den stora huvudinmatningsrutan är platsen för vår beskrivning av vår produkt. Här får du plats med både bilder och texter. Du kan t.ex. lägga till kod för inbäddning av YouTube-klipp och egentligen allt som du kan addera när du skapar vanliga WordPress-inlägg och sidor.

Missa inte fältet “Product Short Description” en bit ner på sidan (är som default placerat under “Egna fält”). Det är där som du anger vad som ska visas intil produkttiteln, priset, lagersaldo mm. Det finns alltså två fält för produktbeskrivning och för att optimera produktsidan ut mot kund bör du inte använda samma text i “Product Short Description” som i den stora huvudinmatningsrutan.

Produktkategorier – Se högerkolumnen i gränssnittet under den blå publicera-knappen. Här skapar vi en ny produktkategori med det passande namnet ”mobiltelefontillbehör”. Notera att du kan göra detta innan du lägger till en produkt och att du kan skapa hierarkier för bättre överblick.

Produktetiketter – Strax under produktkategorierna har vi fältet för etiketter relaterade till produkten. Vi väljer här några ord som passar med mobiltelefonskal (iPhone 4, mobilskal, skal). Rekommendationen är att du väljer endast väljer nyckelord som svarar upp emot produkten och dess egenskaper.

Utvald bild – Att marknadsföra en produkt utan en beskrivande bild kan vara försäljningshämmande. Ladda därför upp en bra bild av produkten. Lägg lite extra tid på bra produktbilder så kommer din e-butik att bli så mycket bättre.

Ovanstående fem inmatningar är grundläggande för processen att lägga till en produkt i din e-butik. Om det är första gången du lägger en produkt kan du redan här publicera den. Du ges då en första bild av hur din e-butiks produkter kommer att presenteras för alla besökare och kunder. Avsluta det här momentet med att ange priset för produkten i inmatningsfältet “Produktdata”.

– Prisinställningar

Vi kommer i den här bloggserien att fokusera på försäljning inom Sverige i svenska kronor. WooCommerce har det brittiska pundet som standardvaluta och därför måste vi börja med inställningarna nu, de som nämndes ovan före beskrivningen av produktinmatningen.

Se huvudmenyn till vänster, klicka på “WooCommerce” och “Settings” (eller “Inställningar” beroende på om svenska språkfilen är uppdaterad eller inte) och välj följande tre i rullgardinsmenyerna under “Generella alternativ”:

  • Basland – Sverige
  • Valuta – Svenska krona
  • Tiilåta länder – Specifika länder, Sverige

När baslandet Sverige, valutan svensk krona och tillåtna landet Sverige är valt kan vi kika på vår produktsida igen (sidan som kunden ser). Priset som först angavs till exempelvis £99 anges nu som kr99.

Ja, kr står före beloppet. För att justera det går vi till WooCommerce-inställningarna igen, klicka på fliken “Produktkatalog” (/wp-admin/admin.php?page=woocommerce_settings&tab=catalog) och under “Prisalternativ” finns en rullgardinsmeny som heter “Valutaposition”. Förslagsvis väljer du “Höger (med mellanrum)”.

WooCommerce bjuder som standard på en funktion där du kan minska en produkts pris ut till kund: Se “redigering av produkt”-sidan. Fältet “Produktdata” (där du satte priset tidigare) innehåller en rad som kallas för “Reapris”. Sätt ett lägre pris där och kunden ser reapriset istället för ordinarie pris. Du kan dessutom schemalägga när reapriset ska visas:

Skärmdumpen ovan visar produktsidan såsom den visas för besökaren till vår demobutik. Vi har en produkttitel, två produktbeskrivningar, ett ordinarie pris, ett reapris, en produktbild och det finns funktioner för att placera produkten i varukorgen. Det finns dessutom möjlighet att recensera produkten, mer om det senare i bloggserien om WooCommerce.

Det här stycket får sammanfatta den första delen i FS Datas bloggserie om WooCommerce. Vi har visat hur du laddar ner, aktiverar och kommer igång med WooCommerce. Vi har visat hur du lägger till och redigerar en produkt, sätter pris och arbetar med produktbeskrivningar samt produktbilder.

Har ni några frågor eller funderingar kring detta? Lämna gärna en kommentar!

You Might Also Like
35 Comments
    • sulo
      says:

      Om du vill ha ett beställningsformulär, utan pris-, lager och fakturahantering, så är ett vanligt kontaktformulär snarare att rekommendera. Kan personligen rekommendera tillägget Contact Form 7 för detta. Det är snabbt, enkelt och stabilt.

  • Elisabeth
    says:

    Hej. Finns det något tillägg där jag även kan lägga in en lista med mått för ringar så kund kan välja storlekar?

  • Eva Pettersson
    says:

    Underbart med en svensk “manual”, tack! 🙂 Jag håller på att lägga upp en e-handelsida åt en förening. Det går någorlunda, men jag får inte till bilder på “förstasidan”, där alla produkter finns. Bilder för olika varianter (storlek, färg etc) funkar fint, men just den där första bilden får jag inte dit. Har provat att lägga till bilder lite överallt men det funkar ändå inte… Vad gör jag för fel? Kör med Mantra som tema… http://karelare.se/karelarshopen-2/

  • nino
    says:

    Hej
    Skummat igenom texten så jag kan ha missat det, men om man vill ha olika “option” tex olika färger och olika storlekar funkar det?
    Alltså en artikel med valen FÄRG och STORLEK, går det att ordna?

  • Sassa
    says:

    Tack för bra beskrivning av WooCommerce. Jag funderar starkt på att använda det för min butik. Men hur funkar det om man har en tvåspråkig webbplats? Går det att ha butiken på både svenska och engelska med olika valuta, och hur gör man då?

  • Jörgen
    says:

    Har installerat WordPress och WooCommerce och ett gratis-tema. Nu lägger jag in produkter. Hur kan jag lösenordsskydda hela sidan medan jag lägger upp produkter och gör klart designen?

    • sulo
      says:

      Det enklaste sättet att lösenordsskydda en sida, det är att använda det lösenordsskydd som vi erbjuder i kontrollpanelen. Logga bara in i vår kontrollpanel och gå in under “Hemsida” > “Skydda katalog” för att lösenordsskydda din hemsida hos oss.

  • richard
    says:

    Hej, tidigare hade vi svenska i vår webshop., med tex, typ snygga runda gröna “rea” skyltar som exemplet ovan, nu är det svarta “sales” . Har senaste version WooCommerce 1.6.6, kan man ladda ner/välja svenska på nytt ? övrigt i webshop är på hygglig svenska.. Tacksam för svar Richard

  • Gunilla Brattberg
    says:

    Jag har installerat Woocommerce som tillägg till en WordPresssite och får på
    startsidan följande error

    All Products
    Fatal error: Call to a member
    function is_visible() on a non-object in
    /home/web26026/domains/farleden.net/public_html/butik/wp-content/plugins/woocommerce/templates/content-product.php
    on line 23

    och undrar hur jag ska komma till rätta med det.

    • sulo
      says:

      Jag har förstått, efter kontakt med våra tekniker, att du får detta meddelande hos ett annat webbhotell. Det är lite svårt för oss att hjälpa om sidan inte är placerad hos oss (eftersom vi saknar åtkomst till server och loggar). Men vi hoppas att du får ordning på detta hos ditt andra webbhotell. Annars är du givetvis välkommen över till oss, så kan vi hjälpa till på riktigt. 🙂

  • Karin Andersson
    says:

    Bra skriven! Pedagogisk och lätt att följa trots att jag råkade ladda ner engelsk version och jag har än så länge inte tagit reda på hur man växlar språk. Det enda som var lite svårt var utvald bild, se även inlägg längre upp. Till sist kom jag på att man skulle klicka på länken Set featured image längs ner i höger kolumn, som borde bli Utvald bild på svenska. Där kan man välja på att klicka på knappen Insert to post – vilket innebär att bilden klistras in i den större produktbeskrivningen eller den lilla längre ner. Eller så kan man klicka länken Use as featured image. I och med att det är både en knapp och en länk så är det lite förvirrande. Detta går dock att utnyttja på ett riktigt trevligt sätt.

  • Venneza
    says:

    Hur lägger man en stor bild som exempel ovan? När jag la till en bild blir det bara miniatyr. Och jag vill gärna lägga en produkt på en av mina produkt kategorie hur gör man?

    • Björn Sennbrink
      says:

      Vilket tema använder du tillsammans med WooCommerce? Bildstorleken som visas påverkas av inställningarna för temat och typen av tema (responsive eller inte).

  • Mia
    says:

    Hej. Tack för en bra artikel:-). En fråga … hur får man produkterna att hamna i fllödet på startsidan. Man ska tydligen kryssa i detta på produktsidan men jag kan inte hitta detta. Någon som vet?

    Products on the homepage

    The products on your homepage are simply the 7 most recent featured
    products ordered chronologically. To make a product featured navigate to
    the edit product page and check the following setting:

    Tack på förhand!

    • Björn Sennbrink
      says:

      På “redigera en produkt”-sidan, ovanför Publicera/Uppdatera-knappen: Redigera “Catalog visibility: Catalog/search” (där under finns en kryssruta för Featured).

      • Mia
        says:

        Tack för svaren:-). Det har löst sig.
        En helt annan fråga … Är det någon som vet hur man tar bort/gömmer “My basket” och “checkout” knappen längst upp till höger på temat Artificer och plugin WooCommerce? Det finns ändå “Till kassan” i menyraden och man kan välja det som widget i en sidebar (valfritt) så knappen längst upp till höger på varje sida förvirrar bara ev kunder. Jag har dessutom inte lyckats hitta var jag översätter den trots Code Localization och tutorials så enklast vägen är förmodligen att ta bort eller gömma den;)
        Någon som har tips på info för detta?

        Tack på förhand till alla kloka människor som hjälper oss andra;-)
        /Mia

        • Björn Sennbrink
          says:

          Ta reda på vilken DIV som ramar in “My basket” och addera DIVens namn {display:none} i CSS-filen. Vissa teman från WooThemes har ett fält för små justeringar likt detta. Andra teman har en fil som heter custom.css där egna ändringar läggs till. Alternativet till ovan är att skapa en “child theme” och plocka bort den kod som genererar “My basket”.

  • Stefan Johansson
    says:

    Bra skrivet Björn! Håller med Niklas om att det behövs fler svenska WooCommerce-guider. Vi kommer själva inom kort att lansera en ny webbutik som är byggd på WooCommerce.

    • Björn Sennbrink
      says:

      Vi behöver jobba hårdare med översättningen också. Sitter med över 500 ej översatta fraser i nuvarande versionen. Kör du in WooC idag så är det en skum mix av svenska och engelska i praktiskt taget hela adminsektionen.

Lämna ett svar