Björn Sennbrink

okt 03 2012

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

Nu är vi framme vid den femte och avslutande delen i vår bloggserie om e-handel med WordPress och WooCommerce. Precis så som funktionerna i WordPress kan utökas, med hjälp av olika tillägg/plugins, så är det även möjligt att installera tillägg i WooCommerce för att få de funktioner som kan saknas.

I denna del får vi tips om ett flertal intressanta tillägg för WooCommerce. Som tidigare så är det WooCommerce och WordPress-konsulten Björn Sennbrink som guidar oss fram. Och precis som tidigare så är det bara att lämna en kommentar om ni har några frågor.

En titt på både officiella och inofficiella plugin/extensions.

Orderadministration: Print Invoices & Delivery Notes är ett tillägg till WooCommerce som lägger till en widget på Order-sidan i WooCommerce och som gör att du kan skriva ut faktura eller följesedel:

På inställningssidan för Print Invoices & Delivery Notes (/wp-admin/admin.php?page=woocommerce_settings&tab=woocommerce-delivery-notes) kan du ladda upp en logotyp, ange adressuppgifter, hänvisa till exempelvis information om returer och även aktivera förhandsgranskning (så att du innan utskriften kan se vad som ska skrivas ut). Det finns även en extension från WooThemes som ger samma funktion som ovan beskrivet: Print Invoices/Packing Lists (35 dollar).

Förbättrat produktsök: Predictive Search (LITE) är ett tillägg som ger din e-butik en sökfunktion för dina produkter. Du aktiverar tillägget och lägger därefter till en widget. Inställningarna för Predictive Search hittar du snyggt integrerat under menyvalet WooCommerce: Inställningar. För att kunna jobba med samtliga inställningar krävs att du köper tilläggets PRO-version.

Predictive Search fungerar som så att när kunden börjar skriva i sökfältet arbetar tillägget i bakgrunden med att finna matchande produkter att visa upp. Funktionen går även att skapa med andra tilläggskombinationer t.ex. Relevanssi och Dave’s WordPress Live Search (realtidssök).

Letar du enbart efter en mycket bättre sökfunktion rekommenderar jag Relevanssi som länge visat sig vara ett tillägg att räkna med. Dave’s WordPress Live Search har dessutom funktioner för att positionera sökresultatrutan som poppar fram.

Jämför produkter: WooCommerce Compare Products PRO (35 dollar) är ett tillägg som baserat på dina produktkategorier och attribut för produkterna skapar en jämförelsefunktion. Kunden använder en widget för att addera produkter och själva jämförelsen visas i ett popupfönster.

För att vi ska ha något att jämföra börjar vi med att skapa en ’Compare Product Feature”, pris till att börja med. Vi kopplar detta till mobilskalskategorin:

Nästa moment gör vi på ”redigera en produkt”-sidan där vi markerar kryssrutan före ’Activate Compare Feature for this Product’ och bestämmer kategorin (mobilskal). Vi klickar på Uppdatera och gör om samma sak med övriga produkter som vi vill ska ingå i jämförelsen:

Nu har vi en ny knapp på produktsidan (utseendet kan justeraas via CSS) och ett klicka på ’Compare this’ placerar produkten i vår widget. Från widgeten öppnas popuprutan som visar vår nyligen skapade jämförelse:

Ovanstående kvicka genomgång av WooCommerce Compare Products PRO är medvetet nedkortad. Det finns tusen och ett plugin som vi kan implementera i vår WooCommerce-installation. Det är när vi är det här läget, när vi har en fungerande e-butik, som det kan läggas tid på testa nya funktioner. Har du följt vår serie vet du att vi inte berör alla med WooCommerce, utan det finns fortfarande saker för dig själv att upptäcka!

Låt kunderna bestämma priset: Name Your Price (20 dollar) är en extension som gör det möjligt att låta kunden själv sätta priset på en produkt. Det finns en integrerad inställningssida och du aktiverar funktionen i fältet Produktdata” på ”redigera/addera en produkt”-sidan:

Tillägget Name Your Price är utvecklat av Kathy Darling som nyligen släppte tillägget Nav Menu Roles (bestäm vem som ska se en viss menyflik), som du kan använda tillsammans med WooCommerce för att dölja/visa menyflikar beroende på om en besökare är inloggad, ej inloggade eller inloggad med en viss användarroll:

Framhäva produkter: WooCommerce har i minst ett par av sina teman en funktion som heter ”Featured Products”, vilket skapar vad som på annonssajter brukar kallas för framhävd placering. För att spetsa till den funktionen kan vi använda en bildväxlare, exempelvis WooSlider.

WooSlider kostar 35 dollar och vill du att produkter från WooCommerce ska kunna inkluderas på ett smidigt sätt köper du till den funktionen för 20 dollar (WooCommerce Product Slideshow). Det är en del pengar men fördelen är att det fungerar tillsammans. WooSlider är dessutom responsive vilket är mycket bra om din e-butik är mobilanpassad.

För att WooSlider ska lira riktigt bra krävs det förmodligen att du redigerar temafilerna. Har du inte alltför stora krav på placering kan du klistra in den shortcode som WooSlider genererar och på det sättet visa bildväxlare där du önskar. Du kan även arbeta med de widgets som kommer med tillägget och i förlängningen även flytta platshållarna för widgets i ditt tema. Det senare faller under temautveckling och är bara något för dig som är en mycket van WordPress-användare eller utvecklare.

Begränsningen med WooSlider som jag ser det är funktionen för att lägga till bilder att visa i slidern. Jag hade gärna sett att det inte fanns en koppling mellan Infoga bild i inlägg/på sida, utan att bildväxlare skapades via ett eget gränssnitt och att det gick att administrera varje bildväxlare lite bättre. Ett tillägg som jag tycker sköter det bra är CCSlider WP (18 dollar på CodeCanyon).

WordPress-tillägget CCSlider WP är ett intressant alternativ om du gillar coola övergångseffekter. CCSlider WP bjuder på både 2D- och 3D-animationer för dig som vill bjuda dina besökare på en häftig upplevelse. Det kanske inte passar alla men då finns det som ovan beskrivet andra alternativ.

Sammanfattning av bloggserien
Fem inlägg om WooCommerce är inte tillräckligt för att berätta om allt som har med e-handel att göra. Det finns alltid en funktion att lyfta fram, en tweak att göra och vi har inte ens berört möjligheterna som finns på temafronten. Det senare prioriterades bort eftersom WooThemes utöver ett bra e-handelsplugin även har ett stort utbud av teman med stöd för WooCommerce.

Första inlägget handlade om installation, grundinställningar, addition och redigering av produkt samt pris. De arbetsmomenten torde de flesta klara av utan större svårigheter. Det andra inlägget blev lite mer avancerat, särskilt när frakten avhandlades. Just detta med frakt är ett område som skulle kunna diskuteras vidare. Svenska e-handlare brottas dagligen med frågan om huruvida ett fast fraktpris är bäst, om ett dynamiskt fraktpris är att föredra eller om fraktkostnaden ska bakas in i priset?

Med det tredje inlägget kom en genomgång av tre betalningsalternativ och detta är ett spännande område under ständig förändring. Mobila betalningar talas det om nu som ett framtidsspår. Klarna har en mobil betalningsfunktion för mobila användare men det är i grund och botten bara en väg till en faktura.

Det fjärde inlägget handlade om logistik och förståelse för kundens upplevelse i butiken, med fokus på arbetsmetoder och funktioner. Särskilt detta med kundnöjdhet är ett fördjupningsämne, där det finns förespråkare som hävdar tvärt emot vad jag skrev i det fjärde inlägget om e-handel på WordPress. Det fjärde inlägget hämtade även inspiration från de lagar som reglerar e-handeln i Sverige.

Detta femte och i bloggserien avslutande inlägg har (förutom den här sammanfattningen) handlat om olika tillägg för användning tillsammans med WooCommerce. Att kunna skriva ut följdesedlar är förmodligen ett måste-ha-tillägg, medan Name Your Price sannolikt passar bättre för väldigt nischade sajter eller för kampanjer. Utbudet är stort och det är upp till dig (eller din WordPress-konsult) att finna rätt uppsättning plugins.

WooCommerce må vara en fork av Jigoshop (läs exempelvis kommentarerna till WPCandy-inlägget från augusti 2011) men för en vanlig användare och framförallt för en e-handlare som spelar det bakomliggande mindre roll – det viktiga är att en e-butik sitter på en stabil plattform, med bra support och med stora utvecklingsmöjligheter!

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

Samtliga inlägg i vår bloggserie om e-handel med WordPress och WooCommerce:

sep 26 2012

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

Det är dags för nästa del i vår lärorika bloggserie om e-handel med WordPress och WooCommerce. Vi har redan lärt oss hur man installerar WooCommerce och lägger till produkter, hur man hanterar frakt och moms samt hur man tar betalt via Paypal, Payson och Klarna.

Nu ska vi lära oss hur orderflödet fungerar, med rabatter, samt hur man får återkommande (trogna) kunder. Som tidigare så är det WordPress och WooCommerce-konsulten Björn Sennbrink som guidar oss igenom detta, med tydliga förklaringar och bilder. Lämna gärna en kommentar här om ni har några frågor eller funderingar kring dagens inlägg.

Detta, den fjärde delen i FS Datas bloggserie om E-handel på WordPress med WooCommerce, handlar om ökad förståelse för kundorderflödet, om rabatter (Dynamic Pricing-tillägget) och avsluta med att tala om främjande av kundlojalitet (eller återkommande kunder).

Vi har i tidigare inlägg fokuserat på inställningar i WooCommerce för att lägga till produkter, prissättning och frakt. Idag börjar vi med att ta ett steg ut ur butiken och kollar på hur du kan arbeta med kundorderflödet för att både bättre förstå vad som händer och för att du ska kunna förmedla det till t.ex. en framtida logistikpartner eller en ny medarbetare.

Logistik är ett brett område och vi har här avgränsat oss till vad som beskrivits i tidigare inlägg. Vi skrapar endast på ytan för att väcka ett intresse och även om detta inte bara handlar om WooCommerce så är logistikens direkta e-handelskoppling en bra anledning till att ta upp detta ämne. Ska du komma igång ordentligt med E-handel på WordPress krävs det mer än att arbeta i digitala gränssnitt.

– Kundorderflödet:

Kundorderflödet är allt som händer från det att kunden kommer till e-butiken, börjar botanisera bland produkterna, fyller sin varukorg, betalar, får orderbekräftelse och leverans – detta är vår avgränsning. Kunderorderflödet som du arbetar med kan börja tidigare t.ex. med SEO och marknadsföring. Flödet kan även fortsätta bortom leveransen och t.ex. inkludera returflöden. Vi håller det enkelt och fokuserar på vad som händer i e-butiken.

Skärmdumpen ovan illustrerar hur en kund (hjärtat symboliserar kunden, för att vi ska älska våra kunder) besöker vår e-butik, gör ett aktivt val att handla, fyller i beställningsformuläret och från lagret går produkten till kunden. Det är ett extremt enkelt flöde men perfekt att börja med.

De tidiga skisserna kan vara mer eller mindre detaljerade. Komplettera skissandet med en numrerad lista för att förklara vad siffrorna betyder. Du kan rent av börja med listan och ha den som mall när du börjar jobba med figurer i exempelvis Powerpoint:

Kundorderflödet ovan beskrivet:
Kund (1) besöker webbplatsen (2). På webbplatsen finns en Webbutik (3). Lagersaldot (4) avgör vad som visas i Webbutiken. Kund tar beslutet (5) att köpa en bok. Kund fyller i och sänder orderformuläret samt betalar (6). Orderformuläret sänds till Företaget för expediering (7a). Pengarna sänds till bank (7b).

Den dubbelriktade pilen mellan webbplatsen (2) och e-butiken (3) är där utifrån att e-butiken kan ses som en fristående del av webbplatsen och att kunden rör sig mellan t.ex. en informationssida och själva butiksfunktionen. Den dubbelriktade pilen mellan lager (4) och butiken (3) symboliserar ett utbyte av information. Ett annat sätt att illustrera ett informationsflöde är att använda en streckad linje, där den fasta linjen symboliserar en förflyttning (eller tillgänglighet).

När vi nu har ett par utkast till illustration av kunderordeflödet kan vi börja tillföra värden och nyckeltal. Vi utgår från skärmdump #2 (ovan) och lägger till det faktum att det finns artiklar i lager. Artiklarna i vår demobutik är mobilskal och dessa passar olika telefonmodeller. Låt säga att vi har tre olika telefonmodeller. Det ger oss ett kundorderflöde som ser ut så här:

Skärmdumpen ovan visar tre underlager (4a, 4b och 4c) som symboliserar de tre artiklarna vi erbjuder våra kunder. På samma sätt kan övriga delar av flödet byggas ut och förfinas. Syftet med flödet är alltså att ge dig som e-handlare en illustration över den verksamhet som du bedriver. Flöden kan även fungera som mall för funktioner i e-butiken och bli hur avancerat som helst (värre än ett makro i Excel).

Flöden kan alltså vara väldigt enkla och endast övergripande beskriva försäljningsprocessen. Flöden kan dock brytas isär, förfinas och förädlas till att täcka in i stort sett allt som din verksamhet består av. Du kan bredda avgränsningen och inkludera allt som sker innan kunden kommer till e-butiken. Du kan göra på samma sätt i nedre delen av flödet, där du lägger på vad som händer när en kund vill returnera en vara, vilka dokument som ska finnas, hur eventuella återbetalning ska se ut med mera med mera.

Det är sannolikt bara ditt eget intresse och din egen tid som begränsar arbetet med att beskriva logistiken i din e-verksamhet. Vill du läsa mer om e-handel och logistik föreslår jag att du börjar med Stefan Winterlens informativa artikel på ämnet e-handel och logistik.

– Dynamic Pricing

Nu kliver vi in i e-butiken igen med nyvunnen kunskap om logistik och tittar närmare på ett intressant utökande tillägg som heter Dynamic Pricing (75 USD). Namnet på tillägget är till viss del vilseledande eftersom det inte handlar om dynamisk prissättning i realtid, utan snarare om att arbeta med regler och villkor för att bestämma pris ut till kund.

Det första exemplet visar på hur du ger kundgruppen ”Kund” tio procent rabatt på alla sina köp. Vi kan låtsas att vi har en shoppingklubb där medlemmarna erhåller ett lägre pris, än vad köp från icke-medlemmar genererar. Vi har alltså vår butik öppen för alla och vi har en prisnedsättning för våra medlemmar.

Se menyvalet ”WooCommerce” till vänster i WordPress-admin och längst ner där hittar du Dynamic Pricing. När du klickat dig in där ska du se följande:

Vi fortsätter med att klicka på fliken ”Roles” och väljer där att aktivera (eng. ”Enable”) rollen Kund, sätter ”Percentage Discount” i rullgardinsmenyn och skriver värdet 10 i fältet längst till höger. Efter ett klick på Spara ändringar har vi nu bestämt att användarrollen Kund ska få 10 procent i rabatt på alla sina köp!

Dynamic Pricing-tillägget har även en funktion där en hel produktkategori kan ges en prisnedsättning och nästa exempel visar på det.

Vi vill att produkten ”Mobilskalet Magenta” från vår demobutik ska säljas i tvåpack. Vi säger att de levereras på det sättet och att vi med detta slipper att bryta emballaget, vilket ger oss en kortare packtid (vi sparar pengar helt enkelt). Vi kan även prognostisera att tämligen få kunder kommer beställa fler än två mobilskal av samma sort och att det gör att fler än fyra st. mobilskal i varukorgen inte behöver generera någon rabatt.

Vi går till ”redigera en produkt”-sidan och scrollar ner till fältet Produktdata (där pris anges). Här finns det nu en ny flik som heter Dynamic Pricing. Här kan vi lägga till en eller flera Pricing Groups med regler (om X, gör Y).

Vi börjar med att addera en prisgrupp och sätter vår första regel som ska ge oss prisnedsättning i form av ett fast pris vid köp av två st. mobilskal. Vi lägger en andra regel som ger oss samma prisminskning vid köp av två eller fyra mobilskal. För att motverka att kunden blir sur kan en mindre prisminskning ske när tre st. skal beställs, låt säga 5 procent:

Dynamic Pricing kan användas för att justera pris på kategori- och produktnivå. Dynamic Pricing kan även användas för prisjusteringar utifrån vilken användarroll som en registrerad kund har. WooCommerce skapar användarrollen Kund och med tillägget Members kan du enkelt lägga till fler roller:

Skärmdumpen ovan visar hur den nya användarrollen Guld-medlem och den av WooCommerce skapade användarrollen Kund får 25 respektive 10 procents rabatt på sina köp.

Dynamic Pricing tillsammans med t.ex. Table Rate Shipping-tillägget öppnar upp för riktigt bra funktionalitet i WooCommerce. Vi kan såklart köra e-butiken i sitt enklaste utförande, koppla på ett par betalningsalternativ och helt ignorera andra funktioner. Jag tror dock att en e-butik som ska fungera att skala upp när volymerna ökar kräver funktioner för att vid t.ex. kampanjer enkelt kunna sätta ned priset. Genom att dessutom kunna arbeta med olika kundkategorier gör att WooCommerce kan vara en säljfunktion på webbplatser där butiksfunktioner inte är det primära innehållet t.ex. hos medlemsorganisationer som vill distribuera internt material.

Som en parantes på ämnet rabatterat pris måste jag även nämna en i WooCommerce medföljande funktion, eller snarare inbäddad funktion. Under inställningar och fliken Integration finns tjänsten ShareYourCart, som tillåter skapande av konto utan att lämna WooCommerce-inställningssidan. ShareYourCart placerar en widget intill varukorgen och om kunden delar sin varukorg på Facebook erhålls en rabattkod. Inmatning av den koden i fältet för kuponger ger automatiskt prisavdrag:

– Kundnöjdhet

Rask vidare nu till det tredje och i det här inlägget avslutande området kundnöjdhet, helhetsintrycket kunden får av köpet i vår e-butik. För dig som vill gräva djupare i definitionen av kundnöjdhet rekommenderas Wikipedia-artikeln. Här fokuserar vi på funktioner i vår butik som syftar till att främja att kunden blir nöjd. Det är inte vetenskapligt fastslaget att nedanstående allena är avgörande, utan precis som med logistiken pekar vi här på saker som kan upplevas positivt.

Enkel kassa: Det ska vara enkelt på gränsen till tråkigt att handla. Varukorgen och kassan ska vara övertydlig och där vi kan ska vi hjälpa kunden att förstå hur allt fungerar. Det står skrivet i Lag (2002:562) om elektronisk handel och andra informationssamhällets tjänster, att ”En tjänsteleverantör skall tillhandahålla lämpliga och effektiva tekniska hjälpmedel som gör det möjligt för en tjänstemottagare att upptäcka och rätta till sina eventuella inmatningsfel innan denne gör en beställning.”

Med ovanstående lagtext i åtanke bör vi göra vad vi kan för att kunden både kan handla rättssäkert (ordvits) och för att förenkla ur ett kundnöjdhetsperspektiv. Ett exempel är minimering av antalet fält som en kund ska fylla i för att beställa. Här finns t.ex. Klarnas funktion för att utifrån personnummer automatiskt hämta adressuppgifter och fylla i dessa i formuläret. Klarnas funktion minskar jobbet för kunden och möter lagtexten genom att hämta adressuppgifter ur folkbokföringen.

Generösa frakt- och returvillkor: Vi måste tjäna pengar på vår verksamhet och vi måste därför inkludera fraktkostnader i priset ut till kund. Vi kan välja att hantera det separat eller så kan vi baka in fraktkostnaden i produktens pris. Det finns inget rättesnöre här utan det är snarare så att du i egenskap av säljare får göra en bedömning av vilket upplägg som är rätt. Själv förespråkar jag en dynamisk fraktprisökningsmodell baserat på relationen mellan en produkts egenskaper och kostnader för emballage samt transportkostnad.

Returer är ett annat område där vi som e-handlare är bundna till ett visst beteende av lagtexter. 14 dagars ångerrätt (med vissa undantag) är lagstadgat och vid eventuella reklamationer bör vi ha en transparent rutin för hantering av detta.

För att främja ökad kundnöjdhet rörande frakt och returer kan vi t.ex. bjuda på fri frakt och fria returer. Men återigen, detta är förenat med försämrade vinstmarginaler om vi inte kan få betalt för dessa bägge delar av köpet på annat håll. Fri frakt som tas igen på högre produktpris kan minska försäljningen då produktpriset i jämförelse med andra butiker är högre. Prisjämförelsesajter finns och särskilt vid försäljning av varor som andra säljer är ett lågt produktpris av stort värde.

När det gäller kostnader för returer säger Konsumentverket att konsumenten ska betala för returfrakten och när varan är åter hos oss ska vi betala kunden vad hon betalat oss tidigare (Distans- och hemförsäljningslag (2005:59)). Här är ett sätt att främja kundnöjdhet att se över möjligheten att bjuda kunden på kostnaden för returfrakten.

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

Samtliga inlägg i vår bloggserie om e-handel med WordPress och WooCommerce:

sep 18 2012

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

En ny vecka betyder en ny del i vår bloggserie om e-handel med WordPress och WooCommerce. Vi har sedan tidigare gått igenom hur man installerar WooCommerce och lägger till produkter samt hur man hanterar frakt och moms. Nu är det dags för en av de trevligaste sakerna med e-handel: att börja ta betalt! 🙂

Dagens inlägg handlar om hur man tar betalt med Paypal, Payson och Klarna. Även denna gång är det WordPress och WooCommerce-konsulten Björn Sennbrink som tydligt och enkelt visar oss hur man går tillväga. Om ni har några frågor kring detta, lämna då gärna en kommentar.

E-handel med WordPress – Paypal, Payson och Klarna i WooCommerce

Det här tredje inlägget i FS Datas bloggserie om WooCommerce handlar om tre olika betalningsalternativ: PayPal, Payson och Klarna.

– Ta betalt med PayPal

Betalningsalternativet PayPal finns med i WooCommerce från början. Du behöver alltså inte köpa ett utökande tillägg (extension) för den här funktionen. Vi kör igång direkt med inställningarna (WooCommerce: Inställningar: Betalningsalternativ + ”PayPal”):

Det enklaste sättet att ta betalt med PayPal är att registrera ett standardkonto och i WooCommerce ange e-postadressen för det kontot i fältet ”PayPal e-postadress” (grön markering i skärmdumpen ovan). Vi gör det, klickar på ”Spara ändringar” och besöker vår demobutik ur ett kundperspektiv. Vi placerar en produkt i varukorgen, går till kassan, anger namn och adress samt klickar på ”Skicka order”. Vi sänds nu till PayPals hemsida där vi uppmanas att antingen logga in eller att betala med kontokort (som inte kräver inloggning):

Om vår kund har ett PayPal-konto sen tidigare kan hon logga in och betala som inloggad. Har hon inte ett PayPal-konto kan hon betala ändå, med konto- eller kreditkort. När betalningen är genomförd ges kunden möjlighet att skriva ut ett kvitto komplett med produktnamn, särredovisad moms och frakt.

En sak som är viktig här är namnet för mottagande PayPal-konto det vill säga ditt konto som säljare. Det skickas ut ett mail till kunden med information om betalningsmottagarens namn, ditt namn. Om du av någon anledning inte vill skylta med ditt personnamn gör du bäst i att skapa ett PayPal-konto för butiken som sådan.

När kunden återvänder till vår e-butik visas en orderbekräftelse och kunden har som sagt fått ett mail med samma uppgifter. Vi som e-handlare kan se den lagda ordern komplett med alla uppgifter. Gå till menyvalet ”WooCommerce: Ordrar” och klicka upp den senaste för att se något i stil med:

WooCommerce bjuder som synes ovan på ett bra gränssnitt för att administrera inkomna ordrar. Det finns t.ex. en funktion för att sända en e-postfaktura till kunden. Det går att lägga till egna kommentarer för ordern, bra om ni är flera som administrerar beställningarna. När du sparar ordern från den här sidan går det automatiskt ut två mail, ett till dig om att ny beställning finns samt ett mail till kunden med meddelande om att ”ordern är slutförd”.

– Ta betalt med Payson

Kunder som väljer att betala med Payson i vår demobutik skickas vid betalning till Paysons hemsida. Payson erbjuder där (på sin sajt) våra kunder möjligheten att betala för produkterna i varukorgen (från vår sajt) med kredit- och kontokort, direktbetalning via bank samt via faktura.

Observera att fakturatjänsten måste ansökas separat och att tjänsten endast gäller fysiska varor, B2C, inom Sverige. Viktigt att notera är även att Payson endast tar betalningar i svenska kronor eller Euros, varför Sverige eller Finland måste anges som Basland (under Generella inställningar i WooCommerce).

Payson Form är en extension som vi köper från WooThemes. Tillägget är utvecklat av Niklas Högefjord på Krokedil AB i Arvika och finns även länkat från Paysons integrationssida. Payson Form kostar 50 dollar och eftersom det är ett tillägg är proceduren samma som för andra tillägg: Ladda ner, packa upp, ladda upp och aktivera.

För att ta betalt med Payson via WooCommerce och modulen för detta måste vi ha ett Payson-företagskonto. När vi blivit godkända hämtar vi Agent ID och MD5-hash från Payson. Dessa bägge värden matar vi in i Payson Form. Vi börjar dock med att gå till WooCommerce-menyn (wp-admin/admin.php?page=woocommerce_settings), där fliken ”Betalningsalternativ” visar oss Payson utöver de andra betalningsalternativen. Vi markerar Payson som standard:

Därefter klickar vi på Paysondirekt i den horisontella menyn och får upp en sida med fält för inmatning av Agent ID och MD5-hash:

När du fyllt i Agent ID och MD5-hash samt epostadressen för Payson-kontot ska det gå att betala med Payson. Gör några testbeställningar för att kontrollera funktionalitet och kundupplevelse. Du kan enkelt kreditera, det vill säga återföra inbetalda belopp när du testat klart.

– Ta betalt med Klarna

Klarnas tjänst har till skillnad från PayPal och Payson en lång bindningstid (kommentera inlägget om du har en annan uppgift rörande detta). För dig som vill testa innan du ingår avtal finns det testkonton att begära ut via http://integration.klarna.com/en/testing/test-account. Alla instruktioner i det här inlägget bygger på ett sådant testkonto.

Vi börjar med att köpa Klarna-modulen för WooCommerce (50 dollar). Vi laddar ner, packar upp och laddar upp till vår webbserver hos FS Data. Vi aktiverar och börjar med inställningarna:

Inställningarna (WooCommerce: Inställningar: Betalningsalternativ) är samma som med Payson. Du markerar radioknappen framför det betalningsalternativ som du vill ska vara förvalt i e-butikens kassa. När du har avtal med Klarna kan detta med förvalt betalningsalternativ vara en regel snarare än en valmöjlighet, där Klarna tar en högre procentuell del av varje transaktion om du inte gör detta val.

När vi nu har markerat Klarna som standard/förvalt ska vi göra lite mer avancerade inställningar. Klicka dig vidare i den horisontella menyraden som listar de olika betalningsalternativen, så att du får upp sidan med Klarna-specifika inställningar:

Vi kontrollerar så att rutan framför ”Aktivera Klarna Konto” är markerad och därefter anger vi EID och Shared Secret (som finns i mailet om beviljat testkonto från Klarna integration). Vi kryssar i rutan längst ner (Aktivera Klarna Test Mode) innan vi startar upp vårt FTP-program:

Gå till mappen ”srv” som ligger under /wp-content/plugins/woocommerce-gateway-klarna/ och ändra filrättigheterna till 777 på den mappen. Gör samma sak med filen som finns i den mappen (pclasses.json) innan du återvänder till WordPress-sidan vi nyss lämnade. Klicka på ”Update the PClass file pclasses.json”. När meddelandet ”The file pclasses.json was sucessfully updated.” visas går vi in på webbservern och sätter tillbaka rättighterna som de var innan, 755 för mappen srv och filen pclasses.json ges filrättigheten 644.

Nu har vi klara med inställningar i WooCommerce för Klarna-modulen och vi ska testa hur betalningsalternativet fungerar i praktiken. Vi besöker vår demobutik, lägger en produkt i varukorgen, klickar oss vidare till kassan och noterar Klarna delbetalning som ett betalningsalternativ intill PayPal och Payson:

Skärmdumpen ovan visar vad kunden ser i vår demobutiks kassa. Förutom Klarna finns de tidigare beskrivna betalningsalternativen PayPal och Payson. Nytt i den här vyn är Klarnas krav på att personnummer ska matas in. Det hänger bl.a. samman med vem som tar kreditrisken vid köpet.

Klarna är av de tre betalningsalternativen som vi gått igenom i detta tredje inlägg om WooCommerce på FS Datas blogg, den mest avancerade tjänsten och kanske även den mest självklara för dig som ska börja eller redan börjat med e-handel. Igenkänningsfaktorn i Sverige är hög och flera personer, både privatpersoner och andra e-handlare, har under tiden för författandet av det här inlägget vittnat om stabilitets- och trygghetskänslorna som är förknippade med Klarnas tjänster.

Möjligheten att få leverans och betala via faktura är en uppskattad funktion. Att som e-handlare dessutom slippa hanteringen av fakturor och att bli av med kreditoron är två saker som ger Klarna en extra push. Men jag rekommderar att du gör ett eget val här, särskilt om du inte vill binda upp dig i ett par år.

Payson och PayPal är de två enklare betalningsalternativen. De har sin användarskara och särskilt Payson torde vara lätt att komma igång med även för dig som inte är så van WordPress-ehandlare. PayPal är enkelt så det förslår och hela tjänsten finns på svenska.

När det gäller kostnader förknippade med dessa tre betalningsalternativ framstår Payson som en bra betalfunktion för dig som precis startat (3kr + 3%). Paypal är bara aningen dyrare än Payson och Klarna sticker ut med en låg procent fast å andra sidan en väldigt lång avtalstid (24 månader till att börja med). Vill du få en bättre förståelse för de olika leverantörerna av betalfunktioner rekommenderar jag att du använder kalkylatorn på http://www.ehandel.se/kortbetalning/ för att utifrån just dina förutsättningar finna den mest fördelaktiga betallösningen.

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

Samtliga inlägg i vår bloggserie om e-handel med WordPress och WooCommerce:

sep 11 2012

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

Dags för nästa del i vår serie om e-handel med WordPress och WooCommerce. Förra veckan gick vi igenom hur man installerar WooCommerce och lägger till produkter. Nu ska vi lära oss hur man hanterar frakt och moms. När hela serien är klar så kommer ni kunna sätta upp en fullständig e-handelslösning på egen hand, med en av de bästa och enklaste systemen på marknaden.

Precis som tidigare är det WordPress och WooCommerce-konsulten Björn Sennbrink som guidar oss, med tydliga förklaringar och bilder. Om ni har några frågor eller funderingar, lämna då gärna en kommentar till detta inlägg.

E-handel med WordPress – Frakt och moms i WooCommerce

Välkommen till del 2 i FS Datas bloggserie om WooCommerce. Det här inlägget kommer att handla om frakt och moms, två komponenter som är nödvändiga att arbeta med om vi ska kunna sälja våra produkter på ett korrekt vis.

Utgångsläget är vår demobutik som skapades i första inlägget om E-handel med WordPress och WooCommerce. Vi har avgränsat oss till att sälja inom Sverige vilket är ett val som påverkar bl.a. frakten. Fortsätt läsa och se hur.

– Nu kör vi!

Processen att lägga till frakt på en beställning kan ske på olika sätt i WooCommerce. Idag väljer vi att skapa en fraktklass där fraktklassen kopplas till en viss typ av produkter, vilket i vårt fall är mobiltelefonskal. Därefter gör vi inställningar i WooCommerce för vad som ska visas i varukorgen och i kassan (check-out).

– Skapa fraktklass och koppla till produkt

Se menyvalet ”Produkter” och därefter ”Shipping Classes”. Gränssnitt här är samma som för när du lägger till kategorier och taggar i WordPress. Vi väljer att skapa fraktklassen ”Mobilskalsfrakt”:

Efter att vi skapat fraktklassen ”Mobilskalsfrakt” går vi till redigeringsläget av den produkt vi la till vår e-butik tidigare. Under det stora inmatningsfältet finns det ett fält som heter ”Produktdata”. Det var här som vi matade in ordinarie pris och reapriset tidigare. Nu klickar vi istället fram fältet ”Frakt” och markerar den nyligen skapade fraktklassen:

Allt som vi gjort nu påverkar dock inte vad som visas i varukorgen. Vår fraktklass finns och den är kopplad till produkten men det krävs att vi gör fler inställningar i WooCommerce för att ett fraktpris ska visas i varukorgen. Fraktklasser är endast en grupperingsfunktion.

– Bestäm pris för fraktklass

Se menyvalet ”WooCommerce” och ”Inställningar”. Välj flikten ”Frakt” (Shipping) och se till så att rutan framför texten ”Aktivera frakt” är ikryssad samt att visningen av fraktkostnadskalkylatorn i varukorgen är deaktiverad:

Om du arbetar med WooCommerce-installation för första gången är ”Fri frakt” aktiverat från början. Se skärmdumpen ovan för vägledning om var du ska klicka för att deaktivera den fria frakten och istället aktivera ”Enhetstaxa” (länkarna är placerade horisontellt till höger om ”Fraktalternativ”).

Aktivera ”Enhetstaxa” (Flat Rate) och se vidare fältet under på samma sida (Titel för metod) där du anger vad som ska visas före fraktpriset i varukorgen. Välj därefter metod för hur frakten ska beräknas, se skärmdumpen nedan för rullgardinsmenyn som ger dig dessa val. Vi väljer ”Per order – ta betalt för frakt för hela ordern tillsammans”.

Sista momentet innan du har fraktpriset synligt i varukorgen är att koppla in fraktklassen. Se längst ner på sidan där du klickar på ”Lägg till fast kostnad” och väljer den tidigare skapade fraktklassen. Ange därefter kostnad och eventuell expeditionsavgift. Lämna fältet expeditionsavgift blankt om du inte vill använda dig av det. Adderad expeditionsavgift läggs ovanpå fraktkostnaden. En fraktkostnad om 30 kr och en expeditionsavgift om 10 kr visas således som ”Frakt 40 kr” i varukorgen. Glöm inte att klicka på Spara ändringar längst ner på sidan!

– Frakt i kassan

Vi har visat ovan hur du lägger till frakten och var du kan göra olika inställningar i WooCommerce för den delen av kundorderflödet. Nu är det bara själva orderläggningen kvar, det vill säga ”Till kassan” (eller ska vi kalla det för utcheckningsprocessen?). Vi börjar med en skärmdump:

”Din order” berättar för kunden vad hon/han/hen lagt i varukorgen och är på väg att beställa. Allt är väldigt tydligt förutom frakten. Texten ”Var vänlig fyll i dina uppgifter här ovanför för att se tillgängliga fraktalternativ” visas istället för ett fraktbelopp?

Förklaringen är att om du sitter med en WooCommerce-installation där du, under fliken ”Generellt” i inställningarna, valt att sälja till alla länder kommer varukorgen att visa fraktkostnaden utan omsvepningar. Om du (som vi) istället valt att sälja till specifika länder (Sverige i vårt fall) kommer fraktpriset att vara dolt fram tills dess att kunden väljer landet Sverige i rullgardinsmenyn ovanför ordersammanställningen (”Din order”).

Ett sätt för att snabbt komma runt den förvirrande formuleringen i kassan rörande frakten är att redigera översättningsfilen. Installera tillägget CodeStyling Localization, aktivera och sök efter ”Please fill in your details above to see available shipping methods” samt översätt det till ”Ange i vilket land du befinner dig för att visa fraktkostnaden” eller liknande.

Detta lilla fulhack kommer att resultera i att kunden i Sverige ser en text med en tydlig uppmaning om vad som krävs för att visa fraktpriset. Det optimala vore dock att fraktpriset visades i kassan utan att kunden behöver ange att hon är i Sverige..

– Moms

En del av köpet är moms och här visar vi hur du gör inställningar i WooCommerce för just det. Processen att inkludera moms liknar processen att addera frakt och vi börjar som tidigare med en skärmdump:

Vi befinner oss alltså i ”Inställningar för WooCommerce” och på menyfliken ”Moms”, där vi har aktiverat ”moms och momsberäkningar” samt valt att visa ”moms/skatt vid kassan”. Nu ska vi lägga till en momssats för momsgruppen Standardmoms.

Standardmoms är den momsgrupp som kommer med WooCommerce från början. Vill vi lägga till ytterligare momsgrupper gör vi det i fältet till höger om ”Ytterligare momsgrupper”. Skärmdumpen nedan visar exempel på det senare där vi adderat momsgrupperna ”Bokmoms” och ”Den tredje momsen” (6 och 12 procent):

Våra nyligen skapade momsgrupper ska nu kopplas till våra produkter. Gå till ”redigera en produkt”-sidan och se fältet ”Produktdata” samt fliken ”Taxes”. Här finner vi en rullgardinsmeny med våra tre tidigare skapade momsgrupper. Utifrån typ av produkt sätter du här rätt momsgrupp och klickar på Uppdatera.

Med momsgrupp skapade och momsgrupper kopplade till våra produkter ska momsen även visas i varukorg såväl som i kassan. Eventuellt, beroende på vilka inställningar som är gjorda för ”Tillåtna länder”, på samma vis som för frakten, kommer momsen att visas i kassan först efter att kunden angett rätt land.

Rekommendationen är du testar olika inställningar för momsen och själv kommer på exakt vilka inställningar som ska göras. Vi kan skriva extremt detaljerade beskrivningar men någon ska orka läsa dem och det finns dessutom ett supportforum hos WooThemes för dig som behöver extra hjälp. Vi hoppas att du trots detta uppskattat det här, andra, inlägget i FS Datas bloggserie om WooCommerce. Nästa inlägg kommer att handla om hur du hanterar betalningar i din e-butik.

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

Samtliga inlägg i vår bloggserie om e-handel med WordPress och WooCommerce:

sep 04 2012

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!