WordPress-julkaisujärjestelmän mukana asennetaan aina oletusulkoasuteema, jonka avulla voi toteuttaa verkkosivuston ulkoasun täysin ilmaiseksi. Useimmat verkkosivuston rakentajat kuitenkin vaihtavat oletusteeman heti kättelyssä hienompaan ja monipuolisemmat säätömahdollisuudet tarjoavaan ulkoasuteemaan tai ostavat niin sanotun “räätälöidyn” ulkoasuteeman ulkopuoliselta palveluntarjoajalta.
Mutta soveltuuko WordPressin oletusulkoasuteema myös WooCommerce-verkkokaupan ulkoasun toteuttamiseen? Jos tavoitteeksi asetetaan WooCommerce-verkkokaupan ulkoasun toteuttaminen maksuttomalla WordPress-oletusulkoasuteemalla ja ilman koodareiden apua, onko tuloksena ruma ja asiakkaan näkökulmasta hankala verkkokauppa? Vai jotain muuta?
WooCommerce ja WordPressiin oletusulkoasuteema ne yhteen soppii – vai miten on?
Asian selvittämiseksi luotiin uusi WordPress-sivusto, jonne asennettiin ensimmäiseksi WooCommerce-verkkokauppalisäosa.
Koska tarkoituksena oli tutkia erityisesti WooCommercen keskeisten sivujen (Kauppa, Ostoskori, Kassa, Oma tili) toimivuutta ja ulkoasua WordPress-oletusulkoasuteemalla toteutettuna, verkkokauppaan ladattiin sivujen testausta varten joitakiin testituotteita.
Sivuston ulkoasuteemaksi asetettiin tämänhetkinen WordPressin oletusulkoasuteema Twenty Twenty-Two.
Ulkoasuteemaan ei tehty minkäänlaisia muutoksia (oma CSS jne.).
Valmistelujen jälkeen päästiin itse asiaan, eli tutkimaan WooCommercen sivuja.
WooCommercen Kauppa-sivu
Asiakkaan ostoprosessi käynnistyy usein Kauppa-sivulta, jolla esitellään verkkokaupan tuotteet.
WooCommercen Kauppa-sivu näytti Twenty Twenty Two -ulkoasuteeman avulla toteutettuna alla olevan kuvan mukaiselta.
HUOM: Kuvassa näkyy vain ylimmäinen tuoterivi – tuoterivejä oli sivulla neljä, eli yhdellä sivulla näkyy 12 tuotetta.
Tuotteista sivulla näkyy kuva, sen alla tuotteen nimi ja hinta sekä Lisää ostoskoriin -painike.
Alennuksessa olevien tuotteiden kuvan oikeassa ylänurkassa on Ale-merkki, ja tuotteesta näytetään sekä normaalihinta että tarjoushinta.
Yksittäinen tuote
Kauppa-sivulta pääsee katsomaan yksittäistä tuotetta klikkaamalla joko tuotekuvaa tai tuotteen nimeä kuvan alla.
Alla on yhden esimerkkituotteen oma sivu.
Tuotteesta näytetään iso tuotekuva, jonka oikealla puolella näkyvät tuotteen perustiedot (nimi, hinta ja lyhyt tuotekuvaus).
Tuotteen tilausta varten on lisäksi kappalemäärän valinta ja Lisää ostoskoriin -painike.
Seuraavassa kuvassa näkyvä tuote on niin sanottu muunnelmatuote, jolloin tuotetiedoissa näkyvät myös tuotteen eri versiot (muunnelmat), tässä tapauksessa väri- ja kokovaihtoehdot.
Ison tuotekuvan alapuolella näkyvät tuotteen eri muunnelmien pikkukuvat.
Asiakas voi valita haluamansa väri/koko -yhdistelmän pudotusvalikoiden avulla. Kun muunnelma on valittu, sen tuotekuva päivittyy ison tuotekuvan paikalle.
Tuotesivun alaosassa näkyvät omilla välilehdillään tuotteen lisätiedot (pidempi tuotekuvaus), lisätiedot sekä tuotteesta tehdyt arviot.
Niiden alapuolella näkyy vielä suositeltuja muita tuotteita.
Kun tuotteen lisää ostoskoriin, tuote-sivun yläosaan ilmestyy tästä kertova ilmoitus, jonka yhteydessä on lisäksi Näytä ostoskori -painike.
Klikkaamalla Näytä ostoskori -painiketta asiakas voi siirtyä katsomaan ostoskoriaan.
Ostoskori-sivu
Ostoskori-sivu on asettelultaan yksipalstainen.
Ostoskoriin lisätyistä tuotteista näytetään pieni tuotekuva, tuotteen nimi, hinta, ostoskorissa oleva kpl-määrä, sekä ostoskorissa olevien tuotteiden yhteishinta.
Tuotteen määrä -sarakkeessa ostoskorissa olevien tuotteiden lukumäärää voi muuttaa.
Tuoterivin voi poistaa kokonaan painamalla äärimmäisenä vasemmalla näkyvää X-merkkiä.
Muutosten jälkeen ostoskorin voi päivittää painamalla tuotteiden alapuolella oikealla näkyvää Päivitä ostoskori -painiketta.
Tuotteiden alapuolella vasemmalla näkyy kenttä alennuskoodia varten. Alennuskoodin voi käyttää syöttämällä ensin koodin ja painamalla sen jälkeen Käytä kuponki -painiketta.
Alimmaisena ostoskori-sivulla näkyy vielä yhteenveto ostoskorin arvosta ja Siirry kassalle -painike.
Kassa-sivu
Kassa-sivu on kaksipalstainen, vasemmalla asiakkaan tiedot, oikealla tilauksen tiedot ja maksutavan valinta.
Tilauksen vahvistamisen jälkeen asiakas ohjataan tilausvahvistussivulle, joka näyttää alla olevan kuvan mukaiselta:
Oma tili -sivu
Jos asiakas on luonut verkkokaupan asiakastilin, hän voi kirjautua tililleen ja esimerkiksi tarkastella aiempia tilauksiaan.
Kirjautumisen jälkeen avautuva Oma tili -sivu näyttää alla olevan kuvan mukaiselta.
Toimiiko mobiilissa?
Monien verkkokauppojen asiakaskunta hoitaa ostoksensa mieluiten puhelimella, joten hyvään myyntiin tähtäävän verkkokaupan on oltava käyttäjäystävällinen myös mobiililaitteilla asioiville.
Jotta tämäkin asia tulisi selväksi, kaupan sivuja käytiin läpi myös matkapuhelimella.
Alla kuvat keskeisten sivujen mobiilinäkymistä.
Kauppa-sivu, mobiili
Tuote-sivu, mobiili
Ostoskori-sivu, mobiili
Kassa-sivu, mobiili
Kaikki sivut näkyivät puhelimen näytöllä oikean kokoisina ja sivujen käytettävyys oli hyvä.
Johtopäätös
Tämän testin perusteella WordPressin oletusteema (tässä tapauksessa Twenty Twenty-Two) vaikuttaa toimivan oikein hyvin WooCommerce-verkkokaupan yhteydessä.
Sivut toimivat teknisesti sujuvasti ja yleiset käytettävyyteen vaikuttavat tekijät (tekstin luettavuus, painikkeet jne.) ovat hyvällä mallilla. Tämä on hyvä tieto, sillä verkkokaupassa asiakkaille helposti ymmärrettävät ja suoraviivaiset sivut ovat myynnin kannalta aina parempi vaihtoehto kuin persoonalliset ja eksoottisia navigointi- ym. ratkaisuja sisältävät viritykset.
Sivustolle ei tehty minkäänlaisia tyylimuokkauksia testiä varten, esimerkiksi minkäänlaista tiettyä brändi-ilmettä ei pyritty luomaan. Värien, fonttien ja muiden tyylien osalta pitäydyttiin teeman oletusarvoissa.
Tämän seurauksena kaupan sivut ovat pelkistettyjä ja varmasti jonkun mielestä tylsän näköisiä.
Kaupan ilmettä saa kuitenkin muutettua varsin pienillä asioilla. Pelkästään hyvien tuotekuvien lisääminen testikaupan piirroskuvien tilalle muuttaa koko kaupan ilmettä merkittävästi.
Oman verkkokaupan avaamista suunnittelevan on hyvä tietää myös se, että WordPressin oletusulkoasuteemoja voi halutessaan mukauttaa sekä tyylien että asettelumallien osalta, joten mitään pakkoa ei ole julkaista omaa kauppaa täsmälleen tämän artikkelin kuvissa esimerkkinä käytetyn testikaupan näköisenä.
Voiko WooCommerce-verkkokaupassa käyttää WordPressin oletusteemaa?
Mitään sellaista ei tässä testissä tullut vastaan, jonka perusteella voisi suoralta kädeltä tyrmätä ajatuksen verkkokaupan ulkoasun toteuttamisesta näin yksinkertaisella ratkaisulla. Yksinkertainen on usein kaunista, ja tässä tapauksessa myös kustannustehokasta.
Etenkin verkkokaupan aloittamisvaiheessa, kun näyttö tuotteiden kaupallisesta menestyksestä on vielä saamatta, on parempi käyttää rahaa johonkin muuhun kuin verkkokaupan ulkoasuteemaan.
Jos tuotteet ovat kunnossa ja markkinointiin voidaan panostaa kävijöiden saamiseksi, myyntiä tulee todennäköisemmin kuin siinä tilanteessa, jossa kauppa on ulkoisesti kaunis mutta kukaan ei sitä löydä.