WooCommerce-verkkokaupan ulkoasu WordPress-oletusteemalla – onnistuuko?

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.

WordPressin Twenty-Twenty Two -oletusteema

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.

WooCommercen Kauppa-sivu, Twenty Twenty-two -ulkoasuteema

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.

WooCommerce Twenty Twenty-two yksittäinen tuote

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.

woocommerce muunnelmatuote twenty twenty-two

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.

Tuotteen lisätiedot woocommerce

Kun tuotteen lisää ostoskoriin, tuote-sivun yläosaan ilmestyy tästä kertova ilmoitus, jonka yhteydessä on lisäksi Näytä ostoskori -painike.

woocommerce tuote lisätty ostoskoriin twenty twenty-two

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.

woocommerce ostoskori twenty twenty-two

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.

woocommerce kassa twenty twenty-two

Tilauksen vahvistamisen jälkeen asiakas ohjataan tilausvahvistussivulle, joka näyttää alla olevan kuvan mukaiselta:

woocommerce tilaus otettu vastaan twenty twenty-two

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.

woocommerce oma tili twenty twenty-two

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

woocommerce-kauppa mobiili twenty twenty-two

Tuote-sivu, mobiili

woocommerce tuote mobiili twenty twenty-two

Ostoskori-sivu, mobiili

woocommerce ostoskori mobiili twenty twenty-two

Kassa-sivu, mobiili

woocommerce kassa mobiili twenty-twenty-two

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ä.

Tilaa Digiopiston blogi

Päivitä osaamistasi jatkuvasti – tilaa Digiopiston blogi. Saat hyödylliset artikkelit jatkossa suoraan sähköpostiisi.

Yhteystietojasi säilytetään ja käytetään sivuston tietosuojaselosteessa kerrotulla tavalla. Voit milloin tahansa perua blogiartikkeleiden tilauksen.

Ota yhteyttä

Lähetä viestisi alla olevalla lomakkeella. Täytäthän ystävällisesti kaikki pyydetyt tiedot.

Tällä lomakkeella ilmoittamiasi yhteystietoja käytetään vain yhteydenottoosi vastaamiseen.