TokoOnline

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 jika anda lihat toko online anda sekarang ini maka akan terlihat seperti berikut ini.

2. Setting template Mytile ( Logo Dan Favicon )
Untuk melakukan setting dasar template ini kita tidak perlu kemana – mana dan jangan klik ke halaman
lainnya, fokus saja terlebih dahulu di halaman ini. Lakukan setting dasar berikut :


Theme Stylesheet ini untuk merubah skin dari template Mystile tersebut, ada banyak pilihan
disana ada bisa mencoba – coba skin apa yang kira -kira anda sukai.



Custom logo adalah untuk mengganti logo untuk toko online kita. ( uk. 200 x 100 px )



Custom Favicon ( uk. 16 x 16 px )

Cara mengganti logonya dengan logo kita sendiri adalah sbb :


Klik tombol Upload pada Custom Logo



Setelah itu anda akan melihat halaman seperti dibawah. Klik Select Files



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 . Pilih
Full Size dan kemudian klik tombol Use this image

Logo anda akan terlihat seperti gambar berikut , kemudian hilangkan tanda centang pada baris



Text line

Lanjutkan dengan mengupload Favicon ( uk. 16 x 16 px ) dalam bentuk png file.





Lakukan hal yang sama seperti mengupload logo diatas. Setelah selesai maka selanjutnya kita
simpan pekerjaan kita diatas dengan mengeklik tombol Save All Changes



Lihat toko online anda maka disana sudah terpasang logo beserta faviconnya.

Untuk settingan yang lain akan kita bahas pada pembahasan selanjutnya
3. Install plugin WooCommerce dan YITH magnifier



Download WooCommerce Plugins di sini



Setelah anda download, install plugin tersebut kemudian aktifkan. Lihat artikelCara install
plugin di WordPress jika anda belum tau caranya. Setelah itu langsung aktifkan plugin tersebut.
Setelah anda aktifkan maka anda akan melihat halaman seperti pada gambar berikut. Kemudian
klik tombol Install WooCommerce Pages.



Setelah anda aktifkan maka selanjutnya kita akan menginstall sebuah plugins lagi kemudian
langsung anda aktifkan plugin tersebut, nama pluginnya YITH WooCommerce Zoom Magnifier

Kegunaan dari plugin ini adalah memberikan efek Zoom pada image produk toko online kita, jadi
ketika kursor mouse diarahkan diatas image produk yang kita jual maka plugin tersebut akan segera
bekerja sebagaimana fungsinya. Anda bisa mendownload plugin tersebut di sini

Agar lebih lebih mengerti maksud dari efek Zoom tersebut maka sebaiknya anda lihat demonya disini
Gimana ? lumayan keren bukan ? untuk ukuran sebuah plugin gratisan maka YITH merupakan solusi
yang terbaik untuk kita pakai guna mempercantik toko online kita dan terlihat lebih profesional.
Sementara sampai disini dulu tutorial mengenai cara membuat toko online menggunakan
WooCommerce tahap pertama ini. Nanti kita akan melanjutkannya 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 Dua)
Cara mensetting YITH Magnifier


Klik Plugins



Klik Installed Plugins



Klik Settings pada YITH Magnifier



Pada posisi General settings nya, centanglah Enable YITH Magnifier danForcing Zoom Image
Sizes



Kemudian lihat pada bagian Magnifier Settings. Lakukan persis seperti gambar berikut

Lihat lagi kebawahnya pada bagian Slider Settings, lakukan lagi persis seperti gambar dibawah in
dan diakhiri dengan menyimpan pekerjaan kita dengan mengklik tombol

Jika kita lihat dari awal maka pekerjaan kita diatas langkahnya seperti gambar dibawah ini . Untuk
memperbesarnya klik kanan pada gambar kemudian klik View image

Cukup sekian dulu tutorial yang kedua ini, pada kesempatan mendatang kita akan melanjutkan dengan
tutorial yang ketiga dan seterusnya. Tetap semangat dalam proses belajar ini dan yakinlah kepada diri
anda bahwasanya anda mampu dan bisa membuat toko online anda dengan baik dan benar.

WooCommerce (Tahap Tiga)

Cara Mensetting WooCommerce
Untuk melakukan setting dasar WooCommerce ini maka anda bisa langsung menuju
WooCommerce > Settings . Setelah terbuka halaman settings tersebut maka anda akan melihat 10
Tabs yang harus kita setting disana :

1.

General

2.

Catalog

3.

Pages

4.

Inventory

5.

Tax

6.

Shipping

7.

Payment Gateway

8.

Emails

9.

Integration

10.

Magnifier ( Sudah kita Setting Pada Tahap Dua )

Cara mensetting General
Ada 4 bagian pada tab General ini yang harus kita pahami cara mensettingnya.
Setting pada General Options


Base Location = Pilih lokasi anda saat ini atau lokasi toko online anda. Dalam contoh ini
karena lokasi saya berada di Riau maka saya pilih Indonesia – Riau



Currency = Jika target anda adalah customer dari Indonesia maka pilih Indonesia Rupiah
(Rp) namun jika targetnya adalah International maka pilih Dollar



Allowed Countries = Secara default anda akan melihat All Countries disana. Karena target
yang kita bidik disini adalah orang Indonesia maka kita pilih Specific Countries dan kemudian
akan muncul pilihan dibawahnya



Specific Countries = Cari negara Indonesia



Store Notice = Jika ini anda centang maka akan keluar Sticky Bar diatas toko online anda.
Gunanya untuk memberitahu kepada orang bahwasanya toko ini hanya untuk Demo atau

nantinya bisa juga anda pakai untuk memberikan pesan cepat ke customer anda apabila ada
promo diskon, penawaran khusus atau Kupon Code
Agar lebih jelas silahkan perhatikan gambar dibawah ini

Setting Pada Cart, Checkout dan Accounts


Coupons = Centang ini jika anda ingin menggunakan fasilitas kupon belanja untuk toko
online anda jika tidak ingin memakai kupon maka tidak perlu anda centang.



Checkout = ada 3 opsi di sini, berikut penjelasannya

- Enable Guest Checkout = Centang ini jika anda mengijinkan orang berbelanja di toko online anda
tanpa melakukan registrasi terlebih dahulu. Misalnya saya berkunjung ke toko online anda dan saya
ingin membeli produk yang anda jual tapi saya males untuk mendaftar, karena anda mencentang
opsi ini maka saya masih bisa berbelanja di toko online anda tanpa harus registrasi terlebih dahulu.
- Enable customer note field on Checkout = Jika anda centang ini maka ketika customer anda akan
melakukan Checkout mereka bisa menambahkan pesan singkat kepada anda sebagai pemilik toko
online. Misalnya isi pesannya : ” tolong sms kalau barang sudah dikirim ya “. Posisi note field
tersebut akan terlihat di halaman Checkout seperti gambar dibawah ini.

- Force Secure Checkout = Centang ini jika anda mempunyai atau membeli atau menggunakan
fasilitas SSL untuk toko online anda (https) namun karena kita akan menggunakan direct transfer
maka anda tidak perlu mencentang ini dan tidak perlu membeli SSL


Registration = Centang saja semua pilihan disitu



Customer Account = Centang pilihan pertama dan ke tiga, untuk yang kedua jangan
dicentang. Gunanya tidak dicentang adalah jika customer anda membuat akun ditoko online
anda dan dia sudah mengumpulkan barang yang akan dibeli ditoko online anda namun belum
akan membeli pada saat itu juga maka ketika mereka kembali login ke toko online anda
barang yang sudah mereka rencana beli tidak hilang dan tidak perlu mencari lagi.

Setti
ng pada Style And Scripts


Centang saja semuanya

Setting pada Downloadable Products


Untuk yang ini tidak perlu ada setting . Namun jika anda berjualan produk digital seperti
ebook, software, template dll maka anda perlu mensetting ini

Jika kita lihat secara keseluruhan maka urut – urutannya adalah seperti gambar berikut ini.

Sampai disini dulu penjelasan cara membuat toko online menggunakan WooCommerce tahap tiga.

WooCommerce (Tahap Empat)
Cara Mensetting Catalog
Berikut cara mensetting bagian katalognya, perhatikan gambar berikut dan lakukan hal
yang sama seperti yang kami lakukan.
1.

Pastikan anda memilih tab Catalog

2.

Default Product Sorting = Pilih Default sorting

3.

Shop Page Display = Pilih Show Both

4.

Default Category Display = Pilih Show products

5.

Add to Cart = Centang pada enable AJAX add to cart buttons on archives

6.

Product Fields = Centang semuanya

7.

Weight unit = Pilih Kg

8.

Dimention unit = Pilih Cm

9.

Product ratings = Centang semuanya

10.

Currency Position = Left

11.

Thousand separator = Ganti dengan . ( Titik )

12.

Decimal separator = Gantin dengan , ( Koma )

13.

Trailling Zeros = Pastikan anda mencentang Remove zeros

14.

Image Options = Centang semua

15.

Klik tombol Save Changes

Cara Mensetting 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. Namun jika anda ingin membuatnya sekarang
maka setelah static page anda ter-publish anda bisa memilihnya disitu dan kemudian klik
tombol Save Changes.
Untuk membuat Static page anda bisa memilih Pages > Add New . Beri judul Peraturan
Belanja / Tata Cara Berbelanja / apa saja terserah anda. Nantinya judul tersebut akan
muncul di pilihan Term Page ID.

Cara Mensetting Inventory
Pada tabs Inventory 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.

Pastikan anda berada pada tab Inventory

2.

Manage Stock = Centang enable Stock Management. Berguna untuk menampilkan opsi
ketersediaan stok barang yang kita jual pada customer

3.

Notifications = Centang kedua opsi yang ada

4.

Notification Recipient = Masukkan / ketik email anda disana , gunanya untuk menerima
pemberitahuan jika ada order

5.

Low Stock Threshold = 2

6.

Out Off Stock Threshold = 0

7.

Stock Display Format = Always Show Stock

8.

Klik Save Changes

Untuk tahap keempat ini cukup sekian dulu, pada kesempatan mendatang kita akan
melanjutkan dengan tahapan berikutnya.

WooCommerce (Tahap Lima)
Cara mensetting tab Tax
Opsi Tax atau pajak ini sebetulnya tidak begitu perlu untuk pemilik online yang masih
pemula dan belum beromset besar. Jadi untuk bagian Tax ini silahkan anda lewati saja
tidak perlu anda setting apapun.

Cara mensetting tab Shipping
Pada tab shipping merupakan tempat untuk mengaktifkan biaya pengiriman atau ongkos
kirim pada produk yang kita jual di toko online kita.

Untuk mengaktifkan fitur ongkos kirim ini silahkan anda melakukan hal berikut :
1.

Klik tab Shipping

2.

Pastikan anda berada pada Shipping options

3.

Shipping Calculations = Centang Enable shipping dan

4.

Centang juga Enable the shipping calculator

5.

Shipping method display = Radio buttons

6.

Shipping Destination = Ship to billing address by default

7.

Pada shipping methods biarkan saja terlebih dahulu apa adanya

8.


Setelah anda save maka sekarang kita fokus ke bagian Shipping Methods, secara default
maka Free Shipping /Ongkos kirim gratis akan aktif di toko online anda. Lihat gambar
dibawah agar anda mengerti maksu kami tersebut

Selanjutnya kita akan menonaktifkan metode pengiriman gratis ini, caranya sebagai
berikut :
1.

Klik Free Shipping

2.

Enable/Disable = Hilangkan tanda centang yang ada disana

3.


Selanjutnya kita akan mengaktifkan salah satu metode pengiriman yakni Flat Rate, jadi
pengiriman dengan tujuan kemana saja tarifnya sama. Ini contoh saja, jika anda ingin
mengaktifkan tarif yang lain ( misalnya untuk pengiriman keluar negeri atau keluar pulau )
disana masih ada pilihan yang bisa anda aktifkan juga.
1.

Klik Flat Rate

2.

Enable/Disable = Centang Enable this shipping method

3.

Availability = Specific Countries

4.

Pilih Indonesia

5.

Tax status = Pilih None

6.

Cost per Order = Masukkan tarif ongkos kirimnya disitu ( contoh : 20000 ) penulisan angka
tidak usah pakai titik.

7.


Nantinya jika dilihat pada halaman Checkout akan terlihat seperti pada gambar berikut

Semoga anda tidak mengalami kesulitan dalam menerapkan langkah kelima ini.

WooCommerce (Tahap Enam)
Pada tahap ke enam ini cara membuat toko online dengan WooCommerce akan
menjelaskan tentang bagaimana langkah selanjutnya dalam mensetting plugin
WooCommerce melalui dashboard toko online wordpress anda.
Harap diperhatikan dengan seksama dan juga dipahami agar anda tidak kebingungan di
kemudian hari.
Ada 3 tab lagi yang belum kita setting pada tahap sebelumnya :
1.

Payment Gateways

2.

Email

3.

Integration

Untuk tahap ke enam ini kita akan melakukan setting pada Payment Gateways saja
terlebih dahulu. Untuk Email dan Integration akan kami bahas pada tahap selanjutnya.

Cara Mensetting Payment Gateways
Untuk payment gateways ini karena kita fokus untuk membuat toko online dengan target
cutomer dari Indonesia maka kita hanya akan menggunakan sistem pembayaran Direct
Bank Transfer saja atau pembayaran via transfer bank.
Ketika kita buka tab Payment Gateways maka secara default anda akan melihat halaman
seperti dibawah ini

Ada 2 sistem pembayaran yang aktif saat ini yakni :


Direct Bank Transfer



Cheque Payment

Karena kita hanya akan memakai sistem Direct Bank Transfer maka kita akan
menonaktifkan sistem pembayaran melalui Cheque. Untuk menonaktifkan Cheque
Payment silahkan ikuti langkah berikut ini :
1.

Klik Cheque

2.

Hilangkan tanda centang

3.

Klik Save Changes

Setelah kita hilangkan sistem pembayaran melalui cheque maka kita akan
melanjutkannya mengedit sistem pembayaran via transfer yang kita akan pergunakan.
Kita akan memasukkan informasi Rekening Utama yang akan kita jadikan tempat tujuan
transfer uang dari customer kita. Jika anda mempunyai banyak Rekening Bank maka
anda tidak melakukan hal ini juga tidak masalah. Dengan kata lain anda bisa melakukan
hal ini namun anda juga tidak perlu melakukannya ( tidak wajib )
1.

Klik BACS

2.

Title = Ganti tulisan Direct Bank Transfer dengan Pembayaran Via Transfer

3.

Cutomer Message = Ganti dengan pesan dalam bahasa Indonesia. Contoh :Mohon lakukan
pembayaran melalui transfer ke rekening BCA kami segera setelah anda melakukan order.
Pengiriman barang yang anda pesan akan kami lakukan setelah uang yang anda transfer telah
kami terima dan kami verifikasi. Jika anda tidak mempunyai rekening bank selain bank BCA
maka ada bisa mentransfer uang pembayaran tersebut ke rekening bank kami yang lainnya
( Lihat halaman Cara Berbelanja )

4.

Account Name = Isi dengan nama pemilik rek yang akan anda pergunakan

5.

Account Number = Isi dengan no rekening anda

6.

Bank Name = Isi nama bank anda , dalam contoh ini kami menggunakan BCA

7.

Klik Save Changes

Kira – kira setelah anda edit akan terlihat seperti pada gambar dibawah

Jika 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 Order mereka selanjutnya akan melihat
informasi rek BCA yang sudah kita masukkan diatas.

Proses setting tab Payment Gateways ini sudah selesai. Semoga tutorial ini bisa
bermanfaat bagi anda.

WooCommerce (Tahap Tujuh)
Cara membuat toko online pada tahap tujuh ini akan membahas mengenai cara
mensetting plugin woocommerce pada Tabs Email.
Tidak terlalu sulit namun yang terpenting disini anda mengerti dan memahami cara
mengeditnya dan memahami alur kerjanya.
Langsung saja kita mulai dengan mensetting dari yang paling awal yakni pada halaman
Email Options. Lebih lengkapnya silahkan simak tutorial berikut ini

Cara Mensetting Tab Emails
Setting pada Email options

•

1.

Klik Emails

2.

Pastikan anda pada posisi Email Options ( Secara Default akan langsung berada pada posisi
ini )

3.

“From” Name = Tulis Nama Toko Online Anda ( Misal : Woo Store )

4.

“From” Email Address = Tulis Alamat Email anda yang nantinya akan berguna untuk :
Menerima email pemberitahuan kalau ada orderan dari customer, Sebagai email Sender
pemberitahuan ke customer ketika mereka melakukan order. Untuk email ini sebaiknya anda
menggunakan email dari domain anda ( Contoh : no-reply@domain-anda.com / customerservice@domain-anda.com )

5.

Header Image = Anda bisa memasukkan link logo toko online anda disini. Nantinya semua
email baik itu pemberitahuan ke anda sendiri dan customer anda logo tersebut akan menjadi
logo template email tersebut.

6.

Email Footer Text = tulis sesuai dengan apa yang anda inginkan. ( Contohnya anda bisa
menulis Nama Toko Online anda beserta slogan dari toko online anda disana )

7.

Pada bagian ini anda bisa merubah warna tampilan template email toko online anda

8.

Klik Tombol Save Changes

Jika anda tidak melakukan edit pada langkah no 5 dan no 7 maka yang terjadi jika
misalnya ada customer anda melakukan order di Toko Online anda yang terjadi adalah
sebagai berikut :

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

Customer :
Dan customer anda akan menerima email seperti dibawah ini

Setting pada New Order

•

Ini untuk email pemberitahuan ke Pemilik Toko jika ada orderan dari customer. Untuk
mendapatkan email pemberitahuan tersebut maka yang perlu anda lakukan adalah
sebagai berikut :
1.

Pastikan anda berada pada posisi Tabs Emails

2.

Klik New Order

3.

Enable/Disable = Centang Enable this email notification

4.


Set
elah anda klik tombol save changes maka jika ada orderan dari orang atau customer toko
online anda maka anda akan di beritahu melalui email yang sudah anda isi pada Email
Options no.4 diatas

Setting pada Processing Order

•

Ini untuk email pemberitahuan ke Customer setelah mereka sukses melakukan order di
Toko Online kita namun belum melakukan transfer pembayaran. Untuk bisa mengirimkan
email pemberitahuan tersebut maka yang perlu anda lakukan adalah sebagai berikut :
1.

Pastikan anda masih pada halaman Tab Emails

2.

Klik Processing Order

3.

Enable/Disable = Centang Enable this email notification

4.


Setelah anda klik tombol save 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.

Setting pada Completed Order

•

Pada bagian Complete Order ini berguna untuk mengirimkan email pemberitahuan ke
pembeli bahwa pembayaran mereka sudah di terima / diverifikasi oleh kita bahwa transfer
yang mereka lakukan sudah di terima dan barang siap di kirim. ( anda juga harus
menjelaskan hal ini kepada customer anda di halaman cara berbelanja di toko online anda
)
Untuk bisa mengirimkan email pemberitahuan tersebut maka yang perlu anda lakukan
adalah sebagai berikut :
1.

Pastikan anda masih di halaman Tab Emails

2.

Klik Completed Order

3.

Enable / Disable = Centang Enable this email notificaton

4.


•

Setting pada Customer Invoice,Costumer Note,Reset Password dan juga New Account
Lakukan hal yang sama untuk Customer Invoice, Customer Note, Reset Password dan
juga New Account yakni centang pada Enable this email notification dan jangan lupa klik
tombol Save Changes.
Proses mensetting tab Emails sudah selesai. Untuk langkah berikutkan akan kami
sampaikan pada kesempatan mendatang. Selalu selalu kunjungi blog ini secara reguler
untuk mengetahui tutorial selanjutnya.

WooCommerce (Tahap Delapan)
Pada tahap delapan ini kita akan belajar atau mensetting plugin WooCommerce pada tab
Integration. Pada bagian ini ada tiga bagian yang perlu kita kerjakan disini yakni :


Google Analytics



Share This



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 setting pada Google Analytics
1.

Klik Tabs Integration

2.

Pilih Google Analytics ( secara default akan langsung terbuka )

3.

Masukkan ID Google Analytics Anda ( anda harus mendaftar atau membuat akun
GA untuk Toko Online Anda )

4.

Centang ketiga opsi tersebut ( Tracking Code )

5.


Cara setting pada Share This
1.

Klik Tab Integration

2.

Pilih Share This

3.

Masukkan ID Share This Publisher Anda ( Daftar Akun Share This Di Sini )

4.


Ca
ra setting pada Share Your Cart
1.

Klik Tab Integration

2.

Pilih Share Your Cart

3.

Buat Akun Share Your Cart Untuk Toko Online Anda

4.

Klik Tombol Enable pada bagian API Status ( Secara default belum diaktifkan atau masih
dalam kondisi disable )

5.

Masukkan ID Share Your Cart Anda

6.

Masukkan App Key Akun Share Your Cart Anda

7.


Akhi
rnya setting pada plugin WooCommerce 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 WooCommerce maupun artikel menarik kami
lainnya.

WooCommerce (Tahap Sembilan)
Cara membuat toko online menggunakan WooCommerce 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.
Ada beberapa teknik atau metode yang bisa kita pakai dalam WooCommerce ini. Mari kita
mulai dari yang paling mudah terlebih dahulu.
Nanti anda bisa menyesuaikan dengan kebutuhan toko online anda dan juga selera anda.

Cara Posting Product WooCommerce
Silahkan anda buka halaman Posting Product dengan langkah sebagai berikut :
1.

Klik Products

2.

Pilih Add Products

Secara default 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 ( Product
Type / Tipe Produk ) . Jika anda klik pada area Product Type tersebut anda akan melihat
4 pilihan tipe produk yakni :
1.

Simple product

2.

Grouped product

3.

External/Affiliate product

4.

Variabel 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 :


Minimal 500 x 500 pixel dan



Maksimal 2.000 x 2.000 pixel

Simple product bisa anda pergunakan jika produk yang anda jual tersebut hanya
mempunya 1 model dan 1 warna. Dalam contoh ini kami memiliki 2 buah photoproduk
modelnya sama dan warnanya sama dengan ukuran 1024 x 576 px 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 Zalora.

Jika anda mempunyai photo lebih banyak maka akan terlihat lebih baik. Calon customer
anda lebih leluasa melihat apakah produk yang anda jual tersebut cocok bagi mereka.
Usahakan kualitas gambarnya seperti pada contoh dibawah ini ( klik pada gambar
dibawah untuk melihat kualitas gambar )
Note : Semakin bagus kualitas gambar maka semakin bagus pula ketika di Zoom dengan
YITH Magnifier plugin.

Mari kita mulai memposting produk untuk toko online kita.
1.

Tulis Judul Produk Anda

2.

Tulis Deskripsi full produk anda tersebut

Setelah selesai proses diatas maka lanjutkan dengan melihat ke bawah ( Pada Product Data )
1.

Pastikan anda memilih atau berada pada Simple Product

2.

Virtual dan Downloadable jangan anda Centang ( Hanya untuk produk digital seperti :
eBook, Software dll )

3.

Buat SKU produk anda tersebut ( Misal : CAM123456 )

4.

Tulis Harga produk anda pada Regular Price ( Penulisan angka tidak perlu pakai titik ,
misal : jika anda menulis harga Seratus Ribu maka tulislah 100000 jangan 100.000 )

Pada contoh ini , SKU kami tulis CAM123456 dan Harga kami tulis 4500000

Jika kita lihat ( Klik Preview ) maka anda kan melihat halaman produk anda seperti
gambar dibawah ini.

Jika anda ingin membuat promo dengan memberikan diskon pada harga produk tersebut
maka anda bisa langsung mengisi harga sesudah diskonnya pada area / kolom Sale
Price.
Contoh :
misalnya harga barang tersebut menjadi 4 juta maka anda tulis disana 4000000

Maka jika di lihat lagi ( preview lagi ) anda akan melihat halaman produk anda seperti
berikut

Jika anda ingin membuat periode diskon produk anda tersebut maka yang perlu anda
lakukan adalah :


Klik Schedule



Pilih tanggal mulai berlaku diskon sampai masa berakhir diskon ( Klik pada icon
Kalender )

Pada contoh ini kami membuat masa diskon dari tanggal 13 Agustus 2013 s/d 30 Agustus
2013

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. Nanti kami lanjutkan lagi dalam tutorial berikutnya
masih pada produk data ini.
Semoga anda tidak mengalami kesulitan dalam mempelajari hal diatas.

WooCommerce (Tahap Sepuluh)
Pada langkah ke sepuluh ini kita akan melanjutkan tutorial sebelumnya yakni memposting
produk dengan product type – simple product. ( Tahap Sembilan )
Jika anda sampai pada artikel ke sepuluh ini langsung dari Google Search maka anda
perlu untuk membaca keseluruhan artikel dari yang pertama supaya tau jalan ceritanya.
Sekedar mengingatkan kembali bahwasanya kita kemarin sudah sampai pada bagian
Product Data – Simple product dan masih pada area General. Lihat gambar dibawah.

Mohon diperhatikan dengan seksama agar anda mengerti dan memahami penjelasan dari
kami. Tidak perlu terburu – buru dalam membaca artikel ini. Karena tutorial tahap
kesepuluh ini sedikit agak rumit terutama bagi anda yang belum mengerti betul langkah –
langkah sebelumnya.
Mari kita langsung melanjutkan belajar ke langkah selanjutnya

INVENTORY


Klik Inventory

Inventory ini berguna apabila anda ingin menunjukkan jumlah stok barang atau produk
yang anda jual. Misalnya anda menjual Kamera Nikon D5200 DSLR Camera 24.1MP
( seperti dalam contoh ini ) Stok anda misalnya cuman ada 5 unit, jika anda ingin
menampilkan informasi stok kamera tersebut ke calon pembeli anda maka anda bisa
melakukannya dari sini.

Keuntungan bagi pemilik toko online dan calon pembeli :


Pemilik toko online : Jika kebetulan produk yang anda jual tersebut fast moving ( produk
yang laku keras ) maka informasi ketersediaan stok terhadap calon pembeli bisa
mempengaruhi calon customer anda untuk sesegera mungkin mengambil keputusan untuk
sesegera mungkin melakukan order agar tidak kehabisan. Sangat berguna ketika toko online
anda sedang ada promo diskon.



Calon pembeli : Mengetahui ketersediaan stok bisa meyakinkan mereka bahwasanya
apabila mereka membeli produk tersebut mereka yakin barang yang mereka pesan bisa mereka
dapatkan.

Untuk mengaktifkan fitur ini
1.

Centang pada ” Enable stock management at product level “

2.

Isi Jumlah stok produk anda

Mari kita coba lihat ( preview ) tampilan halaman produk tersebut, anda akan melihat
jumlah stok produk anda disana.

SHIPPING


Klik Shipping

Pada bagian shipping ini berguna untuk mensetting atau memasukkan informasi
mengenai :
1.

Berat Produk tersebut

2.

Dimensi atau ukuran panjang, lebar dan tinggi produk tersebut

3.

Shipping class berguna untuk menerapkan ongkos kirim dari sebuah produk yang sejenis
( Flat Rate )

Penjelasan Shipping Class :
Agar lebih mudah memahami Shipping Class ini , kami akan menerangkan dengan
membuat contoh penerapannya.
Misalnya anda akan menerapkan ongkos yang sama untuk semua produk kamera digital
yang anda jual di toko online anda .
Andai kata / anggap saat ini anda menjual Kamera 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 ( contoh : ongkos kirimnya Rp.100.000 )
Kita 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.

Klik Products

2.

Pilih Shipping Classes

3.

Tulis Shipping Class yang kita inginkan ( dalam contoh ini kami membuat shipping class
baru untuk semua kamera digital maka kami tulis Kamera Digital )

4.

Slug = Tulis saja kamera-digital ( cara penulisan memakai huruf kecil semua dan pakai
tanda minus )

5.

Klik tombol Add New Shipping Class

Setelah itu Shipping Class baru untuk Kamera Digital akan muncul disebelah kanan

Buka di Tab baru web browser anda halaman WooCommerce Settings
1.

Klik WooCommerce

2.

Klik Settings

3.

Pilih Shipping

4.

Pilih Flat Rate

5.

Cost Per Order. Pada tutorial kemarin pada langkah kelima kita telah menuliskan biaya per
ordernya Rp. 20.000 karena kita akan menggunakan Shipping Class maka kita hapus saja
biaya tersebut. ( jika tidak dihapus maka biaya pengirimannya menjadi Rp.100.000 + Rp.
20.000 = Rp. 120.000 )

6.

Anda akan melihat Shipping Class baru yang sudah kita buat pada langkah diatas ( Kamera
Digital )

7.

Masukkan ongkos kirimnya pada kolom tersebut sebesar seratus ribu rupiah ( penulisannya
jangan pakai titik : 100000 )

8.


Sekarang kembali lagi ke halaman Posting Product tadi .


Klik Save Draft terlebih dahulu pada produk Nikon D5200 DSLR Camera 24.1MP tersebut
gunanya agar shipping class yang tadi kita buat muncul disana.



Lihat lagi ke bagian Shipping , sekarang Shipping Class yang kita buat tersebut akan berada
disana

Untuk melihat bagaimana sesungguhnya Shipping Class diatas bekerja mari kita lihat
bersama -sama :


Klik Preview Product ( halaman preview produk akan terbuka di tab baru web browser
anda )

Lihat Halaman Preview Produk tersebut
1.

Klik tombol Add to Chart ( tombol warna abu-abu gelap )

2.

Sesaat kemudian akan muncul Notifikasi atau pemberitahun Nikon D5200 …. sudah masuk
ke Cart . Lanjutkan dengan meng Klik tombol View Cart

Pada halaman View Cart inilah Shipping Class tadi bekerja , lihat gambar berikut

Lihat pada Shipping > Flat Rate … disana langsung tertera ongkos kirim untuk kamera
digital dengan menggunakan Shipping Class Kamera Digital sebesar Rp. 100.000 . Jika
nantinya anda memposting kamera kedua, ketiga dan seterusnya anda tinggal memakai
Shipping Class Kamera Digital tersebut.
Untuk produk lainnya misalnya Baju, Sepatu, Tas anda juga bisa membuat Shipping
Class yang sama dengan Kamera Digital yang sudah kami contohkan diatas.
Untuk sementara ini, cukup sekian dulu tutorial cara membuat toko online menggunakan
WooCommerce ini. Semoga penjelasan kami bisa anda mengerti dengan baik dan benar.

WooCommerce (Tahap Sebelas)
Cara 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.
Kali ini kita akan melanjutkannya dengan langkah berikutnya yang tentunya masih
berkaitan dengan memposting produk menggunakan Product Type – Simple Product.

LINKED PRODUCT


Klik Linked Product

Ada 3 bagian yang akan kami terangkan disini :
1.

Up-Sells

2.

Cross-Sells

3.

Grouping

Pada dasarnya ketiga hal diatas berguna untuk menawarkan produk alternatif lainnya ke
pelanggan agar mereka membeli produk lain yang masih ada kaitannya dengan produk
yang memang mereka inginkan atau mereka cari saat ini.
Jika di ibaratkan pada sebuah blog maka linked products ini seperti seperti artikel terkait.
Contohnya seperti berikut ini :

Jika pada toko online yang kita buat sekarang ini, nantinya akan terlihat seperti berikut
ini :

Mungkin saat ini Linked Products belum bisa langsung anda praktekkan karena anda
belum memposting produk – produk di toko online anda. Namun nanti setelah produk
anda sudah banyak maka anda bisa memakai fitur ini.
Berikut penjelasan mengenai Linked produtcs diatas…

Up-Sells
Up-Sells ini berguna untuk memberikan / menampilkan pilihan produk yang berkaitan
dengan produk yang ditawarkan pada saat customer melihat halaman produk. Lihat
demonya disini
Related produk yang tampil pada halaman tersebut ( You may also like .. ) merupakan
penawaran produk yang dibuat dari Up-Sells
Produk yang ditampilkan pada Up-Sells ini sebaiknya produk yang :
1.

Mempunyai kualitas lebih baik

2.

Aksesoris yang berkaitan dengan produk tersebut

3.

dll

Namun anda juga bisa menampilkan produk lainnya yang sesuai dengan keinginan anda.

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

Cara memasukkan produk kedalam Up-Sells


Klik pada text area Up-Sells



Ketik nama produk yang ingin ditampilkan ( Sebaiknya ketik SKU produk yang ingin kita
tampilkan disini agar lebih mudah )



Pilih Produk yang akan anda tampilkan, pada contoh ini saya sudah memposting 3 buah
produk dengan SKU CAM jadi kami memilih ketiga produk tersebut.

Cross-Sells
Cross Sells ini mempunyai fungsi yang sama dengan Up-Sells, namun Cross Sells akan
tampil pada halaman Cart. Ketika customer meng-klik add to cart dan kemudian meng-klik
view cart maka produk yang kita pilih untuk ditampilkan akan muncul disana.
Produk yang ditampilkan pada Cross Sell ini sebaiknya :
1.

Produk yang lagi diskon

2.

Aksesoris yang berkaitan dengan produk tersebut

3.

dll

Sama halnya dengan Up-Sells diatas anda juga bisa menampilkan produk lainnya yang
sesuai dengan keinginan anda.

Cara memasukkan produk kedalam Cross-Sells


Klik pada Text area Cross-Sells



Ketik nama produk yang ingin ditampilkan ( Sebaiknya ketik SKU produk yang ingin kita
tampilkan disini agar lebih mudah )



Pilih Produknya ( salah satu )

Grouping
Grouping ini akan kami jelaskan pada posting produk dengan Products Data – Grouped
Product. Secara garis besar Grouping ini akan sangat berguna jika anda mempunyai
produk yang banyak dan berencana membuat toko online yang besar dan komplek.

WooCommerce (Tahap Duabelas)
Cara membuat toko online dengan WooCommerce tahap duabelas ini masih melanjutkan
langkah sebelumnya pada tahap sebelas. Kemarin kita sudah sampai pada Linked
Products yang berfungsi seperti layaknya related artikel.
Mari kita lanjutkan dengan langkah berikutnnya dengan membuat attributes dari sebuah
produk. Attributes ini mempunyai fungsi seperti :


Membuat pilihan ukuran : XL, L, M, S



Membuat pilihan warna : Biru, Kuning, Merah, Hijau dan lain sebagainya

Selain kedua fungsi diatas anda juga bisa memakai attributes ini untuk berbagai
keperluan, tergantung dari jenis produk yang jual pada toko online anda.
Namun untuk Simple Product fungsi atribut ini belum bisa di pergunakan secara
maksimal. Disini kita hanya bisa membuat satu pilihan saja.
Setelah anda memahami fungsi dari atribut ini maka berikut langkah cara membuatnya :


Klik Attributes



Klik tombol Add



Anda akan melihat tampilan seperti gambar dibawah ini

Karena pada contoh ini kami akan memposting sebuah produk kamera Nikon dengan
warna merah maka kami akan membuat Attributes untuk kamera ini hanya dengan warna
saja yakni warna merah
1.

Name : Ketik Warna

2.

Value : Ketik Merah

3.

Centang Visible on the product page

4.

Klik Save Attributes

Maka jika kita preview akan terlihat seperti gambar dibawah:


Klik tab Additional Information

Untuk langkah berikutnya akan kami sampaikan pada kesempatan mendatang, Mohon
untuk dipahami tehnik memposting produk dengan Product Data – Simple product ini
terlebih dahulu karena ini yang paling mudah untuk diterapkan dan dimengerti.

WooCommerce (Tahap Tigabelas)
Tidak terasa tutorial cara membuat toko online dengan menggunakan WooCommerce 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 Advanced . Tidak banyak yang
perlu dijelaskan pada bagian ini karena sangat mudah sekali.
Mari kita lanjutkan dengan mempelajari bagian selanjutnya.

ADVANCED



Purchase Note : Anda boleh mengisi kolom ini jika anda ingin memberikan pesan
tambahan untuk pembeli anda.



Menu Order : Biarkan terisi angka 0 saja agar tidak membingungkan anda.



Enable reviews : Secara default themes ini otomatis mencentang pilihan enable reviews ini.
Namun jika anda tidak menginginkan pengunjung toko online anda mereview produk anda
maka hilangkan tanda centang yang ada disana.

CUSTOM FIELDS
Pada bagian Custom Fields ini tidak perlu anda isi apapun karena memang tidak begitu
penting. Lanjutkan 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 lihat ke bagian panel sebelah kanan. Lihat pada bagian
berikut :
1.

Product Categories

2.

Product Tags

3.

Product Gallery

4.

Features Image

Untuk lebih jelasnya perhatikan gambar berikut ini.

Untuk Product Categories dan Product Tags ( Point 1 dan 2 ) tentunya anda sudah paham
maksud dan cara penggunaannya. Sedangkan untuk point 3 dan 4 berikut
penjelasannya :


Product Gallery

Adalah tempat untuk meletakkan image atau gambar pendukung produk kita ( tampak
belakang, tampak dari atas , tampak samping , dll )


Featured Image

Adalah image atau gambar yang paling utama dan yang akan terlihat besar. Featured
image ini juga secara otomatis akan tampil juga pada product gallery ( tampak depan )
Featured image ini akan menjadi image yang terlihat terlebih dahulu oleh calon pembeli
kita.
Lihat contoh pada gambar dibawah ini.

Cukup jelas bukan maksud dan tujuan dari Product Gallery dan Featured Image ini ??

Mari kita mulai dengan mengupload image atau gambar untuk Product
Gallery terlebih dahulu


Klik Add product gallery image



Klik tombol Select Files



Kemudian carilah image yang sudah anda persiapkan ( anda boleh mengupload 4 – 6
gambar untuk Product Gallery ini ). Pada contoh ini kami hanya mengupload 1 gambar saja.
Setelah ketemu gambar yang sudah anda persiapkan maka pilih gambar tersebut kemudian
klik open untuk memulai proses upload gambar.



Setelah proses upload gambar sudah selesai maka lanjutkan dengan mengklik tombol Add
to gallery



Setelah itu anda akan melihat image gallery tersebut sudah berada disana

Jika anda mengupload 4 buah gambar maka anda akan melihat 4 buah gambar juga
disana.

Mari kita lanjutkan dengan mengupload Featured Image


Klik Set featured image

Pada featured image ini kita hanya perlu untuk menupload 1 buah gambar ( biasanya
gambar produk tampak depan ). Lakukan hal yang sama seperti pada langkah
mengupload image atau gambar untuk Product Gallery diatas. Jika 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 live nya
bisa dilihat disini
Untuk 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 1000 x 1000 px.
Semoga tutorial ini bisa bermanfaat bagi anda semuanya. Tutorial ini akan kami lanjutkan
pada kesempatan mendatang.

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 finishing.
Target kita adalah merubah tampilan toko online kita dari yang awalnya hanya
menampilkan postingan artikel ( blog ) pada halaman homepage menjadi menampilkan
produk saja

Untuk menampilkan produk yang kita jual pada halaman depan maka langkah yang perlu
kita lakukan adalah sebagai berikut :
1.

Klik Mystile

2.

Klik Theme Options

3.

Klik Homepage

Kemudian pada halaman Homepage tersebut lanjutkan dengan langkah berikut :
1.

Centang display recent products

2.

Masukkan angka berapa jumlah produk yang ingin anda tampilkan pada halaman
homepage. Misalnya pada contoh kami ini, kami tulis 8 jadi nantinya pada halaman homapage
toko online kita hanya akan muncul 8 buah produk saja.

3.

Klik tombol Save All Changes

Maka 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 . Nah
untuk menghilangkan postingan tersebut maka kita perlu melakukan langkah berikutnya.
1.

Klik Blog

2.

Hilangkan tanda centang untuk menampilkan postingan artikel yang berasal dari blog kita

3.


Sekarang tampilan halaman depan toko online kita sudah menampilkan produk saja .
Lihat pada gambar berikut ini.

Live Demo

Pada contoh diatas hanya nampak 4 buah produk , karena sampai saat ini kami hanya
membuat atau memposting produknya hanya 4 buah saja hanya sebagai gambaran saja.
Untuk tahap selanjutnya akan kami jelaskan pada kesempatan mendatang. Semoga
tutorial kali ini bisa bermanfaat bagi anda.

WooCommerce (Tahap Limabelas)
Setelah kita kemarin membahas mengenai menempatkan produk yang ada di toko online
kita berada pada halaman Homepage maka kali ini kita akan melanjutkannya dengan meMake Over tampilannya agar menjadi lebih menarik lagi.
Template Mystile ini mempunyai banyak kelebihan yang memungkinkan kita untuk
memodifikasi template tersebut menjadi lebih baik dan tampil beda dengan toko online
yang lain meskipun sama- sama menggunakan template tersebut.
Semua tergantung dari kreatifitas anda, namun disini tentu kami akan mencoba
menjelaskan tentang bagaimana cara mengkustomisasi template Mystile ini pada taraf
yang mudah saja.

Memasang Banner pada Homepage
Mari kita mulai dengan memasang sebuah welcome banner yang besar pada halaman
Homepage toko online kita. Untuk itu persiapkanlah sebuah image dengan spesifikasi
sbb:
Ukuran Gambar untuk Banner


Lebar : 1247



Tinggi : 405

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

Klik Mystile

2.

Klik Theme Options

3.

Klik Homepage

4.

Klik Featured Image

5.

Centang Display a Banner

Setelah anda centang display a banner anda akan melihat tampilan seperti gambar
berikut. Kemudian lakukan dengan langkah berikut ini
1.

Klik tombol upload

Cari image banner tersebut diPC 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 Size : Full Size

2.

Klik tombol Use this image

Setelah itu banner yang ingin kita pasang di toko online kita sudah terlihat seperti gambar
dibawah.
1.

Hapus tulisan pada banner Headlines

2.

Hapus tulisan pada banner stand first

3.


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.

woocommerce ( tahap enam belas )
Cara membuat toko online menggunakan WooCommerce tahap enam belas kali ini kita
akan melanjutkan memoles tampilan toko online yang masih terlihat sangat sederhana
sekali. Jika anda belum melakukan banyak sentuhan yang berarti maka tampilan toko
online anda kurang lebih akan terlihat mirip dengan yang ada padatutorial ke lima
belas kemarin.
Jadi dalam tutorial ini kami akan membuat atau mengkustomisasi tampilan toko online
kami berdasarkan selera kami. Namun kami harap anda bisa mengambil pengetahuannya
dan anda bisa berkreasi sesuai dengan selera anda sendiri.
Untuk mengkustomisasi tampilan toko online kita maka kita akan bermain-main dengan
template Mystile itu sendiri. Mari kita mulai dari atas pada menu Mystile – Theme Options.

Kustomisasi CSS
1.

Klik Mystile

2.

Pilih Theme Options

3.

Pilih General Settings

4.

Pilih Quick Start

Kita akan merubah warna themes Mystyle tersebut dari warna orange ( default.css ) ke
warna hijau ( green.css ). Mari kita lihat terlebih dahulu tampilan menu pada toko online
kita .

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

Klik pada tulisan default.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 Save
All Changes

Tunggu beberapa saat sampai anda melihat notifikasi seperti pada gambar dibawah ini
( Option Updated ).

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

Ooops… kita ada sedikit masalah pada big banner, lihat gambar dibawah.

Pada banner tersebut ada tulisan ( warna putih ) dengan tulisan sbb.


Welcome to our store



We hand make the most awesomest products in the world

Ada 2 cara untuk menghapus atau menghilangkan tulisan tersebut :
1.

Menghapus sementara ( not recommended )

2.

Menghapus secara permanen tulisan tersebut ( recommended )

Menghapus Sementara

Untuk menghapusnya secara sementara anda bisa mengulangi langkah yang ada pada
tahap lima belas kemarin
Namun jika nanti anda melakukan perubahan lagi, secara otomatis tulisan tersebut akan
muncul lagi di atas banner tersebut. Jadi menurut kami itu sia-2 saja dan buang tenaga
makanya tidak kami rekomendasikan cara tersebut.
Menghapus secara permanen
Dengan menghapusnya secara permanen anda tidak perlu kawatir lagi tulisannya akan
muncul lagi di kemudian hari. Agak sedikit rumit namun tidak sulit, berikut cara
menghapus tulisan tersebut secara permanen.
1.

Klik Appearance

2.

Pilih Editor

3.

Anda akan langsung melihat kode style.css

Sekarang fokus ke panel sebelah kanan anda.

Lihat ke halaman bawah / scoll mouse anda ke bawah, cari theme-options.php kemudian
setelah ketemu klik langsung untuk menampilkan kode php pada file tersebut..

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

Apa langkah selanjutnya ? Sebelum kami lanjutkan ada baiknya anda mengerti halaman
apa yang sebenarnya yang akan kita edit ini. Kode php diatas merupakan kode dari option
panelnya template Mystile berikut ini ( mohon jangan ikut buka , sekedar memberi
informasi saja ).

Lihat 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 themeoptions.php tersebut.

1. Klik Ctrl + F maka akan muncul pencarian cepat. Lihat pada gambar sebelah pojok kiri
bawah ( ada tanda panah merah )

2. Ketikkan : Welcome to our store > kemudian tekan enter > anda akan melihat tulisan
tersebut Welcome to our store tersebut disana dan dibawahnya anda juga akan melihat
tulisan We hand make the most awesomest products in the world

Hapus kedua tulisan tersebut , Hanya tulisan tersebut saja jangan dihapus juga tanda
petik diatas ( ‘ ) yang berdempetan dengan tulisan tersebut, ada 2 tanda petik yakni
sebelum tulisan dan sesudah tulisan itu. Mohon berhati hati ketika menghapusnya.
Dan pastikan setelah anda hapus kondisi kode tersebut seperti pada gambar dibawah
( tanda petik masih ada )

Klik Tombol update file.

Setelah itu anda akan melihat notifikasi update file theme-options.php anda sudah sukses.

Coba anda lihat toko online anda sekarang , Ooppsss… kok masih ada tulisannya ya ???
itu karena kita tadi belum menghapusnya dari Theme Options template ini. Mari kita
tuntaskan dengan langkah berikut ini.
1.

Klik Mystile

2.

Klik Theme Options

3.

Klik Homepage

4.

Klik Featured Image

5.

Pastikan tulisan pada banner headline dan banner stand first anda hapus semuanya

6.


Mulai saat ini anda tidak perlu kawatir lagi tulisan itu akan muncul diatas banner toko
online anda jika anda mengedit atau merubah settingan template Mystile ini di kemudian
hari.
Cukup sekian dulu tutorial kali ini, semoga anda mengerti dan bisa bermanfaat bagi anda
semua.

woocommerce (tahap tujuh belas)
Hari ini mari kita lanjutkan lagi proses mengkustomisasi template toko online kita agar
lebih menarik lagi dari hari kemarin. Kami harap anda tidak bosan dalam mengikuti tutorial
yang SUPER PANJANG ini .
Harapan kami adalah anda bisa benar-benar mengerti dan paham betul cara membuat
toko online dengan memakai WooCommerce ini.
Meskipun 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 WooCommerce juga maka pengetahuan yang anda
dapatkan dari kami masih bisa anda pergunakan.
Apa yang akan kita pelajari hari ini tidaklah terlalu sulit dan masih sangat mudah untuk
dipahami.
Silahkan anda bukan Theme Options template Mystile dari halaman dashboard toko
online anda.


Klik Mystile



Theme Options

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

General Settings


Klik General Settings



Klik Display Options

Pada Display Options ini yang akan kita lakukan adalah sebagai berikut :
1.

Post / Page comments : Pilih Post only

2.

Post Content : Pilih The Excerpt

3.

Display Breadcrumb : Anda bisa memakainya atau tidak namun dalam contoh ini kami
akan memakai Breadcrumb

4.

Display Pagination : Centang ini

5.

Pagination Style : Pilih Numbers

6.

Klik Tombol Save All Changes untuk menyimpan konfigurasi ini

Styling Options
Pada styling option ini anda bisa mengkustomisasi background toko online kita dan juga
mungkostomisasi warna links, hover dan juga warna button. Silahkan anda coba ganti
background dan mencoba mengganti warna links ataupun tombol pada toko online anda..
Jangan kawatir jika anda salah pada bagian ini tidak akan berakibat fatal atau merusak
toko online anda..

Silahkan anda bereksperimen sendiri dengan kedua menu diatas. Jika ada kesulitan
silahkan bertanya pada kolom komentar. Sampai disini dulu tutorial kami kali ini dan
sampai jumpa pada tutorial selanjutnya.

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. Jika kemarin kita telah membahas mengenai Display
Option dan juga Background maka kali ini kita akan membahas mengenai Typography
dan Layout Options.
Typography ini berfungsi untuk mengatur jenis huruf yang akan kita pakai dalam toko
online kita. Jika kita lihat sekarang ini , toko online kita memakai huruf Arial yang terlihat
tidak begitu bagus. Untuk itu pada kesempatan ini kita akan mencoba merubah huruf Arial
tersebut melalui menu Typography ini.
Dalam contoh ini kami akan memakai font atau huruf Oswald namun anda bisa
mencobanya dengan menggunakan font lainnya apabila anda kurang menyukainya.

Typography
1. Mari kita mulai belajar mengkustomisasi Font toko online kita

•

1.

Klik Typography

2.

Centang Enable Custom Typography

2. Ganti Font Arial tersebut dengan Oswald

•

1.

Klik pada Arial dan kemudian cari Oswald ganti semua dengan Oswald

2.

Klik Tombol Save All Changes

Layout Options
Pada bagian layout ini kita bisa merubah tampilan kerangka toko online kita dari yang full
page menjadi di dalam BOX
1.

Klik Layout Options

2.

Centang Enable boxed Layout

3.

Pilih posisi Sidebar disebelah kanan atau disebelah kiri

4.


Maka setelah anda simpan , tampilan toko online anda terlihat lebih rapi didalam box.

WooCommerce (Tahap Sembilan Belas)
Pada tahap sembilan belas ini, cara membuat toko online dengan WooCommerce akan
membahas tentang bagaimana mengkustomisasi toko online kita dengan menambahkan
fitur chatting untuk customer support yang berguna untuk memaksimalkan penjualan toko
online anda tersebut.
Untuk melakukan hal diatas kita akan memasang atau menginstall 1 buah plugin gratis
yang bisa anda pakai selamanya. Proses penginstallan plugin ini secara detail bisa anda
lihat pada artikel kami yang berjudul : Cara install plugin di wordpress.
ClickDesk nama plugin yang akan kita pergunakan . Apa kelebihan plugins tersebut dan
kenapa kami memilihnya ? 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 fitur Chatting
Untuk kebutuhan customer support ini kita akan memakai ClickDesk yang mempunyai
penampilan menarik dan nyaman untuk dilihat. Versi gratis dari ClickDesk hanya
membolehkan kita untuk mendaftarkan 1 agent saja atau kita hanya bisa membuat akun
untuk 1 orang customer service.

Cara install ClickDesk
•

1. Login ke Dashboard WordPress anda

1.
2.

Pilih Add New

3.

Pastikan anda pada posisi Search

4.

Ketik Chat

5.

•

Klik Plugins

Klik tombol Search Plugins

2. Install ClickDesk

Register ClickDesk Account
Setelah anda mengaktifkan plugin ClickDesk diatas maka selanjutnya kita akan mendaftar
sebuah akun baru untuk agent toko online kita yang nantinya akan menjadi akun
customer support yang bisa kita pakai.
1. Silahkan menuju ClickDesk Dashboard

•

1.

Klik atau pilih ClickDesk, posisinya dibawah Tools

2. Anda akan melihat halaman seperti gambar berikut

•

1.

Klik tombol Go to ClickDesk Dashboard

•

3. Buatlah sebuah akun ClickDesk
Untuk membuat atau mendaftar akun ClickDesk caranya sangat mudah sekali. Anda bisa
menggunakan akun Gmail anda ataupun akun Yahoo anda dan login lah dengan akun
anda tersebut. Jika anda belum mempunyai salah satu akun tersebut maka anda bisa
membuatnya terlebih dahulu. Kami sarankan anda membuat akun Gmail saja : baca cara
membuat akun Gmail

•

4. Login dengan Akun Gmail anda
Bukalah tab baru di webbrowser anda dan bukalah sign in ke akun gmail anda. Setelah
berhasil Sign ini maka kembali ke

•

5. Buatlah nama Agent untuk operator Customer Support toko online anda
Lihat gambar berikut dan isilah sama persis seperti yang tertera disitu. Setelah selesai
Klik tombol Tes, Create an Agents

•

6. Selanjutnya setelah sukses membuat agent toko online anda maka anda akan
melihat halaman seperti gambar berikut

Kustomisasi Profile Agent
Pada gambar diatas terlihat bahwasanya Agent toko online kita belum terdapat photo, jadi
selanjutnya kita akan menambahkan photo dan yang lainnya.
•

7. Klik nama agent untuk mulai mengkustomisasi profile – nya

•

8. Klik nama agent untuk mulai mengkustomisasi profile – nya
Upload Photo : Klik tombol Upload dibawah photo yang kosong tersebut, setelah anda
upload mohon jangan klik tombol Save Changes. Lanjutkan ke tahap/ tab berikutnya IM
Network

IM Network : Untuk network pilih Google Talk or Google Appa/Mail. Kemudian masukkan
username anda, jika email anda beralamat nama-anda@gmail.commaka username anda
adalah nama-anda@gmail.com

Phone : Untuk IM/ Country pilih saja Skype ( jika anda punya akun Skype) jika belum
maka isi saja kolom ID/ Number dengan no telpon anda dan akhiri dengan mengklik
tombol Save Changes

Menambahkan Photo Agent untuk homepage
Untuk mempercantik tampilan ClickDesk di toko online kita maka kita perlu untuk
menambahkan Photo Agent kita agar ketika customer kita ingin bertanya mereka bisa
membayangkan wajah orang yang sedang mereka ajak Chatting. 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.

10. Setelah terbuka anda akan melihat tampilan seperti gambar berikut

•

1.
2.

Theme = Pilih Social ( Medium )

3.

Position = Bottom Right

4.

Klik Tombol Upload untuk memulai upload Photo agent anda

5.

Color = Pilihlah warna yang sesuai dengan yang anda inginkan

6.

•

Pastikan anda berada pada posisi UI & Themes


11. Mengganti yang ada pada Widget Chatting Tersebut dengan keterangan bahasa
Indonesia
Untuk merubah tulisan bahasa inggris pada Widget Chatting ClickDesk maka anda bisa
merubahnya dengan mengklik tab Form & Localization. Ada lima link disana, silahkan
anda lihat sendiri karena sudah jelas dan mudah untuk dilakukan. Jangan lupa untuk Klik
Tombol Update setelah anda mengedit tulisan yang ada disana.

•

12. Menambahkan akun Twitter dan Facebook anda
Anda bisa menambahkan akun Twitter dan Facebook anda dengan mengklik tab Social

Setelah ditambahkan akan terlihat seperti berikut ini.

Jika dilihat di Toko online kita maka anda akan melihatnya seperti berikut ini.
Twitter
Klik Icon Twitter dan Upppss………. !! Error

Mari kita bereskan permasalahan diatas, lihat kembali ke clickdesk dashboard anda. Klik
Link Grand Access .

Maka akan muncul Pop up untuk meng – Authorize APP. Klik tombol Authorize APP
tersebut

Setelah Proses Authorize APP Twitter tersebut selesai maka anda akan melihat halaman
Social itu lagi tanpa ada pertanda khusus lainnya jadi tidak ada perubahan sama sekali.

Namun yang perlu anda lakukan adalah Klik Tombol Save Changes sekali lagi untuk
menyimpan apa yang sudah kita lakukan diatas.

Setelah anda Save / Simpan mari kita lihat lagi toko online kita . Refresh terlebih dahulu
kemudian klik icon Twitter lagi. Hemmm…. permasalahan tadi sudah hilang.
Congratulation !!

Facebook
Setelah kita lihat Twitternya mari kita lihat juga Facebooknya.

Akhirnya proses Install dan mengkustomisasi ClickDesk 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.

WooCommerce (Tahap Dua Puluh)
Cara membuat toko online tahap dua puluh ini akan membahas mengenai kelanjutan
tahapan sebelumnya. Jika kemarin kita telah menambahkan fasilitas chatting untuk
customer support kita maka selanjutnya kita akan memasang sebuah Sticky Bar untuk
memperkuat promosi toko online anda.
Idenya begini : Ketika toko online anda jadi dan sudah online nanti terus misalnya anda
mempunyai sebuah produk baru , katakanlah nama produk baru anda tersebut ” Baju
Batik Jogja ” dan anda berkeinginan untuk fokus mempromosikan produk tersebut agar
setiap calon customer anda yang datang bisa dengan mudah mengetahui bahwasanya
anda menjual ” Baju Batik Jogja “.
Loh kan sudah ada Banner yang besar ? Banner yang besar pada halaman Homepage
tersebut hanya akan terlihat oleh cutomer anda jika mereka membuka homepage anda ,
sementara lebih dari 70 % pengunjung biasanya tidak pernah melihat halaman Homepage
sebuah website, blog ataupun toko online.
Jadi peranan Stiky bar disini cukup berpengaruh sekali terhadap promosi toko online anda
tersebut. Namun 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 fungsi Sticky Bar diatas sebagai penunjang sarana promosi maka Sticky Bar
juga sangat berfungsi untuk menupi ruangan yang kosong pada halaman toko online kita
sebelah atas. Lihat gambar berikut ini :

Jadi ada 2 fungsi disini :
1.

Sticky Bar berfungsi untuk sarana promosi ( Call To Action )

2.

Sticky Bar juga berguna untuk menutupi space kosong pada bagian atas toko online kita.

Lihat Live Demo

Ada 3 buah Sticky bar yang bisa anda pakai untuk keperluan ini:
Silahkan anda pilih dari tiga Sticky Bar dibawah dan tentunya yang sesuai dengan
keinginan anda.

1. WordPress Notification Bar

2. Notification Bar

3. Fluid Notification Bar

Dalam tutorial ini kami akan memakai yang Sticky Bar yang pertama yakni WordPress
Notification Bar. Berikut langkah yang bisa anda lakukan untuk memasang Sticky Bar
tersebut.
1. Login ke dashboard Toko online anda dan silahkan menuju ke Add New Plugin

•

1.

Klik Plugins

2.

Klik Add New

3.

Ketik WordPress Notification Bar

4.

Klik tombol Search plugins

2. Setelah hasil pencariannya muncul, anda akan melihat halaman seperti berikut

•

1.

Klik Install Now

•

3. Setelah selesai diinstall lanjutkan dengan mengaktifkannya

•

4. Setelah anda aktifkan maka lanjutkan dengan mengklik Settings

5. Pada halaman settings ini kita akan melakukan beberapa hal berikut

•

1.

Centang untuk menampilkan Sticky Bar tersebut

2.

Ketiklah pesan promosi produk anda tersebut

3.

Ketik tulisan yang akan tampil pada tombol Call to action di Sticky Bar anda

4.

Masukkan link atau url produk anda disini. Jika customer anda mengklik tombol call to
action pada point no 3 diatas maka akan menuju kehalaman produk yang anda ketik urlnya
disini.

5.

Centang Button Target dan Sekaligus centang juga Position Sticky Bar anda

6.

Background color. Dalam contoh ini kami ingin warna hijau yang sama dengan warna hijau
dari ClickDesk yang sudah kita install kemarin ( #7EA333 )

7.


Sekarang lihat toko online anda , maka saat ini Sticky Bar sudah berada diatas header
toko online anda dan mengisi space yang kosong tersebut.

WooCommerce (Tahap Dua Puluh Satu)
Hari ini kita akan melanjutkan tutorial cara membuat toko online dengan WooCommerce
ini dengan pokok pembahasan cara membuat custom menu atau merubah menu bawaan
Mystile 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 default susunan menu toko online kita akan terlihat seperti gambar berikut :

Anda bisa merubah menu tersebut dengan mudah dan bisa anda sesuaikan dengan
kondisi toko online anda. Misalnya anda ingin menambahkan menu untuk halaman about
us, tata cara belanja, kategori produk anda, contact page dan lain sebagai.
Untuk 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.

Halaman Static Page
Kami akan membuat halaman static page sebanyak 3 buah dengan perincian sbb :
1.

Halaman tata cara belanja

2.

Halaman about us

3.

Halaman contact page

Anda boleh membuat halaman static apa saja , silahkan disesuaikan dengan keperluan
anda.

Kategori Produk
Kami akan membuat 4 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. Kami akan membuat kategori produknya sbb :
1.

Baju anak

2.

Baju Wanita

3.

Baju Pria

4.

Kamera digital

Mohon disesuaikan dengan produk anda terlebih dahulu, kira – kira kategori produk anda
yang cocok dengan produk anda tersebut

Cara membuat Halaman Static Page
Berikut kami berikan contoh cara membuat sebuah halaman static page :

•

1.
2.

Klik Add New

3.

Tulis Judul Halaman Static yang akan anda buat, mis. Tata cara belanja

4.

Tulis isi static page anda

5.

•

Klik Pages

Klik Tombol Publish

Khusus untuk pembuatan halaman contact page maka sebelum anda membuatnya
seperti diatas , anda terlebih dahulu harus melakukan setting Contact Information pada
Theme Options

Silahkan menuju Theme Options Mystile anda. kemudian lanjutkan dengan hal berikut ini
1.

Klik Contact Page

2.

Pilih Contact Information

3.

Centang Enable Contact Information Panel

4.

Tulis Judul Lokasi Toko Online anda , mis. Our Store Location atau dalam contoh ini kami
buat Woo Store Location

5.

Tulis alamat lengkap anda

6.

Tulis juga no Telp rumah anda / No telp Toko anda

7.

No Fax Anda

8.

Tulis email anda . Email yang ditulis disini akan berfungsi sebagai email penerima apabila
ada customer toko online anda menghubungi anda melalui halaman contact tersebut

9.

Twitter Username dikosongi saja . [ tidak berfungsi ]

10.

Centang Enable Subscribe

11.

Klik Tombol Save All Changes

Jika anda tidak melakukan langkah ini terlebih dahulu dan anda langsung melakukan Add
New Page untuk halaman Contact maka anda akan melihat pesan error seperti gambar
berikut

Sekarang kembali ke halaman Add New Page tadi diatas untuk membuat static page
halaman contact

Mari kita lihat terlebih dahulu bagaimana penampilan toko online kita setelah kita
menambahkan 3 buah halaman static page yang baru tersebut. Lihat bagian Menu

Jika kita perhatikan pada gambar diatas maka menu toko online kita menjadi jelek dan
kurang sedap dipandang mata. Kenapa terjadi demikian ? hal ini disebabkan karena
Mystile atau themes yang kita pakai dalam tutorial ini secara otomatis akan
menambahkan semua static page baru menjadi sebuah menu.
Lantas bagaimana cara memperbaiki hal tersebut. Caranya 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 2 kali kerja.

Cara membuat Kategori 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 Kategori Produk << Klik. Begitulah kira –
kira maksud dari kategori produk tersebut. Jadi misalnya anda menjual berbagai macam
jenis produk maka calon customer toko online anda akan mudah mencari produk yang
sejenis.
Untuk membuat kategori produk silahkan ikuti langkah demi langkah berikut ini :

1. Mari kita menuju menu products

•

1.

Klik Products

2.

Pilih Categories

2. Kemudian mulailah membuat kategori produk toko online anda

•

1.

Name = Tulis nama kategori produk anda , misal : Baju Anak

2.

Slug = Tulis slug nya dengan huruf kecil semua dan spasinya di ganti dengan tanda –
( minus ) , misal : baju-anak

3.

Display Types = Pilih Products

4.

Upload sebuah gambar untuk kategori produk tersebut. Usahakan ukurannya ukuran tinggi
dan lebarnya sama, misal : 300 x 300 px

5.

Klik tombol Add New Product Category

•

3. Ulangi langkah diatas untuk membuat kategori produk yang lainnya, setelah selesai
maka akan terlihat seperti pada gambar berikut

Nah sekarang yang perlu kita lakukan selanjutnya adalah mendapatkan link masingkategori produk yang sudah kita buat diatas . Cara mendapat link kategori produk anda
adalah sbb :
•

4. Letakkan / arahkan kursor mouse anda tepat dibawah salah satu nama kategori
produk anda yang akan kita cari link urlnya

•

5. Setelah posisi kursor anda sudah berada dibawah nama kategori produk , pastikan
anda melihat tampilan seperti gambar dibawah ini.

•

6. Klik kanan View dan Klik copy link location

•

7. Pastekan Link url produk kategori anda tersebut di Notepad. Ulagi langkah
tersebut untuk mendapatkan link url kategori produk anda lainnya

Link 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 ulang susunan Menus
Mari kita gabungkan antara static page yang telah kita buat diatas dan juga kategori
produk toko online kita.
1. Silahkan menuju Menu options

•

1.

Klik Appearance

2.

Pilih Menus

2. Setelah terbuka lanjutkan dengan langkah berikut

•

1.

Tulis nama menu anda , Misal : Menu Utama

2.

Klik tombol Create Menu

3. Selanjutnya Anda akan melihat halaman seperti berikut

•

1.

Klik Select All . Kemudian Scroll kebawah sampai anda melihat Sample page yang juga
ikut tercentang karena kita mengklik Select All tersebut. Hilangkan centangan Sample page
tersebut karena kita tidak akan mengikutkan lagi Sample page tersebut di Menu Utama toko
online kita.

2.

•

Klik tombol Add To Menu

4. Selanjutnya anda akan melihat calon menu utama anda tersebut terlihat seperti
gambar berikut ini. Tanpa ada Sample Page lagi disana
Jangan anda simpan terlebih dahulu, lanjutkan dengan langkah berikutnya.

5. Sekarang kita akan memasukkan Link URL produk kategori ke menu utama kita

•

1.

Klik Links

2.

Masukan satu per satu link produk kategori yang sudah kita buat dan sudah kita paste di
Notepad tadi

3.

Beri Judul untuk menu produk kategori tersebut

4.

Klik tombol Add to Menu

Contoh :
1. URL = http://www.toko-online-anda.com/product-category/baju-pria/
2. Link Text = Baju Pria
3. Kemudian Klik tombol Add to Menu

•

6. Ulangi langkah tersebut untuk kategori produk anda yang lainnya. Setelah selesai
lama akan terlihat seperti berikut

Coba anda perhatikan bagian bawah gambar berikut , disana anda akan melihat
bahwasanya 4 buah kategori produk sudah berada disana.

•

7. Sekarang susunlah menu-menu tersebut seperti gambar dibawah ini
Untuk bisa menyusun menunya seperti dibawah ini, anda tinggal Klik kiri salah satu menu
tersebut kemudian Tahan dan Geserlah keatas atau kekanan. Jika posisinya digeser
kekanan maka akan menjadi sub menu.

8. Setelah selesai lanjutkan dengan langkah dibawah

•

1.

Centang Primary Menu

2.

Klik tombol Save Menu

•

9. Sekarang lihat Menu di toko online anda maka anda akan melihat seperti gambar
berikut

•

10. Proses custom menu toko online kita sudah selesai sekarang
Untuk lebih memberikan gambaran secara live silahkan lihat LIVE DEMO nya .

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

WooCommerce (Tahap Dua Puluh Dua)
Hari ini kita akan melanjutkan tutorial mengenai cara membuat toko online menggunakan
WooCommerce 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, Anda mempunyai barang atau produk kaos Polo misalnya.
Nah kaos tersebut (model sama dan ukuran sama / all size) namun mempunyai 4 macam
warna yang berbeda dan mungkin setiap warna baju tersebut mempunyai harga jual yang
berbeda terus anda ingin menjadikan 4 macam warna kaos Polo tersebut di posting dalam
satu kesatuan produk.
Pada tutorial terdahulu kita pernah belajar cara memposting produk dengan Product Data
” Simple Product ” , nah untuk membuat atau memposting produk dengan menggunakan
pilihan warna maka Product Data yang akan kita pakai adalah Variable Product.
Untuk 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
View Live Demo

Persiapan
Silahkan anda persiapkan 4 buah image produk dengan warna yang berbeda. Dalam
contoh ini kami akan memakai produk yang memiliki 4 buah warna yang berbeda.

Kami telah mempersiapkan 4 buah kaos berwarna Ungu, Putih, Merah Dan Hitam sebagai
gambaran dalam tutorial ini. Mohon untuk diperhatikan dengan seksama langkah demi
langkah yang kami jelaskan nantinya supaya anda tidak mengalami masalah yang berarti.

Let’s Start ..
1. Silahkan anda menuju Halaman Add New product

•

1.

Klik Products

2.

Pilih Add Product

2. Setelah halaman Add New product sudah terbuka maka lakukan hal berikut

•

1.

Tulis Judul Produk anda yang mempunyai pilihan warna tersebut dalam contoh ini kami
menulis judulnya : Produk dengan 4 Buah Warna Pilihan

2.

Tulis Deskripsi Lengkap produk anda tersebut

3.

Pilih Kategori untuk Produk anda tersebut

Sampai disini pastikan sudah benar langkah anda terlebih dahulu, jika sudah benar
silahkan lanjut lagi ke langkah no 3 dibawah ini
3. Upload gambar untuk Gallery dan Featured Image anda

•

Ini masih langkah mudah terlebih dahulu, silahkan upload gambar produk anda sekarang.
Caranya masih sama dengan cara memposting produk dengan Product Data ” Simple
Product ” yang kemarin sudah kami jelaskan.
Note :
Featured image cukup 1 dan image yang sudah dipakai untuk featured 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 Featured Image adalah kaos warna Ungu
( gambar urutan pertama dari kiri ) dan untuk yang di Product Gallerynya adalah warna
Putih, Merah dan Hitam. Lihat gambar berikut ini.

Jika kita preview 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 featured image akan secara otomatis masuk kedalam
Product Gallery ( gambar paling kiri sebelum kaos yang berwarna putih ). Sampai disini
masih sangat mudah sekali, silahkan anda lanjutkan dengan dengan langkah yang ke 4
dibawah ini.

4. Sekarang mari kita beralih ke Produk Data [ General ]

•

1.

Pilih Product Data , Pastikan anda memilih Variable Product

2.

Kemudian isilah SKU produk anda ( dalam tutorial ini kami menuliskan SKU-nya : SKU
123456 )

•

5. Sekarang kita beralih ke Inventory
Pada bagian Inventory ini anda cukup mencentang pilihan manage stocks saja

•

6. Lanjutkan ke bagian Shipping
Nah pada bagian shipping ini kami akan memilih atau memakai Shipping Class yang kami
beri nama “Kaos”. Silahkan anda buat 1 buah Shipping Class 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 Class
yang sudah anda buat kemarin sudah sesuai dan tidak akan merugikan anda.
Refresh : Pada tutorial tahap ke sepuluh kemarin kami telah menerangkan cara membuat
Shipping Class [ Lihat artikelnya disini ]

7. Setelah itu lanjutkan ke Linked Products

•

Pada tutorial ini kami tidak mensetting linked products karena kami tidak mempunyai
postingan products untuk Upp Sells maupun Cross Sells- nya. Jadi jika anda akan
memasang Linked Product anda tersebut saat ini maka silahkan lihat panduannya pada
tutorial kami yang ke sebelas [ Lihat artikelnya disini ] Kami yakin anda sudah memahami
caranya dengan baik.

8. Mari kita lanjut ke bagian Attibutes

•

Ini merupakan Bagian inti dari pokok pembahasan dalam tutorial ini, mohon untuk
dipahami maksud dan tujuannya.


Klik tombol Add



Setelah itu anda akan melihat tampilan seperti pada gambar berikut ini

Kemudian lanjutkan dengan langkah berikut ini
1.

Name adalah nama untuk attributes produk kita ini. Dalam contoh ini kami buah namanya ”
Warna Baju ” anda bisa memberi nama apa saja tergantung dari keinginan anda.

2.

Centang Visible on the product page

3.

Centang Used for variations

4.

Value (s) isi dengan pilihan warna baju yang sesuai dengan variasi warna pada produk anda
tersebut. Dalam contoh ini karena kami cuma punya 4 buah warna yakni : ungu, putih, merah
dan hitam maka kami tulis seperti berikut :Ungu | Putih | Merah | Hitam . Perhatikan format
penulisan diatas, formatnya adalah : Warna [spasi] [tekan Shift + Back Slash
()] [spasi] Warna . Atau cara gampangnya copy paste saja variasi warna kami diatas dan
kemudian ganti tulisan warnanya dengan warna yang sesuai dengan kondisi bawah anda saat
ini.

5.

Klik Tombol Save attributes

Setelah anda klik tombol Save attributes dan proses penyimpanannya selesai maka anda
tidak akan melihat ada perubahan sama sekali dengan gambar diatas , anda masih akan
melihat tampilan yang sama. Mohon dipastikan saja anda telah meng-klik tombol Save
attributes tersebut.

Sampai disini pastinya anda akan sangat mudah memahaminya. Jika belum mohon
jangan lanjutkan ke langkah berikutnya agar anda tidak salah langkah. Silahkan pahami
terlebih dahulu.
Jika sudah paham betul dan langkah anda sudah sesuai dengan yang ada di gambar
maka mari kita lanjut lagi ke langkah berikutnya

9. Pada bagian Advanced ini anda tidak usah mengisi apapun jadi silahkan lewati

•

saja
Pastikan satu hal saja disana bahwa untuk pilihan Enable reviews sudah tercentang
( secara default ini sudah tercentang dengan sendirinya )

10. Final Step. Mari kita lihat bagian selanjutnya yakni Variations

•

Ini merupakan langkah terakhir sekaligus penentu untuk membuat pilihan warna produk
yang kita posting tersebut. Silahkan anda klik Variations dan anda akan melihat tampilan
seperti pada gambar berikut ini

Selanjutnya secara berurutan yang anda lakukan adalah sbb :
1.

Klik tombol Add Variation

Setelah itu anda akan melihat tampilan anda seperti berikut ini

Sekarang kita isi produk dengan Warna yang pertama yakni yang ada pada features
image terlebih dahulu. Pada contoh diatas warna kaos pada featured image adalah warna
ungu.
Note : Agar terlihat rapi dan berurutan maka mulailah dengan urutan sebagai berikut :
1.

Warna Kaos yang ada dalam Featured Image ( Ungu )

2.

Warna kaos no 1 pada product gallery ( Putih )

3.

Warna kaos no 2 pada produk gallery ( Merah )

4.

Warna Kaos no 3 pada product gallery ( Hitam )

Mari kita mulai dengan yang pertama ( Warna Kaos Ungu )
1.

Pilih Warna Ungu

2.

Upload atau pasang gambar kaos warna ungu anda

3.

Tulis Jumlah stok baju warna ungu anda disana Misal : 10

4.

Tulis Harga untuk Kaos Ungu tersebut Misal : 100000 ( seratus ribu ) ingat penulisan
angkanya tidak usah pakai titik

5.

Shipping Class = Pilih Kaos atau Pilih saja shipping class yang anda punya dan sudah anda
buat pada langkah sebelumnya

6.

Klik Tombol Add Variation

Setelah anda Klik tombol add variation tersebut maka anda akan melihat tampilan seperti
pada gambar berikut

Mari kita lanjutkan dengan yang kedua ( Warna Kaos Putih )
1.

Pilih Warna Putih

2.

Upload atau pasang gambar kaos warna putih anda

3.


4.

Tulis Harga untuk Kaos Ungu tersebut Misal : 110000 ( seratus sepuluh ribu ) ingat
penulisan angkanya tidak usah pakai titik

5.


6.


Mari kita lanjutkan dengan yang ketiga ( Warna Kaos Merah )
1.

Pilih Warna Merah

2.

Upload atau pasang gambar kaos warna merah anda

3.


4.

Tulis Harga untuk Kaos Ungu tersebut Misal : 120000 ( seratus dua puluh ribu ) ingat

5.


6.


Mari kita lanjutkan dengan yang keempat / terakhir ( Warna Kaos
Hitam )
1.

Pilih Warna Hitam

2.

Upload atau pasang gambar kaos warna hitam anda

3.


4.

Tulis Harga untuk Kaos Ungu tersebut Misal : 130000 ( seratus tiga puluh ribu ) ingat

5.


6.

Klik Tombol Preview (jangan klik tombol Add Variation lagi) untuk melihat hasil kerja
kita sebelum kita publish

Setelah anda klik tombol Preview 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.
Cukup lumayan bagus bukan ??

Jika sudah OK maka silahkan Klik tombol Publish agar product anda bisa dilihat oleh
customer anda. Semoga tutorial ini bisa bermanfaat bagi anda semuanya dan sekaligus
anda bisa menguasai metode posting produk menggunakan Product data = Variable
Product.

WooCommerce (Tahap Dua Puluh Tiga)
Pada tahap ke dua puluh tiga ini , cara membuat toko online dengan WooCommerce akan
membahas mengenai bagaimana cara memposting produk dengan menggunakan produk
data ” Grouped Product ” . Kemarin kita telah membahas mengenai produk data ” Variable
Product ” yang saat ini pasti anda sudah paham betul bagaimana cara membuatnya.
Grouped product ini digunakan untuk memposting produk yang mempunyai spesifikasi
tertentu namun masih satu jenis. Biasanya grouped product ini sering digunakan untuk
barang – barang elektronik seperti HP, Tablet, Playstation dan lain sebagainya.
Agar lebih jelas lagi mari kita ambil sebuah contoh supaya anda lebih gampang dan cepat
mengerti maksud dan tujuan pemakaian produk data “Grouped Product” ini.
Misalnya anda akan menjual iPhone 5 di toko online anda tersebut, ternyata iPhone
tersebut mempunyai harga yang berbeda – beda tergantung dari besarnya memory
internalnya. Untuk memposting iPhone tersebut dalam satu kesatuan yang utuh maka kita
memerlukan Grouped Product tersebut.
Mari kita perjelas lagi dengan mempraktekkannya secara langsung dengan produk iPhone
yang sudah kami persiapkan dibawah ini.
Live Demo

Warna iPhone 5 : Putih

Harga iPhone 5 ada tiga :


iPhone 5 16GB

Rp. 7.500.000,-



iPhone 5 32GB

Rp. 8.500.000,-



iPhone 5 64GB

Rp. 9.500.000,-

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

Ada 4 langkah atau 4 kali proses memposting produk jika kita memakai Grouped Product
untuk iPhone 5 diatas
1.

Memposting Produk Induknya / Parent Product

2.

Memposting Produk Turunannya / Child Product 1 ( iPhone 5 16 GB )

3.


4.


Memposting Produk Induk
Yang pertama kali kita buat adalah Produk induknya terlebih dahulu yang berisi spesifikasi
lengkap iPhone 5 warna putih, kategori, featured image, product gallery dll. Pada
dasarnya ini membuat postingan produk induk ini sama dengan produk lainnya.
1. Login ke dashboard toko online anda dan lakukan dibawah ini

•

1.
2.

Klik Add New Product

3.

Tulis Judul Produknya = Misalnya New iPhone 5

4.

•

Klik Products

Tulis diskripsi dari product anda secara lengkap

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

•

3. Upload Gambar untuk Featured Image dan Product Gallery
Silahkan upload gambar untuk product gallery dan juga gambar untuk featured imagenya.
Caranya sama seperti yang sudah kami jelaskan pada tutorial – tutorial kami terdahulu.

•

4. Pada Product Data pilihlah Grouped Products
Disini anda harus memilih Product datanya ” Grouped Product ” dan jangan yang lainnya.
Untuk Linked Products , Attributes dan advanced tidak perlu anda isi apa – apa ketika
memposting product indul ini.

•

5. Klik tombol publish
Setelah anda selesai dengan langkah no 4 diatas, silahkan anda langsung klik tombol
Publish

Jika dilihat produk tersebut maka anda akan melihatnya persis seperti pada gambar
dibawah ini ( tidak ada Harganya )

Proses memposting produk induknya sudah selesai , lantas bagaimana dengan harga dan
lainnya ? Kenapa produk induknya hanya seperti itu saja ? Tenang… kita akan akan
melengkapi kekurangan data produknya seperti SKU , Harga dan yang lainnya melalui
Produk turunannya.
Silahkan lanjutkan dengan langkah dibawah ini ..

Memposting Produk Turunan
Disinilah kita akan melengkapi kekurangan pada Produk induk yakni dengan memposting
produk turunan yang dalam contoh ini ada 3 yakni :


iPhone 5 16GB

Rp. 7.500.000,-



iPhone 5 32GB

Rp. 8.500.000,-



iPhone 5 64GB

Rp. 9.500.000,-

Langkah dalam memposting produk turunan ini pada prinsipnya sama semua, jadi disini
kami hanya akan memberikan contoh cara memposting 1 buah produk turunan saja
yakni : iPhone 5 16 GB
Penting !!

Yang berbeda nantinya adalah :


Judul Produknya : Kalau yang pertama adalah iPhone 5 16 GB , yang kedua iPhone 5 32
GB dan yang ketiga iPhone 5 64 GB



SKU nya : Buatlah SKU yang berbeda contoh jika format SKU yang pertama adalah ” SP
001 ” maka yang kedua ” SP 002 ” dan yang ketiga ” SP 003 “



Harga produknya : Jika Produk yang pertama mempunyai harga Rp. 7.500.000,- maka yang
kedua di tulis Rp. 8.500.000,- dan yang ke tiga Rp. 9.500.000,- ( lihat list harga diatas )

Jadi nanti anda tinggal memposting produk turunan ini 3 kali dengan cara yang sama.

Product Turunan Pertama
1. Masih dari dalam dashboard toko online anda

•

1.
2.

Klik Add New Product

3.

Tulis Judul Produk turunan yang pertama = Misalnya iPhone 5 16GB

4.

•

Klik Products

Biarkan Kosong Deskripsi lengkapnya

2. Kategori produk tidak perlu dicentang / biarkan kosong

•

3. Product gallery dan featured image biarkan kosong

•

4. Pada area Product data lakukan hal berikut ini [ General ]
1.

Pilih Product Data = Simple Products

2.

Tulis SKU produk turunan pertamanya , contoh SP 001

3.

Tulis Harganya , contoh 7500000 ( tanpa tanda titik )

4. Lanjutkan ke bagian Inventory

•

Jika anda ingin menampilkan jumlah stok produk anda tersebut maka lakukan
1.
2.

•

Centang Manage Stock
Tulis jumlah stok barang anda , misal : 10

5. Pilih Shipping Class untuk meng-handle biaya pengiriman product tersebut
Pada contoh dibawah ini kami menggunakan Shipping Class yang pernah kami buat
sebelumnya yakni Kamera Digital . anda bisa juga membuat Shipping Class yang lain. Ini
sebagai gambaran saja.

•

5. Lanjut ke Linked Products
Pada bagian Linked Products ini peranan Parent Product atau Produk Induk mulai
muncul, Anda akan melihat menu baru yang bernama Grouping . Posisinya tepat dibawah
Upp Sells dan Cross Sells ( pada contoh ini Upp Sells dan Cross Sellsnya tidak kami isi
karena kami tidak atau belum memposting product Smart phone lainnya )
Silahkan anda pilih New iPhone 5

Nama Grouping tersebut terbentuk secara otomatis menggunakan Judul produk ketika
kita memposting Parent Productnya / Produk induknya. Pada postingan produk induk
yang kami contohkan diatas kami menulis New iPhone 5 makanya muncul di Grouping
tersebut nama New iPhone 5 .
Jika anda membuatnya dengan nama lain maka yang muncul juga beda. Jadi nama
grouping ini akan sama dengan judul produk induk yang telah kita buat sebelumnya.
Untuk attributes dan Advanced kita lewati saja, tidak ada yang perlu kita isi, lanjutkan
dengan langkah dibawah ini.

7. Alihkan pandangan anda ke pojok kanan atas

•

Lihat pada area Preview dan tombol Pusblish. Disana anda akan melihat Catalog
visibility: Catalog/search
Klik link Edit disamping sebelah kanan tulisan tersebut.

8. Setelah terbuka maka lakukan hal berikut

•

1.

Pilih Hidden

2.

Klik tombol OK

•

9. Langkah berikutnya adalah mempublish produk turunan pertama kita

•

10. Ulangi langkah diatas untuk memposting produk turunan yang lainnya jika
semuanya telah selesai maka anda akan melihat hasil kerja anda tersebut persis seperti
gambar dibawah ini

Proses memposting produk dengan menggunakan Produk Data ” Grouped Product”
sudah selesai , semoga anda bisa memahaminya dengan baik dan juga anda tidak
mengalami permasalahan apapun ketika mempraktekkan tutorial diatas.
Jika anda mengalami masalah, silahkan anda tulis pada kolom komentar dibawah ini.

WooCommerce (Tahap Dua Puluh Empat)
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.
Mengingat 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. Jika ada sanak
famili kami mengirimkan paket dan memakai jasa pengiriman tertentu ( sebut saja
namanya Jasa Pengiriman A )itu kiriman paket tersebut bisa sampai ke rumah kami.
Namun 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.
Melihat contoh permasalahan diatas jika misalnya kami sedang berkunjung ke toko online
dan ternyata anda tidak menyediakan pilihan pengiriman barang menggunakan jasa
pengiriman A maka kami tentu akan sedikit ragu barang yang kami beli dari toko online
anda tersebut akan sampai kerumah kami atau tidak. Kemungkinan terbesar keputusan
yang kami ambil adalah kami akan mencari toko online lainnya yang menyediakan barang
yang kami butuhkan namun juga memakai Jasa pengiriman A 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.
Untuk 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 Opsi Jasa Pengiriman Barang
Sebelumnya mari kita lihat terlebih dahulu contoh penggunaan opsi pilihan jasa
pengiriman tersebut dengan melihat contoh gambar dibawah ini.

Opsi pengiriman pada produk yang tidak menggunakan Shipping Class

Pada gambar diatas merupakan penerapan opsi pengiriman pada produk yang tidak
menggunakan Shipping Class. Jika produk tersebut tidak menggunakan Shipping Class
apapun maka ongkos kirim yang akan kita jelaskan pada tutorial ini akan berdampak
langsung pada produk tersebut.

Opsi pengiriman pada produk yang menggunakan Shipping Class

Pada tutorial sebelumnya kita sering membahas mengenai biaya pengiriman dengan
menggunakan Shipping Class. Jika customer kita akan membeli produk yang sudah kita
setting dengan biaya pengiriman melalui shipping Class maka secara otomatis tarif
shipping class produk tersebut akan mereplace atau menggantikan ongkos kirim dasar
pada area Cart toko online kita.

Let’s Start ..
Untuk membuat pilihan opsi pengiriman diatas maka kita akan memodifikasi Shipping Flat
Rate .

1. Silahkan anda login terlebih dahulu ke dashboard toko online anda dan kemudian

•

lakukan langkah dibawah ini
1.
2.

Pilih Settings

3.

Pilih Shipping

4.

•

Klik WooCommerce

Pilih Flat Rate

2. Gantilah Method Title dari Flat Rate menjadi nama jasa pengiriman default toko
online anda
Jika 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 POS Indonesia Reguler atau dalam contoh ini kami menuliskanPOS Reg
( 4 hari ) yang secara tidak langsung akan menjelaskan kepada pembeli toko online kita
bahwasanya barang yang mereka beli itu akan dikirim Via Pos reguler dan akan sampai
dalam kurun waktu 4 hari .

Nantinya dihalaman Cart toko online anda Menthod Title itu akan terlihat seperti pada
gambar berikut

•

3. Menambahkan biaya pengiriman dasar jika menggunakan PT POS Indonesia

TokoOnline

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to TokoOnline

Similar to TokoOnline (20)

TokoOnline