Anda di halaman 1dari 326

Cara membuat toko online menggunakan

WooCommerce (Tahap Satu)


1. Install template Mytile dari WooThemes
Silahkan anda download terlebih dahulu templatenya di sini . Kemudian install template tersebut dan
aktifkan segera.
Cara install template wordpress
Setelah anda aktifkan template tersebut maka anda akan melihat halaman seperti gambar dibawah ini.

Dan ika anda lihat toko online anda sekarang ini maka akan terlihat seperti berikut ini.
!. Setting template Mytile " #ogo Dan $a%i&on '
(ntuk melakukan setting dasar template ini kita tidak perlu kemana ) mana dan angan klik ke halaman
lainnya* fokus saa terlebih dahulu di halaman ini. #akukan setting dasar berikut +
Theme Stylesheet ini untuk merubah skin dari template Mystile tersebut* ada banyak pilihan
disana ada bisa men&oba ) &oba skin apa yang kira ,kira anda sukai.
Custom logo adalah untuk mengganti logo untuk toko online kita. " uk. !-- . 1-- p. '
Custom $a%i&on " uk. 1/ . 1/ p. '
Cara mengganti logonya dengan logo kita sendiri adalah sbb +
Klik tombol (pload pada Custom #ogo
Setelah itu anda akan melihat halaman seperti dibawah. Klik Sele&t $iles
Cari lokasi logo anda kemudian pilih logo anda dan dan klik open
Setelah proses ipload logo selesai maka anda akan melihat halaman seperti pada gambar . 0ilih
$ull Si1e dan kemudian klik tombol (se this image

#ogo anda akan terlihat seperti gambar berikut * kemudian hilangkan tanda &entang pada baris
Te.t line
#anutkan dengan mengupload $a%i&on " uk. 1/ . 1/ p. ' dalam bentuk png file.
#akukan hal yang sama seperti mengupload logo diatas. Setelah selesai maka selanutnya kita
simpan pekeraan kita diatas dengan mengeklik tombol Sa%e 2ll Changes
#ihat toko online anda maka disana sudah terpasang logo beserta fa%i&onnya.
(ntuk settingan yang lain akan kita bahas pada pembahasan selanutnya
3. Install plugin WooCommerce dan YITH magnifier
Download WooCommer&e 0lugins di sini
Setelah anda download* install plugin tersebut kemudian aktifkan. #ihat artikelCara install
plugin di Word0ress ika anda belum tau &aranya. Setelah itu langsung aktifkan plugin tersebut.
Setelah anda aktifkan maka anda akan melihat halaman seperti pada gambar berikut. Kemudian
klik tombol Install WooCommer&e 0ages.
Setelah anda aktifkan maka selanutnya kita akan menginstall sebuah plugins lagi kemudian
langsung anda aktifkan plugin tersebut* nama pluginnya 3IT4 WooCommer&e 5oom Magnifier
Kegunaan dari plugin ini adalah memberikan efek 5oom pada image produk toko online kita* adi
ketika kursor mouse diarahkan diatas image produk yang kita ual maka plugin tersebut akan segera
bekera sebagaimana fungsinya. 2nda bisa mendownload plugin tersebut di sini
2gar lebih lebih mengerti maksud dari efek 5oom tersebut maka sebaiknya anda lihat demonya disini
6imana 7 lumayan keren bukan 7 untuk ukuran sebuah plugin gratisan maka 3IT4 merupakan solusi
yang terbaik untuk kita pakai guna memper&antik toko online kita dan terlihat lebih profesional.
Sementara sampai disini dulu tutorial mengenai &ara membuat toko online menggunakan
WooCommer&e tahap pertama ini. 8anti kita akan melanutkannya lagi dengan tahapan kedua dan
seterusnya. Semoga anda bisa memahami tutorial mudah diatas tanpa ada kendala yang berarti.
Cara membuat toko online menggunakan WooCommerce (Tahap ua)
Cara mensetting YITH !agnifier
Klik 0lugins
Klik Installed 0lugins
Klik Settings pada 3IT4 Magnifier
0ada posisi 6eneral settings nya* &entanglah 9nable 3IT4 Magnifier dan$or&ing 5oom Image
Si1es
Kemudian lihat pada bagian Magnifier Settings. #akukan persis seperti gambar berikut
#ihat lagi kebawahnya pada bagian Slider Settings* lakukan lagi persis seperti gambar dibawah in
dan diakhiri dengan menyimpan pekeraan kita dengan mengklik tombol
:ika kita lihat dari awal maka pekeraan kita diatas langkahnya seperti gambar dibawah ini . (ntuk
memperbesarnya klik kanan pada gambar kemudian klik ;iew image
Cukup sekian dulu tutorial yang kedua ini* pada kesempatan mendatang kita akan melanutkan dengan
tutorial yang ketiga dan seterusnya. Tetap semangat dalam proses belaar ini dan yakinlah kepada diri
anda bahwasanya anda mampu dan bisa membuat toko online anda dengan baik dan benar.
Cara membuat toko online menggunakan
WooCommerce (Tahap Tiga)
Cara Mensetting WooCommer&e
(ntuk melakukan setting dasar WooCommer&e ini maka anda bisa langsung menuu
WooCommer&e < Settings . Setelah terbuka halaman settings tersebut maka anda akan melihat 1-
Tabs yang harus kita setting disana +
1. 6eneral
!. Catalog
=. 0ages
>. In%entory
?. Ta.
/. Shipping
@. 0ayment 6ateway
A. 9mails
B. Integration
1-. Magnifier " Sudah kita Setting 0ada Tahap Dua '

Cara mensetting 6eneral
2da > bagian pada tab 6eneral ini yang harus kita pahami &ara mensettingnya.
Setting pada "eneral #ptions
Case #o&ation D 0ilih lokasi anda saat ini atau lokasi toko online anda. Dalam &ontoh ini
karena lokasi saya berada di Eiau maka saya pilih Indonesia ) Eiau
Curren&y D :ika target anda adalah &ustomer dari Indonesia maka pilih Indonesia Eupiah
"Ep' namun ika targetnya adalah International maka pilih Dollar
2llowed Countries D Se&ara default anda akan melihat 2ll Countries disana. Karena target
yang kita bidik disini adalah orang Indonesia maka kita pilih Spe&ifi& Countries dan kemudian
akan mun&ul pilihan dibawahnya
Spe&ifi& Countries D Cari negara Indonesia
Store 8oti&e D :ika ini anda &entang maka akan keluar Sti&ky Car diatas toko online anda.
6unanya untuk memberitahu kepada orang bahwasanya toko ini hanya untuk Demo atau
nantinya bisa uga anda pakai untuk memberikan pesan &epat ke &ustomer anda apabila ada
promo diskon* penawaran khusus atau Kupon Code
2gar lebih elas silahkan perhatikan gambar dibawah ini


Setting $ada Cart% Checkout dan &ccounts
Coupons D Centang ini ika anda ingin menggunakan fasilitas kupon belana untuk toko
online anda ika tidak ingin memakai kupon maka tidak perlu anda &entang.
Che&kout D ada = opsi di sini* berikut penelasannya
, 9nable 6uest Che&kout D Centang ini ika anda mengiinkan orang berbelana di toko online anda
tanpa melakukan registrasi terlebih dahulu. Misalnya saya berkunung ke toko online anda dan saya
ingin membeli produk yang anda ual tapi saya males untuk mendaftar* karena anda men&entang
opsi ini maka saya masih bisa berbelana di toko online anda tanpa harus registrasi terlebih dahulu.
, 9nable &ustomer note field on Che&kout D :ika anda &entang ini maka ketika &ustomer anda akan
melakukan Che&kout mereka bisa menambahkan pesan singkat kepada anda sebagai pemilik toko
online. Misalnya isi pesannya + F tolong sms kalau barang sudah dikirim ya G. 0osisi note field
tersebut akan terlihat di halaman Che&kout seperti gambar dibawah ini.
, $or&e Se&ure Che&kout D Centang ini ika anda mempunyai atau membeli atau menggunakan
fasilitas SS# untuk toko online anda "https' namun karena kita akan menggunakan dire&t transfer
maka anda tidak perlu men&entang ini dan tidak perlu membeli SS#
Eegistration D Centang saa semua pilihan disitu
Customer 2&&ount D Centang pilihan pertama dan ke tiga* untuk yang kedua angan
di&entang. 6unanya tidak di&entang adalah ika &ustomer anda membuat akun ditoko online
anda dan dia sudah mengumpulkan barang yang akan dibeli ditoko online anda namun belum
akan membeli pada saat itu uga maka ketika mereka kembali login ke toko online anda
barang yang sudah mereka ren&ana beli tidak hilang dan tidak perlu men&ari lagi.
Setti
ng pada St'le &nd Scripts
Centang saa semuanya

Setting pada o(nloadable $roducts
(ntuk yang ini tidak perlu ada setting . 8amun ika anda berualan produk digital seperti
ebook* software* template dll maka anda perlu mensetting ini
:ika kita lihat se&ara keseluruhan maka urut ) urutannya adalah seperti gambar berikut ini.
Sampai disini dulu penelasan &ara membuat toko online menggunakan WooCommer&e tahap tiga.
Cara membuat toko online menggunakan
WooCommerce (Tahap )mpat)
Cara Mensettng Cataog
Berikut cara mensetting bagian katalognya, perhatikan gambar berikut dan lakukan hal
yang sama seperti yang kami lakukan.
1. Pastkan anda memh tab Cataog
2. Defaut Product Sortng = Ph Defaut sortng
3. Shop Page Dspay = Ph Show Both
4. Defaut Category Dspay = Ph Show products
5. Add to Cart = Centang pada enabe A|AX add to cart buttons on archves
6. Product Feds = Centang semuanya
7. Weght unt = Ph Kg
8. Dmenton unt = Ph Cm
9. Product ratngs = Centang semuanya
10. Currency Poston = Left
11. Thousand separator = Gant dengan . ( Ttk )
12. Decma separator = Gantn dengan , ( Koma )
13. Trang Zeros = Pastkan anda mencentang Remove zeros
14. Image Optons = Centang semua
15. Kk tombo Save Changes

Cara Mensettng Pages
Pada tab pages ini anda tidak perlu melakukan apa -apa, cukup anda ketahui
bahwasanya ketika anda sudah membuat static page yang berisikan Peraturan berbelanja
di toko online anda mana nantinya anda bisa menaruh pada Term Page ID.
Saat ini kami belum membuat static page mengenai peraturan berbelanja maka kami
akan mengkosongkan ini terlebih dahulu. amun jika anda ingin membuatnya sekarang
maka setelah static page anda ter-publish anda bisa memilihnya disitu dan kemudian klik
tombol Sa!e "hanges.
#ntuk membuat Static page anda bisa memilih Pages $ %dd ew . Beri judul Peraturan
Belanja & Tata "ara Berbelanja & apa saja terserah anda. antinya judul tersebut akan
muncul di pilihan Term Page ID.
Cara Mensettng Inventory
Pada tabs In!entory ini kita akan setting agar customer tau ketersediaan stock barang
yang kita jual kepada customer kita. Tujuannya jelas agar customer yakin produk yang
akan mereka beli stoknya ada, tinggal sedikit atau sedang kosong.
1. Pastkan anda berada pada tab Inventory
2. Manage Stock = Centang enabe Stock Management. Berguna untuk
menampkan ops ketersedaan stok barang yang kta |ua pada customer
3. Notcatons = Centang kedua ops yang ada
4. Notcaton Recpent = Masukkan / ketk ema anda dsana , gunanya
untuk menerma pembertahuan |ka ada order
5. Low Stock Threshod = 2
6. Out Oh Stock Threshod = 0
7. Stock Dspay Format = Aways Show Stock
8. Kk Save Changes
#ntuk tahap keempat ini cukup sekian dulu, pada kesempatan mendatang kita akan
melanjutkan dengan tahapan berikutnya.
Cara membuat toko online menggunakan
WooCommerce (Tahap Lima)
Cara mensettng tab Tax
'psi Ta( atau pajak ini sebetulnya tidak begitu perlu untuk pemilik online yang masih
pemula dan belum beromset besar. )adi untuk bagian Ta( ini silahkan anda lewati saja
tidak perlu anda setting apapun.
Cara mensettng tab Shppng
Pada tab shipping merupakan tempat untuk mengakti*kan biaya pengiriman atau ongkos
kirim pada produk yang kita jual di toko online kita.
#ntuk mengakti*kan *itur ongkos kirim ini silahkan anda melakukan hal berikut +
1. Kk tab Shppng
2. Pastkan anda berada pada Shppng optons
3. Shppng Cacuatons = Centang Enabe shppng dan
4. Centang |uga Enabe the shppng cacuator
5. Shppng method dspay = Rado buttons
6. Shppng Destnaton = Shp to bng address by defaut
7. Pada shppng methods barkan sa|a terebh dahuu apa adanya
8. Kk tombo Save Changes
Setelah anda sa!e maka sekarang kita *okus ke bagian Shipping ,ethods, secara de*ault
maka -ree Shipping &'ngkos kirim gratis akan akti* di toko online anda. .ihat gambar
dibawah agar anda mengerti maksu kami tersebut
Selanjutnya kita akan menonakti*kan metode pengiriman gratis ini, caranya sebagai
berikut +
1. Kk Free Shppng
2. Enabe/Dsabe = Hangkan tanda centang yang ada dsana
3. Kk tombo Save Changes
Selanjutnya kita akan mengakti*kan salah satu metode pengiriman yakni -lat /ate, jadi
pengiriman dengan tujuan kemana saja tari*nya sama. Ini contoh saja, jika anda ingin
mengakti*kan tari* yang lain 0 misalnya untuk pengiriman keluar negeri atau keluar pulau 1
disana masih ada pilihan yang bisa anda akti*kan juga.
1. Kk Fat Rate
2. Enabe/Dsabe = Centang Enabe ths shppng method
3. Avaabty = Specc Countres
4. Ph Indonesa
5. Tax status = Ph None
6. Cost per Order = Masukkan tarf ongkos krmnya dstu ( contoh :
20000 ) penusan angka tdak usah paka ttk.
7. Kk tombo Save Changes
antinya jika dilihat pada halaman "heckout akan terlihat seperti pada gambar berikut
Semoga anda tidak mengalami kesulitan dalam menerapkan langkah kelima ini.
Cara membuat toko online menggunakan
WooCommerce (Tahap Enam)
Pada tahap ke enam ini cara membuat toko online dengan 2oo"ommerce akan
menjelaskan tentang bagaimana langkah selanjutnya dalam mensetting plugin
2oo"ommerce melalui dashboard toko online wordpress anda.
3arap diperhatikan dengan seksama dan juga dipahami agar anda tidak kebingungan di
kemudian hari.
%da 4 tab lagi yang belum kita setting pada tahap sebelumnya +
1. Payment Gateways
2. Ema
3. Integraton
#ntuk tahap ke enam ini kita akan melakukan setting pada Payment 5ateways saja
terlebih dahulu. #ntuk 6mail dan Integration akan kami bahas pada tahap selanjutnya.
Cara Mensettng Payment Gateways
#ntuk payment gateways ini karena kita *okus untuk membuat toko online dengan target
cutomer dari Indonesia maka kita hanya akan menggunakan sistem pembayaran Direct
Bank Transfer saja atau pembayaran !ia trans*er bank.
7etika kita buka tab Payment 5ateways maka secara de*ault anda akan melihat halaman
seperti dibawah ini
%da 8 sistem pembayaran yang akti* saat ini yakni +
Drect Bank Transfer
Cheque Payment
7arena kita hanya akan memakai sistem Direct Bank Trans*er maka kita akan
menonakti*kan sistem pembayaran melalui "he9ue. #ntuk menonakti*kan "he9ue
Payment silahkan ikuti langkah berikut ini +
1. Kk Cheque
2. Hangkan tanda centang
3. Kk Save Changes
Setelah kita hilangkan sistem pembayaran melalui che9ue maka kita akan
melanjutkannya mengedit sistem pembayaran !ia trans*er yang kita akan pergunakan.
7ita akan memasukkan in*ormasi /ekening #tama yang akan kita jadikan tempat tujuan
trans*er uang dari customer kita. )ika anda mempunyai banyak /ekening Bank maka
anda tidak melakukan hal ini juga tidak masalah. Dengan kata lain anda bisa melakukan
hal ini namun anda juga tidak perlu melakukannya 0 tidak wajib 1
1. Kk BACS
2. Tte = Gant tusan Drect Bank Transfer dengan Pembayaran Via
Transfer
3. Cutomer Message = Gant dengan pesan daam bahasa
Indonesa. Contoh :Mohon akukan pembayaran meau transfer ke
rekenng BCA kam segera seteah anda meakukan order. Pengrman
barang yang anda pesan akan kam akukan seteah uang yang anda
transfer teah kam terma dan kam verkas. |ka anda tdak mempunya
rekenng bank sean bank BCA maka ada bsa mentransfer uang
pembayaran tersebut ke rekenng bank kam yang annya ( Lhat haaman
Cara Berbean|a )
4. Account Name = Is dengan nama pemk rek yang akan anda
pergunakan
5. Account Number = Is dengan no rekenng anda
6. Bank Name = Is nama bank anda , daam contoh n kam menggunakan
BCA
7. Kk Save Changes
7ira : kira setelah anda edit akan terlihat seperti pada gambar dibawah
)ika sudah diganti maka ketika customer anda akan melakukan order, mereka akan
melihat pesan yang sudah kita buat diatas seperti gambar berikut pada saat melakukan
proses checkout.
Setelah customer anda mengklik Tombol Place 'rder mereka selanjutnya akan melihat
in*ormasi rek B"% yang sudah kita masukkan diatas.
Proses setting tab Payment 5ateways ini sudah selesai. Semoga tutorial ini bisa
berman*aat bagi anda.
Cara membuat toko online menggunakan
WooCommerce (Tahap Tujuh)
"ara membuat toko online pada tahap tujuh ini akan membahas mengenai cara
mensetting plugin woocommerce pada Tabs 6mail.
Tidak terlalu sulit namun yang terpenting disini anda mengerti dan memahami cara
mengeditnya dan memahami alur kerjanya.
.angsung saja kita mulai dengan mensetting dari yang paling awal yakni pada halaman
6mail 'ptions. .ebih lengkapnya silahkan simak tutorial berikut ini
Cara Mensettng Tab Emas
Settng pada Ema optons
1. Kk Emas
2. Pastkan anda pada poss Ema Optons ( Secara Defaut akan angsung
berada pada poss n )
3. "From" Name = Tus Nama Toko Onne Anda ( Msa : Woo Store )
4. "From" Ema Address = Tus Aamat Ema anda yang nantnya akan
berguna untuk : Menerma ema pembertahuan kaau ada orderan dar
customer, Sebaga ema Sender pembertahuan ke customer ketka
mereka meakukan order. Untuk ema n sebaknya anda menggunakan
ema dar doman anda ( Contoh : no-repy@doman-anda.com / customer-
servce@doman-anda.com )
5. Header Image = Anda bsa memasukkan nk ogo toko onne anda
dsn. Nantnya semua ema bak tu pembertahuan ke anda sendr dan
customer anda ogo tersebut akan men|ad ogo tempate ema tersebut.
6. Ema Footer Text = tus sesua dengan apa yang anda ngnkan.
( Contohnya anda bsa menus Nama Toko Onne anda beserta sogan dar
toko onne anda dsana )
7. Pada bagan n anda bsa merubah warna tampan tempate ema toko
onne anda
8. Kk Tombo Save Changes

)ika anda tidak melakukan edit pada langkah no ; dan no < maka yang terjadi jika
misalnya ada customer anda melakukan order di Toko 'nline anda yang terjadi adalah
sebagai berikut +

Seller :
Sebagai pemilik Toko 'nline tersebut anda akan mendapatkan email seperti berikut ini


Customer :
Dan customer anda akan menerima email seperti dibawah ini

Settng pada New Order
Ini untuk email pemberitahuan ke Pemilik Toko jika ada orderan dari customer. #ntuk
mendapatkan email pemberitahuan tersebut maka yang perlu anda lakukan adalah
sebagai berikut +
1. Pastkan anda berada pada poss Tabs Emas
2. Kk New Order
3. Enabe/Dsabe = Centang Enabe ths ema notcaton
4. Kk tombo Save Changes
Set
elah anda klik tombol sa!e changes maka jika ada orderan dari orang atau customer toko
online anda maka anda akan di beritahu melalui email yang sudah anda isi pada 6mail
'ptions no.= diatas

Settng pada Processng Order
Ini untuk email pemberitahuan ke "ustomer setelah mereka sukses melakukan order di
Toko 'nline kita namun belum melakukan trans*er pembayaran. #ntuk bisa mengirimkan
email pemberitahuan tersebut maka yang perlu anda lakukan adalah sebagai berikut +
1. Pastkan anda mash pada haaman Tab Emas
2. Kk Processng Order
3. Enabe/Dsabe = Centang Enabe ths ema notcaton
4. Kk tombo Save Changes
Setelah anda klik tombol sa!e changes maka jika ada customer yang melakukan order di
toko online kita, secara otomatis setelah proses order mereka sukses maka email
pemberitahuan akan terkirim ke alamat email customer yang melakukan order.

Settng pada Competed Order
Pada bagian "omplete 'rder ini berguna untuk mengirimkan email pemberitahuan ke
pembeli bahwa pembayaran mereka sudah di terima & di!eri*ikasi oleh kita bahwa trans*er
yang mereka lakukan sudah di terima dan barang siap di kirim. 0 anda juga harus
menjelaskan hal ini kepada customer anda di halaman cara berbelanja di toko online anda
1
#ntuk bisa mengirimkan email pemberitahuan tersebut maka yang perlu anda lakukan
adalah sebagai berikut +
1. Pastkan anda mash d haaman Tab Emas
2. Kk Competed Order
3. Enabe / Dsabe = Centang Enabe ths ema notcaton
4. Kk Tombo Save Changes
Settng pada Customer Invoce,Costumer Note,Reset Password dan |uga
New Account
.akukan hal yang sama untuk "ustomer In!oice, "ustomer ote, /eset Password dan
juga ew %ccount yakni centang pada 6nable this email noti*ication dan jangan lupa klik
tombol Sa!e "hanges.
Proses mensetting tab 6mails sudah selesai. #ntuk langkah berikutkan akan kami
sampaikan pada kesempatan mendatang. Selalu selalu kunjungi blog ini secara reguler
untuk mengetahui tutorial selanjutnya.
Cara membuat toko online menggunakan
WooCommerce (Tahap Delapan)
Pada tahap delapan ini kita akan belajar atau mensetting plugin 2oo"ommerce pada tab
Integration. Pada bagian ini ada tiga bagian yang perlu kita kerjakan disini yakni +
Googe Anaytcs
Share Ths
dan Share Your Cart

Sebenarnya ketiga hal diatas bisa anda lakukan setelah semua product sudah terposting
di toko online anda atau dengan kata lain ketiga hal tersebut merupakan langkah terakhir
yang dilakukan sebelum anda melaunching toko online anda.

Cara settng pada Googe Anaytcs
1. Kk Tabs Integraton
2. Ph Googe Anaytcs ( secara defaut akan angsung terbuka )
3. Masukkan ID Googe Anaytcs Anda ( anda harus mendaftar atau
membuat akun GA untuk Toko Onne Anda )
4. Centang ketga ops tersebut ( Trackng Code )
5. Kk Tombo Save Changes
Cara settng pada Share Ths
1. Kk Tab Integraton
2. Ph Share Ths
3. Masukkan ID Share Ths Pubsher Anda ( Daftar Akun Share Ths D Sn )
4. Kk Tombo Save Changes
C
ara settng pada Share Your Cart
1. Kk Tab Integraton
2. Ph Share Your Cart
3. Buat Akun Share Your Cart Untuk Toko Onne Anda
4. Kk Tombo Enabe pada bagan API Status ( Secara defaut beum
daktfkan atau mash daam konds dsabe )
5. Masukkan ID Share Your Cart Anda
6. Masukkan App Key Akun Share Your Cart Anda
7. Kk Tombo Save Changes
%khi
rnya setting pada plugin 2oo"ommerce ini sudah selesai semua, pada tahapan
mendatang kami akan melanjutkan dengan langkah : langkah lainnya.
Selalu kunjungi blog kami secara reguler untuk mendapatkan upadate terbaru mengenai
cara membuat toko online menggunakan 2oo"ommerce maupun artikel menarik kami
lainnya.
Cara membuat toko online menggunakan
WooCommerce (Tahap Sembilan)
"ara membuat toko online menggunakan 2oo"ommerce tahap sembilan ini akan
membahas mengenai cara memposting produk di toko online kita. Pada penjelasan
posting produk ini kami akan mencoba menjelaskan sedetail mungkin agar anda mengerti
dan paham maksud dan tujuan dari masing : masing langkah yang kami berikan.
%da beberapa teknik atau metode yang bisa kita pakai dalam 2oo"ommerce ini. ,ari kita
mulai dari yang paling mudah terlebih dahulu.
anti anda bisa menyesuaikan dengan kebutuhan toko online anda dan juga selera anda.

Cara Postng Product WooCommerce
Silahkan anda buka halaman Posting Product dengan langkah sebagai berikut +
1. Kk Products
2. Ph Add Products

Secara de*ault anda akan langsung melihat halaman seperti pada gambar dibawah ini.

Sekarang perhatikan baik- baik bagian yang kami tandai kotak merah diatas> untuk lebih
jelas lihat gambar dibawah.

Perhatikan pada Product Data, secara otomatis akan terpilih Simple product 0 Product
Type & Tipe Produk 1 . )ika anda klik pada area Product Type tersebut anda akan melihat
= pilihan tipe produk yakni +
1. Smpe product
2. Grouped product
3. Externa/Amate product
4. Varabe product

Mari kita mulai dari yang paling mudah terlebih dahulu yakni
memposting produk dengan product type = Simple
product .
Silahkan persiapkan sebuah gambar / photo sebuah produk dengan
ukuran :
Mnma 500 x 500 pxe dan
Maksma 2.000 x 2.000 pxe
Simple product bisa anda pergunakan jika produk yang anda jual tersebut hanya
mempunya ? model dan ? warna. Dalam contoh ini kami memiliki 2 buah photoproduk
modelnya sama dan warnanya sama dengan ukuran ?@8= ( ;<A p( namun di photo dari
sudut yang berbeda.
Supaya anda lebih mengerti maksud dan tujuan penggunaan dari Product Type : Simple
Products lihat contoh riil yang kami ambil dari Balora.
)ika anda mempunyai photo lebih banyak maka akan terlihat lebih baik. "alon customer
anda lebih leluasa melihat apakah produk yang anda jual tersebut cocok bagi mereka.
#sahakan kualitas gambarnya seperti pada contoh dibawah ini 0 klik pada gambar
dibawah untuk melihat kualitas gambar 1
ote + Semakin bagus kualitas gambar maka semakin bagus pula ketika di Boom dengan
CIT3 ,agni*ier plugin.

ari kita mulai memposting produk untuk toko online kita!
1. Tus |udu Produk Anda
2. Tus Deskrps fu produk anda tersebut

Setelah selesai proses diatas maka lan"utkan dengan melihat ke
ba#ah $ Pada Product Data %
1. Pastkan anda memh atau berada pada Smpe Product
2. Vrtua dan Downoadabe |angan anda Centang ( Hanya untuk produk
dgta sepert : eBook, Software d )
3. Buat SKU produk anda tersebut ( Msa : CAM123456 )
4. Tus Harga produk anda pada Reguar Prce ( Penusan angka tdak peru
paka ttk , msa : |ka anda menus harga Seratus &ibu maka
tusah '((((( |angan '((!((( )

Pada contoh ini , S7# kami tulis "%,?84=;A dan 3arga kami tulis =;@@@@@

)ika kita lihat 0 7lik Pre!iew 1 maka anda kan melihat halaman produk anda seperti
gambar dibawah ini.
)ika anda ingin membuat promo dengan memberikan diskon pada harga produk tersebut
maka anda bisa langsung mengisi harga sesudah diskonnya pada area & kolom Sale
Price.
"ontoh +
misalnya harga barang tersebut menjadi = juta maka anda tulis disana =@@@@@@

,aka jika di lihat lagi 0 pre!iew lagi 1 anda akan melihat halaman produk anda seperti
berikut

)ika anda ingin membuat periode diskon produk anda tersebut maka yang perlu anda
lakukan adalah +
Kk Schedue
Ph tangga mua beraku dskon sampa masa berakhr dskon ( Kk
pada con Kaender )
Pada contoh ini kami membuat masa diskon dari tanggal ?4 %gustus 8@?4 s&d 4@ %gustus
8@?4
Setelah masa diskon berakhir maka secara otomatis harga akan kembali normal jadi anda
tidak perlu kawatir diskon tersebut akan berlanjut.
Sementara ini cukup sekian dahulu penjelasan mengenai cara posting produk dengan
memakai produk data : simple product. anti kami lanjutkan lagi dalam tutorial berikutnya
masih pada produk data ini.
Semoga anda tidak mengalami kesulitan dalam mempelajari hal diatas.
Cara membuat toko online menggunakan
WooCommerce (Tahap Sepuluh)
Pada langkah ke sepuluh ini kita akan melanjutkan tutorial sebelumnya yakni memposting
produk dengan product type : simple product. 0 Tahap Semban 1
)ika anda sampai pada artikel ke sepuluh ini langsung dari 5oogle Search maka anda
perlu untuk membaca keseluruhan artke dar yang pertama supaya tau jalan
ceritanya.
Sekedar mengingatkan kembali bahwasanya kita kemarin sudah sampai pada bagian
Product Data : Simple product dan masih pada area 5eneral. .ihat gambar dibawah.
,ohon diperhatikan dengan seksama agar anda mengerti dan memahami penjelasan dari
kami. Tidak perlu terburu : buru dalam membaca artikel ini. 7arena tutorial tahap
kesepuluh ini sedikit agak rumit terutama bagi anda yang belum mengerti betul langkah :
langkah sebelumnya.
ari kita langsung melan"utkan bela"ar ke langkah selan"utnya
INVENTORY
Kk Inventory
In!entory ini berguna apabila anda ingin menunjukkan jumlah stok barang atau produk
yang anda jual. ,isalnya anda menjual 7amera ikon D;8@@ DS./ "amera 8=.?,P
0 seperti dalam contoh ini 1 Stok anda misalnya cuman ada ; unit, jika anda ingin
menampilkan in*ormasi stok kamera tersebut ke calon pembeli anda maka anda bisa
melakukannya dari sini.
7euntungan bagi pemilik toko online dan calon pembeli +
Pemk toko onne : |ka kebetuan produk yang anda |ua tersebut fast
movng ( produk yang aku keras ) maka nformas ketersedaan stok
terhadap caon pembe bsa mempengaruh caon customer anda untuk
sesegera mungkn mengamb keputusan untuk sesegera mungkn
meakukan order agar tdak kehabsan. Sangat berguna ketka toko onne
anda sedang ada promo dskon.
Caon pembe : Mengetahu ketersedaan stok bsa meyaknkan mereka
bahwasanya apaba mereka membe produk tersebut mereka yakn
barang yang mereka pesan bsa mereka dapatkan.
#ntuk mengakti*kan *itur ini
1. Centang pada " Enabe stock management at product eve "
2. Is |umah stok produk anda
,ari kita coba lihat 0 pre!iew 1 tampilan halaman produk tersebut, anda akan melihat
jumlah stok produk anda disana.

SHIPPING
Kk Shppng
Pada bagian shipping ini berguna untuk mensetting atau memasukkan in*ormasi
mengenai +
1. Berat Produk tersebut
2. Dmens atau ukuran pan|ang, ebar dan tngg produk tersebut
3. Shppng cass berguna untuk menerapkan ongkos krm dar sebuah
produk yang se|ens ( Fat Rate )
Penjelasan Shipping Class :
%gar lebih mudah memahami Shipping "lass ini , kami akan menerangkan dengan
membuat contoh penerapannya.
,isalnya anda akan menerapkan ongkos yang sama untuk semua produk kamera digital
yang anda jual di toko online anda .
%ndai kata & anggap saat ini anda menjual 7amera digital berbagai merk ditoko online
anda, kemudian anda ingin menerapkan ongkos kirim yang sama untuk semua kamera
digital yang ada di toko online anda tersebut 0 contoh + ongkos kirimnya /p.?@@.@@@ 1
7ita harus membuat sebuah shipping class yang khusus agar semua ongkos kirim untuk
kamera digital yang ada di toko online anda tersebut sama. Dengan begitu anda akan
lebih mudah me-manage ongkos kirim untuk produk kamera digital yang lain di kemudian
hari.
Buka di Tab baru web browser anda halaman Shipping Classes
1. Kk Products
2. Ph Shppng Casses
3. Tus Shppng Cass yang kta ngnkan ( daam contoh n kam membuat
shppng cass baru untuk semua kamera dgta maka kam tus )amera
Digital )
4. Sug = Tus sa|a kamera-dgta ( cara penusan memaka huruf kec
semua dan paka tanda mnus )
5. Kk tombo Add New Shppng Cass
Setelah itu Shipping "lass baru untuk 7amera Digital akan muncul disebelah kanan
Buka di Tab baru web browser anda halaman *ooCommerce Settings
1. Kk WooCommerce
2. Kk Settngs
3. Ph Shppng
4. Ph Fat Rate
5. Cost Per Order. Pada tutora kemarn pada angkah kema kta teah
menuskan baya per ordernya Rp. 20.000 karena kta akan menggunakan
Shppng Cass maka kita hapus sa"a biaya tersebut. ( |ka tdak dhapus
maka baya pengrmannya men|ad Rp.100.000 + Rp. 20.000 = Rp.
120.000 )
6. Anda akan mehat Shppng Cass baru yang sudah kta buat pada
angkah datas ( Kamera Dgta )
7. Masukkan ongkos krmnya pada koom tersebut sebesar seratus rbu
rupah ( penusannya |angan paka ttk : 100000 )
8. Kk tombo Save Changes

Sekarang kembali lagi ke halaman Posting Product tadi .
Kk Save Draft terebh dahuu pada produk Nkon D5200 DSLR Camera
24.1MP tersebut gunanya agar shppng cass yang tad kta buat muncu
dsana.
Lhat ag ke bagan Shppng , sekarang Shppng Cass yang kta buat
tersebut akan berada dsana
#ntuk melihat bagaimana sesungguhnya Shipping "lass diatas bekerja mari kita lihat
bersama -sama +
Kk Prevew Product ( haaman prevew produk akan terbuka d tab baru
web browser anda )


.ihat 3alaman Pre!iew Produk tersebut
1. Kk tombo Add to Chart ( tombo warna abu-abu geap )
2. Sesaat kemudan akan muncu Notkas atau pembertahun Nkon
D5200 .. sudah masuk ke Cart . Lan|utkan dengan meng Kk tombo Vew
Cart
Pada halaman Diew "art inilah Shipping "lass tadi bekerja , lihat gambar berikut

.ihat pada Shipping $ -lat /ate > disana langsung tertera ongkos kirim untuk kamera
digital dengan menggunakan Shipping "lass 7amera Digital sebesar /p. ?@@.@@@ . )ika
nantinya anda memposting kamera kedua, ketiga dan seterusnya anda tinggal memakai
Shipping "lass 7amera Digital tersebut.
#ntuk produk lainnya misalnya Baju, Sepatu, Tas anda juga bisa membuat Shipping "lass
yang sama dengan 7amera Digital yang sudah kami contohkan diatas.
#ntuk sementara ini, cukup sekian dulu tutorial cara membuat toko online menggunakan
2oo"ommerce ini. Semoga penjelasan kami bisa anda mengerti dengan baik dan benar.

Cara membuat toko online menggunakan
WooCommerce (Tahap Sebelas)
"ara membuat toko online + Pada tahap sepuluh kemarin kita sudah belajar membuat
shipping class untuk ongkos kirim dari salah satu produk yang dalam hal ini atau pada
contoh yang kami berikan disana adalah untuk produk kamera digital.
7ali ini kita akan melanjutkannya dengan langkah berikutnya yang tentunya masih
berkaitan dengan memposting produk menggunakan Product Type : Simple Product.
LINKED PRODUCT
Kk Lnked Product

%da 4 bagian yang akan kami terangkan disini +
1. Up-Ses
2. Cross-Ses
3. Groupng

Pada dasarnya ketiga hal diatas berguna untuk menawarkan produk alternati* lainnya ke
pelanggan agar mereka membeli produk lain yang masih ada kaitannya dengan produk
yang memang mereka inginkan atau mereka cari saat ini.
)ika di ibaratkan pada sebuah blog maka linked products ini seperti seperti artikel terkait.
"ontohnya seperti berikut ini +
)ika pada toko online yang kita buat sekarang ini, nantinya akan terlihat seperti berikut
ini +
,ungkin saat ini .inked Products belum bisa langsung anda praktekkan karena anda
belum memposting produk : produk di toko online anda. amun nanti setelah produk
anda sudah banyak maka anda bisa memakai *itur ini.
Berikut penjelasan mengenai .inked produtcs diatas>

Up-Ses
#p-Sells ini berguna untuk memberikan & menampilkan pilihan produk yang berkaitan
dengan produk yang ditawarkan pada saat customer melihat halaman produk. Lhat
demonya dsn
/elated produk yang tampil pada halaman tersebut 0 Cou may also like .. 1 merupakan
penawaran produk yang dibuat dari #p-Sells
Produk yang ditampilkan pada #p-Sells ini sebaiknya produk yang +
1. Mempunya kuatas ebh bak
2. Aksesors yang berkatan dengan produk tersebut
3. d
amun anda juga bisa menampilkan produk lainnya yang sesuai dengan keinginan anda.

)ika dilihat dari halaman posting produk tersebut maka akan terlihat seperti gambar
berikut

Cara memasukkan produk kedalam Up-Sells
Kk pada text area Up-Ses

Ketk nama produk yang ngn dtampkan ( Sebaknya ketk SKU produk
yang ngn kta tampkan dsn agar ebh mudah )

Ph Produk yang akan anda tampkan, pada contoh n saya sudah
mempostng 3 buah produk dengan SKU CAM |ad kam memh ketga
produk tersebut.

Cross-Ses
"ross Sells ini mempunyai *ungsi yang sama dengan #p-Sells, namun "ross Sells akan
tampil pada halaman "art. 7etika customer meng-klik add to cart dan kemudian meng-klik
!iew cart maka produk yang kita pilih untuk ditampilkan akan muncul disana.
Produk yang ditampilkan pada "ross Sell ini sebaiknya +
1. Produk yang ag dskon
2. Aksesors yang berkatan dengan produk tersebut
3. d
Sama halnya dengan #p-Sells diatas anda juga bisa menampilkan produk lainnya yang
sesuai dengan keinginan anda.

Cara memasukkan produk kedalam Cross-Sells
Kk pada Text area Cross-Ses
Ketk nama produk yang ngn dtampkan ( Sebaknya ketk SKU produk
yang ngn kta tampkan dsn agar ebh mudah )
Ph Produknya ( saah satu )
Groupng
5rouping ini akan kami jelaskan pada posting produk dengan Products Data : 5rouped
Product. Secara garis besar 5rouping ini akan sangat berguna jika anda mempunyai
produk yang banyak dan berencana membuat toko online yang besar dan komplek.
Cara membuat toko online menggunakan
WooCommerce (Tahap Duabelas)
"ara membuat toko online dengan 2oo"ommerce tahap duabelas ini masih melanjutkan
langkah sebelumnya pada tahap sebelas. 7emarin kita sudah sampai pada .inked
Products yang ber*ungsi seperti layaknya related artikel.
,ari kita lanjutkan dengan langkah berikutnnya dengan membuat attributes dari sebuah
produk. %ttributes ini mempunyai *ungsi seperti +
Membuat phan ukuran : XL, L, M, S
Membuat phan warna : Bru, Kunng, Merah, H|au dan an sebaganya
Selain kedua *ungsi diatas anda juga bisa memakai attributes ini untuk berbagai
keperluan, tergantung dari jenis produk yang jual pada toko online anda.
amun untuk Simple Product *ungsi atribut ini belum bisa di pergunakan secara
maksimal. Disini kita hanya bisa membuat satu pilihan saja.
Setelah anda memahami *ungsi dari atribut ini maka berikut langkah cara membuatnya +
Kk Attrbutes

Kk tombo Add

Anda akan mehat tampan sepert gambar dbawah n
7arena pada contoh ini kami akan memposting sebuah produk kamera ikon dengan
warna merah maka kami akan membuat %ttributes untuk kamera ini hanya dengan warna
saja yakni warna merah
1. Name : Ketk Warna
2. Vaue : Ketk Merah
3. Centang Vsbe on the product page
4. Kk Save Attrbutes
,aka jika kita pre!iew akan terlihat seperti gambar dibawah+
Kk tab Addtona Informaton

#ntuk langkah berikutnya akan kami sampaikan pada kesempatan mendatang, ,ohon
untuk dipahami tehnik memposting produk dengan Product Data : Simple product ini
terlebih dahulu karena ini yang paling mudah untuk diterapkan dan dimengerti.
Cara membuat toko online menggunakan
WooCommerce (Tahap Tigabelas)
Tidak terasa tutorial cara membuat toko online dengan menggunakan 2oo"ommerce ini
sudah sangat panjang sekali. Dan kami sangat terkejut mengetahui bahwa begitu banyak
para sahabat yang begitu antusias mempelajari secara tekun mengenai proses
pembuatan sebuah toko online.
Pada kesempatan kali ini kita akan mempelajari lebih lanjut mengenai cara memposting
produk dengan menggunakan simple product sampai selesai.
Pada tahap ke tigabelas ini kita akan langsung ke bagian %d!anced . Tidak banyak yang
perlu dijelaskan pada bagian ini karena sangat mudah sekali.
,ari kita lanjutkan dengan mempelajari bagian selanjutnya.
ADVANCED

Purchase Note : Anda boeh mengs koom n |ka anda ngn
memberkan pesan tambahan untuk pembe anda.
Menu Order : Barkan ters angka 0 sa|a agar tdak membngungkan
anda.
Enabe revews : Secara defaut themes n otomats mencentang phan
enabe revews n. Namun |ka anda tdak mengngnkan pengun|ung toko
onne anda merevew produk anda maka hangkan tanda centang yang
ada dsana.

CUSTOM FIELDS
Pada bagian "ustom -ields ini tidak perlu anda isi apapun karena memang tidak begitu
penting. .anjutkan dengan langkah berikutnya.

PRODUCT SHORT DESCRIPTION
Tulis deskripsi singkat mengenai produk anda tersebut disini. Sebisa mungkin jangan
terlalu panjang, tulis saja yang penting : penting saja mengenai produk tersebut.

MYSTILE CUSTOM SETTINGS
Tidak ada yang perlu anda lakukan pada bagian custom settings ini.

Sekarang hat ke bagan pane sebeah kanan. Lhat
pada bagan berkut :
1. Product Categores
2. Product Tags
3. Product Gaery
4. Features Image

#ntuk lebih jelasnya perhatikan gambar berikut ini.

#ntuk Product "ategories dan Product Tags 0 Point ? dan 8 1 tentunya anda sudah paham
maksud dan cara penggunaannya. Sedangkan untuk point 4 dan = berikut
penjelasannya +
Product Gaery
%dalah tempat untuk meletakkan image atau gambar pendukung produk kita 0 tampak
belakang, tampak dari atas , tampak samping , dll 1
Featured Image
%dalah image atau gambar yang paling utama dan yang akan terlihat besar. -eatured
image ini juga secara otomatis akan tampil juga pada product gallery 0 tampak depan 1
-eatured image ini akan menjadi image yang terlihat terlebih dahulu oleh calon pembeli
kita.
.ihat contoh pada gambar dibawah ini.

"ukup jelas bukan maksud dan tujuan dari Product 5allery dan -eatured Image ini EE

Mari kita mulai dengan mengupload image atau gambar
untuk Product Gallery terlebih dahulu
Kk Add product gaery mage

Kk tombo Seect Fes

Kemudan carah mage yang sudah anda persapkan ( anda boeh
mengupoad 4 - 6 gambar untuk Product Gaery n ). Pada contoh n kam
hanya mengupoad 1 gambar sa|a. Seteah ketemu gambar yang sudah
anda persapkan maka ph gambar tersebut kemudan kk open untuk
memua proses upoad gambar.


Seteah proses upoad gambar sudah seesa maka an|utkan dengan
mengkk tombo Add to gaery

Seteah tu anda akan mehat mage gaery tersebut sudah berada
dsana
)ika anda mengupload = buah gambar maka anda akan melihat = buah gambar juga
disana.
Mari kita lanjutkan dengan mengupload eatured !mage
Kk Set featured mage

Pada *eatured image ini kita hanya perlu untuk menupload ? buah gambar 0 biasanya
gambar produk tampak depan 1. .akukan hal yang sama seperti pada langkah
mengupload image atau gambar untuk Product 5allery diatas. )ika sudah selesai maka
anda akan melihatnya seperti pada gambar berikut.

Proses memposting product dengan menggunakan product data : simple product sudah
selesai. Silahkan klik tombol publish untuk melihat hasil kerja anda. Demo secara ve
nya bsa dhat dsn
#ntuk hasil yang lebih baik usahakan image yang anda pergunakan berukuran lebar dan
tinggi yang sama. Dari hasil uji coba kami maka yang terbaik adalah menggunakan image
berukuran ?@@@ ( ?@@@ p(.
Semoga tutorial ini bisa berman*aat bagi anda semuanya. Tutorial ini akan kami lanjutkan
pada kesempatan mendatang.
Cara membuat toko online menggunakan
WooCommerce (Tahap Empatbelas)
Pada tahap empat belas + cara membuat toko online dengan woocommerce ini kita akan
membahas mengenai cara mengkustomisasi tampilan toko online kita. Seperti yang kita
ketahui bersama , saat ini kita hanya bisa melihat tampilan toko online yang kita buat
tersebut masih seperti sebuah blog dan tidak terlihat selayaknya sebuah toko online.
Secara khusus pada tahap ke empat belas ini kita hanya akan membahas mengenai hal
tersebut diatas. Setidaknya untuk lebih memberi semangat kepada kita bahwasanya
proses pembuatan toko online ini sudah mendekati tahap *inishing.
Target kita adalah merubah tampilan toko online kita dari yang awalnya hanya
menampilkan postingan artikel 0 blog 1 pada halaman homepage menjadi menampilkan
produk saja
#ntuk menampilkan produk yang kita jual pada halaman depan maka langkah yang perlu
kita lakukan adalah sebagai berikut +
1. Kk Myste
2. Kk Theme Optons
3. Kk Homepage

7emudian pada halaman 3omepage tersebut lanjutkan dengan langkah berikut +
1. Centang dspay recent products
2. Masukkan angka berapa |umah produk yang ngn anda tampkan pada
haaman homepage. Msanya pada contoh kam n, kam tus 8 |ad
nantnya pada haaman homapage toko onne kta hanya akan muncu 8
buah produk sa|a.
3. Kk tombo Save A Changes

,aka jika kita lihat toko online kita sekarang ini , akan terlihat seperti gambar berikut.

Pada gambar diatas masih terlihat postingan blog dibawah produk toko online kita . ah
untuk menghilangkan postingan tersebut maka kita perlu melakukan langkah berikutnya.
1. Kk Bog
2. Hangkan tanda centang untuk menampkan postngan artke yang
berasa dar bog kta
3. Kk tombo Save A Changes

Sekarang tampilan halaman depan toko online kita sudah menampilkan produk saja .
.ihat pada gambar berikut ini.
Lve Demo
Pada contoh diatas hanya nampak = buah produk , karena sampai saat ini kami hanya
membuat atau memposting produknya hanya = buah saja hanya sebagai gambaran saja.
#ntuk tahap selanjutnya akan kami jelaskan pada kesempatan mendatang. Semoga
tutorial kali ini bisa berman*aat bagi anda.
Cara membuat toko online menggunakan
WooCommerce (Tahap Limabelas)
Setelah kita kemarin membahas mengenai menempatkan produk yang ada di toko online
kita berada pada halaman 3omepage maka kali ini kita akan melanjutkannya dengan me-
,ake '!er tampilannya agar menjadi lebih menarik lagi.
Template ,ystile ini mempunyai banyak kelebihan yang memungkinkan kita untuk
memodi*ikasi template tersebut menjadi lebih baik dan tampil beda dengan toko online
yang lain meskipun sama- sama menggunakan template tersebut.
Semua tergantung dari kreati*itas anda, namun disini tentu kami akan mencoba
menjelaskan tentang bagaimana cara mengkustomisasi template ,ystile ini pada tara*
yang mudah saja.
Memasang Banner pada Homepage
,ari kita mulai dengan memasang sebuah welcome banner yang besar pada halaman
3omepage toko online kita. #ntuk itu persiapkanlah sebuah image dengan spesi*ikasi
sbb+
#kuran 5ambar untuk Banner
Lebar : 1247
Tngg : 405
)ika anda belum mempunyai image untuk banner tersebut anda boleh memakai gambar
diatas sekedar untuk keperluan latihan agar anda bisa langsung praktek di toko online
anda.
Setelah kita persiapkan sebuah gambar untuk banner kita maka yang perlu anda lakukan
adalah +
1. Kk Myste
2. Kk Theme Optons
3. Kk Homepage
4. Kk Featured Image
5. Centang Dspay a Banner

Setelah anda centang display a banner anda akan melihat tampilan seperti gambar
berikut. 7emudian lakukan dengan langkah berikut ini
1. Kk tombo upoad

"ari image banner tersebut diP" atau laptop anda dan mulailah proses upload image
tersebut. Setelah imagenya sudah terupload maka akan terlihat tampilan seperti pada
gambar seperti berikut

Scroll kebawah sampai anda melihat tampilan seperti dibah ini kemudian pastikan anda +
1. Centang Sze : Fu Sze
2. Kk tombo Use ths mage

Setelah itu banner yang ingin kita pasang di toko online kita sudah terlihat seperti gambar
dibawah.
1. Hapus tusan pada banner Headnes
2. Hapus tusan pada banner stand rst
3. Kk tombo Save A Changes


Sekarang lihat toko online anda maka di toko online anda tersebut sudah terpasang
sebuah banner yang besar disana. Selamat mencobanya dan semoga anda tidak
mengalami masalah yang berarti.
Sampai jumpa lagi pada tutorial selanjutnya.
"ara membuat toko online menggunakan
woocommerce 0 tahap enam belas 1
"ara membuat toko online menggunakan 2oo"ommerce tahap enam belas kali ini kita
akan melanjutkan memoles tampilan toko online yang masih terlihat sangat sederhana
sekali. )ika anda belum melakukan banyak sentuhan yang berarti maka tampilan toko
online anda kurang lebih akan terlihat mirip dengan yang ada padatutora ke ma
beas kemarin.
)adi dalam tutorial ini kami akan membuat atau mengkustomisasi tampilan toko online
kami berdasarkan selera kami. amun kami harap anda bisa mengambil pengetahuannya
dan anda bisa berkreasi sesuai dengan selera anda sendiri.
#ntuk mengkustomisasi tampilan toko online kita maka kita akan bermain-main dengan
template ,ystile itu sendiri. ,ari kita mulai dari atas pada menu ,ystile : Theme 'ptions.
Kustomsas CSS
1. Kk Myste
2. Ph Theme Optons
3. Ph Genera Settngs
4. Ph Ouck Start

7ita akan merubah warna themes ,ystyle tersebut dari warna orange 0 de*ault.css 1 ke
warna hijau 0 green.css 1. ,ari kita lihat terlebih dahulu tampilan menu pada toko online
kita .

Dari halaman theme options-nya anda akan melihatnya seperti berikut ini.

7lik pada tulisan de*ault.css diatas kemudian pilih warna yang sesuai dengan pilihan
anda. Dalam contoh dibawah ini kami akan menggantinya dengan warna hijau maka kami
memilih green.css

Setelah anda pilih warna kesukaan anda maka lanjutkan dengan mengklik tombol Sa!e
%ll "hanges

Tunggu beberapa saat sampai anda melihat noti*ikasi seperti pada gambar dibawah ini
0 'ption #pdated 1.

Setelah anda melihat noti*ikasi seperti diatas silahkan anda lihat menu pada toko online
anda. Setiap nantinya anda akan melakukan perubahan dan menyimpannya maka
noti*ikasi tersebut akan muncul, itu pertanda proses penyimpanan atau update pada
themes options template tersebut sudah berhasil. Pada tahapan selanjutnya gambar
tentang noti*ikasi tersebut tidak akan kami tampilkan dan kami anggap anda sudah
mengerti dan paham jadi tidak perlu dijelaskan dua kali.

"oops# kita ada sedikit masalah pada big banner$ lihat
gambar diba%ah.
Pada banner tersebut ada tulisan 0 warna putih 1 dengan tulisan sbb.
Wecome to our store
We hand make the most awesomest products n the word

%da 8 cara untuk menghapus atau menghilangkan tulisan tersebut +
1. Menghapus sementara ( not recommended )
2. Menghapus secara permanen tusan tersebut ( recommended )

enghapus Sementara
#ntuk menghapusnya secara sementara anda bisa mengulangi langkah yang ada pada
tahap ma beas kemarn
amun jika nanti anda melakukan perubahan lagi, secara otomatis tulisan tersebut akan
muncul lagi di atas banner tersebut. )adi menurut kami itu sia-8 saja dan buang tenaga
makanya tidak kami rekomendasikan cara tersebut.
enghapus secara permanen
Dengan menghapusnya secara permanen anda tidak perlu kawatir lagi tulisannya akan
muncul lagi di kemudian hari. %gak sedikit rumit namun tidak sulit, berikut cara
menghapus tulisan tersebut secara permanen.
1. Kk Appearance
2. Ph Edtor
3. Anda akan angsung mehat kode stye.css

Sekarang *okus ke panel sebelah kanan anda.

.ihat ke halaman bawah & scoll mouse anda ke bawah, cari theme-options.php kemudian
setelah ketemu klik langsung untuk menampilkan kode php pada *ile tersebut..

%nda akan melihat halaman theme-options.php tersebut seperti pada gambar berikut.

%pa langkah selanjutnya E Sebelum kami lanjutkan ada baiknya anda mengerti halaman
apa yang sebenarnya yang akan kita edit ini. 7ode php diatas merupakan kode dari option
panelnya template ,ystile berikut ini 0 mohon jangan ikut buka , sekedar memberi
in*ormasi saja 1.

.ihat pada area yang sudah kami tandai dengan warna merah diatas. Tulisan itulah yang
akan kita hilangkan secara permanen melalui halaman theme-options.php ini. Sudah
mengerti maksud dan tujuannya, mari kita memulainya, lihat kembali kode theme-
options.php tersebut.

?. 7lik "trl F - maka akan muncul pencarian cepat. .ihat pada gambar sebelah pojok kiri
bawah 0 ada tanda panah merah 1

8. 7etikkan + *elcome to our store $ kemudian tekan enter $ anda akan melihat
tulisan tersebut 2elcome to our store tersebut disana dan dibawahnya anda juga akan
melihat tulisan *e hand make the most a#esomest products in the #orld

3apus kedua tulisan tersebut , 3anya tulisan tersebut saja jangan dihapus juga tanda
petik diatas 0 G 1 yang berdempetan dengan tulisan tersebut, ada 8 tanda petik yakni
sebelum tulisan dan sesudah tulisan itu. ,ohon berhati hati ketika menghapusnya.
Dan pastikan setelah anda hapus kondisi kode tersebut seperti pada gambar dibawah
0 tanda petik masih ada 1

7lik Tombol update *ile.

Setelah itu anda akan melihat noti*ikasi update *ile theme-options.php anda sudah sukses.

"oba anda lihat toko online anda sekarang , 'oppsss> kok masih ada tulisannya ya EEE
itu karena kita tadi belum menghapusnya dari Theme 'ptions template ini. ,ari kita
tuntaskan dengan langkah berikut ini.
1. Kk Myste
2. Kk Theme Optons
3. Kk Homepage
4. Kk Featured Image
5. Pastkan tusan pada banner headne dan banner stand rst anda hapus
semuanya
6. Kk tombo Save A Changes
,ulai saat ini anda tidak perlu kawatir lagi tulisan itu akan muncul diatas banner toko
online anda jika anda mengedit atau merubah settingan template ,ystile ini di kemudian
hari.
"ukup sekian dulu tutorial kali ini, semoga anda mengerti dan bisa berman*aat bagi anda
semua.
"ara membuat toko online menggunakan
woocommerce 0tahap tujuh belas1
3ari ini mari kita lanjutkan lagi proses mengkustomisasi template toko online kita agar
lebih menarik lagi dari hari kemarin. 7ami harap anda tidak bosan dalam mengikuti tutorial
yang S#P6/ P%)%5 ini .
3arapan kami adalah anda bisa benar-benar mengerti dan paham betul cara membuat
toko online dengan memakai 2oo"ommerce ini.
,eskipun pada suatu hari nanti anda tidak memakai theme mystile yang gratis ini,
katakanlah anda sudah mempunyai uang cukup untuk membeli template toko online yang
premium namun yang memakai 2oo"ommerce juga maka pengetahuan yang anda
dapatkan dari kami masih bisa anda pergunakan.
%pa yang akan kita pelajari hari ini tidaklah terlalu sulit dan masih sangat mudah untuk
dipahami.
Silahkan anda bukan Theme 'ptions template ,ystile dari halaman dashboard toko
online anda.
Kk Myste
Theme Optons

%da beberapa bagian disana, sebagian kecil sudah kami jelaskan pada tutorial
sebelumnya dan sekarang akan kami tambahkan lagi dengan menjelaskan menu-menu
selain yang sudah pernah kami jelaskan dan sudah kita lakukan bersama-sama.
Penjelasan pada tutorial ini persis seperti apa yang kami lakukan juga ketika membuat
tulisan ini.
Genera Settngs
Kk Genera Settngs
Kk Dspay Optons

Pada Display 'ptions ini yang akan kita lakukan adalah sebagai berikut +
1. Post / Page comments : Ph Post ony
2. Post Content : Ph The Excerpt
3. Dspay Breadcrumb : Anda bsa memakanya atau tdak namun daam
contoh n kam akan memaka Breadcrumb
4. Dspay Pagnaton : Centang n
5. Pagnaton Stye : Ph Numbers
6. Kk Tombo Save A Changes untuk menympan konguras n

Styng Optons
Pada styling option ini anda bisa mengkustomisasi background toko online kita dan juga
mungkostomisasi warna links, ho!er dan juga warna button. Silahkan anda coba ganti
background dan mencoba mengganti warna links ataupun tombol pada toko online anda..
)angan kawatir jika anda salah pada bagian ini tidak akan berakibat *atal atau merusak
toko online anda..

Silahkan anda bereksperimen sendiri dengan kedua menu diatas. )ika ada kesulitan
silahkan bertanya pada kolom komentar. Sampai disini dulu tutorial kami kali ini dan
sampai jumpa pada tutorial selanjutnya.
Cara membuat toko online menggunakan
WooCommerce (Tahap Delapan Belas)
Pada tahapan ke delapan belas ini kita akan mempelajari langkah selanjutanya dalam
tutorial cara membuat toko online dengan woocommerce yang masih dalam area theme
options seperti halnya kemarin. )ika kemarin kita telah membahas mengenai Display
'ption dan juga Background maka kali ini kita akan membahas mengenai Typography
dan .ayout 'ptions.
Typography ini ber*ungsi untuk mengatur jenis huru* yang akan kita pakai dalam toko
online kita. )ika kita lihat sekarang ini , toko online kita memakai huru* %rial yang terlihat
tidak begitu bagus. #ntuk itu pada kesempatan ini kita akan mencoba merubah huru* %rial
tersebut melalui menu Typography ini.
Dalam contoh ini kami akan memakai *ont atau huru* 'swald namun anda bisa
mencobanya dengan menggunakan *ont lainnya apabila anda kurang menyukainya.
Typography
'! ari kita mulai bela"ar mengkustomisasi +ont toko online kita
1. Kk Typography
2. Centang Enabe Custom Typography

2! ,anti +ont -rial tersebut dengan .s#ald
1. Kk pada Ara dan kemudan car Oswad gant semua dengan Oswad
2. Kk Tombo Save A Changes

Layout Optons
Pada bagian layout ini kita bisa merubah tampilan kerangka toko online kita dari yang *ull
page menjadi di dalam B'H
1. Kk Layout Optons
2. Centang Enabe boxed Layout
3. Ph poss Sdebar dsebeah kanan atau dsebeah kr
4. Kk tombo Save A Changes

,aka setelah anda simpan , tampilan toko online anda terlihat lebih rapi didalam bo(.

"ara membuat toko online menggunakan
2oo"ommerce 0Tahap Sembilan Belas1
Pada tahap sembilan belas ini, cara membuat toko online dengan 2oo"ommerce akan
membahas tentang bagaimana mengkustomisasi toko online kita dengan menambahkan
*itur chatting untuk customer support yang berguna untuk memaksimalkan penjualan toko
online anda tersebut.
#ntuk melakukan hal diatas kita akan memasang atau menginstall ? buah plugin gratis
yang bisa anda pakai selamanya. Proses penginstallan plugin ini secara detail bisa anda
lihat pada artikel kami yang berjudul + Cara nsta pugn d wordpress.
"lickDesk nama plugin yang akan kita pergunakan . %pa kelebihan plugins tersebut dan
kenapa kami memilihnya E Plugins tersebut selain mudah digunakan oleh newbie seperti
kita ini, plugins tersebut memungkinkan kita untuk merubah warna tampilannya sehingga
bisa kita sesuaikan dengan warna yang ada pada toko online kita tersebut.

Memasang tur Chattng
#ntuk kebutuhan customer support ini kita akan memakai "lickDesk yang mempunyai
penampilan menarik dan nyaman untuk dilihat. Dersi gratis dari "lickDesk hanya
membolehkan kita untuk menda*tarkan ? agent saja atau kita hanya bisa membuat akun
untuk ? orang customer ser!ice.
Cara install Click&esk
'! /ogin ke Dashboard *ordPress anda
1. Kk Pugns
2. Ph Add New
3. Pastkan anda pada poss Search
4. Ketk Chat
5. Kk tombo Search Pugns

2! 0nstall ClickDesk

1! -ktifkan Plugins
'egister Click&esk (ccount
Setelah anda mengakti*kan plugin "lickDesk diatas maka selanjutnya kita akan menda*tar
sebuah akun baru untuk agent toko online kita yang nantinya akan menjadi akun
customer support yang bisa kita pakai.
'! Silahkan menu"u ClickDesk Dashboard
1. Kk atau ph CckDesk, possnya dbawah Toos

2! -nda akan melihat halaman seperti gambar berikut
1. Kk tombo Go to CckDesk Dashboard

1! Buatlah sebuah akun ClickDesk
#ntuk membuat atau menda*tar akun "lickDesk caranya sangat mudah sekali. %nda bisa
menggunakan akun 5mail anda ataupun akun Cahoo anda dan login lah dengan akun
anda tersebut. )ika anda belum mempunyai salah satu akun tersebut maka anda bisa
membuatnya terlebih dahulu. 7ami sarankan anda membuat akun 5mail saja + baca
cara membuat akun Gma

2! /ogin dengan -kun ,mail anda
Bukalah tab baru di webbrowser anda dan bukalah sign in ke akun gmail anda. Setelah
berhasil Sign ini maka kembali ke

3! Buatlah nama -gent untuk operator Customer Support toko
online anda
.ihat gambar berikut dan isilah sama persis seperti yang tertera disitu. Setelah selesai
7lik tombol Tes, "reate an %gents

4! Selan"utnya setelah sukses membuat agent toko online anda
maka anda akan melihat halaman seperti gambar berikut

)ustomisasi Pro*le (gent
Pada gambar diatas terlihat bahwasanya %gent toko online kita belum terdapat photo, jadi
selanjutnya kita akan menambahkan photo dan yang lainnya.
5! )lik nama agent untuk mulai mengkustomisasi pro6le 7 nya

8! )lik nama agent untuk mulai mengkustomisasi pro6le 7 nya
9pload Photo + 7lik tombol #pload dibawah photo yang kosong tersebut, setelah anda
upload mohon jangan klik tombol Sa!e "hanges. .anjutkan ke tahap& tab berikutnya I,
etwork

0 :et#ork + #ntuk network pilih 5oogle Talk or 5oogle %ppa&,ail. 7emudian
masukkan username anda, jika email anda beralamat nama;anda<gmail!commaka
username anda adalah nama;anda<gmail!com

Phone : #ntuk I,& "ountry pilih saja Skype 0 jika anda punya akun Skype1 jika belum
maka isi saja kolom ID& umber dengan no telpon anda dan akhiri dengan mengklik
tombol Sa!e "hanges

Menambahkan Photo (gent untuk homepage
#ntuk mempercantik tampilan "lickDesk di toko online kita maka kita perlu untuk
menambahkan Photo %gent kita agar ketika customer kita ingin bertanya mereka bisa
membayangkan wajah orang yang sedang mereka ajak "hatting. Sekedar saran
sebaiknya anda memasang Photo asli dan jangan photo orang lain karena secara
psikologis Photo asli lebih meyakinkan dari pada photo orang lain atau bahkan photo
orang luar negeri.

=! )lik Tab /i>e Chat

'(! Setelah terbuka anda akan melihat tampilan seperti gambar
berikut
1. Pastkan anda berada pada poss UI & Themes
2. Theme = Ph Soca ( Medum )
3. Poston = Bottom Rght
4. Kk Tombo Upoad untuk memua upoad Photo agent anda
5. Coor = Phah warna yang sesua dengan yang anda ngnkan
6. Kk Tombo Save Changes

''! engganti yang ada pada *idget Chatting Tersebut dengan
keterangan bahasa 0ndonesia
#ntuk merubah tulisan bahasa inggris pada 2idget "hatting "lickDesk maka anda bisa
merubahnya dengan mengklik tab -orm I .ocaliJation. %da lima link disana, silahkan
anda lihat sendiri karena sudah jelas dan mudah untuk dilakukan. )angan lupa untuk 7lik
Tombol #pdate setelah anda mengedit tulisan yang ada disana.

'2! enambahkan akun T#itter dan +acebook anda
%nda bisa menambahkan akun Twitter dan -acebook anda dengan mengklik tab Social

Setelah ditambahkan akan terlihat seperti berikut ini.

)ika dilihat di Toko online kita maka anda akan melihatnya seperti berikut ini.
T#itter
7lik Icon Twitter dan #pppss>>>. KK 6rror

,ari kita bereskan permasalahan diatas, lihat kembali ke clickdesk dashboard anda. 7lik
.ink 5rand %ccess .

,aka akan muncul Pop up untuk meng : %uthoriJe %PP. 7lik tombol %uthoriJe %PP
tersebut

Setelah Proses %uthoriJe %PP Twitter tersebut selesai maka anda akan melihat halaman
Social itu lagi tanpa ada pertanda khusus lainnya jadi tidak ada perubahan sama sekali.
amun yang perlu anda lakukan adalah 7lik Tombol Sa!e "hanges sekali lagi untuk
menyimpan apa yang sudah kita lakukan diatas.

Setelah anda Sa!e & Simpan mari kita lihat lagi toko online kita . /e*resh terlebih dahulu
kemudian klik icon Twitter lagi. 3emmm>. permasalahan tadi sudah hilang.
"ongratulation KK

+acebook
Setelah kita lihat Twitternya mari kita lihat juga -acebooknya.

%khirnya proses Install dan mengkustomisasi "lickDesk sudah selesai dan siap untuk kita
pergunakan, Semoga penjelasan kami diatas bisa anda mengerti dan pahami dengan
baik serta anda tidak mengalami masalah dalam mengikuti tutorial ini.
Pada kesempatan mendatang kita akan melanjutkan tutorial ini dengan tema yang
berbeda.
Cara membuat toko online menggunakan
WooCommerce (Tahap Dua Puluh)
"ara membuat toko online tahap dua puluh ini akan membahas mengenai kelanjutan
tahapan sebelumnya. )ika kemarin kita telah menambahkan *asilitas chatting untuk
customer support kita maka selanjutnya kita akan memasang sebuah Sticky Bar untuk
memperkuat promosi toko online anda.
Idenya begini + 7etika toko online anda jadi dan sudah online nanti terus misalnya anda
mempunyai sebuah produk baru , katakanlah nama produk baru anda tersebut L Ba|u
Batk |og|a L dan anda berkeinginan untuk *okus mempromosikan produk tersebut agar
setiap calon customer anda yang datang bisa dengan mudah mengetahui bahwasanya
anda menjual L Ba|u Batk |og|a M.
.oh kan sudah ada Banner yang besar E Banner yang besar pada halaman 3omepage
tersebut hanya akan terlihat oleh cutomer anda jika mereka membuka homepage anda ,
sementara lebih dari <@ N pengunjung biasanya tidak pernah melihat halaman 3omepage
sebuah website, blog ataupun toko online.
)adi peranan Stiky bar disini cukup berpengaruh sekali terhadap promosi toko online anda
tersebut. amun jika anda kurang setuju dengan pendapat kami juga tidak masalah
karena ini cuman sekedar pemikiran kami berdasarkan hasil analisa pengunjung yang
datang ke blog ini.
Selain dari *ungsi Sticky Bar diatas sebagai penunjang sarana promosi maka Sticky Bar
juga sangat ber*ungsi untuk menupi ruangan yang kosong pada halaman toko online kita
sebelah atas. .ihat gambar berikut ini +

)adi ada 8 *ungsi disini +
1. Stcky Bar berfungs untuk sarana promos ( Ca To Acton )
2. Stcky Bar |uga berguna untuk menutup space kosong pada bagan atas
toko onne kta.
Lhat Lve Demo
Ada 3 buah Stcky bar yang bsa anda paka untuk
keperuan n:
Silahkan anda pilih dari tiga Sticky Bar dibawah dan tentunya yang sesuai dengan
keinginan anda.
+. ,ordPress -oti*cation .ar

/. -oti*cation .ar

0. luid -oti*cation .ar


Dalam tutorial ini kami akan memakai yang Sticky Bar yang pertama yakni 2ordPress
oti*ication Bar. Berikut langkah yang bisa anda lakukan untuk memasang Sticky Bar
tersebut.
'! /ogin ke dashboard Toko online anda dan silahkan menu"u ke
-dd :e# Plugin
1. Kk Pugns
2. Kk Add New
3. Ketk WordPress Notcaton Bar
4. Kk tombo Search pugns

2! Setelah hasil pencariannya muncul? anda akan melihat
halaman seperti berikut
1. Kk Insta Now

1! Setelah selesai diinstall lan"utkan dengan mengaktifkannya

2! Setelah anda aktifkan maka lan"utkan dengan mengklik
Settings

3! Pada halaman settings ini kita akan melakukan beberapa hal
berikut
1. Centang untuk menampkan Stcky Bar tersebut
2. Ketkah pesan promos produk anda tersebut
3. Ketk tusan yang akan tamp pada tombo Ca to acton d Stcky Bar
anda
4. Masukkan nk atau ur produk anda dsn. |ka customer anda mengkk
tombo ca to acton pada pont no 3 datas maka akan menu|u kehaaman
produk yang anda ketk urnya dsn.
5. Centang Button Target dan Sekagus centang |uga Poston Stcky Bar
anda
6. Background coor. Daam contoh n kam ngn warna h|au yang sama
dengan warna h|au dar CckDesk yang sudah kta nsta kemarn
( #7EA333 )
7. Kk tombo Save Changes


Sekarang lihat toko online anda , maka saat ini Sticky Bar sudah berada diatas header
toko online anda dan mengisi space yang kosong tersebut.
"ara membuat toko online menggunakan
2oo"ommerce 0Tahap Dua Puluh Satu1
3ari ini kita akan melanjutkan tutorial cara membuat toko online dengan 2oo"ommerce
ini dengan pokok pembahasan cara membuat custom menu atau merubah menu bawaan
,ystile yang kita pakai sebagai template atau themes toko online kita tersebut.
Seperti yang kita ketahui bersama, saat ini toko online yang kita buat sudah mempunyai
menu yang muncul secara otomatis tanpa kita buat sendiri.
Secara de*ault susunan menu toko online kita akan terlihat seperti gambar berikut +

%nda bisa merubah menu tersebut dengan mudah dan bisa anda sesuaikan dengan
kondisi toko online anda. ,isalnya anda ingin menambahkan menu untuk halaman about
us, tata cara belanja, kategori produk anda, contact page dan lain sebagai.
#ntuk keperluan tutorial ini kami akan membuat beberapa halaman statik & static page dan
juga beberapa kategori produk yang bertujuan untuk memudahkan calon pembeli anda
dalam memilih dan mencari produk di toko online tersebut.
1alaman Static Page
7ami akan membuat halaman static page sebanyak 4 buah dengan perincian sbb +
1. Haaman tata cara bean|a
2. Haaman about us
3. Haaman contact page
%nda boleh membuat halaman static apa saja , silahkan disesuaikan dengan keperluan
anda.

)ategori Produk
7ami akan membuat = buah kategori produk sebagai contoh saja supaya custom menu
kita kali ini bisa sedikit menggambarkan situasi yang sebenarnya dalam proses
pembuatan toko online anda nantinya. 7ami akan membuat kategori produknya sbb +
1. Ba|u anak
2. Ba|u Wanta
3. Ba|u Pra
4. Kamera dgta
,ohon disesuaikan dengan produk anda terlebih dahulu, kira : kira kategori produk anda
yang cocok dengan produk anda tersebut

Cara membuat Haaman Statc Page
Berikut kami berikan contoh cara membuat sebuah halaman
static page :
1. Kk Pages
2. Kk Add New
3. Tus |udu Haaman Statc yang akan anda buat, ms. Tata cara bean|a
4. Tus s statc page anda
5. Kk Tombo Pubsh

)husus untuk pembuatan halaman contact page maka sebelum
anda membuatnya seperti diatas ? anda terlebih dahulu harus
melakukan setting Contact 0nformation pada Theme .ptions
Silahkan menuju Theme 'ptions ,ystile anda. kemudian lanjutkan dengan hal berikut ini
1. Kk Contact Page
2. Ph Contact Informaton
3. Centang Enabe Contact Informaton Pane
4. Tus |udu Lokas Toko Onne anda , ms. Our Store Locaton atau daam
contoh n kam buat Woo Store Locaton
5. Tus aamat engkap anda
6. Tus |uga no Tep rumah anda / No tep Toko anda
7. No Fax Anda
8. Tus ema anda . Ema yang dtus dsn akan berfungs sebaga ema
penerma apaba ada customer toko onne anda menghubung anda
meau haaman contact tersebut
9. Twtter Username dkosong sa|a . | tdak berfungs |
10. Centang Enabe Subscrbe
11. Kk Tombo Save A Changes

)ika anda tidak melakukan langkah ini terlebih dahulu dan anda langsung melakukan %dd
ew Page untuk halaman "ontact maka anda akan melihat pesan error seperti gambar
berikut

Sekarang kembali ke halaman %dd ew Page tadi diatas untuk membuat static page
halaman contact

,ari kita lihat terlebih dahulu bagaimana penampilan toko online kita setelah kita
menambahkan 4 buah halaman static page yang baru tersebut. .ihat bagian ,enu

)ika kita perhatikan pada gambar diatas maka menu toko online kita menjadi jelek dan
kurang sedap dipandang mata. 7enapa terjadi demikian E hal ini disebabkan karena
,ystile atau themes yang kita pakai dalam tutorial ini secara otomatis akan
menambahkan semua static page baru menjadi sebuah menu.
.antas bagaimana cara memperbaiki hal tersebut. "aranya sangat mudah kok , nanti
akan kami jelaskan cara memperbaiki susunan menu tersebut.
Sekarang mari kita lanjutkan dengan membuat kategori produk terlebih dahulu baru
kemudian kita susun secara bersamaan agar tidak 8 kali kerja.

Cara membuat Kategor Produk
Seperti yang sudah kami jelaskan diatas, kategori produk bisa memudahkan customer
kita dalam memilih barang yang ada di toko online kita terlebih jika kategori produk
tersebut kita pasang atau kita tempatkan pada menu utama toko online kita.
Sebagai gambarannya Silahkan lihat $$ Contoh Kategor Produk OO 7lik. Begitulah
kira : kira maksud dari kategori produk tersebut. )adi misalnya anda menjual berbagai
macam jenis produk maka calon customer toko online anda akan mudah mencari produk
yang sejenis.
#ntuk membuat kategori produk silahkan ikuti langkah demi langkah berikut ini +
'! ari kita menu"u menu products
1. Kk Products
2. Ph Categores

2! )emudian mulailah membuat kategori produk toko online
anda
1. Name = Tus nama kategor produk anda , msa : Ba"u -nak
2. Sug = Tus sug nya dengan huruf kec semua dan spasnya d gant
dengan tanda - ( mnus ) , msa : ba"u;anak
3. Dspay Types = Ph Products
4. Upoad sebuah gambar untuk kategor produk tersebut. Usahakan
ukurannya ukuran tngg dan ebarnya sama, msa : 300 x 300 px
5. Kk tombo Add New Product Category

1! 9langi langkah diatas untuk membuat kategori produk yang
lainnya? setelah selesai maka akan terlihat seperti pada gambar
berikut

ah sekarang yang perlu kita lakukan selanjutnya adalah mendapatkan link masing-
kategori produk yang sudah kita buat diatas . "ara mendapat link kategori produk anda
adalah sbb +
2! /etakkan / arahkan kursor mouse anda tepat diba#ah salah
satu nama kategori produk anda yang akan kita cari link url; nya

3! Setelah posisi kursor anda sudah berada diba#ah nama
kategori produk ? pastikan anda melihat tampilan seperti gambar
diba#ah ini!

4! )lik kanan Vie# dan )lik copy link location

5! Pastekan /ink url produk kategori anda tersebut di :otepad!
9lagi langkah tersebut untuk mendapatkan link url kategori produk
anda lainnya

.ink diatas akan berguna pada saat kita akan membuat custom menu. Setelah selesai
semua maka selanjutnya kita akan menempatkan kategori produk tersebut pada menu
utama toko online kita.

Cara mengatur uang susunan Menus
,ari kita gabungkan antara static page yang telah kita buat diatas dan juga kategori
produk toko online kita.
'! Silahkan menu"u enu options
1. Kk Appearance
2. Ph Menus

2! Setelah terbuka lan"utkan dengan langkah berikut
1. Tus nama menu anda , Msa : Menu Utama
2. Kk tombo Create Menu
1! Selan"utnya -nda akan melihat halaman seperti berikut
1. Kk Seect A . Kemudan Scro kebawah sampa anda mehat Sampe
page yang |uga kut tercentang karena kta mengkk Seect A tersebut.
Hangkan centangan Sampe page tersebut karena kta tdak akan
mengkutkan ag Sampe page tersebut d Menu Utama toko onne kta.
2. Kk tombo Add To Menu

2! Selan"utnya anda akan melihat calon menu utama anda
tersebut terlihat seperti gambar berikut ini! Tanpa ada Sample Page
lagi disana
)angan anda simpan terlebih dahulu, lanjutkan dengan langkah berikutnya.

3! Sekarang kita akan memasukkan /ink 9&/ produk kategori ke
menu utama kita
1. Kk Lnks
2. Masukan satu per satu nk produk kategor yang sudah kta buat dan
sudah kta paste d Notepad tad
3. Ber |udu untuk menu produk kategor tersebut
4. Kk tombo Add to Menu

"ontoh +
?. #/. P http+&&www.toko-online-anda.com&product-category&baju-pria&
8. .ink Te(t P Baju Pria
4. 7emudian 7lik tombol %dd to ,enu

4! 9langi langkah tersebut untuk kategori produk anda yang
lainnya! Setelah selesai lama akan terlihat seperti berikut
"oba anda perhatikan bagian bawah gambar berikut , disana anda akan melihat
bahwasanya = buah kategori produk sudah berada disana.

5! Sekarang susunlah menu;menu tersebut seperti gambar
diba#ah ini
#ntuk bisa menyusun menunya seperti dibawah ini, anda tinggal 7lik kiri salah satu menu
tersebut kemudian Tahan dan 5eserlah keatas atau kekanan. )ika posisinya digeser
kekanan maka akan menjadi sub menu.

8! Setelah selesai lan"utkan dengan langkah diba#ah
1. Centang Prmary Menu
2. Kk tombo Save Menu

=! Sekarang lihat enu di toko online anda maka anda akan
melihat seperti gambar berikut
'(! Proses custom menu toko online kita sudah selesai sekarang
#ntuk lebih memberikan gambaran secara li!e silahkan lihat /0V@ D@. nya .

Sekian dulu tutorial cara membuat toko online dengan 2oo"ommerce tahap ke dua puluh
satu ini. Sampai jumpa lagi pada tutorial selanjutnya. )ika anda mendapat masalah ,
silahkan ajukan pertanyaan di kolom komentar. Sebisa mungkin akan kami bantu
mengatasi permasalahan yang anda alami.

"ara membuat toko online menggunakan
2oo"ommerce 0Tahap Dua Puluh Dua1
3ari ini kita akan melanjutkan tutorial mengenai cara membuat toko online menggunakan
2oo"ommerce tahap dua puluh dua, setelah kita kustomisasi toko online kita dan saat ini
sudah cukup baik maka kali ini kita akan belajar bagaimana cara memposting produk
yang mempunyai warna berbeda misalnya produk kaos.
Sebagai gambarannya begini, %nda mempunyai barang atau produk kaos Polo misalnya.
ah kaos tersebut 0model sama dan ukuran sama & all siJe1 namun mempunyai = macam
warna yang berbeda dan mungkin setiap warna baju tersebut mempunyai harga jual yang
berbeda terus anda ingin menjadikan = macam warna kaos Polo tersebut di posting dalam
satu kesatuan produk.
Pada tutorial terdahulu kita pernah belajar cara memposting produk dengan Product Data
L Simple Product L , nah untuk membuat atau memposting produk dengan menggunakan
pilihan warna maka Product Data yang akan kita pakai adalah Dariable Product.
#ntuk mengetahui hasil akhir dalam tutorial ini silahkan anda lihat secara langsung
demonya dengan meng-klik tombol dibawah ini, kemudian coba pilih warna baju tersebut,
kami yakin anda pasti menyukainya
Vew Lve Demo
Persapan
Silahkan anda persiapkan = buah image produk dengan warna yang berbeda. Dalam
contoh ini kami akan memakai produk yang memiliki = buah warna yang berbeda.
7ami telah mempersiapkan = buah kaos berwarna #ngu, Putih, ,erah Dan 3itam sebagai
gambaran dalam tutorial ini. ,ohon untuk diperhatikan dengan seksama langkah demi
langkah yang kami jelaskan nantinya supaya anda tidak mengalami masalah yang berarti.

Lets Start ..
'! Silahkan anda menu"u Aalaman -dd :e# product
1. Kk Products
2. Ph Add Product

2! Setelah halaman -dd :e# product sudah terbuka maka
lakukan hal berikut
1. Tus |udu Produk anda yang mempunya phan warna tersebut daam
contoh n kam menus |udunya : Produk dengan 4 Buah Warna Phan
2. Tus Deskrps Lengkap produk anda tersebut
3. Ph Kategor untuk Produk anda tersebut

Sampai disini pastikan sudah benar langkah anda terlebih dahulu, jika sudah benar
silahkan lanjut lagi ke langkah no 4 dibawah ini
1! 9pload gambar untuk ,allery dan +eatured 0mage anda
Ini masih langkah mudah terlebih dahulu, silahkan upload gambar produk anda sekarang.
"aranya masih sama dengan cara memposting produk dengan Product Data L Simple
Product L yang kemarin sudah kami jelaskan.
ote +
-eatured image cukup ? dan image yang sudah dipakai untuk *eatured image tersebut
tidak perlu anda pasang lagi pada product gallery karena secara otomatis akan terlihat
juga pada product gallery tersebut.
Dalam contoh ini yang kami pasang untuk -eatured Image adalah kaos warna #ngu
0 gambar urutan pertama dari kiri 1 dan untuk yang di Product 5allerynya adalah warna
Putih, ,erah dan 3itam. .ihat gambar berikut ini.

)ika kita pre!iew saat ini maka anda akan melihat tampilan produk anda tersebut serupa
dengan gambar berikut ini

Pastikan anda melihat hal serupa dengan contoh tersebut diatas. Seperti yang sudah
kami terangkan diatas bahwa *eatured image akan secara otomatis masuk kedalam
Product 5allery 0 gambar paling kiri sebelum kaos yang berwarna putih 1. Sampai disini
masih sangat mudah sekali, silahkan anda lanjutkan dengan dengan langkah yang ke =
dibawah ini.

2! Sekarang mari kita beralih ke Produk Data B ,eneral C
1. Ph Product Data , Pastkan anda memh Varabe Product
2. Kemudan sah SKU produk anda ( daam tutora n kam menuskan
SKU-nya : SKU 123456 )

3! Sekarang kita beralih ke 0n>entory
Pada bagian In!entory ini anda cukup mencentang pilihan manage stocks saja

4! /an"utkan ke bagian Shipping
ah pada bagian shipping ini kami akan memilih atau memakai Shipping "lass yang kami
beri nama M7aosL. Silahkan anda buat ? buah Shipping "lass baru untuk produk anda
tersebut jika anda memutuskan untuk memakai shipping class yang kemarin sudah
pernah kita buat juga tidak ada masalah yang penting ongkos kirim pada Shipping "lass
yang sudah anda buat kemarin sudah sesuai dan tidak akan merugikan anda.
/e*resh + Pada tutorial tahap ke sepuluh kemarin kami telah menerangkan cara membuat
Shipping "lass Q Lhat artkenya dsn R

5! Setelah itu lan"utkan ke /inked Products
Pada tutorial ini kami tidak mensetting linked products karena kami tidak mempunyai
postingan products untuk #pp Sells maupun "ross Sells- nya. )adi jika anda akan
memasang .inked Product anda tersebut saat ini maka silahkan lihat panduannya pada
tutorial kami yang ke sebelas Q Lhat artkenya dsn R 7ami yakin anda sudah
memahami caranya dengan baik.

8! ari kita lan"ut ke bagian -ttibutes
Ini merupakan Bagian inti dari pokok pembahasan dalam tutorial ini, mohon untuk
dipahami maksud dan tujuannya.
Kk tombo Add

Seteah tu anda akan mehat tampan sepert pada gambar berkut n

7emudian lanjutkan dengan langkah berikut ini
1. Name adaah nama untuk attrbutes produk kta n. Daam contoh n
kam buah namanya " Warna Ba|u " anda bsa member nama apa sa|a
tergantung dar kengnan anda.
2. Centang Vsbe on the product page
3. Centang Used for varatons
4. Vaue (s) s dengan phan warna ba|u yang sesua dengan varas warna
pada produk anda tersebut. Daam contoh n karena kam cuma punya 4
buah warna yakn : ungu, puth, merah dan htam maka kam tus sepert
berkut :Ungu | Puth | Merah | Htam . Perhatkan format penusan datas,
formatnya adaah : Warna |spas| |tekan Shft + Back Sash
(\)| |spas| Warna . Atau cara gampangnya copy paste sa|a varas warna
kam datas dan kemudan gant tusan warnanya dengan warna yang
sesua dengan konds bawah anda saat n.
5. Kk Tombo Save attrbutes

Setelah anda klik tombol Sa!e attributes dan proses penyimpanannya selesai maka anda
tidak akan melihat ada perubahan sama sekali dengan gambar diatas , anda masih akan
melihat tampilan yang sama. ,ohon dipastikan saja anda telah meng-klik tombol Sa!e
attributes tersebut.
Sampai disini pastinya anda akan sangat mudah memahaminya. )ika belum mohon
jangan lanjutkan ke langkah berikutnya agar anda tidak salah langkah. Silahkan pahami
terlebih dahulu.
)ika sudah paham betul dan langkah anda sudah sesuai dengan yang ada di gambar
maka mari kita lanjut lagi ke langkah berikutnya
=! Pada bagian -d>anced ini anda tidak usah mengisi apapun
"adi silahkan le#ati sa"a
Pastikan satu hal saja disana bahwa untuk pilihan 6nable re!iews sudah tercentang
0 secara de*ault ini sudah tercentang dengan sendirinya 1

'(! +inal Step! ari kita lihat bagian selan"utnya yakni
Variations
Ini merupakan langkah terakhir sekaligus penentu untuk membuat pilihan warna produk
yang kita posting tersebut. Silahkan anda klik Dariations dan anda akan melihat tampilan
seperti pada gambar berikut ini

Selanjutnya secara berurutan yang anda lakukan adalah sbb +
1. Kk tombo Add Varaton

Setelah itu anda akan melihat tampilan anda seperti berikut ini

Sekarang kita isi produk dengan 2arna yang pertama yakni yang ada pada *eatures
image terlebih dahulu. Pada contoh diatas warna kaos pada *eatured image adalah warna
ungu.
ote + %gar terlihat rapi dan berurutan maka mulailah dengan urutan sebagai berikut +
1. Warna Kaos yang ada daam Featured Image ( Ungu )
2. Warna kaos no 1 pada product gaery ( Puth )
3. Warna kaos no 2 pada produk gaery ( Merah )
4. Warna Kaos no 3 pada product gaery ( Htam )

Mar kta mua dengan yang pertama ( Warna Kaos
Ungu )
1. Ph Warna Ungu
2. Upoad atau pasang gambar kaos warna ungu anda
3. Tus |umah stok ba|u warna ungu anda dsana Msa : 10
4. Tus Harga untuk Kaos Ungu tersebut Msa : 100000 ( seratus rbu )
ngat penusan angkanya tdak usah paka ttk
5. Shppng Cass = Ph Kaos atau Ph sa|a shppng cass yang anda
punya dan sudah anda buat pada angkah sebeumnya
6. Kk Tombo Add Varaton

Setelah anda 7lik tombol add !ariation tersebut maka anda akan melihat tampilan seperti
pada gambar berikut

Mar kta an|utkan dengan yang kedua ( Warna Kaos
Puth )
1. Ph Warna Puth
2. Upoad atau pasang gambar kaos warna puth anda
3. Tus |umah stok ba|u warna ungu anda dsana Msa : 15
4. Tus Harga untuk Kaos Ungu tersebut Msa : 110000 ( seratus sepuuh
rbu ) ngat penusan angkanya tdak usah paka ttk
5. Shppng Cass = Ph Kaos atau Ph sa|a shppng cass yang anda
punya dan sudah anda buat pada angkah sebeumnya
6. Kk Tombo Add Varaton

Mar kta an|utkan dengan yang ketga ( Warna Kaos
Merah )
1. Ph Warna Merah
2. Upoad atau pasang gambar kaos warna merah anda
3. Tus |umah stok ba|u warna ungu anda dsana Msa : 20
4. Tus Harga untuk Kaos Ungu tersebut Msa : 120000 ( seratus dua puuh
rbu ) ngat penusan angkanya tdak usah paka ttk
5. Shppng Cass = Ph Kaos atau Ph sa|a shppng cass yang anda
punya dan sudah anda buat pada angkah sebeumnya
6. Kk Tombo Add Varaton

Mar kta an|utkan dengan yang keempat / terakhr (
Warna Kaos Htam )
1. Ph Warna Htam
2. Upoad atau pasang gambar kaos warna htam anda
3. Tus |umah stok ba|u warna ungu anda dsana Msa : 25
4. Tus Harga untuk Kaos Ungu tersebut Msa : 130000 ( seratus tga puuh
rbu ) ngat penusan angkanya tdak usah paka ttk
5. Shppng Cass = Ph Kaos atau Ph sa|a shppng cass yang anda
punya dan sudah anda buat pada angkah sebeumnya
6. Kk Tombo Prevew (|angan kk tombo Add Varaton ag) untuk mehat
has ker|a kta sebeum kta pubsh

Setelah anda klik tombol Pre!iew maka anda akan melihat tampilan produk anda seperti
pada gambar berikut ini. Silahkan coba pilih warna kaos dari halaman tersebut, maka
secara otomatis akan menampilkan gambar , harga dan stock dari produk tersebut.
"ukup lumayan bagus bukan EE

)ika sudah '7 maka silahkan 7lik tombol Publish agar product anda bisa dilihat oleh
customer anda. Semoga tutorial ini bisa berman*aat bagi anda semuanya dan sekaligus
anda bisa menguasai metode posting produk menggunakan Product data P Dariable
Product.
"ara membuat toko online menggunakan
2oo"ommerce 0Tahap Dua Puluh Tiga1
Pada tahap ke dua puluh tiga ini , cara membuat toko online dengan 2oo"ommerce akan
membahas mengenai bagaimana cara memposting produk dengan menggunakan produk
data L 5rouped Product L . 7emarin kita telah membahas mengenai produk data L Dariable
Product L yang saat ini pasti anda sudah paham betul bagaimana cara membuatnya.
5rouped product ini digunakan untuk memposting produk yang mempunyai spesi*ikasi
tertentu namun masih satu jenis. Biasanya grouped product ini sering digunakan untuk
barang : barang elektronik seperti 3P, Tablet, Playstation dan lain sebagainya.
%gar lebih jelas lagi mari kita ambil sebuah contoh supaya anda lebih gampang dan cepat
mengerti maksud dan tujuan pemakaian produk data M5rouped ProductL ini.
,isalnya anda akan menjual iPhone ; di toko online anda tersebut, ternyata iPhone
tersebut mempunyai harga yang berbeda : beda tergantung dari besarnya memory
internalnya. #ntuk memposting iPhone tersebut dalam satu kesatuan yang utuh maka kita
memerlukan 5rouped Product tersebut.
,ari kita perjelas lagi dengan mempraktekkannya secara langsung dengan produk iPhone
yang sudah kami persiapkan dibawah ini.
Lve Demo
,arna iPhone 2 : Putih
1arga iPhone 2 ada tiga :
Phone 5 16GB Rp. 7.500.000,-
Phone 5 32GB Rp. 8.500.000,-
Phone 5 64GB Rp. 9.500.000,-

7ami harap anda mengerti terlebih dahulu ilustrasi diatas sebelum memulai mengikuti
tutorial ini agar nantinya jika anda mempunyai produk dengan kondisi seperti dalam
contoh ini anda tidak akan kebingungan.
%da = langkah atau = kali proses memposting produk jika kita memakai 5rouped Product
untuk iPhone ; diatas
1. Mempostng Produk Induknya / Parent Product
2. Mempostng Produk Turunannya / Chd Product 1 ( Phone 5 16 GB )
3. Mempostng Produk Turunannya / Chd Product 2 ( Phone 5 32 GB )
4. Mempostng Produk Turunannya / Chd Product 3 ( Phone 5 64 GB )

Mempostng Produk Induk
Cang pertama kali kita buat adalah Produk induknya terlebih dahulu yang berisi spesi*ikasi
lengkap iPhone ; warna putih, kategori, *eatured image, product gallery dll. Pada
dasarnya ini membuat postingan produk induk ini sama dengan produk lainnya.
'! /ogin ke dashboard toko online anda dan lakukan diba#ah ini
1. Kk Products
2. Kk Add New Product
3. Tus |udu Produknya = Msanya New Phone 5
4. Tus dskrps dar product anda secara engkap

2! Pilih atau buat kategori produk tersebut
Dalam contoh ini kami membuat sebuah kategori produk yakni Smart phone

1! 9pload ,ambar untuk +eatured 0mage dan Product ,allery
Silahkan upload gambar untuk product gallery dan juga gambar untuk *eatured imagenya.
"aranya sama seperti yang sudah kami jelaskan pada tutorial : tutorial kami terdahulu.

2! Pada Product Data pilihlah ,rouped Products
Disini anda harus memilih Product datanya L 5rouped Product L dan jangan yang lainnya.
#ntuk .inked Products , %ttributes dan ad!anced tidak perlu anda isi apa : apa ketika
memposting product indul ini.

3! )lik tombol publish
Setelah anda selesai dengan langkah no = diatas, silahkan anda langsung klik tombol
Publish

)ika dilihat produk tersebut maka anda akan melihatnya persis seperti pada gambar
dibawah ini 0 tidak ada 3arganya 1

Proses memposting produk induknya sudah selesai , lantas bagaimana dengan harga dan
lainnya E 7enapa produk induknya hanya seperti itu saja E Tenang> kita akan akan
melengkapi kekurangan data produknya seperti S7# , 3arga dan yang lainnya melalui
Produk turunannya.
Silahkan lanjutkan dengan langkah dibawah ini ..

Mempostng Produk Turunan
Disinilah kita akan melengkapi kekurangan pada Produk induk yakni dengan memposting
produk turunan yang dalam contoh ini ada 4 yakni +
Phone 5 16GB Rp. 7.500.000,-
Phone 5 32GB Rp. 8.500.000,-
Phone 5 64GB Rp. 9.500.000,-
.angkah dalam memposting produk turunan ini pada prinsipnya sama semua, jadi disini
kami hanya akan memberikan contoh cara memposting ? buah produk turunan saja
yakni + iPhone ; ?A 5B
Penting DD
Cang berbeda nantinya adalah +
|udu Produknya : Kaau yang pertama adaah Phone 5 16 GB , yang
kedua Phone 5 32 GB dan yang ketga Phone 5 64 GB
SKU nya : Buatah SKU yang berbeda contoh |ka format SKU yang
pertama adaah " SP 001 " maka yang kedua " SP 002 " dan yang ketga "
SP 003 "
Harga produknya : |ka Produk yang pertama mempunya harga Rp.
7.500.000,- maka yang kedua d tus Rp. 8.500.000,- dan yang ke tga Rp.
9.500.000,- ( hat st harga datas )
)adi nanti anda tinggal memposting produk turunan ini 4 kali dengan cara yang sama.

Product Turunan Pertama
'! asih dari dalam dashboard toko online anda
1. Kk Products
2. Kk Add New Product
3. Tus |udu Produk turunan yang pertama = Msanya Phone 5 16GB
4. Barkan Kosong Deskrps engkapnya



2! )ategori produk tidak perlu dicentang / biarkan kosong

1! Product gallery dan featured image biarkan kosong

2! Pada area Product data lakukan hal berikut ini B ,eneral C
1. Ph Product Data = Smpe Products
2. Tus SKU produk turunan pertamanya , contoh SP 001
3. Tus Harganya , contoh 7500000 ( tanpa tanda ttk )

2! /an"utkan ke bagian 0n>entory
)ika anda ingin menampilkan jumlah stok produk anda tersebut maka lakukan
1. Centang Manage Stock
2. Tus |umah stok barang anda , msa : 10

3! Pilih Shipping Class untuk meng;handle biaya pengiriman
product tersebut
Pada contoh dibawah ini kami menggunakan Shipping "lass yang pernah kami buat
sebelumnya yakni 7amera Digital . anda bisa juga membuat Shipping "lass yang lain. Ini
sebagai gambaran saja.
3! /an"ut ke /inked Products
Pada bagian .inked Products ini peranan Parent Product atau Produk Induk mulai
muncul, %nda akan melihat menu baru yang bernama 5rouping . Posisinya tepat dibawah
#pp Sells dan "ross Sells 0 pada contoh ini #pp Sells dan "ross Sellsnya tidak kami isi
karena kami tidak atau belum memposting product Smart phone lainnya 1
Silahkan anda pilih ew iPhone ;
ama 5rouping tersebut terbentuk secara otomatis menggunakan )udul produk ketika
kita memposting Parent Productnya & Produk induknya. Pada postingan produk induk
yang kami contohkan diatas kami menulis ew iPhone ; makanya muncul di 5rouping
tersebut nama ew iPhone ; .
)ika anda membuatnya dengan nama lain maka yang muncul juga beda. )adi nama
grouping ini akan sama dengan judul produk induk yang telah kita buat sebelumnya.
#ntuk attributes dan %d!anced kita lewati saja, tidak ada yang perlu kita isi, lanjutkan
dengan langkah dibawah ini.

5! -lihkan pandangan anda ke po"ok kanan atas
.ihat pada area Pre!iew dan tombol Pusblish. Disana anda akan melihat "atalog
!isibility+ Catalog/search
7lik link 6dit disamping sebelah kanan tulisan tersebut.

8! Setelah terbuka maka lakukan hal berikut
1. Ph Hdden
2. Kk tombo OK
=! /angkah berikutnya adalah mempublish produk turunan
pertama kita
'(! 9langi langkah diatas untuk memposting produk turunan
yang lainnya "ika semuanya telah selesai maka anda akan melihat
hasil ker"a anda tersebut persis seperti gambar diba#ah ini

Proses memposting produk dengan menggunakan Produk Data L 5rouped ProductL
sudah selesai , semoga anda bisa memahaminya dengan baik dan juga anda tidak
mengalami permasalahan apapun ketika mempraktekkan tutorial diatas.
)ika anda mengalami masalah, silahkan anda tulis pada kolom komentar dibawah ini.
"ara membuat toko online menggunakan
2oo"ommerce 0Tahap Dua Puluh 6mpat1
Salah satu permasalahan yang sangat penting dalam mengelola sebuah toko online
adalah permasalahan biaya pengiriman barang dan juga jasa pengiriman apa yang kita
pakai untuk meng-handle semua pengiriman barang yang sudah dibeli oleh customer kita.
,engingat toko online kita akan diakses oleh masyarakat luas dari berbagai daerah
diseluruh indonesia maka ada satu hal lagi yang menjadi kendala terutama jika anda
mendapatkan customer dari luar pulau jawa dan terutama jika si pembeli tersebut
bertempat tinggal di sebuah perumahan yang tergolong baru.
Sebagai contoh riil begini, kami tinggal di perumahan yang tergolong baru. )ika ada sanak
*amili kami mengirimkan paket dan memakai jasa pengiriman tertentu 0 sebut saja
namanya )asa Pengiriman % 1itu kiriman paket tersebut bisa sampai ke rumah kami.
amun jika memakai jasa pengiriman yang lainnya maka kiriman tersebut tidak akan
pernah sampai kerumah kami jadi untuk mengambilnya kami harus menjemput langsung
ke kantor jasa pengiriman paket tersebut.
,elihat contoh permasalahan diatas jika misalnya kami sedang berkunjung ke toko online
dan ternyata anda tidak menyediakan pilihan pengiriman barang menggunakan jasa
pengiriman % maka kami tentu akan sedikit ragu barang yang kami beli dari toko online
anda tersebut akan sampai kerumah kami atau tidak. 7emungkinan terbesar keputusan
yang kami ambil adalah kami akan mencari toko online lainnya yang menyediakan barang
yang kami butuhkan namun juga memakai )asa pengiriman % yang bisa menjamin barang
kami yang dibeli dari toko online anda tersebut bisa sampai kerumah kami tanpa harus
repot lagi.
Inilah mengapa kita harus menyediakan beberapa opsi pilihan mengenai jasa pengiriman
apa yang kita pakai di toko online kita agar calon customer kita tetap bisa berbelanja di
toko online yang kita kelola tersebut. Setidaknya langkah ini bisa meminimalisir
kemungkinan batal transaksi yang akan terjadi karena tentunya akan berdampak turunnya
penjualan produk toko online anda.
#ntuk mengatasi permasalahan tersebut diatas maka kali ini kita akan belajar membuat
beberapa opsi pilihan jasa pengiriman tersebut di toko online kesayangan kita tersebut.
Cara menambahkan Ops |asa Pengrman Barang
Sebelumnya mari kita lihat terlebih dahulu contoh penggunaan opsi pilihan jasa
pengiriman tersebut dengan melihat contoh gambar dibawah ini.
"psi pengiriman pada produk yang tidak menggunakan
Shipping Class
Pada gambar diatas merupakan penerapan opsi pengiriman pada produk yang tidak
menggunakan Shipping "lass. )ika produk tersebut tidak menggunakan Shipping "lass
apapun maka ongkos kirim yang akan kita jelaskan pada tutorial ini akan berdampak
langsung pada produk tersebut.

"psi pengiriman pada produk yang menggunakan Shipping
Class
Pada tutorial sebelumnya kita sering membahas mengenai biaya pengiriman dengan
menggunakan Shipping "lass. )ika customer kita akan membeli produk yang sudah kita
setting dengan biaya pengiriman melalui shipping "lass maka secara otomatis tari*
shipping class produk tersebut akan mereplace atau menggantikan ongkos kirim dasar
pada area "art toko online kita.

Lets Start ..
#ntuk membuat pilihan opsi pengiriman diatas maka kita akan memodi*ikasi Shipping -lat
/ate .
'! Silahkan anda login terlebih dahulu ke dashboard toko online
anda dan kemudian lakukan langkah diba#ah ini
1. Kk WooCommerce
2. Ph Settngs
3. Ph Shppng
4. Ph Fat Rate

2! ,antilah ethod Title dari +lat &ate men"adi nama "asa
pengiriman default toko online anda
)ika toko online anda menggunakan PT Pos Indonesia sebagai pilihan awal jasa
pengiriman yang anda pakai dan menggunakan pengiriman reguler maka tulislah pada
method title PT P'S Indonesia /eguler atau dalam contoh ini kami menuliskanP.S &eg
$ 2 hari % yang secara tidak langsung akan menjelaskan kepada pembeli toko online kita
bahwasanya barang yang mereka beli itu akan dikirim Dia Pos reguler dan akan sampai
dalam kurun waktu = hari .

antinya dihalaman "art toko online anda ,enthod Title itu akan terlihat seperti pada
gambar berikut

1! enambahkan biaya pengiriman dasar "ika menggunakan PT
P.S 0ndonesia
Perhatikan gambar diatas, secara de*ault atau secara otomatis ketika pertama kali
customer kita melihat halaman cart mereka maka ongkos kirim barang yang mereka beli
tersebut adalah /p. 8@.@@@ 0 dua puluh ribu rupiah 1 dan menggunakan P'S /eguler tadi
diatas dengan estimasi barang akan sampai selama = hari.
'ngkos kirim sebesar /p. 8@.@@@ tersebut hanya ilustrasi saja , mohon anda tanyakan
terlebih dahulu sebelum anda menentukan harga pengiriman ini.
"ara menambahkan ongkoos pengiriman ini cukup mudah sekali, silahkan anda lihat
gambar di bawah ini.
1. Ph Cost Per Order
2. Tus ongkos krm Pos Reguer nya dsn , msa : 2(((( ( mohon |angan
paka ttk )
3. Pastkan anda menus d barsan Any Cass
Sampai disini kita sudah selesai menambahkan ongkos kirim dasar pengiriman barang
dengan P'S /eguler. )angan di simpan terlebih dahulu dan lanjutkan ke langkah
berikutnya dibawah ini.
ote + Pilihlah ongkos pengiriman dasar ini yang mempunyai biaya terendah atau harga
ekonomi terlebih dulu
2! Selan"utnya kita akan menambahkan opsi pengiriman yang
lainnya
Disini kita akan menambahkan opsi pengiriman lainnya seperti yang sudah kami
terangkan diatas lainnya misalnya Pos 7ilat , TI7I dan )6.
Perhatikan gambar dibawah pada bagian %dditional /ates
.ihat pada baris pertama +
P.S )ilat $ 2 Aari % E '(((( E yes
Penjelasan +
Pos Kat ( 2 Har ) : Nama phan ke dua Ops pengrman barang
'(((( : n merupakan ongkos/ baya tambahan |ka customer memh
pengrman barang yang dbe tersebut menggunakan |ens Pos Kat
nantnya akan terhat dhaaman cartnya men|ad &p! 1(!((( ( tga puuh
rbu rupah ). |ka ongkos r Pos kat tersebut msanya &p! 13!((( ( tga
puuh ma rbu ) maka angka '(((( tersebut anda gant
men|ad '3((( |angan anda tus 35000 |uga karena angka tersebut akan
dtambahkan dengan angka yang anda tus pada angkah no 3 datas
yakn 2((((

'umusnya adalah sbb :
.ngkos kirim Pos &eguler F Selisih harga ongkos kirim Pos )ilat dan
&eguler P.ngkos kirim Pos )ilat sebenarnya
ormat penulisannya adalah sbb :
:ama .psi Pengiriman S Biaya tambahan S yes

Silahkan anda copy paste opsi pilihan pengiriman berikut ini pada %dditional /ates di toko
online anda
P'S 7ilat 0 8 3ari 1 S ?@@@@ S yes
TI7I /eg 0 8 3ari 1 S 4@@@ S yes
TI7I 'ns 0 ? 3ari 1 S ?@@@@ S yes
)6 6co 0 4 3ari 1 S ;@@@ S yes
)6 SS 0 ? 3ari 1 S ?@@@@ S yes

3! Sekarang simpan peker"aan anda dengan mengklik tombol
Sa>e Changes

Silahkan anda sesuaikan 'psi tambahan biaya pengiriman toko online anda tersebut
dengan biaya riil dari daerah anda masing : masing.
Sampai jumpa lagi pada tutorial selanjutnya. Semoga anda mengerti dengan penjelasan
kami diatas.
"ara membuat toko online menggunakan
2oo"ommerce 0Tahap Dua Puluh .ima1
7ali ini kita akan belajar tentang bagaimana membuat sebuah kupon diskon untuk
keperluan promosi di toko online kita. Selain untuk sarana promosi dalam mencari
customer baru untuk datang ke toko online kita, kupon diskon juga merupakan senjata
paling e*ekti* untuk meningkatkan omJet penjualan toko online anda.
7enapa kupon diskon ini penting untuk anda buat E Ingat bahwa persaingan yang akan
anda hadapi sangatlah ketat sekali dan akan semakin sulit dari hari kehari.
Berikut Screenshot data google analytics dari blog ini selama periode ? )uni 8@?4 s&d 84
September 8@?4

)ika dilihat dari data diatas maka kita bisa menyimpulkan bahwasanya akan ada ribuan
toko online baru yang akan bersaing dengan toko online anda. ?@ top artikel yang paling
banyak dibaca dari blog ini didominasi oleh artikel mengenai toko online artinya anda
akan memerlukan strategi khusus agar toko online anda bisa berkembang dan bisa
memenangkan persaingan ini.
Salah satu senjata promosi yang handal adalah dengan menyediakan kupon diskon ini.
,embuat toko online bukan hanya sekedar memajang produk secara online saja namun
akan ada perjuangan yang sangat berat sekali .
Cara membuat Kupon Dskon
Berikut kami jelaskan bagaimana cara membuat 7upon Diskon untuk toko online anda.
7ita akan membuat kupon diskon dengan kondisi seperti berikut ini +
Kupon n akan memotong harga keseuruhan pada haaman Cart
Na kupon n adaah Rp.50.000,-
Kupon n tdak bsa dgabung dengan kupon yang annya ( msanya
anda mengeuarkan banyak kupon )
Kupon n tdak bsa dgunakan pada produk yang sedang konds SALE
Kupon n hanya bsa dpaka untuk 20 ka pemakaan
'! Silahkan anda login ke dashboard toko online anda
1. Kk WooCommerce
2. Ph Coupons
3. Kk Add Coupon
2! -nda akan melihat halaman -dd :e# Coupon seperti pada
gambar diba#ah ini
1! Selan"utnya mari kita buat sebuah )upon Diskon dengan
kondisi yang sudah kita tentukan diatas
1. Tus |udu / kode kupon anda, msa Promo-IX
2. Tus deskrps kupon anda, n hanya untuk memudahkan anda daam
memanage kupon anda tersebut
3. Dscount Type , ph Cart Dscount
4. Coupon amount , tus nomna Kupon anda tersebut msa 50000
( penusan tdak peru paka ttk )
5. Centang ops ndvdua use agar kupon yang kta buat n tdak bsa
dgunakan bersama-sama dengan kupon annya yang akan dkeuarkan
dkemudan har
6. Centang ops Excude sae tems agar |ka customer anda akan membe
produk dengan konds SALE tdak bsa menggunakan kupon dskon n
7. Mnmum amount , tus |umah mnma pembean|aan untuk bsa
menggunakan kupon dskon n. Sangat efektf untuk menngkatkan voume
saes toko onne anda
8. Usage mt , tus batas |umah pemakaan kupon n. Dengan
dtentukannya batasan maksma pemakaan kupon n maka anda bsa
mengontro dan menganasa seberapa efektf penggunaan kupon dskon
yang kta buat n.
9. Kk tombo Pubsh untuk mua mengaktfkan kupon bean|a n.
Setelah anda publish kupon tersebut maka selanjutnya adalah membuat sebuah
"ampaign & kampanye & menyebarkan kode kupon tersebut melalui -acebook, Twitter,
5oogle Plus dan lain sebagainya.

#ntuk mengetahui bagaimana kupon ini beraksi anda bisa mencoba menggunakan kupon
yang kami buat di demo toko onne kam
Pilih salah satu produk disana dan kemudian Diew "art anda
1. Gunakan kode : promo-x
2. Kk appy coupon
Selanjutnya anda akan melihat sebuah noti*ikasi bawah kupon tersebut sudah sukses
diterapkan pada transaksi tersebut
Perhatikan pada point no.8 Q '/D6/ DIS"'#T R terlihat disana ada tulisan -/p.;@.@@@
0 nilai kupon 1. )ika sudah terlihat demikian maka proses membuat kupon diskon pertama
kita sudah selesai.
"ara membuat toko online menggunakan
2oo"ommerce 0Tahap Dua Puluh 6nam1
Pada tahap ke dua puluh enam ini kita akan belajar mengenai cara merubah bahasa yang
ada di toko online kita. Seperti yang kita ketahui dan kita alami bersama , saat ini toko
online kita tersebut masih menggunakan bahasa inggris. Tutorial ini juga sebagai jawaban
atas pertanyaan Mas IrwanKade dan Mas Ophn
"ara merubah semua bahasa di toko online yang menggunakan 2oo"ommerce dari
Inggris ke Indonesia bisa dikatakan mudah namun juga bisa dikatakan sulit. 7enapa kami
katakan demikian E )ika dikatakan mudah itu karena anda tahu caranya dan dikatakan
sulit itu karena anda belum mengetahui caranya. ah .. melalui tutorial ini kami ingin anda
juga bisa mengatakan bahwasanya cara mengganti bahasa di toko online 2oo"ommerce
kita menjadi bahasa Indonesia itu ,#D%3 KK. ya anda pasti juga bisa .
%pa syarat utama agar anda bisa mengatakan ,#D%3 E Syaratnya adalah ketika anda
membaca tutorial ini pastikan anda baca dengan seksama baik tulisan maupun
gambarnya.
,ari kita mulai dari yang paling mudah terlebih dahulu .
1. /ogin ke dashboard toko online anda kemudian install
plugins
CodeStyling /ocaliFation

"ara Install plugin bisa anda hat dsn setelah selesai langsung saja anda akti*kan
plugin tersebut.
2! Sekarang mari kita menu"u ke halaman localiFation
1. Kk Toos
2. Ph ocazaton

1! Centang pilihan @nable lo# memory mode
)ika anda menggunakan Shared 3osting maka centanglah pilihan tersebut, namun jika
anda memakai DPS atau dedicated ser!er maka anda tidak perlu mencentangnya.
2! Selan"utnya yang perlu kita lakukan adalah menambahkan
bahasa indonesia ke theme ystile kita
1. Kk Themes
2. Kk Add New Language

Tambahan + terlihat diatas kondisi themes yang kita pakai adalah ,ystile dan disebelah
kanan gambar terlihat bahwasanya themes ini hanya ada pilihan bahasa inggris saja. )ika
anda memakai template yang lain maka sesuaikan dengan kondisi anda saat ini.
3! )emudian anda akan melihat muncul pilihan berbagai bahasa?
cari $ scroll keba#ah % dan pilih Bahasa indonesia $ idG0D % dan
lan"utkan dengan mengklik tombol create po;6le
4! Proses membuat 6le;po bahasa 0ndonesia akan ber"alan
sekitar 1 7 2 detik dan selan"utnya anda akan melihat Bahasa
0ndonesia sudah tersedia pada theme ystile tersebut
%tau lihat gambar dibawah ini supaya anda tahu secara pasti dimana lokasinya

6nam langkah diatas cukup mudah bukan E pastikan terlebih dahulu anda melihat hasil
yang sama dengan kami jika tidak sama silahkan anda ulangi dan perhatikan lagi mana
tau ada yang terlewat .
Sampai dengan tahapan ini kita tidak akan melakukan apa- apa pada halaman
localiJation ini. 9ntuk sementara #aktu biarkan halaman ini terbuka dan
"angan di tutup atau logout dari halaman dashboard toko online anda
ini. .anjutkan dengan langkah no < dibawah ini >
5! Buka sebuah tab baru di #eb bro#ser anda dan silahkan login
ke cpanel toko online anda! B cpanel!domain;anda!com
$ *ebhosting % C

5! Buka sebuah tab baru di #eb bro#ser anda dan silahkan login
ke cpanel toko online anda! $ cpanel!domain;anda!com
Setelah terbuka cpanel anda maka selanjutnya klik -ile ,anager

8! Pastikan anda memilih Document &oot folder dan kemudian
)lik tombol ,o

=! Setelah terbuka maka silahkan cari #p;con6g!php
1. Ph wp-cong.php ( Kk kr satu ka )
2. Kk con Edt
=! /an"utkan dengan mengklik tombol edit
'(!Sekarang silahkan anda cari tulisan ini : de6ne$H*P/-:,I? H
H%J
''!Setelah ketemu maka ganti atau tambahkan kode idG0D ?
nantinya kode tersebut akan tertulis seperti ini : de6ne$H*P/-:,I?
H idG0D H%J

'2!Setelah selesai anda tambahkan kemudian silahkan anda klik
tombol sa>e changes yang ada pada sudut kanan atas
'1!Proses penyimpanan akan segera ber"alan dan setelah
tersimpan silahkan anda logout dari cpanel toko online anda tersebut

'2! ari kita lihat lagi halaman dashboard toko online kita pada
langkah no 3 diatas! &efresh halaman tersebut maka anda akan
melihat perubahan yang cukup drastis disana! /ihat gambar diba#ah
ini
WOW sudah berbahasa Indonesia Lhoo !!

'3! Coba anda lihat toko online anda sekarang? maka sebagian tulisan
pasti telah berubah men"adi bahasa 0ndonesia
&an juga pada halaman Cart


Sma Probems !!
%da beberapa kata yang tidak bisa berubah secara otomatis jadi membutuh sedikit ekstra
kerja keras lagi. ah untuk itu kita akan membahas permasalahan tersebut pada
kesempatan mendatang atau pada tahap ke 8< .
Tetap semangat dalam belajar dan yakinlah anda bisa .. KK 5ood .uck.
"ara membuat toko online menggunakan
2oo"ommerce 0Tahap Dua Puluh Tujuh1
Pada kesempatan kali ini kita akan melanjutkan tutorial cara mengatasi permasalahan
kecil pada tahap sebeumnya ( tahap 26 ). 7emarin kita masih menghadapi sedikit
masalah yakni adanya tulisan bahasa Inggris yang belum tertranslate ke bahasa
Indonesia.
Permasalahan tersebut sebenarnya bisa dibagi ada 8 bagian yakni +
1. Pada Themes Myste
2. Pada Pugns WooCommerce
Dalam tutorial ini kami akan memberikan contoh cara mentranslate bahasa yang ada
pada Themes dan juga yang ada pada Plugins 2oo"ommercenya. 7ami akan
memberikan cara yang paling mudah untuk anda ikuti
'! Dari halaman /ocaliFation tersebut / saat ini namanya sudah
men"adi /okalisasi
1. Kk Tema
2. Kk Tombo Pnda Uang / Scan
2! -kan uncul Pop up #indo# seperti yang terlihat pada
gambar di ba#ah
Kk Tombo Pnda sekarang
1! Proses Scan akan ber"alan ? kira 7 kira akan memakan #aktu '
menit
2! Setelah proses scan selesai maka langsung sa"a anda klik
tombol Selesai
3! Sekarang kita akan melihat kata yang apa sa"a yang belum di
ter"emahkan
Kk Tombo Suntng
4! -nda akan melihat sebuah proses persis seperti pada gambar?
silahkan ditunggu beberapa saat
5! Setelah proses loading diatas selesai maka anda akan melihat
sebuah tampilan seperti gambar berikut
Kk Lnk " Tdak Dter|emahkan "

%da ;<? kata yang belum diterjemahkan ke Bahasa Indonesia, sangat banyak sekali
bukanE Ini adalah jumlah kata dalam bahasa inggris yang belum diterjemahkan kedalam
bahasa Indonesia yang terdapat pada halaman dashboard dan juga halaman yang terlihat
oleh orang luar atau customer kita.
%gar kita tidak banyak melakukan proses translate maka yang perlu kita translate adalah
kata : kata yang nampak oleh customer toko online kita saja. 7alau yang hanya nampak
pada dashboard toko online kita sebaiknya tidak perlu anda translate namun jika anda
berkenan anda juga bisa mentranslate semua yang ada didalam halaman dashboard.
Cara meakukan Proses Transate
Cang akan kami terangkan disini adalah cara yang paling mudah untuk anda ikuti
8! Bukalah bro#ser kesayangan anda sebanyak 2 buah
Silahkan ditampilkan bersebelahan seperti yang terlihat pada gambar di bawah ini
1. Buka haaman Dashboard Toko onne anda
2. Buka haaman Toko onone anda


=! ari kita coba edit tulisan &ecent Products yang ada pada
halaman homepage toko online kita tersebut
Copy tusan Recent Products
Lhat ke dashboard toko onne anda dan kk con |x
Anda kan mehat Pop up sepert gambar berkut
1. Paste-kan Recent Products tad pada koom Ekspres
2. Kk Tombo Car
Seteah ketemu sean|utnya kk tombo Suntng ( no 2 )
Sekarang tus kata ter|emahan Recent Product yang anda ngnkan ,
msanya pada contoh n kam menus ter|emahannya men|ad : )oleksi
produk terbaru DD
Kemudan anda akan mehat has ter|emahan tersebut sepert pada
gambar dbawah n
Untuk membuat has transate n beker|a maka an|utkan dengan meng-
kk tombo buat berkas-mo
Sekarang kta hat haaman homepage toko onne kta untuk mehat
hasnya. ( refresh haaman homepage anda terebh dahuu )
Ternyata usaha kita berhasil, sekarang tulisan /ecent Products tersebut sudah berganti
menjadi 7oleksi produk terbaru KK
Bagamana dengan kata - kata yang an ?
#ntuk mentranslate kata yang lainnya maka anda tinggal mengulangi cara diatas sampai
semua selesai. 7ami tidak akan melakukan proses translate semua kata di demo toko
online yang kami buat. Ini merupakan contoh saja agar anda mengetahui bagaimana
langkah : langkahnya , untuk itu anda harus membuka setiap halaman dan mengecek
satu persatu kata mana saja yang perlu anda rubah.

Important !!
)ika anda menemui sebuah kata yang belum tertranslate ke bahasa Indonesia dan
didalam kata tersebut mengandung spesial karakter maka jangan sekali : kali anda
hapus spesial karakter tersebut.
Contoh :
|ka anda ngn merubah atau mentransate kata y Ks Pro6le maka
cara menggantnya adaah dengan kata berkut Pro6l Ks Saya
Contoh kata yang an msanya K Comments untuk menggant kata
tersebut sahkan anda tus kata penggantnya K )omentar
Cang terpenting disini jangan sampai anda menghilangkan spesial karaktertersebut
0 tulisan yang kami buat berwarna merah 1
|ka anda kemarn teah merubah atau mengkustom menu yang
memasang Kategor Produk ( Tutora tahap 21 ) maka anda harus
mengedt kemba nk kategor produk tersebut karena ada perubahan nk
dar product-category men|ad Produk Kategor ( bahasa berubah ). |ka
tdak anda edt maka haaman kategor produk yang kta maksudkan tdak
akan muncu atau Error. Cek nk produk kategor anda yang baru dan
kemudan rubahah pada menu tersebut.
Tps ..
Sebagai panduan saja, bukalah sebuah toko online pro*esional yang sudah terkenal dan
yang sudah *ull menggunakan bahasa indonesia untuk mendapatkan ide mengenai kata
apa yang tepat untuk anda pakai atau anda terapkan ketika mentranslate manual kata
yang masih dalam bentuk bahasa inggris tersebut agar toko online anda juga terlihat
pro*esional seperti mereka.
"ara membuat toko online menggunakan
2oo"ommerce 0Tahap Dua Puluh Delapan1
Seperti yang telah kami janjikan pada kesempatan yang lalu, kali ini kita akan belajar
tentang bagaimana cara menambahkan 2idget pada toko online yang dibuat
menggunakan 2ordPress dan 2oo"ommerce ini. %da 8 jenis widget yang bisa kita
pasang pada toko online kita tersebut yakni 2idget bawaan dari plugin 2oo"ommerce
dan juga 2idget yang berasal dari pihak ketiga, misalnya + 2idget 6mail Subscription,
-itur "hatting dari Cahoo ,essenger dan banyak lagi yang lainnya.
Pada intinya widget ini bisa kita tampilkan pada sidebar dan juga *ooter, namun karena
kita memakai plugin 2oo"ommerce maka widget yang seharusnya bisa tampil atau
terlihat di bagian sidebar tidak bisa terlihat.
Sebelum kita menambahkan widget ke toko online kita tersebut maka yang perlu kita
lakukan pertama kali ada mengakti*kan *itur widgets untuk plugin 2oo"ommercenya
terlebih dahulu agar widget bisa muncul pada sidebar toko online kita.

'! /ogin ke Dashboard Toko .nline anda? kemudian lakukan
langkah berikut ini agar #idget yang akan kita pasang bisa tampil
pada toko online kita
1. Kk Myste
2. Ph Theme Optons
3. Lan|utkan dengan mengkk WooCommerce
4. Kk Layout
5. Centang kedua phan tersebut
6. Kk tombo Save A Changes

2! Setelah kita lakukan hal diatas maka "ika anda melihat salah
satu produk anda maka sekarang anda akan melihat sebuah sidebar
baru
Pada Sidebar sebelah kanan diatas tersebut kita akan menambahkan 2idget yang sesuai
dengan kebutuhan toko online kita.
1! Sekarang mari kita menu"u ke halaman *idgets
2! Setelah terbuka maka anda akan melihat halaman #idget
tersebut seperti pada gambar diba#ah ini
.ihat pada bagian sebelah kanan pada area Primary, pada bagian primary ini anda bisa
melihat bahwa disana sudah ada /ecent Posts, /ecent "omments, %rchie!es ,
"ategories dan ,eta.
Sekarang anda lihat lagi pada gambar no 8
diatas, yang terlihat disana itu 0 gambar 8 1 merupakan widget yang muncul dari Primary
ini. )adi jika anda ingin mengganti atau memasang widget pada area tersebut maka anda
bisa melakukannya dari Primary 2idget ini.
7ami harap anda memahami hal ini terlebih dulu agar ketika anda nanti ingin merubah
widget pada sidebar sebelah kanan tersebut anda tahu kemana anda harus pergi.
Sekarang mari kita hilangkan atau hapus terlebih dahulu kelima 2idgets bawaan yang
muncul secara otomatis tersebut.
3! Cara menghapus #idgets yang sudah ada tersebut cukup
mudah ? lakukan langkah diba#ah ini
1. Kk con panah kebawah
2. Kk Deete

#langi langkah diatas untuk menghapus widgets selanjutnya 0 ada = buah lagi 1 hingga
nantinya area primary widgets tersebut akan kosong dan terlihat seperti pada gambar
berikut.
4! ari kita pela"ari #idgets apa sa"a yang sudah berada disana
"oba anda perhatikan deretan 2idgets pada toko online anda tersebut , kira : kira akan
terlihat seperti pada gambar dibawah ini.
Cang perlu anda ketahui adalah dari sekian banyak 2idgets yang berada disana itu 0lihat
gambar diatas1 untuk 2idgets yang berasal dari plugin 2oo"ommerce maka cirinya
widget tersebut ada kata-kata 2oo"ommercenya dan ada juga yang cuman berawalan
2oo 0 2oo Search, 2oo -lickr dll 1.
Sedangkan yang tidak mempunyai ciri seperti yang sudah kami sebutkan maka widgets
tersebut adalah widgets bawaan dari 2ordPress. )adi setiap blog atau website yang
dibuat menggunakan 2ordPress pasti akan memilikinya.
5! Cara menambahkan *idgets yang berasal dari *ooCommerce
pada area Primary
7arena widgets yang kita letakkan pada primary area ini akan terlihat berdampingan
dengan produk yang kita jual maka sebaiknya anda menempatkan widgets yang nantinya
berguna bagi calon customer anda dalam mencari produk idaman mereka ataupun produk
yang sedang ada promo atau yang sedang diskon.
Dalam contoh ini kami akan menambahkan beberapa 2idgets seperti +
Wdget Pencaran Produk
Wdget Keran|ang Bean|a
Wdget Fter Harga
Wdget Produk Terars

,idget Pencarian Produk
Temukan Wdget WooCommerce Car Produk, seteah ketemu Kk kr
pada nama wdget tersebut , tahan / |angan depas / tetap tekan mouse
anda .
Geser atau tark wdget WooCommerce Car produk tersebut ke area
Prmary Wdget
Lepaskan Wdget tersebut dsana dengan cara |angan dtekan ag
mouse anda tad. |ka benar angkah anda tersebut maka anda akan
mehat Wdget WooCommerce Car Produk tad sudah berada area Prmary.
Tus |udu Wdgetnya , Msa : Cari produk terbaik kami
disini kemudan kk tombo Save
Seteah seesa anda smpan an|utkan dengan mengkk nk Cose
Gunakan cara datas untuk menambahkan Wdgets annya, caranya
sama sa|a dengan cara datas.
|ka sudah seesa semua maka akan terhat sepert pada gambar
dbawah n.
|ka kta hat pada toko onne kta maka sekarang n kta sudah
mempunya wdgets tambahan dan sudah tdak memaka defaut wdget
yang ada pada gambar angkah no 2 datas. DEMO

8! Cara menambahkan *idgets pada area +ooter
"ara menambahkan widget pada *ooter ini sama juga dengan cara menambahkan widget
pada area Primary & Sidebar. %nda tinggal menerapkan cara yang sudah kami jelaskan
diatas.
Cang perlu anda ketahui adalah posisi dari widget yang diletakkan pada -ooter ?, 8, 4 dan
= . #rutannya nanti untuk *ooter no ? maka akan terlihat pada -ooter sebelah kiri, -ooter
no 8 akan terlihat disebelah kanan *ooter no ? dan begitu seterusnya.
|ka anda sudah seesa menambahkan wdget pada footer maka
susunannya akan terhat sepert pada gambar dbawah n.

=! Cara menambahkan *idgets dari Pihak ketiga
#ntuk memasang 2idget dari pihak ke tiga misalnya yahoo messenger, *acebook
*anpage, twitter streamline dan sebagainya anda bisa menggunakan T@LT *idget
,isalnya kita akan memasangan status yahoo messenger di toko online kita, lokasi bebas
atau terserah anda 0bisa anda pasang di area Primary atau pun pada -ooter 1. Pada
contoh dibawah ini kami akan meletakkan Cahoo ,essengernya pada *ooter no 8, yang
perlu anda lakukan adalah sbb +
Tark Wdget TEXT tersebut ke area yang kta ngnkan
Seteah poss TEXT Wdget tersebut berada pada tempat yang kta
ngnkan maka akukan ha berkut n
1. Tus |udu untuk wdget yahoo messenger tersebut
2. Copy dan Paste kan kode dbawah n
3. Kk Tombo Save
)ode 3ahoo Messenger
<a href="ymsgr:sendIM?0DGMahooG-nda"> <mg
src="http://op.yahoo.com/onne?
u=0DGMahooG-nda&amp;m=g&amp;tN2&amp;=us"/>
)eterangan
5antilah tulisan 0DGMahooG-nda dengan username email yahoo anda . Dalam contoh
ini kami menggunakan alamat email "ohny2mdTyahoo.com maka kode yang kami
letakkan seperti berikut ini
Oa hre*PLymsgr+sendI,E"ohny2mdM$ Oimg srcPLhttp+&&opi.yahoo.com&onlineE
uP"ohny2mdIampUmPgIampUtN2IampUlPusL&$

#ntuk mengganti gambar satus C, kita maka silahkan anda ganti tulisan tN2dengan
kode gambar dibawah ini
'(! Proses memasang *idget Di toko online anda Sudah Selesai
Saat ini pastinya anda sudah tahu dan paham langkah : langkah bagaimana cara
menambahkan widget di Toko online yang menggunakan 2ordPress ini. 5ood .uck.
7ode Dari ,as Timo 0 ThankVs ya ,as 1 , lihat kegunaan kode dibawah ini pada komentar
beliau pada kolom komentar
<a href="ymsgr:sendIM?IDYahooAnda"><mg
src="http://op.yahoo.com/onne?u=IDYahooAnda&m=g&t=1&=us"/>
</a>
"ara membuat toko online menggunakan
2oo"ommerce 0Tahap Dua Puluh Sembilan1
Setelah sekian banyak tahapan yang sudah kita pelajari dalam membuat toko online
menggunakan 2oo"ommerce ini maka pada tahap ke 8W kita akan belajar lagi mengenai
bagaimana cara menghandle sebuah order yang telah dilakukan oleh customer kita.
7enapa kami memilih topik ini pada tahap ke 8W E secara umum sudah banyak rekan-
rekan yang sudah sukses dalam menerapkan langkah demi langkah yang telah kami
sampaikan. 7emungkinan juga ada yang sudah siap untuk berjualan namun masih belum
tahu cara mengelola orderan dari customer.
#ntuk itu mari kita belajar mengenai apa yang harus kita lakukan ketika ada sebuah order
barang dari customer. %gar anda mengetahui secara pasti bagaimana jalan ceritanya
mengenai proses order yang dilakukan oleh customer di toko online kita maka kami akan
mendemonstrasikan secara lengkap mengenai apa yang dilihat oleh customer anda ketika
melakukan order dan juga apa yang akan anda lihat sebagai pemilik toko online tentunya.
Ini juga berguna bagi anda ketika anda akan membuat halaman tata cara belanja ataupun
ketika anda sedang berkomunikasi dengan customer anda. Semakin lengkap keterangan
yang anda berikan pada halaman tata cara belanja maka akan semakin mudah "ustomer
anda merasa nyaman berbelanja di toko online anda tersebut . Dan jika anda mendapat
pertanyaan dari customer anda maka anda akan lebih siap untuk memberikan jawaban
yang terbaik kepada mereka. ,embuat "ustomer merasa nyaman berbelanja di toko
online anda tentunya akan lebih sulit dari pada ketika anda membuat toko online anda
sekarang ini.
Sebelum kita mulai ada baiknya anda pastikan pada halaman setting anda sama seperti
pada gambar berikut ini.
,ohon untuk disamakan kondisi settingan toko online anda dengan gambar diatas dan
jangan lupa sa!e setelah anda yakin sudah sama dengan settingan diatas.

Lets Start .
Pertama kita akan membuat sebuah order sebuah produk, disini yang bertindak sebagai
contoh customernya adalah kami dan sebagai pemilik toko onlinenya adalah anda.
'! isalnya kami akan membeli sebuah kaos ditoko online anda
dan kami mempunyai )upon belan"a yang anda keluarkan! Dalam hal
ini kami memakai kupon belan"a yang pernah anda buat sebelumnya
dan anda promosikan melalui "e"aring sosial ? kupon belan"anya
misalnya : promo;iO
2! )ami akan membeli sebuah kaos ber#arna biru seperti yang
terlihat pada gambar diatas
Setelah kami add to cart maka kami sebagai pembeli akan melihat halaman seperti pada
gambar dibawah ini. Pada gambar dibawah terlihat bahwasanya kaos yang akan kami beli
tersebut ternyata harganya cuman /p.?@@.@@@,-
1! Setelah kami klik tombol check out maka selan"utnya kami
akan melihat sebuah halaman yang memungkinkan kami untuk bisa
memasukkan kupon belan"a
2! )arena kami sudah memiliki kupon belan"a dari toko online
anda ? maka kami memasukkan kode kupon tersebut agar kami
mendapatkan diskon belan"a
3! Setelah kami klik tombol Terapkan kupon diatas ternyata ada
sebuah pesan baru yang muncul disana
%da syarat minimum belanja yakni sebesar /p.4@@.@@@,- agar kupon tersebut bisa kami
pakai. ,asih ingat bukan dengan penjelasan cara membuat kupon kemarin E Disinilah
kegunaan kupon belanja yang bisa anda pakai sebagai sarana pendongkrak omJet
penjualan toko online anda tersebut.
Trik seperti ini tentunya anda sudah anda ketahui apabila anda sering berbelanja di ,all.
Percaya atau tidak kupon belanja seperti ini masih sangat e*ekti* sekali untuk anda pakai
dan anda terapkan di toko online anda.
4! )arena kami merasa butuh dan menyukai kaos yang anda "ual
diatas maka mau tidak mau kami menambah keran"ang belan"a kami
dengan produk yang anda "ual lainnya
Dalam contoh ini kami akan membeli 8 buah lagi kaos namun dengan warna yang
berbeda misalnya + kaos yang berwarna merah dan yang berwarna hitam. )adi sekarang
belanjaan kami sudah mencukupi syarat minimum agar bisa mendapat diskon belanja
yang telah anda keluarkan
ote + Pada customer tertentu mungkin metode kupon ini bisa e*ekti* namun juga bisa
tidak e*ekti* , tergantung dari customer anda itu sendiri.
5! Selan"utnya kami melakukan check out lagi dengan
menerapkan kode kupon tadi!
Sekarang kupon tersebut bisa kami pergunakan dan ber*ungsi dengan baik. Terlihat pada
gambar dibawah ini bahwa kupon tersebut bernilai /p. ;@.@@@,-
8! Setelah kami mengklik tombol pesanan diatas maka kami
akan melihat sebuah halaman yang menyatakan orderan atau
pesanan yang kami lakukan sudah sukses!
Selain itu kami juga akan menerima email pemberitahuan bahwasanya orderan kami
sudah diterima dan juga langkah apa yang harus kami lakukan berikutnya.
7arena kami sebagai customer maka kami akan menerima email seperti ini
=!Selan"utnya "ika kita lihat status pesanan kami maka terlihat
disana bah#a status pesanan tersebut masih PTertahan Q atau
Pending!
#ntuk melihat status pesanan maka yang harus kami lakukan & yang harus customer anda
lakukan adalah mengklik .ink ,y %ccount
Status tertahan ini mempunyai arti bahwa kami belum melakukan trans*er uang untuk
pembayaran produk yang kami beli dari toko online anda tersebut. 3al : hal seperti ini
bisa anda masukkan kedalam halaman tata cara belanja agar customer anda memahami
dan mengerti langkah apa yang harus mereka ambil selanjutnya.
Dan juga yang terlebih penting lagi adalah anda juga harus menjelaskan di dalam
halaman tata cara belanja tsb bahwa setelah mereka mereka selesai melakukan trans*er
uang, mereka harus mengkon*irmasi kepada anda. Bisa melalui S,S, 6mail, "hatting
ataupun telpon agar orderan mereka bisa anda proses.
'(! ari kita lihat terlebih dahulu apa yang akan anda lihat
ketika ada seseorang yang melakukan order ditoko online anda
)ika kami sebagai customer menerima email pemberitahuan maka anda juga menerima
email pemberitahuan mengenai order yang baru saja kami lakukan. 6mailnya seperti
pada gambar berikut
Dan jika dilihat dari halaman dashboard toko online anda maka akan terlihat seperti ini.
0 7lik pada gambar untuk memperbesar 1
Disini anda bisa melihat barang yang kami pesan melalui toko online anda.
Pada posisi seperti ini yang bisa anda lakukan hanyalah menunggu customer anda
melakukan pembayaran dan juga kon*irmasi dari mereka.
''! Sekarang asumsikan bah#a kami telah mentransfer uang
untuk pembayaran ba"u tersebut dan kami telah mengirimkan
kon6rmasi pembayaran kepada anda
)ika pembayaran yang kami lakukan tersebut sudah anda cek di rekening anda dan
uangnya sudah masuk maka yang harus anda lakukan adalah mengklik icon pengolahan .
.ihat gambar berikut.
Setelah anda 7lik icon pengolahan tersebut maka warna status orderan tersebut berubah
dari yang sebelumnya berwarna kuning sekarang sudah berwarna hijau.
Sel
anjutnya yang harus anda siapkan tentu mengepak pesanan kami 0customer1 untuk
selanjutnya anda kirim.
'2!ari kita lihat apa yang ter"adi pada halaman akun kami
yang saat ini men"adi customer anda
7arena anda sudah menerima pembayaran kami dan mengklik icon memproses maka
status orderan kami pada halaman akun kami juga berubah menjadi M,emprosesL. %nda
juga bisa menyertakan keterangan status seperti ini pada halaman tata cara belanja di
toko online anda. )adi "ustomer anda bisa tahu apabila statusnya sudah memproses
maka hal ini berarti anda sedang menyiapkan orderan & pesanan kami tersebut.
3al ini akan sangat membantu anda dalam membangun rasa kepercayaan customer
kepada anda. 7ondisi ini sangat sensiti* terutama jika customer anda tersebut baru
pertama kali melakukan transaksi & berbelanja di toko online anda.
Ini sangat e*ekti* jika misalnya customer anda tersebut melakukan trans*er melalui internet
banking dan kemudian mereka memantau kesigapan pelayanan di toko online anda.
Semua type customer bisa masuk ke toko online anda, jadi sebaiknya anda memberikan
pelayanan yang super e(tra. )ika customer puas tentu keuntungan akan kembali lagi
kepada anda. ,ereka bisa menjadi customer loyal anda dan juga bisa menjadi orang
yang bisa membantu anda promosi secara gratis. 3arapannya tentu mereka bisa
mempromosikan toko online anda tersebut ke teman : teman mereka.
'1!Setelah proses Packing selesai dan anda sudah mengantar
barang tersebut ke "asa pengiriman maka selan"utnya anda bisa
mengklik tombol Selesai
dan setelah anda klik icon diatas maka warna status orderan tersebut menjadi Biru.
'2!Sebagai customer apa yang akan kami lihat pada halaman
akun kami
7ami akan melihat status pesanan &orderan kami berubah menjadi Selesai
Dan masih ada lagi sebuah email pemberitahuan yang kami dapatkan yang menyatakan
bahwa orderan kami sudah "omplete
Semoga penjelasan kami diatas bisa anda pahami dengan baik dan tentunya anda bisa
mengambil langkah yang lebih baik ketika melayani customer anda kelak. Sampai ketemu
pada tahapan selanjutnya.
"ara membuat toko online menggunakan
2oo"ommerce 0Tahap Tiga Puluh1
"ara membuat toko online menggunakan 2oo"ommerce kali ini merupakan Tutorial yang
akan melengkapi keseluruhan langkah demi langkah yang telah kami sampaikan selama
4 bulan terakhir ini. Secara garis besar semua *itur yang bisa kita pakai pada plugin
2oo"ommerce tanpa pugns premum sudah kami sampaikan kehadapan anda. )ika
anda berhasil memahami panduan yang kami berikan maka kami yakin sekali anda sudah
mampu mengelola sebuah toko online yang dibuat dengan menggunakan 2oo"ommerce
tersebut. Toko online anda memakai template apapun asalkan masih menggunakan
plugin 2oo"ommerce maka caranya tetap sama dan yang membedakan hanya
pengelolaan dan pengaturan templatenya saja.
Pada tahap ke 4@ ini kita hanya akan menyempurnakan tampilan 3omepage toko online
kita menjadi terlihat lebih pro*essional lagi dan lebih terlihat kreati* dan unik meskipun
template yang kita pakai hanyalan template gratisan.
Target yang ingin kita capai dalam tutorial ini bisa anda lihat pada gambar dibawah ini
atau jika ingin lebih jelas lagi silahkan kunjungi DEMO secara ve nya. Disana bisa kita
lihat bahwa pada halaman homepage kita ada Slideshow , Produk terbaru , Slide
testimonial dari customer, Sebuah Dideo /e!iew Produk dan Da*tar nama bank yang kita
sediakan sebagai metode pembayaran .
,ari kita mulai dari langkah yang paling mudah dan terlebih dahulu kemudian di teruskan
dengan langkah yang lebih sulit.

1. Insta, Settngs dan Add a SdeShow
7ita akan menambahkan *itur Slideshow di halaman beranda & homepage toko online kita
tersebut, untuk itu kita akan menggunakan sebuah plugin slideshow gratis yang namanya
adalah Slideshow j9uery image gallery
D
ownoad
Insta dan Aktfkan
Install plugin Slideshow j9uery image gallery diatas dan kemudian langsung anda akti*kan
plugins tersebut. )ika anda belum tahu caranya silahkan lihat pada artikel kami
mengenai cara mengnsta sebuah pugn d wordpress.

Settngs pugns Sdeshow
Setelah anda install dan mengakti*kan plugin tersebut maka selanjutnya kita akan
melakukan setting ukuran yang akan kita pakai dalam slideshow tersebut.
Dalam tutorial ini kita akan menambahkan sebuah slideshow dengan ukuran ?@;W ( =4@
p( 0 ote + ukuran image slideshow ini adalah ukuran yang pas untuk template ,ystile,
untuk template yang lain silahkan anda sesuaikan sendiri 1
.angkahnya adalah sebagai berikut +
1. Kk Sdeshows
2. Ph Genera Settngs
3. Ph Defaut Sdeshow Settngs
4. -nimation used for transition bet#een slides : Ph Sde Left, Anda
bebas memh |ens anmas yang anda suka, dsn sebaga contoh kam
memh Sde Left.
5. :umber of slides to 6t into one slide : Tus dsana angka 1
6. aOimum #idth! *hen maOimum #idth is (? maOimum #idth is
ignored :tus ebar magenya dsn yakn 1059 ( ebar mage 1059 px )
7. Proportional relationship bet#een slidesho#Is #idth and height
$#idth:height% : Hapus tusan yang ada dsana
8. Slidesho#Is height : Tus tngg magenya dsn yakn 430 ( tngg
mage 430 px )
9. 0mage beha>iour : Ph Natura and Centered
10. Settngan yang annya barkan sepert apa adanya , sekarang an|utkan
dengan mengkk tombo Save Changes.
Membuat Sdeshow Utama
Selanjutnya kita akan membuat sebuah slideshow utama untuk keperluan kustom
homepage kita ini. Slideshow utama ini merupakan Slideshow yang menggunakan
gambar.
+. Kk Add New
/. Tus nama sde show anda ( bebas )
0. Copy dan pastekan shortcode tersebut pada notepad , Shortcode nah
nant yang akan kta paka . Pada contoh n Shortcode sdeshow yang
kam buat adaah : 4slidesho%5deploy id=6+7768
9. Ph Tempate untuk Sdeshow-nya Fu Screen / Fu Wdth / Tanpa ada
Sdebar
Upload !mage untuk slidesho%
7arena pada settingan tadi kita menggunakan image sebanyak 4 buah dengan ukuran
image ?@;W ( =4@ p( maka kami sudah mempersiapkan ketiga image tersebut. )ika anda
belum mempunyai image untuk latihan ini maka anda bisa mendownload & memakai
image yang kami pakai untuk tutorial ini disini +
http://boggerdscuss.com/woocommerce/wp-content/upoads/kaos-
ubuntu1.png
http://boggerdscuss.com/woocommerce/wp-content/upoads/kaos-
kucng1.png
http://boggerdscuss.com/woocommerce/wp-
content/upoads/pa|angan1.png
#ntuk mengupload image slideshow tersebut lihat pada area sebelah kanan
Kk tombo Image Sde
Kk Seect Fes. Temukan dmana okas mage yang sudah kta
persapkan tad
Seteah ketemu maka upoad ketga gambar untuk sdeshow tersebut
secara bersamaan bar cepat
Seteah seesa proses upoadnya maka sahkan anda ph ketga
gambar tersebut kemudan Kk tombo Seect d po|ok kanan bawah
Kemudan sah keterangan yang dperukan untuk sdeshow anda
tersebut ( |udu , Deskrps dan URL yang mengarah kepada produk yang
dmaksud ) .
1. |udu yang akan dtampkan pada mage sde pertama
2. Deskrps untuk mage pada sde pertama
3. Lnk ke produk mage pertama
4. |udu yang akan dtampkan pada mage sde kedua
5. Deskrps untuk mage pada sde kedua
6. Lnk ke produk mage kedua
7. |udu yang akan dtampkan pada mage sde ketga
8. Deskrps untuk mage pada sde ketga
9. Lnk ke produk mage ketga
10. Kk tombo pubsh

Sekarang Slideshow utama kita sudah jadi dan mari kita lanjutkan dengan membuat
sebuah Te(t slideshow untuk testimonial dari customer kita.
Membuat Sdeshow Tambahan
#ntuk membuat slideshow yang dikhususkan sebagai tempat testimonial dari toko online
kita maka kita perlu membuat Slideshow berbentuk T6HT. "aranya agak mirip dengan
cara membuat slideshow yang menggunakan gambar diatas tadi, langsung saja mari kita
membuat slideshow tambahan ini.
7lik %dd ew Slideshow kemudian isikan hal : hal berikut ini
+. Tus |udu Sdeshow untuk testmona dar peanggan n , msa :
Testmona
/. Copy dan pastekan Shortcode tersebut pada Notepad, n nant yang
akan kta paka. Punya kam 4slidesho%5deploy id=6/9768
0. Ph Fu Wdth
9. -nimation used for transition bet#een slides : Ph Sde Down
2. aOimum #idth! *hen maOimum #idth is (? maOimum #idth is
ignored : Pastkan sa|a angkanya mash 1059
:. Slidesho#Is height : Gant dengan angka 40 . In maksudnya tngg
sdeshow untuk testmona tersebut hanya 40 pxe sa|a dan berbeda
dengan sdeshow untuk mage datas
;. Ph Yes pada kedua Ops tersebut
<. Ph No pada keempat Ops tersebut
Seteah tu arahkan pandangan anda ke kebeah kanan, Kk tombo Text
sde tersebut 4 ka ( dsn kam akan menampkan 4 buah testmona
dar customer sebanyak 4 buah ) . |ka anda ngn menampkan ebh dar 4
maka sesuakan sa|a dengan apa yang anda ngnkan. Lhat pada gambar
dbawah mengena apa yang anda harus akukan

Seteah seesa anda s testmona datas maka sekarang an|utkan
dengan mengkk tombo Pubsh.
Saat ini kita sudah mempunyai 8 buah slideshow +
1. Sdeshow daam bentuk Image
2. Sdeshow daam bentuk Text
Sekarang mari kita lanjutkan dengan langkah berikutnya

2. Mencar sebuah Vdeo
Silahkan anda cari sebuah !ideo dari Coutube atau jika anda mempunya !ideo sendiri
silahkan anda unggah ke Coutube terlebih dahulu dan "opy link url Dideo tersebut. Dalam
contoh ini kami memakai sebuah Dideo /e!iew mengenai iPhone ; dengan link sbb +
http+&&www.youtube.com&watchE!P.J*%nn!'g4I
"opy dan Paste link Dideo yang anda inginkan di otepad lagi, kita akan memakainya
nanti,

3. Menyapkan mage ogo Phan Bank
Disini kami telah membuat sebuah image yang berisikan A buah logo beberapa bank
ternama, pada toko online anda silahkan sesuaikan dengan rekening bank yang anda
punya dan yang anda pakai sebagai tempat penampungan pembayaran dari customer
anda.
5abungkan logo : logo Bank tersebut menjadi ? dengan ukuran ?@=; ( ?@@ p(. Disini
yang terpenting adalah lebarnyanya saja yang harus sama yakni ?@=; pi(el. .oh kenapa
berbeda dengan ukuran lebar image pada Slideshow yang pertama tadi ya E Ini memang
berbeda , setelah kami coba dengan beberapa image percobaan maka ketemulah ukuran
lebar yang pas untuk image logo bank ini.
Imagenya bisa anda pakai punya kami terlebih dahulu, untuk percobaan saja.
.ink + http+&&bloggerdiscuss.com&woocommerce&wp-content&uploads&A-bank.png

4. Membuat Sebuah Statc Page
Ini merupakan inti dari pembuatan kustom homepage untuk toko online kita tersebut, kita
akan memakai semua hal yang sudah kita persiapkan diatas,
,ari kita membuat sebuah static page baru yang akan kita pakai sebagai template
halaman homepage toko online kita ini.
1. Kk Pages
2. Kk Add New Page
3. Tus |udu Statc Page anda
4. Tempate , ph Fu Wdth
Setelah anda tulis judulnya dan juga memilih *ull width sebagai template dari halaman
static ini maka yang harus anda lakukan adalah sebagai berikut .
Silahkan susun dengan urutan yang ada pada gambar diatas , setelah selesai klik
Publish. #ntuk keterangan rincian pembuatannya static page untuk homepage ini bisa
anda baca pada tahap selanjutnya.
"ara membuat toko online menggunakan
2oo"ommerce 0Tahap Tiga Puluh Satu1
Seperti yang sudah kami janjikan kemarin pada tahap tiga puluh satu ini kami akan
meneruskan tutorial yang belum komplit dari tutorial sebelumnya. Disini kami akan
membahas mengenai membuat static page yang akan kita pergunakan sebagai
3omepage toko online yang kita buat.
%nda tidak harus mengikuti susunan yang sama seperti yang kami buat ini, namun yang
kami harapkan kepada anda adalah anda mendapatkan ide tentang bagaimana membuat
sebuah custom page untuk toko online anda tersebut. ,ungkin imaginasi anda akan lebih
baik lagi dari kami sehingga bisa menghasilkan sebuah design yang lebih bagus untuk
toko online anda tersebut.
,ari kita lihat lagi gambar terakhir dari tutorial pada tahap 4@ kemarin. Silahkan anda
perhatikan gambar dibawah ini +
'! Silahkan anda tulis Rudul Static Page anda? karena "udul ini
nantinya muncul atau terlihat oleh customer kita maka buatlah "udul
dengan menggunakan kata 7 kata yang menarik!

2! Pilih editor modenya N Visual ! /ihat gambar diatas!
1! Copy Paste Shortcode Slidesho# anda yang pertama
Shortcode Slideshow punya kami yang pertama adalah seperti ini +4slidesho%5deploy
id=6+7768
2! )emudian kita akan memberikan sedikit "arak antara Slidesho#
dengan )ata; kata koleksi terbaru
#ntuk memberikan sedikit jarak tersebut kita akan memasukkan Di!ider , "opy paste
shortcode Qdi!iderR ini tepat dibawah Shortcode slideshow yang pertama tadi.
%tau anda juga bisa memasukkan Shortcode Di!ider ini dengan cara berikut
1. Kk Woothemes Shortcode con
2. Letakkan kursor mouse anda datas tusan Dvder
3. Kk / Ph Dvder

3! )emudian kita akan membuat kata )./@)S0 T@&B-&9 D0 T.).
)-0
1. Kk Bod ( Mode tusan teba )
2. Ph agnmentnya Center ( supaya tusan kta berada d tengah )
3. Kk Paragraph
4. Sean|utnya Kk Headng 3 ( agar tusan yang kta buat agak besar )
"opy paste tulisan berikut dibawah barisan Di!ider tadi
)"=>)S! ?>'.('U &! ?")"
)(M!
4! Selan"utnya kita akan memasukkan recent products / produk
terbaru diba#ah tulisan tersebut! :amun kita hanya akan
memasukkan 2 buah produk sa"a
1. Kk WooCommerce con
2. Ph Recent Products
Setelah anda klik /ecent products maka shortcodenya akan muncul , lihat gambar
dibawah

Shortcodenya kira : kira seperti ini+
QrecentXproducts perXpagePY'2Y columnsPY=Y orderbyPYdateY orderPYdescYR
5anti angka '2 tersebut dengan angka 2 supaya produk yang ditampilkan hanya = buah
produk saja. Secara jika kita lihat 0 pre!iew 1 maka akan terlihat seperti pada gambar
berikut.
5! /angkah berikutnya kita akan menambahkan kata Testimonial dari
pelanggan
.akukan hal yang sama dengan langkah no 4 diatas , namun yang berbeda 3eading-nya
saja , pilih 3eading ; kemudian copy paste tulisan berikut ini
?estimonial dari pelanggan kami

antinya akan terlihat seperti pada gambar berikut


8! Sekarang kita akan menambahkan Shortcode Slidesho# Testimonial
yang sudah kita buat sebelumnya
"opy dan Pastekan Shortcode anda dibawah kata : kata Testimonial dari pelanggan kami
tersebut
4slidesho%5deploy id=6/9768
=! :ah? kita akan menambahkan lagi sebuah Di>ider! :amun kali ini
supaya Di>ider tersebut mempunyai garis maka kita akan
menambahkanDi>ider yang "enis AoriFontal &ule
1. Kk Woothemes Shortcode con
2. Letakkan kursor mouse anda datas tusan Dvder
3. Kk / Ph Horzonta Rue
antinya setelah anda klik horiJontal rule diatas maka akan terlihat seperti berikut ini
'(! Sekarang kita tambahkan lagi sebuah tulisan sebelum embed
>ideo dari Moutube
"aranya sama dengan langkah no ; namun untuk 3eadingnya silahkan pilih 3eading ?
Revew Phone 5 terbaru !!

anti harus terlihat seperti pada gambar dibawah ini
''! Tiba saatnya kita memasukkan >ideo dari Moutube
7emarin kami telah mempersiapkan sebuah Dideo dengan #/. berikut +
http+&&www.youtube.com&watchE!P.J*%nn!'g4I
Sebenarnya ada banyak cara yang bisa kita lakukan untuk embed !ideo ini, kami pernah
mengulasnya dsn
amun jika kita memakai cara tersebut maka customer bisa dengan leluasa melihat !ideo
tersebut langsung dari Coutube dan tentunya mereka akan meninggalkan toko online kita.
Berikut contohnya :
6mbed Dideo secara langsung menggunakan cara diatas & metode pada artikel kami
tersebut
)ika anda klik logo Coutube pada pojok kanan bawah maka anda akan bisa melihatnya
langsung !ideo tersebut melalui Coutube.

Sekarang coba klik logo Coutube yang ada pada embed Dideo dibawah ini..

Sudah tahu bedanya bukan E ah sekarang kami akan menunjukkan bagaimana caranya
supaya !ideo yang kita embed dari Coutube tersebut tidak bisa dilihat ke sumbernya &
youtube.
Perhatikan .ink Coutube Dideo kami ini + http+&&www.youtube.com&watchE
!P/Ff-nn>.g10
7ita hanya membutuhkan tulisan yang berwarna merah paling belakang
Oobject widthPL32(L heightPL1((L classidPLclsid+d8<cdbAe-aeAd-??c*-WAbZ-
===;;4;=@@@@[
codebasePLhttp+&&download.macromedia.com&pub&shockwa!e&cabs&*lash&sw*lash.cab\!ers
ionPA,@,=@,@[$Oparam namePLallow-ullScreenL !aluePLtrueL &$Oparam namePLwmodeL
!aluePLtransparentL &$Oparam namePLsrcL
!aluePLhttp+&&www.youtube.com&!&/Ff-nn>.g10L &$Oparam namePLallow*ullscreenL
!aluePLtrueL &$Oparam namePLallownetworkingL !aluePLinternalL &$Oparam namePL!alueL
!aluePLinternalL &$Oembed widthPL32(L heightPL1((L typePLapplication&(-shockwa!e-
*lashL srcPLhttp+&&www.youtube.com&!&/Ff-nn>.g10L allow-ullScreenPLtrueL
wmodePLtransparentL allow*ullscreenPLtrueL allownetworkingPLinternalL
!aluePLinternalL &$O&object$

)eterangan :
1. Gant /Ff-nn>.g10 dengan tusan terakhr dar ur vdeo yang ngn
anda pasang ( ada 2 kode tersebut )
2. Gant ukuran ebar vdeo payernya 32( dan Tnggnya 1(( ( masng -
masng ada 2 kode tersebut)
3. |ka anda ngn menghangkan tur fuscreen nya maka gant
tusan truemen|ad Fase.
Dalam contoh ini kami akan menempatkan embed Dideo ini dengan kode diatas. "aranya
adalah sebagai berikut.
Sebelumnya kita dari tadi memakai editor mode Disual
#ntuk memasukkan kode embed Coutube diatas kita harus mengganti mode editor kita
dari !isual menjadi Te(t . )ika anda sudah berada pada posisi Te(t maka anda akan
melihat dilayar anda seperti pada gambar berikut ini.
3apus terlebih dahulu tulisan InbspU . )ika anda meletakkan kode Dideo dibawah tulisan
tersebut maka jarak antara tulisan /e!iew dengan Dideonya akan lebih lebar.
Setelah anda hapus , silahkan lanjutkan mempaste kode embed !ideo youtube anda tadi.
.ihat gambar dibawah ini
Sekarang ganti lagi mode editor tersebut ke mode Disual, maka anda akan melihat seperti
berikut
Posisi !ideo tidak berada di tengah, sekarang kita coba klik Pre!iew maka kita akan
melihat !ideo yang akan kita tampilkan di static page ini juga tidak berada di tengah
halaman.
Sekarang mari kita perbaiki posisi !ideo tersebut supaya berada di tengah halaman.
1. Kk pada area vdeo tad
2. Kk agnmentnya Center
)ika langkah anda benar maka sekarang akan terlihat seperti pada gambar berikut
'2! Sekarang kita akan menambahkan AoriFontal &ule lagi
.ihat lagi langkah no W diatas, setelah anda tambahkan horiJontal rulenya maka anda
akan melihat seperti pada gambar berikut
'2! ari kita lan"utkan dengan menambahkan tulisan Pilihan etode
Pembayaran
.akukan hal yang sama dengan langkah no 4 di atas dan pilih heading nya adalah
heading ;. "opy paste tulisan berikut atau anda bisa membuat dengan kata : kata yang
lain.
- Pilih Metode Pembayaran (nda
-
'1! Mang terakhir kita upload image logo bank
.ink image + http+&&bloggerdiscuss.com&woocommerce&wp-content&uploads&A-bank.png
"aranya sama seperti memasukkan image biasa, Setelah anda upload dan insert maka
akan terlihat seperti pada gambar berikut.
'2! Sekarang klik tombol publish
Proses pembuatan static page untuk custom homepage sudah selesai.
'3! Bagaimana cara supaya halaman static page tersebut men"adi
halaman home page toko online kita S caranya mudah sekali? silahkan
anda ikuti langkah berikut ini
1. Kk Settngs
2. Kk Readng
3. Ph Statc page
4. Ph |udu haaman statc page yang sudah kta buat datas
5. Kk Save Changes

Semoga penjelasan diatas bisa anda mengerti dan pahami dengan baik. Sampai jumpa
lagi pada tutorial berikutnya.
"ara membuat toko online menggunakan
2oo"ommerce 0Tahap Tiga Puluh Dua1
Setelah kita kemarin belajar membuat custom homepage untuk toko online kita maka
pada tahap ke 48 ini kita perlu menyempurnakan lagi kelengkapan yang perlu kita
sediakan untuk customer kita nantinya. Selain untuk keperluan customer ada juga yang
tidak kalah pentingnya yakni menyediakan in*ormasi selain in*ormasi mengenai produk
yang kita jual tersebut.
#ntuk itu kita memerlukan sebuah blog yang nantinya ber*ungsi sebagai sarana berbagi
in*ormasi dan sekaligus untuk mendatangkan pengunjung : pengunjung baru ke toko
online kita yang berasal dari search engine. ,eskipun tujuan utama kita adalah berjualan
online bukan berarti kita tidak membutuhkan blog, malah sebenarnya blog wajib ada
berdampingan dengan toko online kita karena terkadang blog yang anda sediakan di toko
online anda tersebut bisa menjadi salesman anda dikemudian hari.
.antas apa yang bisa kita sampaikan dalam blog tersebut E %nda bisa menulis hal : hal
yang masih ada sangkut pautnya dengan barang yang anda jual dan sekaligus dalam
artikel tersebut disisipkan link ataupun kalimat : kalimat yang berisikan penawaran barang
atau produk yang anda jual kepada mereka.
Tips + 7etika menyisipkan kalimat yang berisikan penawaran produk usahakan jangan
terlalu berlebihan dan jangan terlihat ada kebohongan disana. Buatlah senatural mungkin
sehingga mereka bisa terpancing untuk membeli produk kita tanpa harus merasa disuruh
atau dipaksa membeli oleh kita.

Cara menambahkan fasilitas Blog
'! 9ntuk menambahkan fasilitas blog di toko online kita?
caranya sangat mudah sekali! Mang perlu anda lakukan hanyalah
membuat sebuah halaman static page baru namun tanpa perlu anda
isi apapun!
1. Kk Pages
2. Kk Add New
3. Tus |udu statc pagenya ( Bog )
4. Kk tombo pubsh
2! Setelah anda publish static page yang sudah kita beri "udul
Blog diatas maka sekarang kita akan mencoba melihat bagaimana
tampilan halaman static tersebut
%nda akan melihat sebuah halaman kosong seperti pada gambar berikut ini
3alaman kosong diatas merupakan kerangka yang akan kita pergunakan sebagai
halaman postingan artikel : artikel yang kita publish melalui blog kita.

1! -gar kita bisa segera membuat artikel 7 artikel pada blog kita
dan agar artikel tersebut tidak muncul pada halaman homepage maka
kita perlu melakukan sedikit settingan lagi
1. Kk Settngs
2. Kk Readng
3. Ph Statc page
4. Ph Bog
5. Ph Summary
6. Kk tombo Save Changes
2! Sekarang anda sudah bisa memulai membuat artikel 7 artikel
di blog anda tersebut dengan cara berikut ini
1. Kk Posts
2. Kk Add New
#ntuk cara membuat artikel tentunya tidak perlu kami jelaskan secara detail karena
caranya seperti membuat artikel secara umum di 2ordPress.
3! asukkan link ke halaman blog anda melalui menu toko
online kita!
Pada artikel kami sebelum : sebelumnya sudah dijelaskan tentang bagaimana cara
memasukkan atau menambahkan menu di toko online kita tersebut. 7ami berharap anda
masih mengingatnya dan masing paham bagaimana caranya.

+asilitas lain untuk Customer
,engenai *asilitas untuk customer kita yang akan kita sediakan di toko online kita
tentunya masing : masing orang mempunyai pemikiran yang berbeda. )adi kami tidak
bisa memberikan sesuatu hal yang pasti mengenai apa yang harus anda sediakan untuk
customer anda.
Pada intinya, *asilitas yang ada di toko online anda tersebut harus bisa memberikan nilai
lebih kepada calon ataupun customer anda. 3al ini juga tergantung dari strategi marketing
anda dalam pengelolaan toko online anda.
"ara membuat toko online menggunakan
2oo"ommerce 0Tahap Tiga Puluh Tiga1 \ -IIS3
Setelah kita melalui sekian banyak tahapan dalam proses pembuatan toko online
menggunakan 2ordPress dan 2oocommerce ini, tentunya saat ini anda sudah banyak
mengerti dan juga paham dengan apa yang telah kami terangkan selama ini.
Secara keseluruhan kami telah menyampaikan panduan dasar dalam penggunaan
plugins 2oo"ommerce kepada anda. #ntuk lebih maksimal lagi anda bisa
mengembangkannya sendiri dan sesuaikan dengan produk yang anda jual.
#ntuk masalah kustomisasi template memang tidak terlalu banyak kami bahas pada
tutorial ini karena tutorial cara membuat toko online menggunakan 2oo"ommerce ini
sengaja kami *okuskan pada cara menggunakan plugins 2oo"ommerce nya.
#ntuk lebih mempercantik tampilan template toko online anda tersebut maka lakukanlah
sedikit tweak pada css dari template yang anda pergunakan. 7reati*itas anda tentunya
akan lebih menentukan apakah toko online anda akan terlihat unik dan berbeda dengan
toko online lainnya atau memiliki design yang sama dengan mereka.
)ika anda sudah memahami 2oo"ommerce maka memakai template apa saja tentu anda
tidak akan merasa kesulitan lagi.
Tahap 44 ini merupakan tahap terakhir dalam proses pembuatan toko online dengan
woocommerce. )ika toko online yang anda buat tersebut sudah jadi atau sudah selesai
secara keseluruhan maka yang harus anda lakukan adalah sbb+

Submt Toko Onne anda ke Googe, Bng dan
Yahoo
%gar toko online anda bisa di temukan oleh orang maka anda perlu mensubmit toko
online anda & menda*tarkan toko online anda ke 5oogle, Bing dan Cahoo.

Insta beberapa Pugns tambahan
#ntuk lebih menyempurnakan lagi kesiapan toko online kita maka diperlukan beberapa
plugins tambahan yang mungkin anda perlukan untuk toko online anda tersebut.
Berikut 8 kategori plugins 2ajib yang harus anda install
!nstall S>" plugins
%gar toko online kita berada pada halaman paling depan di mesin pencari kita perlu
menambahkan S6' plugins. #ntuk keperluan S6' anda bisa menginstall salah satu dari
plugins S6' yang ada pada artikel kami disini +
+ree S@. Plugins

!nstall ,ordPress Security plugins
3al terpenting ketika kita memiliki toko online atau ketika toko online kita sudah tersubmit
di search engine adalah masalah security.
Silahkan anda baca artikelnya pada artikel ini +
Securty Pugns 1
Securty Pugns 2

?ips untuk memperkuat system security
Pada artikel kami lainnya, kami telah membuat beberapa tips kecil agar toko online kita
tersebut tidak mudah kena 3ack oleh orang lain.
Silahkan anda baca disini +
Tps dan Aternatf Securty Pugns
)ika anda mengalami kendala dengan toko online anda tersebut, silahkan sampaikan
kendala atau permasalahan yang anda hadapi melalui kolom komentar dibawah ini.
Dengan senang hati kami akan mencoba mencarikan solusi permasalahan anda sebaik
mungkin.