cara membuat toko online menggunakan woo commerce
DESCRIPTION
TRANSCRIPT
Cara membuat toko online menggunakan WooCommerce (Tahap Satu)
1. Install template Mytile dari WooThemesSilahkan 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.
Cara membuat toko online menggunakan WooCommerce (Tahap Tiga)
Cara Mensetting WooCommerceUntuk 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 GeneralAda 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.
Cara membuat toko online menggunakan WooCommerce (Tahap Empat)
Cara Mensetting CatalogBerikut 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 PagesPada 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.
Cara membuat toko online menggunakan WooCommerce (Tahap Lima)
Cara mensetting tab TaxOpsi 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. Klik tombol Save Changes
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. Klik tombol Save Changes
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. Klik tombol Save Changes
Nantinya jika dilihat pada halaman Checkout akan terlihat seperti pada gambar berikut
Semoga anda tidak mengalami kesulitan dalam menerapkan langkah kelima ini.
Cara membuat toko online menggunakan WooCommerce (Tahap Enam)
Pada tahap ke enam ini cara membuat toko online dengan 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 GatewaysUntuk 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.
Cara membuat toko online menggunakan 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 : [email protected] / customer-
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. Klik tombol Save Changes
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. Klik tombol Save Changes
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. Klik Tombol Save Changes
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.
Cara membuat toko online menggunakan 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 Analytics1. 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. Klik Tombol Save Changes
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. Klik Tombol Save Changes
Cara 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. Klik Tombol Save Changes
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.
Cara membuat toko online menggunakan 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 WooCommerceSilahkan 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.
Cara membuat toko online menggunakan WooCommerce (Tahap Sepuluh)
Pada langkah ke sepuluh ini kita akan melanjutkan tutorial sebelumnya yakni memposting
produk dengan product type – simple product. ( 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. Klik tombol Save Changes
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.
Cara membuat toko online menggunakan 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-SellsUp-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-SellsCross 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 )
GroupingGrouping 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.
Cara membuat toko online menggunakan 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.
Cara membuat toko online menggunakan 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 FIELDSPada bagian Custom Fields ini tidak perlu anda isi apapun karena memang tidak begitu
penting. Lanjutkan dengan langkah berikutnya.
PRODUCT SHORT DESCRIPTIONTulis deskripsi singkat mengenai produk anda tersebut disini. Sebisa mungkin jangan
terlalu panjang, tulis saja yang penting – penting saja mengenai produk tersebut.
MYSTILE CUSTOM SETTINGSTidak 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.
Cara membuat toko online menggunakan WooCommerce (Tahap Empatbelas)
Pada tahap empat belas : cara membuat toko online dengan woocommerce ini kita akan
membahas mengenai cara mengkustomisasi tampilan toko online kita. Seperti yang kita
ketahui bersama , saat ini kita hanya bisa melihat tampilan toko online yang kita buat
tersebut masih seperti sebuah blog dan tidak terlihat selayaknya sebuah toko online.
Secara khusus pada tahap ke empat belas ini kita hanya akan membahas mengenai hal
tersebut diatas. Setidaknya untuk lebih memberi semangat kepada kita bahwasanya
proses pembuatan toko online ini sudah mendekati tahap 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. Klik tombol Save All Changes
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.
Cara membuat toko online menggunakan 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 me-
Make 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 HomepageMari 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. Klik tombol Save All Changes
Sekarang lihat toko online anda maka di toko online anda tersebut sudah terpasang
sebuah banner yang besar disana. Selamat mencobanya dan semoga anda tidak
mengalami masalah yang berarti.
Sampai jumpa lagi pada tutorial selanjutnya.
Cara membuat toko online menggunakan 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 CSS1. 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 theme-
options.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. Klik tombol Save All Changes
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.
Cara membuat toko online menggunakan 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 OptionsPada 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.
Cara membuat toko online menggunakan WooCommerce (Tahap Delapan Belas)
Pada tahapan ke delapan belas ini kita akan mempelajari langkah selanjutanya dalam
tutorial cara membuat toko online dengan woocommerce yang masih dalam area theme
options seperti halnya kemarin. 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 OptionsPada 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. Klik tombol Save All Changes
Maka setelah anda simpan , tampilan toko online anda terlihat lebih rapi didalam box.
Cara membuat toko online menggunakan 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 ChattingUntuk 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. Klik Plugins
2. Pilih Add New
3. Pastikan anda pada posisi Search
4. Ketik Chat
5. Klik tombol Search Plugins
2. Install ClickDesk
3. Aktifkan Plugins
Register ClickDesk AccountSetelah 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 AgentPada 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 [email protected]
username anda adalah [email protected]
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 homepageUntuk 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.
9. Klik Tab Live Chat
10. Setelah terbuka anda akan melihat tampilan seperti gambar
berikut
1. Pastikan anda berada pada posisi UI & Themes
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. Klik Tombol Save Changes
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.
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 !!
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.
Cara membuat toko online menggunakan 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. Klik tombol Save Changes
Sekarang lihat toko online anda , maka saat ini Sticky Bar sudah berada diatas header
toko online anda dan mengisi space yang kosong tersebut.
Cara membuat toko online menggunakan 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 PageKami 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 ProdukKami 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. Klik Pages
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 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 masing-
kategori 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 url- nya
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.
Cara membuat toko online menggunakan 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
PersiapanSilahkan 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. Tulis Jumlah stok baju warna ungu anda disana Misal : 15
4. Tulis Harga untuk Kaos Ungu tersebut Misal : 110000 ( seratus sepuluh
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
Mari kita lanjutkan dengan yang ketiga ( Warna Kaos Merah )1. Pilih Warna Merah
2. Upload atau pasang gambar kaos warna merah anda
3. Tulis Jumlah stok baju warna ungu anda disana Misal : 20
4. Tulis Harga untuk Kaos Ungu tersebut Misal : 120000 ( seratus dua puluh
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
Mari kita lanjutkan dengan yang keempat / terakhir ( Warna Kaos Hitam )1. Pilih Warna Hitam
2. Upload atau pasang gambar kaos warna hitam anda
3. Tulis Jumlah stok baju warna ungu anda disana Misal : 25
4. Tulis Harga untuk Kaos Ungu tersebut Misal : 130000 ( seratus tiga puluh
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 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.
Cara membuat toko online menggunakan 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. Memposting Produk Turunannya / Child Product 2 ( iPhone 5 32 GB )
4. Memposting Produk Turunannya / Child Product 3 ( iPhone 5 64 GB )
Memposting Produk IndukYang 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. Klik Products
2. Klik Add New Product
3. Tulis Judul Produknya = Misalnya New iPhone 5
4. 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 TurunanDisinilah 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. Klik Products
2. Klik Add New Product
3. Tulis Judul Produk turunan yang pertama = Misalnya iPhone 5 16GB
4. 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. Centang Manage Stock
2. 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.
Cara membuat toko online menggunakan 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 BarangSebelumnya 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. Klik WooCommerce
2. Pilih Settings
3. Pilih Shipping
4. 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
Perhatikan gambar diatas, secara default atau secara otomatis ketika pertama kali
customer kita melihat halaman cart mereka maka ongkos kirim barang yang mereka beli
tersebut adalah Rp. 20.000 ( dua puluh ribu rupiah ) dan menggunakan POS Reguler tadi
diatas dengan estimasi barang akan sampai selama 4 hari.
Ongkos kirim sebesar Rp. 20.000 tersebut hanya ilustrasi saja , mohon anda tanyakan
terlebih dahulu sebelum anda menentukan harga pengiriman ini.
Cara menambahkan ongkoos pengiriman ini cukup mudah sekali, silahkan anda lihat
gambar di bawah ini.
1. Pilih Cost Per Order
2. Tulis ongkos kirim Pos Reguler nya disini , misal : 20000 ( mohon jangan
pakai titik )
3. Pastikan anda menulis di barisan Any Class
Sampai disini kita sudah selesai menambahkan ongkos kirim dasar pengiriman barang
dengan POS Reguler. Jangan di simpan terlebih dahulu dan lanjutkan ke langkah
berikutnya dibawah ini.
Note : Pilihlah ongkos pengiriman dasar ini yang mempunyai biaya terendah atau harga
ekonomi terlebih dulu
4. Selanjutnya kita akan menambahkan opsi pengiriman yang
lainnya
Disini kita akan menambahkan opsi pengiriman lainnya seperti yang sudah kami
terangkan diatas lainnya misalnya Pos Kilat , TIKI dan JNE.
Perhatikan gambar dibawah pada bagian Additional Rates
Lihat pada baris pertama :
POS Kilat ( 2 Hari ) | 10000 | yes
Penjelasan :
Pos Kilat ( 2 Hari ) : Nama pilihan ke dua Opsi pengiriman barang
10000 : ini merupakan ongkos/ biaya tambahan jika customer memilih
pengiriman barang yang dibeli tersebut menggunakan jenis Pos Kilat
nantinya akan terlihat dihalaman cartnya menjadi Rp. 30.000 ( tiga puluh
ribu rupiah ). Jika ongkos riil Pos kilat tersebut misalnya Rp. 35.000 ( tiga
puluh lima ribu ) maka angka 10000 tersebut anda ganti
menjadi 15000 jangan anda tulis 35000 juga karena angka tersebut akan
ditambahkan dengan angka yang anda tulis pada langkah no 3 diatas
yakni 20000
Rumusnya adalah sbb :Ongkos kirim Pos Reguler + Selisih harga ongkos kirim Pos Kilat dan
Reguler =Ongkos kirim Pos Kilat sebenarnyaFormat penulisannya adalah sbb : Nama Opsi Pengiriman | Biaya tambahan | yes
Silahkan anda copy paste opsi pilihan pengiriman berikut ini pada Additional Rates di toko
online anda
POS Kilat ( 2 Hari ) | 10000 | yes
TIKI Reg ( 2 Hari ) | 3000 | yes
TIKI Ons ( 1 Hari ) | 10000 | yes
JNE Eco ( 3 Hari ) | 5000 | yes
JNE SS ( 1 Hari ) | 10000 | yes
5. Sekarang simpan pekerjaan anda dengan mengklik tombol
Save Changes
Silahkan anda sesuaikan Opsi tambahan biaya pengiriman toko online anda tersebut
dengan biaya riil dari daerah anda masing – masing.
Sampai jumpa lagi pada tutorial selanjutnya. Semoga anda mengerti dengan penjelasan
kami diatas.
Cara membuat toko online menggunakan WooCommerce (Tahap Dua Puluh Lima)
Kali ini kita akan belajar tentang bagaimana membuat sebuah kupon diskon untuk
keperluan promosi di toko online kita. Selain untuk sarana promosi dalam mencari
customer baru untuk datang ke toko online kita, kupon diskon juga merupakan senjata
paling efektif untuk meningkatkan omzet penjualan toko online anda.
Kenapa kupon diskon ini penting untuk anda buat ? Ingat bahwa persaingan yang akan
anda hadapi sangatlah ketat sekali dan akan semakin sulit dari hari kehari.
Berikut Screenshot data google analytics dari blog ini selama periode 1 Juni 2013 s/d 23
September 2013
Jika dilihat dari data diatas maka kita bisa menyimpulkan bahwasanya akan ada ribuan
toko online baru yang akan bersaing dengan toko online anda. 10 top artikel yang paling
banyak dibaca dari blog ini didominasi oleh artikel mengenai toko online artinya anda
akan memerlukan strategi khusus agar toko online anda bisa berkembang dan bisa
memenangkan persaingan ini.
Salah satu senjata promosi yang handal adalah dengan menyediakan kupon diskon ini.
Membuat toko online bukan hanya sekedar memajang produk secara online saja namun
akan ada perjuangan yang sangat berat sekali .
Cara membuat Kupon Diskon
Berikut kami jelaskan bagaimana cara membuat Kupon Diskon untuk toko online anda.
Kita akan membuat kupon diskon dengan kondisi seperti berikut ini :
Kupon ini akan memotong harga keseluruhan pada halaman Cart
Nilai kupon ini adalah Rp.50.000,-
Kupon ini tidak bisa digabung dengan kupon yang lainnya ( misalnya
anda mengeluarkan banyak kupon )
Kupon ini tidak bisa digunakan pada produk yang sedang kondisi SALE
Kupon ini hanya bisa dipakai untuk 20 kali pemakaian
1. Silahkan anda login ke dashboard toko online anda
1. Klik WooCommerce
2. Pilih Coupons
3. Klik Add Coupon
2. Anda akan melihat halaman Add New Coupon seperti pada
gambar dibawah ini
3. Selanjutnya mari kita buat sebuah Kupon Diskon dengan
kondisi yang sudah kita tentukan diatas
1. Tulis judul / kode kupon anda, misal Promo-IX
2. Tulis deskripsi kupon anda, ini hanya untuk memudahkan anda dalam
memanage kupon anda tersebut
3. Discount Type , pilih Cart Discount
4. Coupon amount , tulis nominal Kupon anda tersebut misal 50000
( penulisan tidak perlu pakai titik )
5. Centang opsi individual use agar kupon yang kita buat ini tidak bisa
digunakan bersama-sama dengan kupon lainnya yang akan dikeluarkan
dikemudian hari
6. Centang opsi Exclude sale items agar jika customer anda akan membeli
produk dengan kondisi SALE tidak bisa menggunakan kupon diskon ini
7. Minimum amount , tulis jumlah minimal pembelanjaan untuk bisa
menggunakan kupon diskon ini. Sangat efektif untuk meningkatkan
volume sales toko online anda
8. Usage limit , tulis batas jumlah pemakaian kupon ini. Dengan
ditentukannya batasan maksimal pemakaian kupon ini maka anda bisa
mengontrol dan menganalisa seberapa efektif penggunaan kupon diskon
yang kita buat ini.
9. Klik tombol Publish untuk mulai mengaktifkan kupon belanja ini.
Setelah anda publish kupon tersebut maka selanjutnya adalah membuat sebuah
Campaign / kampanye / menyebarkan kode kupon tersebut melalui Facebook, Twitter,
Google Plus dan lain sebagainya.
Untuk mengetahui bagaimana kupon ini beraksi anda bisa mencoba menggunakan kupon
yang kami buat di demo toko online kami
Pilih salah satu produk disana dan kemudian View Cart anda
1. Gunakan kode : promo-ix
2. Klik apply coupon
Selanjutnya anda akan melihat sebuah notifikasi bawah kupon tersebut sudah sukses
diterapkan pada transaksi tersebut
Perhatikan pada point no.2 [ ORDER DISCOUNT ] terlihat disana ada tulisan -Rp.50.000
( nilai kupon ). Jika sudah terlihat demikian maka proses membuat kupon diskon pertama
kita sudah selesai.
Cara membuat toko online menggunakan WooCommerce (Tahap Dua Puluh Enam)
Pada tahap ke dua puluh enam ini kita akan belajar mengenai cara merubah bahasa yang
ada di toko online kita. Seperti yang kita ketahui dan kita alami bersama , saat ini toko
online kita tersebut masih menggunakan bahasa inggris. Tutorial ini juga sebagai jawaban
atas pertanyaan Mas IrwanKade dan Mas Ophin
Cara merubah semua bahasa di toko online yang menggunakan WooCommerce dari
Inggris ke Indonesia bisa dikatakan mudah namun juga bisa dikatakan sulit. Kenapa kami
katakan demikian ? Jika dikatakan mudah itu karena anda tahu caranya dan dikatakan
sulit itu karena anda belum mengetahui caranya. Nah .. melalui tutorial ini kami ingin anda
juga bisa mengatakan bahwasanya cara mengganti bahasa di toko online WooCommerce
kita menjadi bahasa Indonesia itu MUDAH !!. ya anda pasti juga bisa .
Apa syarat utama agar anda bisa mengatakan MUDAH ? Syaratnya adalah ketika anda
membaca tutorial ini pastikan anda baca dengan seksama baik tulisan maupun
gambarnya.
Mari kita mulai dari yang paling mudah terlebih dahulu .
1. Login ke dashboard toko online anda kemudian install
plugins
CodeStyling Localization
Cara Install plugin bisa anda lihat disini setelah selesai langsung saja anda aktifkan
plugin tersebut.
2. Sekarang mari kita menuju ke halaman localization
1. Klik Tools
2. Pilih localization
3. Centang pilihan Enable low memory mode
Jika anda menggunakan Shared Hosting maka centanglah pilihan tersebut, namun jika
anda memakai VPS atau dedicated server maka anda tidak perlu mencentangnya.
4. Selanjutnya yang perlu kita lakukan adalah menambahkan
bahasa indonesia ke theme Mystile kita
1. Klik Themes
2. Klik Add New Language
Tambahan : terlihat diatas kondisi themes yang kita pakai adalah Mystile dan disebelah
kanan gambar terlihat bahwasanya themes ini hanya ada pilihan bahasa inggris saja. Jika
anda memakai template yang lain maka sesuaikan dengan kondisi anda saat ini.
5. Kemudian anda akan melihat muncul pilihan berbagai bahasa,
cari ( scroll kebawah ) dan pilih Bahasa indonesia ( id_ID ) dan
lanjutkan dengan mengklik tombol create po-file
6. Proses membuat file-po bahasa Indonesia akan berjalan
sekitar 3 – 4 detik dan selanjutnya anda akan melihat Bahasa
Indonesia sudah tersedia pada theme Mystile tersebut
Atau lihat gambar dibawah ini supaya anda tahu secara pasti dimana lokasinya
Enam langkah diatas cukup mudah bukan ? pastikan terlebih dahulu anda melihat hasil
yang sama dengan kami jika tidak sama silahkan anda ulangi dan perhatikan lagi mana
tau ada yang terlewat .
Sampai dengan tahapan ini kita tidak akan melakukan apa- apa pada halaman
localization ini. Untuk sementara waktu biarkan halaman ini terbuka dan
jangan di tutup atau logout dari halaman dashboard toko online anda
ini. Lanjutkan dengan langkah no 7 dibawah ini …
7. Buka sebuah tab baru di web browser anda dan silahkan login
ke cpanel toko online anda. [ cpanel.domain-anda.com
( Webhosting ) ]
7. Buka sebuah tab baru di web browser anda dan silahkan login
ke cpanel toko online anda. ( cpanel.domain-anda.com
Setelah terbuka cpanel anda maka selanjutnya klik File Manager
8. Pastikan anda memilih Document Root folder dan kemudian
Klik tombol Go
9. Setelah terbuka maka silahkan cari wp-config.php
1. Pilih wp-config.php ( Klik kiri satu kali )
2. Klik icon Edit
9. Lanjutkan dengan mengklik tombol edit
10.Sekarang silahkan anda cari tulisan ini : define(‘WPLANG’, ‘
‘);
11.Setelah ketemu maka ganti atau tambahkan kode id_ID ,
nantinya kode tersebut akan tertulis seperti ini : define(‘WPLANG’,
‘ id_ID ‘);
12.Setelah selesai anda tambahkan kemudian silahkan anda klik
tombol save changes yang ada pada sudut kanan atas
13.Proses penyimpanan akan segera berjalan dan setelah
tersimpan silahkan anda logout dari cpanel toko online anda tersebut
14. Mari kita lihat lagi halaman dashboard toko online kita pada
langkah no 5 diatas. Refresh halaman tersebut maka anda akan
melihat perubahan yang cukup drastis disana. Lihat gambar dibawah
ini
WOW… sudah berbahasa Indonesia Lhoo… !!
15. Coba anda lihat toko online anda sekarang, maka sebagian tulisan
pasti telah berubah menjadi bahasa Indonesia
Dan juga pada halaman Cart
Small Problems !!Ada beberapa kata yang tidak bisa berubah secara otomatis jadi membutuh sedikit ekstra
kerja keras lagi. Nah untuk itu kita akan membahas permasalahan tersebut pada
kesempatan mendatang atau pada tahap ke 27 .
Tetap semangat dalam belajar dan yakinlah anda bisa .. !! Good Luck.
Cara membuat toko online menggunakan WooCommerce (Tahap Dua Puluh Tujuh)
Pada kesempatan kali ini kita akan melanjutkan tutorial cara mengatasi permasalahan
kecil pada tahap sebelumnya ( tahap 26 ). Kemarin kita masih menghadapi sedikit
masalah yakni adanya tulisan bahasa Inggris yang belum tertranslate ke bahasa
Indonesia.
Permasalahan tersebut sebenarnya bisa dibagi ada 2 bagian yakni :
1. Pada Themes Mystile
2. Pada Plugins WooCommerce
Dalam tutorial ini kami akan memberikan contoh cara mentranslate bahasa yang ada
pada Themes dan juga yang ada pada Plugins WooCommercenya. Kami akan
memberikan cara yang paling mudah untuk anda ikuti
1. Dari halaman Localization tersebut / saat ini namanya sudah
menjadi Lokalisasi
1. Klik Tema
2. Klik Tombol Pindai Ulang / Scan
2. Akan Muncul Pop up window seperti yang terlihat pada
gambar di bawah
Klik Tombol Pindai sekarang
3. Proses Scan akan berjalan , kira – kira akan memakan waktu 1
menit
4. Setelah proses scan selesai maka langsung saja anda klik
tombol Selesai
5. Sekarang kita akan melihat kata yang apa saja yang belum di
terjemahkan
Klik Tombol Sunting
6. Anda akan melihat sebuah proses persis seperti pada gambar,
silahkan ditunggu beberapa saat
7. Setelah proses loading diatas selesai maka anda akan melihat
sebuah tampilan seperti gambar berikut
Klik Link ” Tidak Diterjemahkan “
Ada 571 kata yang belum diterjemahkan ke Bahasa Indonesia, sangat banyak sekali
bukan? Ini adalah jumlah kata dalam bahasa inggris yang belum diterjemahkan kedalam
bahasa Indonesia yang terdapat pada halaman dashboard dan juga halaman yang terlihat
oleh orang luar atau customer kita.
Agar kita tidak banyak melakukan proses translate maka yang perlu kita translate adalah
kata – kata yang nampak oleh customer toko online kita saja. Kalau yang hanya nampak
pada dashboard toko online kita sebaiknya tidak perlu anda translate namun jika anda
berkenan anda juga bisa mentranslate semua yang ada didalam halaman dashboard.
Cara melakukan Proses Translate Yang akan kami terangkan disini adalah cara yang paling mudah untuk anda ikuti
8. Bukalah browser kesayangan anda sebanyak 2 buah
Silahkan ditampilkan bersebelahan seperti yang terlihat pada gambar di bawah ini
1. Buka halaman Dashboard Toko online anda
2. Buka halaman Toko onoline anda
9. Mari kita coba edit tulisan Recent Products yang ada pada
halaman homepage toko online kita tersebut
Copy tulisan Recent Products
Lihat ke dashboard toko online anda dan klik icon ƒx
Anda kan melihat Pop up seperti gambar berikut
1. Paste-kan Recent Products tadi pada kolom Ekspresi
2. Klik Tombol Cari
Setelah ketemu selanjutnya klik tombol Sunting ( no 2 )
Sekarang tulis kata terjemahan Recent Product yang anda inginkan ,
misalnya pada contoh ini kami menulis terjemahannya menjadi : Koleksi
produk terbaru !!
Kemudian anda akan melihat hasil terjemahan tersebut seperti pada
gambar dibawah ini
Untuk membuat hasil translate ini bekerja maka lanjutkan dengan meng-
klik tombol buat berkas-mo
Sekarang kita lihat halaman homepage toko online kita untuk melihat
hasilnya. ( refresh halaman homepage anda terlebih dahulu )
Ternyata usaha kita berhasil, sekarang tulisan Recent Products tersebut sudah berganti
menjadi Koleksi produk terbaru !!
Bagaimana dengan kata – kata yang lain ?Untuk mentranslate kata yang lainnya maka anda tinggal mengulangi cara diatas sampai
semua selesai. Kami tidak akan melakukan proses translate semua kata di demo toko
online yang kami buat. Ini merupakan contoh saja agar anda mengetahui bagaimana
langkah – langkahnya , untuk itu anda harus membuka setiap halaman dan mengecek
satu persatu kata mana saja yang perlu anda rubah.
Important !!
Jika anda menemui sebuah kata yang belum tertranslate ke bahasa Indonesia dan
didalam kata tersebut mengandung spesial karakter maka jangan sekali – kali anda
hapus spesial karakter tersebut.
Contoh : Jika anda ingin merubah atau mentranslate kata My %s Profile maka
cara menggantinya adalah dengan kata berikut Profil %s Saya
Contoh kata yang lain misalnya % Comments untuk mengganti kata
tersebut silahkan anda tulis kata penggantinya % Komentar
Yang terpenting disini jangan sampai anda menghilangkan spesial karaktertersebut
( tulisan yang kami buat berwarna merah )
Jika anda kemarin telah merubah atau mengkustom menu yang
memasang Kategori Produk ( Tutorial tahap 21 ) maka anda harus
mengedit kembali link kategori produk tersebut karena ada perubahan link
dari product-category menjadi Produk Kategori ( bahasa berubah ). Jika
tidak anda edit maka halaman kategori produk yang kita maksudkan tidak
akan muncul atau Error. Cek link produk kategori anda yang baru dan
kemudian rubahlah pada menu tersebut.
Tips ..Sebagai panduan saja, bukalah sebuah toko online profesional yang sudah terkenal dan
yang sudah full menggunakan bahasa indonesia untuk mendapatkan ide mengenai kata
apa yang tepat untuk anda pakai atau anda terapkan ketika mentranslate manual kata
yang masih dalam bentuk bahasa inggris tersebut agar toko online anda juga terlihat
profesional seperti mereka.
Cara membuat toko online menggunakan WooCommerce (Tahap Dua Puluh Delapan)
Seperti yang telah kami janjikan pada kesempatan yang lalu, kali ini kita akan belajar
tentang bagaimana cara menambahkan Widget pada toko online yang dibuat
menggunakan WordPress dan WooCommerce ini. Ada 2 jenis widget yang bisa kita
pasang pada toko online kita tersebut yakni Widget bawaan dari plugin WooCommerce
dan juga Widget yang berasal dari pihak ketiga, misalnya : Widget Email Subscription,
Fitur Chatting dari Yahoo Messenger dan banyak lagi yang lainnya.
Pada intinya widget ini bisa kita tampilkan pada sidebar dan juga footer, namun karena
kita memakai plugin WooCommerce maka widget yang seharusnya bisa tampil atau
terlihat di bagian sidebar tidak bisa terlihat.
Sebelum kita menambahkan widget ke toko online kita tersebut maka yang perlu kita
lakukan pertama kali ada mengaktifkan fitur widgets untuk plugin WooCommercenya
terlebih dahulu agar widget bisa muncul pada sidebar toko online kita.
1. Login ke Dashboard Toko Online anda, kemudian lakukan
langkah berikut ini agar widget yang akan kita pasang bisa tampil
pada toko online kita
1. Klik Mystile
2. Pilih Theme Options
3. Lanjutkan dengan mengklik WooCommerce
4. Klik Layout
5. Centang kedua pilihan tersebut
6. Klik tombol Save All Changes
2. Setelah kita lakukan hal diatas maka jika anda melihat salah
satu produk anda maka sekarang anda akan melihat sebuah sidebar
baru
Pada Sidebar sebelah kanan diatas tersebut kita akan menambahkan Widget yang sesuai
dengan kebutuhan toko online kita.
3. Sekarang mari kita menuju ke halaman Widgets
4. Setelah terbuka maka anda akan melihat halaman widget
tersebut seperti pada gambar dibawah ini
Lihat pada bagian sebelah kanan pada area Primary, pada bagian primary ini anda bisa
melihat bahwa disana sudah ada Recent Posts, Recent Comments, Archieves ,
Categories dan Meta.
Sekarang anda lihat lagi pada gambar no 2
diatas, yang terlihat disana itu ( gambar 2 ) merupakan widget yang muncul dari Primary
ini. Jadi jika anda ingin mengganti atau memasang widget pada area tersebut maka anda
bisa melakukannya dari Primary Widget ini.
Kami harap anda memahami hal ini terlebih dulu agar ketika anda nanti ingin merubah
widget pada sidebar sebelah kanan tersebut anda tahu kemana anda harus pergi.
Sekarang mari kita hilangkan atau hapus terlebih dahulu kelima Widgets bawaan yang
muncul secara otomatis tersebut.
5. Cara menghapus widgets yang sudah ada tersebut cukup
mudah , lakukan langkah dibawah ini
1. Klik icon panah kebawah
2. Klik Delete
Ulangi langkah diatas untuk menghapus widgets selanjutnya ( ada 4 buah lagi ) hingga
nantinya area primary widgets tersebut akan kosong dan terlihat seperti pada gambar
berikut.
6. Mari kita pelajari widgets apa saja yang sudah berada disana
Coba anda perhatikan deretan Widgets pada toko online anda tersebut , kira – kira akan
terlihat seperti pada gambar dibawah ini.
Yang perlu anda ketahui adalah dari sekian banyak Widgets yang berada disana itu (lihat
gambar diatas) untuk Widgets yang berasal dari plugin WooCommerce maka cirinya
widget tersebut ada kata-kata WooCommercenya dan ada juga yang cuman berawalan
Woo ( Woo Search, Woo Flickr dll ).
Sedangkan yang tidak mempunyai ciri seperti yang sudah kami sebutkan maka widgets
tersebut adalah widgets bawaan dari WordPress. Jadi setiap blog atau website yang
dibuat menggunakan WordPress pasti akan memilikinya.
7. Cara menambahkan Widgets yang berasal dari WooCommerce
pada area Primary
Karena widgets yang kita letakkan pada primary area ini akan terlihat berdampingan
dengan produk yang kita jual maka sebaiknya anda menempatkan widgets yang nantinya
berguna bagi calon customer anda dalam mencari produk idaman mereka ataupun produk
yang sedang ada promo atau yang sedang diskon.
Dalam contoh ini kami akan menambahkan beberapa Widgets seperti :
Widget Pencarian Produk
Widget Keranjang Belanja
Widget Filter Harga
Widget Produk Terlaris
Widget Pencarian Produk Temukan Widget WooCommerce Cari Produk, setelah ketemu Klik kiri
pada nama widget tersebut , tahan / jangan dilepas / tetap tekan mouse
anda .
Geser atau tarik widget WooCommerce Cari produk tersebut ke area
Primary Widget
Lepaskan Widget tersebut disana dengan cara jangan ditekan lagi
mouse anda tadi. Jika benar langkah anda tersebut maka anda akan
melihat Widget WooCommerce Cari Produk tadi sudah berada area
Primary.
Tulis Judul Widgetnya , Misal : Cari produk terbaik kami
disini kemudian klik tombol Save
Setelah selesai anda simpan lanjutkan dengan mengklik link Close
Gunakan cara diatas untuk menambahkan Widgets lainnya, caranya
sama saja dengan cara diatas.
Jika sudah selesai semua maka akan terlihat seperti pada gambar
dibawah ini.
Jika kita lihat pada toko online kita maka sekarang ini kita sudah
mempunyai widgets tambahan dan sudah tidak memakai default widget
yang ada pada gambar langkah no 2 diatas. DEMO
8. Cara menambahkan Widgets pada area Footer
Cara menambahkan widget pada footer ini sama juga dengan cara menambahkan widget
pada area Primary / Sidebar. Anda tinggal menerapkan cara yang sudah kami jelaskan
diatas.
Yang perlu anda ketahui adalah posisi dari widget yang diletakkan pada Footer 1, 2, 3 dan
4 . Urutannya nanti untuk footer no 1 maka akan terlihat pada Footer sebelah kiri, Footer
no 2 akan terlihat disebelah kanan footer no 1 dan begitu seterusnya.
Jika anda sudah selesai menambahkan widget pada footer maka
susunannya akan terlihat seperti pada gambar dibawah ini.
9. Cara menambahkan Widgets dari Pihak ketiga
Untuk memasang Widget dari pihak ke tiga misalnya yahoo messenger, facebook
fanpage, twitter streamline dan sebagainya anda bisa menggunakan TEXT Widget
Misalnya kita akan memasangan status yahoo messenger di toko online kita, lokasi bebas
atau terserah anda (bisa anda pasang di area Primary atau pun pada Footer ). Pada
contoh dibawah ini kami akan meletakkan Yahoo Messengernya pada footer no 2, yang
perlu anda lakukan adalah sbb :
Tarik Widget TEXT tersebut ke area yang kita inginkan
Setelah posisi TEXT Widget tersebut berada pada tempat yang kita
inginkan maka lakukan hal berikut ini
1. Tulis judul untuk widget yahoo messenger tersebut
2. Copy dan Paste kan kode dibawah ini
3. Klik Tombol Save
Kode Yahoo Messenger<a href=”ymsgr:sendIM?ID_Yahoo_Anda“> <img
src=”http://opi.yahoo.com/online?
u=ID_Yahoo_Anda&m=g&t=2&l=us”/>KeteranganGantilah tulisan ID_Yahoo_Anda dengan username email yahoo anda . Dalam contoh
ini kami menggunakan alamat email [email protected] maka kode yang kami
letakkan seperti berikut ini
<a href=”ymsgr:sendIM?johny2md“> <img src=”http://opi.yahoo.com/online?
u=johny2md&m=g&t=2&l=us”/>
Untuk mengganti gambar satus YM kita maka silahkan anda ganti tulisan t=2dengan
kode gambar dibawah ini
10. Proses memasang Widget Di toko online anda Sudah Selesai
Saat ini pastinya anda sudah tahu dan paham langkah – langkah bagaimana cara
menambahkan widget di Toko online yang menggunakan WordPress ini. Good Luck.
Kode Dari Mas Timo ( Thank’s ya Mas ) , lihat kegunaan kode dibawah ini pada komentar
beliau pada kolom komentar
<a href=”ymsgr:sendIM?IDYahooAnda”><img
src=”http://opi.yahoo.com/online?u=IDYahooAnda&m=g&t=1&l=us“/>
</a>
Cara membuat toko online menggunakan WooCommerce (Tahap Dua Puluh Sembilan)
Setelah sekian banyak tahapan yang sudah kita pelajari dalam membuat toko online
menggunakan WooCommerce ini maka pada tahap ke 29 kita akan belajar lagi mengenai
bagaimana cara menghandle sebuah order yang telah dilakukan oleh customer kita.
Kenapa kami memilih topik ini pada tahap ke 29 ? secara umum sudah banyak rekan-
rekan yang sudah sukses dalam menerapkan langkah demi langkah yang telah kami
sampaikan. Kemungkinan juga ada yang sudah siap untuk berjualan namun masih belum
tahu cara mengelola orderan dari customer.
Untuk itu mari kita belajar mengenai apa yang harus kita lakukan ketika ada sebuah order
barang dari customer. Agar anda mengetahui secara pasti bagaimana jalan ceritanya
mengenai proses order yang dilakukan oleh customer di toko online kita maka kami akan
mendemonstrasikan secara lengkap mengenai apa yang dilihat oleh customer anda ketika
melakukan order dan juga apa yang akan anda lihat sebagai pemilik toko online tentunya.
Ini juga berguna bagi anda ketika anda akan membuat halaman tata cara belanja ataupun
ketika anda sedang berkomunikasi dengan customer anda. Semakin lengkap keterangan
yang anda berikan pada halaman tata cara belanja maka akan semakin mudah Customer
anda merasa nyaman berbelanja di toko online anda tersebut . Dan jika anda mendapat
pertanyaan dari customer anda maka anda akan lebih siap untuk memberikan jawaban
yang terbaik kepada mereka. Membuat Customer merasa nyaman berbelanja di toko
online anda tentunya akan lebih sulit dari pada ketika anda membuat toko online anda
sekarang ini.
Sebelum kita mulai ada baiknya anda pastikan pada halaman setting anda sama seperti
pada gambar berikut ini.
Mohon untuk disamakan kondisi settingan toko online anda dengan gambar diatas dan
jangan lupa save setelah anda yakin sudah sama dengan settingan diatas.
Let’s Start …Pertama kita akan membuat sebuah order sebuah produk, disini yang bertindak sebagai
contoh customernya adalah kami dan sebagai pemilik toko onlinenya adalah anda.
1. Misalnya kami akan membeli sebuah kaos ditoko online anda
dan kami mempunyai Kupon belanja yang anda keluarkan. Dalam hal
ini kami memakai kupon belanja yang pernah anda buat sebelumnya
dan anda promosikan melalui jejaring sosial , kupon belanjanya
misalnya : promo-ix
2. Kami akan membeli sebuah kaos berwarna biru seperti yang
terlihat pada gambar diatas
Setelah kami add to cart maka kami sebagai pembeli akan melihat halaman seperti pada
gambar dibawah ini. Pada gambar dibawah terlihat bahwasanya kaos yang akan kami beli
tersebut ternyata harganya cuman Rp.100.000,-
3. Setelah kami klik tombol check out maka selanjutnya kami
akan melihat sebuah halaman yang memungkinkan kami untuk bisa
memasukkan kupon belanja
4. Karena kami sudah memiliki kupon belanja dari toko online
anda , maka kami memasukkan kode kupon tersebut agar kami
mendapatkan diskon belanja
5. Setelah kami klik tombol Terapkan kupon diatas ternyata ada
sebuah pesan baru yang muncul disana
Ada syarat minimum belanja yakni sebesar Rp.300.000,- agar kupon tersebut bisa kami
pakai. Masih ingat bukan dengan penjelasan cara membuat kupon kemarin ? Disinilah
kegunaan kupon belanja yang bisa anda pakai sebagai sarana pendongkrak omzet
penjualan toko online anda tersebut.
Trik seperti ini tentunya anda sudah anda ketahui apabila anda sering berbelanja di Mall.
Percaya atau tidak kupon belanja seperti ini masih sangat efektif sekali untuk anda pakai
dan anda terapkan di toko online anda.
6. Karena kami merasa butuh dan menyukai kaos yang anda jual
diatas maka mau tidak mau kami menambah keranjang belanja kami
dengan produk yang anda jual lainnya
Dalam contoh ini kami akan membeli 2 buah lagi kaos namun dengan warna yang
berbeda misalnya : kaos yang berwarna merah dan yang berwarna hitam. Jadi sekarang
belanjaan kami sudah mencukupi syarat minimum agar bisa mendapat diskon belanja
yang telah anda keluarkan
Note : Pada customer tertentu mungkin metode kupon ini bisa efektif namun juga bisa
tidak efektif , tergantung dari customer anda itu sendiri.
7. Selanjutnya kami melakukan check out lagi dengan
menerapkan kode kupon tadi.
Sekarang kupon tersebut bisa kami pergunakan dan berfungsi dengan baik. Terlihat pada
gambar dibawah ini bahwa kupon tersebut bernilai Rp. 50.000,-
8. Setelah kami mengklik tombol pesanan diatas maka kami
akan melihat sebuah halaman yang menyatakan orderan atau
pesanan yang kami lakukan sudah sukses.
Selain itu kami juga akan menerima email pemberitahuan bahwasanya orderan kami
sudah diterima dan juga langkah apa yang harus kami lakukan berikutnya.
Karena kami sebagai customer maka kami akan menerima email seperti ini
9.Selanjutnya jika kita lihat status pesanan kami maka terlihat
disana bahwa status pesanan tersebut masih “Tertahan ” atau
Pending.
Untuk melihat status pesanan maka yang harus kami lakukan / yang harus customer anda
lakukan adalah mengklik Link My Account
Status tertahan ini mempunyai arti bahwa kami belum melakukan transfer uang untuk
pembayaran produk yang kami beli dari toko online anda tersebut. Hal – hal seperti ini
bisa anda masukkan kedalam halaman tata cara belanja agar customer anda memahami
dan mengerti langkah apa yang harus mereka ambil selanjutnya.
Dan juga yang terlebih penting lagi adalah anda juga harus menjelaskan di dalam
halaman tata cara belanja tsb bahwa setelah mereka mereka selesai melakukan transfer
uang, mereka harus mengkonfirmasi kepada anda. Bisa melalui SMS, Email, Chatting
ataupun telpon agar orderan mereka bisa anda proses.
10. Mari kita lihat terlebih dahulu apa yang akan anda lihat
ketika ada seseorang yang melakukan order ditoko online anda
Jika kami sebagai customer menerima email pemberitahuan maka anda juga menerima
email pemberitahuan mengenai order yang baru saja kami lakukan. Emailnya seperti
pada gambar berikut
Dan jika dilihat dari halaman dashboard toko online anda maka akan terlihat seperti ini.
( Klik pada gambar untuk memperbesar )
Disini anda bisa melihat barang yang kami pesan melalui toko online anda.
Pada posisi seperti ini yang bisa anda lakukan hanyalah menunggu customer anda
melakukan pembayaran dan juga konfirmasi dari mereka.
11. Sekarang asumsikan bahwa kami telah mentransfer uang
untuk pembayaran baju tersebut dan kami telah mengirimkan
konfirmasi pembayaran kepada anda
Jika pembayaran yang kami lakukan tersebut sudah anda cek di rekening anda dan
uangnya sudah masuk maka yang harus anda lakukan adalah mengklik icon pengolahan .
Lihat gambar berikut.
Setelah anda Klik icon pengolahan tersebut maka warna status orderan tersebut berubah
dari yang sebelumnya berwarna kuning sekarang sudah berwarna hijau.
Sel
anjutnya yang harus anda siapkan tentu mengepak pesanan kami (customer) untuk
selanjutnya anda kirim.
12.Mari kita lihat apa yang terjadi pada halaman akun kami
yang saat ini menjadi customer anda
Karena anda sudah menerima pembayaran kami dan mengklik icon memproses maka
status orderan kami pada halaman akun kami juga berubah menjadi “Memproses”. Anda
juga bisa menyertakan keterangan status seperti ini pada halaman tata cara belanja di
toko online anda. Jadi Customer anda bisa tahu apabila statusnya sudah memproses
maka hal ini berarti anda sedang menyiapkan orderan / pesanan kami tersebut.
Hal ini akan sangat membantu anda dalam membangun rasa kepercayaan customer
kepada anda. Kondisi ini sangat sensitif terutama jika customer anda tersebut baru
pertama kali melakukan transaksi / berbelanja di toko online anda.
Ini sangat efektif jika misalnya customer anda tersebut melakukan transfer melalui internet
banking dan kemudian mereka memantau kesigapan pelayanan di toko online anda.
Semua type customer bisa masuk ke toko online anda, jadi sebaiknya anda memberikan
pelayanan yang super extra. Jika customer puas tentu keuntungan akan kembali lagi
kepada anda. Mereka bisa menjadi customer loyal anda dan juga bisa menjadi orang
yang bisa membantu anda promosi secara gratis. Harapannya tentu mereka bisa
mempromosikan toko online anda tersebut ke teman – teman mereka.
13.Setelah proses Packing selesai dan anda sudah mengantar
barang tersebut ke jasa pengiriman maka selanjutnya anda bisa
mengklik tombol Selesai
dan setelah anda klik icon diatas maka warna status orderan tersebut menjadi Biru.
14.Sebagai customer apa yang akan kami lihat pada halaman
akun kami
Kami akan melihat status pesanan /orderan kami berubah menjadi Selesai
Dan masih ada lagi sebuah email pemberitahuan yang kami dapatkan yang menyatakan
bahwa orderan kami sudah Complete
Semoga penjelasan kami diatas bisa anda pahami dengan baik dan tentunya anda bisa
mengambil langkah yang lebih baik ketika melayani customer anda kelak. Sampai ketemu
pada tahapan selanjutnya.
Cara membuat toko online menggunakan WooCommerce (Tahap Tiga Puluh)
Cara membuat toko online menggunakan WooCommerce kali ini merupakan Tutorial yang
akan melengkapi keseluruhan langkah demi langkah yang telah kami sampaikan selama
3 bulan terakhir ini. Secara garis besar semua fitur yang bisa kita pakai pada plugin
WooCommerce tanpa plugins premium sudah kami sampaikan kehadapan anda. Jika
anda berhasil memahami panduan yang kami berikan maka kami yakin sekali anda sudah
mampu mengelola sebuah toko online yang dibuat dengan menggunakan WooCommerce
tersebut. Toko online anda memakai template apapun asalkan masih menggunakan
plugin WooCommerce maka caranya tetap sama dan yang membedakan hanya
pengelolaan dan pengaturan templatenya saja.
Pada tahap ke 30 ini kita hanya akan menyempurnakan tampilan Homepage toko online
kita menjadi terlihat lebih professional lagi dan lebih terlihat kreatif dan unik meskipun
template yang kita pakai hanyalan template gratisan.
Target yang ingin kita capai dalam tutorial ini bisa anda lihat pada gambar dibawah ini
atau jika ingin lebih jelas lagi silahkan kunjungi DEMO secara live nya. Disana bisa kita
lihat bahwa pada halaman homepage kita ada Slideshow , Produk terbaru , Slide
testimonial dari customer, Sebuah Video Review Produk dan Daftar nama bank yang kita
sediakan sebagai metode pembayaran .
Mari kita mulai dari langkah yang paling mudah dan terlebih dahulu kemudian di teruskan
dengan langkah yang lebih sulit.
1. Install, Settings dan Add a SlideShowKita akan menambahkan fitur Slideshow di halaman beranda / homepage toko online kita
tersebut, untuk itu kita akan menggunakan sebuah plugin slideshow gratis yang namanya
adalah Slideshow jquery image gallery
D
ownload
Install dan AktifkanInstall plugin Slideshow jquery image gallery diatas dan kemudian langsung anda aktifkan
plugins tersebut. Jika anda belum tahu caranya silahkan lihat pada artikel kami
mengenai cara menginstall sebuah plugin di wordpress.
Settings plugins SlideshowSetelah anda install dan mengaktifkan plugin tersebut maka selanjutnya kita akan
melakukan setting ukuran yang akan kita pakai dalam slideshow tersebut.
Dalam tutorial ini kita akan menambahkan sebuah slideshow dengan ukuran 1059 x 430
px ( Note : ukuran image slideshow ini adalah ukuran yang pas untuk template Mystile,
untuk template yang lain silahkan anda sesuaikan sendiri )
Langkahnya adalah sebagai berikut :
1. Klik Slideshows
2. Pilih General Settings
3. Pilih Default Slideshow Settings
4. Animation used for transition between slides : Pilih Slide Left, Anda
bebas memilih jenis animasi yang anda sukai, disini sebagai contoh kami
memilih Slide Left.
5. Number of slides to fit into one slide : Tulis disana angka 1
6. Maximum width. When maximum width is 0, maximum width is
ignored :tulis lebar imagenya disini yakni 1059 ( lebar image 1059 px )
7. Proportional relationship between slideshow’s width and height
(width:height) : Hapus tulisan yang ada disana
8. Slideshow’s height : Tulis tinggi imagenya disini yakni 430 ( tinggi
image 430 px )
9. Image behaviour : Pilih Natural and Centered
10. Settingan yang lainnya biarkan seperti apa adanya , sekarang lanjutkan
dengan mengklik tombol Save Changes.
Membuat Slideshow Utama
Selanjutnya kita akan membuat sebuah slideshow utama untuk keperluan kustom
homepage kita ini. Slideshow utama ini merupakan Slideshow yang menggunakan
gambar.
1. Klik Add New
2. Tulis nama slide show anda ( bebas )
3. Copy dan pastekan shortcode tersebut pada notepad , Shortcode inilah
nanti yang akan kita pakai . Pada contoh ini Shortcode slideshow yang
kami buat adalah : [slideshow_deploy id='199']
4. Pilih Template untuk Slideshow-nya Full Screen / Full Width / Tanpa ada
Sidebar
Upload Image untuk slideshowKarena pada settingan tadi kita menggunakan image sebanyak 3 buah dengan ukuran
image 1059 x 430 px maka kami sudah mempersiapkan ketiga image tersebut. Jika anda
belum mempunyai image untuk latihan ini maka anda bisa mendownload / memakai
image yang kami pakai untuk tutorial ini disini :
http://bloggerdiscuss.com/woocommerce/wp-content/uploads/kaos-
ubuntu1.png
http://bloggerdiscuss.com/woocommerce/wp-content/uploads/kaos-
kucing1.png
http://bloggerdiscuss.com/woocommerce/wp-content/uploads/
pajangan1.png
Untuk mengupload image slideshow tersebut lihat pada area sebelah kanan
Klik tombol Image Slide
Klik Select Files. Temukan dimana lokasi image yang sudah kita
persiapkan tadi
Setelah ketemu maka upload ketiga gambar untuk slideshow tersebut
secara bersamaan biar cepat
Setelah selesai proses uploadnya maka silahkan anda pilih ketiga
gambar tersebut kemudian Klik tombol Select di pojok kanan bawah
Kemudian isilah keterangan yang diperlukan untuk slideshow anda
tersebut ( Judul , Deskripsi dan URL yang mengarah kepada produk yang
dimaksud ) .
1. Judul yang akan ditampilkan pada image slide pertama
2. Deskripsi untuk image pada slide pertama
3. Link ke produk image pertama
4. Judul yang akan ditampilkan pada image slide kedua
5. Deskripsi untuk image pada slide kedua
6. Link ke produk image kedua
7. Judul yang akan ditampilkan pada image slide ketiga
8. Deskripsi untuk image pada slide ketiga
9. Link ke produk image ketiga
10. Klik tombol publish
Sekarang Slideshow utama kita sudah jadi dan mari kita lanjutkan dengan membuat
sebuah Text slideshow untuk testimonial dari customer kita.
Membuat Slideshow TambahanUntuk membuat slideshow yang dikhususkan sebagai tempat testimonial dari toko online
kita maka kita perlu membuat Slideshow berbentuk TEXT. Caranya agak mirip dengan
cara membuat slideshow yang menggunakan gambar diatas tadi, langsung saja mari kita
membuat slideshow tambahan ini.
Klik Add New Slideshow kemudian isikan hal – hal berikut ini
1. Tulis judul Slideshow untuk testimonial dari pelanggan ini , misal :
Testimonial
2. Copy dan pastekan Shortcode tersebut pada Notepad, ini nanti yang
akan kita pakai. Punya kami [slideshow_deploy id='249']
3. Pilih Full Width
4. Animation used for transition between slides : Pilih Slide Down
5. Maximum width. When maximum width is 0, maximum width is
ignored : Pastikan saja angkanya masih 1059
6. Slideshow’s height : Ganti dengan angka 40 . Ini maksudnya tinggi
slideshow untuk testimonial tersebut hanya 40 pixel saja dan berbeda
dengan slideshow untuk image diatas
7. Pilih Yes pada kedua Opsi tersebut
8. Pilih No pada keempat Opsi tersebut
Setelah itu arahkan pandangan anda ke kebelah kanan, Klik tombol Text
slide tersebut 4 kali ( disini kami akan menampilkan 4 buah testimonial
dari customer sebanyak 4 buah ) . Jika anda ingin menampilkan lebih dari 4
maka sesuaikan saja dengan apa yang anda inginkan. Lihat pada gambar
dibawah mengenai apa yang anda harus lakukan
Setelah selesai anda isi testimonial diatas maka sekarang lanjutkan
dengan mengklik tombol Publish.
Saat ini kita sudah mempunyai 2 buah slideshow :
1. Slideshow dalam bentuk Image
2. Slideshow dalam bentuk Text
Sekarang mari kita lanjutkan dengan langkah berikutnya
2. Mencari sebuah Video
Silahkan anda cari sebuah video dari Youtube atau jika anda mempunya video sendiri
silahkan anda unggah ke Youtube terlebih dahulu dan Copy link url Video tersebut. Dalam
contoh ini kami memakai sebuah Video Review mengenai iPhone 5 dengan link sbb :
http://www.youtube.com/watch?v=LzfAnnvOg3I
Copy dan Paste link Video yang anda inginkan di Notepad lagi, kita akan memakainya
nanti,
3. Menyiapkan image logo Pilihan Bank
Disini kami telah membuat sebuah image yang berisikan 6 buah logo beberapa bank
ternama, pada toko online anda silahkan sesuaikan dengan rekening bank yang anda
punya dan yang anda pakai sebagai tempat penampungan pembayaran dari customer
anda.
Gabungkan logo – logo Bank tersebut menjadi 1 dengan ukuran 1045 x 100 px. Disini
yang terpenting adalah lebarnyanya saja yang harus sama yakni 1045 pixel. Loh kenapa
berbeda dengan ukuran lebar image pada Slideshow yang pertama tadi ya ? Ini memang
berbeda , setelah kami coba dengan beberapa image percobaan maka ketemulah ukuran
lebar yang pas untuk image logo bank ini.
Imagenya bisa anda pakai punya kami terlebih dahulu, untuk percobaan saja.
Link : http://bloggerdiscuss.com/woocommerce/wp-content/uploads/6-bank.png
4. Membuat Sebuah Static Page
Ini merupakan inti dari pembuatan kustom homepage untuk toko online kita tersebut, kita
akan memakai semua hal yang sudah kita persiapkan diatas,
Mari kita membuat sebuah static page baru yang akan kita pakai sebagai template
halaman homepage toko online kita ini.
1. Klik Pages
2. Klik Add New Page
3. Tulis judul Static Page anda
4. Template , pilih Full Width
Setelah anda tulis judulnya dan juga memilih full width sebagai template dari halaman
static ini maka yang harus anda lakukan adalah sebagai berikut .
Silahkan susun dengan urutan yang ada pada gambar diatas , setelah selesai klik
Publish. Untuk keterangan rincian pembuatannya static page untuk homepage ini bisa
anda baca pada tahap selanjutnya.
Cara membuat toko online menggunakan WooCommerce (Tahap Tiga Puluh Satu)
Seperti yang sudah kami janjikan kemarin pada tahap tiga puluh satu ini kami akan
meneruskan tutorial yang belum komplit dari tutorial sebelumnya. Disini kami akan
membahas mengenai membuat static page yang akan kita pergunakan sebagai
Homepage toko online yang kita buat.
Anda tidak harus mengikuti susunan yang sama seperti yang kami buat ini, namun yang
kami harapkan kepada anda adalah anda mendapatkan ide tentang bagaimana membuat
sebuah custom page untuk toko online anda tersebut. Mungkin imaginasi anda akan lebih
baik lagi dari kami sehingga bisa menghasilkan sebuah design yang lebih bagus untuk
toko online anda tersebut.
Mari kita lihat lagi gambar terakhir dari tutorial pada tahap 30 kemarin. Silahkan anda
perhatikan gambar dibawah ini :
1. Silahkan anda tulis Judul Static Page anda, karena judul ini
nantinya muncul atau terlihat oleh customer kita maka buatlah judul
dengan menggunakan kata – kata yang menarik.
2. Pilih editor modenya = Visual . Lihat gambar diatas.
3. Copy Paste Shortcode Slideshow anda yang pertama
Shortcode Slideshow punya kami yang pertama adalah seperti ini :[slideshow_deploy
id='199']
4. Kemudian kita akan memberikan sedikit jarak antara Slideshow
dengan Kata- kata koleksi terbaru
Untuk memberikan sedikit jarak tersebut kita akan memasukkan Divider , Copy paste
shortcode [divider] ini tepat dibawah Shortcode slideshow yang pertama tadi.
Atau anda juga bisa memasukkan Shortcode Divider ini dengan cara berikut
1. Klik Woothemes Shortcode icon
2. Letakkan kursor mouse anda diatas tulisan Divider
3. Klik / Pilih Divider
5. Kemudian kita akan membuat kata KOLEKSI TERBARU DI TOKO
KAMI
1. Klik Bold ( Mode tulisan tebal )
2. Pilih alignmentnya Center ( supaya tulisan kita berada di tengah )
3. Klik Paragraph
4. Selanjutnya Klik Heading 3 ( agar tulisan yang kita buat agak besar )
Copy paste tulisan berikut dibawah barisan Divider tadi
————————————————– KOLEKSI TERBARU DI TOKO KAMI ————————————————–
6. Selanjutnya kita akan memasukkan recent products / produk
terbaru dibawah tulisan tersebut. Namun kita hanya akan
memasukkan 4 buah produk saja
1. Klik WooCommerce icon
2. Pilih Recent Products
Setelah anda klik Recent products maka shortcodenya akan muncul , lihat gambar
dibawah
Shortcodenya kira – kira seperti ini:
[recent_products per_page="12" columns="4" orderby="date" order="desc"]
Ganti angka 12 tersebut dengan angka 4 supaya produk yang ditampilkan hanya 4 buah
produk saja. Secara jika kita lihat ( preview ) maka akan terlihat seperti pada gambar
berikut.
7. Langkah berikutnya kita akan menambahkan kata Testimonial dari
pelanggan
Lakukan hal yang sama dengan langkah no 3 diatas , namun yang berbeda Heading-nya
saja , pilih Heading 5 kemudian copy paste tulisan berikut ini
————————————————— Testimonial dari pelanggan kami—————————————————
Nantinya akan terlihat seperti pada gambar berikut
8. Sekarang kita akan menambahkan Shortcode Slideshow
Testimonial yang sudah kita buat sebelumnya
Copy dan Pastekan Shortcode anda dibawah kata – kata Testimonial dari pelanggan kami
tersebut
[slideshow_deploy id='249']
9. Nah, kita akan menambahkan lagi sebuah Divider. Namun kali ini
supaya Divider tersebut mempunyai garis maka kita akan
menambahkanDivider yang jenis Horizontal Rule
1. Klik Woothemes Shortcode icon
2. Letakkan kursor mouse anda diatas tulisan Divider
3. Klik / Pilih Horizontal Rule
Nantinya setelah anda klik horizontal rule diatas maka akan terlihat seperti berikut ini
10. Sekarang kita tambahkan lagi sebuah tulisan sebelum embed
video dari Youtube
Caranya sama dengan langkah no 5 namun untuk Headingnya silahkan pilih Heading 1
Review iPhone 5 terbaru !!
Nanti harus terlihat seperti pada gambar dibawah ini
11. Tiba saatnya kita memasukkan video dari Youtube
Kemarin kami telah mempersiapkan sebuah Video dengan URL berikut :
http://www.youtube.com/watch?v=LzfAnnvOg3I
Sebenarnya ada banyak cara yang bisa kita lakukan untuk embed video ini, kami pernah
mengulasnya disini
Namun jika kita memakai cara tersebut maka customer bisa dengan leluasa melihat video
tersebut langsung dari Youtube dan tentunya mereka akan meninggalkan toko online kita.
Berikut contohnya :
Embed Video secara langsung menggunakan cara diatas / metode pada artikel kami
tersebut
Jika anda klik logo Youtube pada pojok kanan bawah maka anda akan bisa melihatnya
langsung video tersebut melalui Youtube.
Sekarang coba klik logo Youtube yang ada pada embed Video dibawah ini..
Sudah tahu bedanya bukan ? Nah sekarang kami akan menunjukkan bagaimana caranya
supaya video yang kita embed dari Youtube tersebut tidak bisa dilihat ke sumbernya /
youtube.
Perhatikan Link Youtube Video kami ini : http://www.youtube.com/watch?
v=LzfAnnvOg3I
Kita hanya membutuhkan tulisan yang berwarna merah paling belakang
<object width=”520” height=”300” classid=”clsid:d27cdb6e-ae6d-11cf-96b8-
444553540000″
codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,40,0″><param name=”allowFullScreen” value=”true” /><param
name=”wmode” value=”transparent” /><param name=”src”
value=”http://www.youtube.com/v/LzfAnnvOg3I” /><param name=”allowfullscreen”
value=”true” /><param name=”allownetworking” value=”internal” /><param name=”value”
value=”internal” /><embed width=”520” height=”300” type=”application/x-shockwave-
flash” src=”http://www.youtube.com/v/LzfAnnvOg3I” allowFullScreen=”true”
wmode=”transparent” allowfullscreen=”true” allownetworking=”internal”
value=”internal” /></object>
Keterangan :
1. Ganti LzfAnnvOg3I dengan tulisan terakhir dari url video yang ingin
anda pasang ( ada 2 kode tersebut )
2. Ganti ukuran lebar video playernya 520 dan Tingginya 300 ( masing –
masing ada 2 kode tersebut)
3. Jika anda ingin menghilangkan fitur fullscreen nya maka ganti
tulisan truemenjadi False.
Dalam contoh ini kami akan menempatkan embed Video ini dengan kode diatas. Caranya
adalah sebagai berikut.
Sebelumnya kita dari tadi memakai editor mode Visual
Untuk memasukkan kode embed Youtube diatas kita harus mengganti mode editor kita
dari visual menjadi Text . Jika anda sudah berada pada posisi Text maka anda akan
melihat dilayar anda seperti pada gambar berikut ini.
Hapus terlebih dahulu tulisan . Jika anda meletakkan kode Video dibawah tulisan
tersebut maka jarak antara tulisan Review dengan Videonya akan lebih lebar.
Setelah anda hapus , silahkan lanjutkan mempaste kode embed video youtube anda tadi.
Lihat gambar dibawah ini
Sekarang ganti lagi mode editor tersebut ke mode Visual, maka anda akan melihat seperti
berikut
Posisi video tidak berada di tengah, sekarang kita coba klik Preview maka kita akan
melihat video yang akan kita tampilkan di static page ini juga tidak berada di tengah
halaman.
Sekarang mari kita perbaiki posisi video tersebut supaya berada di tengah halaman.
1. Klik pada area video tadi
2. Klik alignmentnya Center
Jika langkah anda benar maka sekarang akan terlihat seperti pada gambar berikut
12. Sekarang kita akan menambahkan Horizontal Rule lagi
Lihat lagi langkah no 9 diatas, setelah anda tambahkan horizontal rulenya maka anda
akan melihat seperti pada gambar berikut
12. Mari kita lanjutkan dengan menambahkan tulisan Pilihan Metode
Pembayaran
Lakukan hal yang sama dengan langkah no 3 di atas dan pilih heading nya adalah
heading 5. Copy paste tulisan berikut atau anda bisa membuat dengan kata – kata yang
lain.
—————————————————- Pilih Metode Pembayaran Anda—————————————————-
13. Yang terakhir kita upload image logo bank
Link image : http://bloggerdiscuss.com/woocommerce/wp-content/uploads/6-bank.png
Caranya sama seperti memasukkan image biasa, Setelah anda upload dan insert maka
akan terlihat seperti pada gambar berikut.
14. Sekarang klik tombol publish
Proses pembuatan static page untuk custom homepage sudah selesai.
15. Bagaimana cara supaya halaman static page tersebut menjadi
halaman home page toko online kita ? caranya mudah sekali, silahkan
anda ikuti langkah berikut ini
1. Klik Settings
2. Klik Reading
3. Pilih Static page
4. Pilih judul halaman static page yang sudah kita buat diatas
5. Klik Save Changes
Semoga penjelasan diatas bisa anda mengerti dan pahami dengan baik. Sampai jumpa
lagi pada tutorial berikutnya.
Cara membuat toko online menggunakan WooCommerce (Tahap Tiga Puluh Dua)
Setelah kita kemarin belajar membuat custom homepage untuk toko online kita maka
pada tahap ke 32 ini kita perlu menyempurnakan lagi kelengkapan yang perlu kita
sediakan untuk customer kita nantinya. Selain untuk keperluan customer ada juga yang
tidak kalah pentingnya yakni menyediakan informasi selain informasi mengenai produk
yang kita jual tersebut.
Untuk itu kita memerlukan sebuah blog yang nantinya berfungsi sebagai sarana berbagi
informasi dan sekaligus untuk mendatangkan pengunjung – pengunjung baru ke toko
online kita yang berasal dari search engine. Meskipun tujuan utama kita adalah berjualan
online bukan berarti kita tidak membutuhkan blog, malah sebenarnya blog wajib ada
berdampingan dengan toko online kita karena terkadang blog yang anda sediakan di toko
online anda tersebut bisa menjadi salesman anda dikemudian hari.
Lantas apa yang bisa kita sampaikan dalam blog tersebut ? Anda bisa menulis hal – hal
yang masih ada sangkut pautnya dengan barang yang anda jual dan sekaligus dalam
artikel tersebut disisipkan link ataupun kalimat – kalimat yang berisikan penawaran barang
atau produk yang anda jual kepada mereka.
Tips : Ketika menyisipkan kalimat yang berisikan penawaran produk usahakan jangan
terlalu berlebihan dan jangan terlihat ada kebohongan disana. Buatlah senatural mungkin
sehingga mereka bisa terpancing untuk membeli produk kita tanpa harus merasa disuruh
atau dipaksa membeli oleh kita.
Cara menambahkan fasilitas Blog 1. Untuk menambahkan fasilitas blog di toko online kita,
caranya sangat mudah sekali. Yang perlu anda lakukan hanyalah
membuat sebuah halaman static page baru namun tanpa perlu anda
isi apapun.
1. Klik Pages
2. Klik Add New
3. Tulis judul static pagenya ( Blog )
4. Klik tombol publish
2. Setelah anda publish static page yang sudah kita beri judul
Blog diatas maka sekarang kita akan mencoba melihat bagaimana
tampilan halaman static tersebut
Anda akan melihat sebuah halaman kosong seperti pada gambar berikut ini
Halaman kosong diatas merupakan kerangka yang akan kita pergunakan sebagai
halaman postingan artikel – artikel yang kita publish melalui blog kita.
3. Agar kita bisa segera membuat artikel – artikel pada blog kita
dan agar artikel tersebut tidak muncul pada halaman homepage maka
kita perlu melakukan sedikit settingan lagi
1. Klik Settings
2. Klik Reading
3. Pilih Static page
4. Pilih Blog
5. Pilih Summary
6. Klik tombol Save Changes
4. Sekarang anda sudah bisa memulai membuat artikel – artikel
di blog anda tersebut dengan cara berikut ini
1. Klik Posts
2. Klik Add New
Untuk cara membuat artikel tentunya tidak perlu kami jelaskan secara detail karena
caranya seperti membuat artikel secara umum di WordPress.
5. Masukkan link ke halaman blog anda melalui menu toko
online kita.
Pada artikel kami sebelum – sebelumnya sudah dijelaskan tentang bagaimana cara
memasukkan atau menambahkan menu di toko online kita tersebut. Kami berharap anda
masih mengingatnya dan masing paham bagaimana caranya.
Fasilitas lain untuk CustomerMengenai fasilitas untuk customer kita yang akan kita sediakan di toko online kita
tentunya masing – masing orang mempunyai pemikiran yang berbeda. Jadi kami tidak
bisa memberikan sesuatu hal yang pasti mengenai apa yang harus anda sediakan untuk
customer anda.
Pada intinya, fasilitas yang ada di toko online anda tersebut harus bisa memberikan nilai
lebih kepada calon ataupun customer anda. Hal ini juga tergantung dari strategi marketing
anda dalam pengelolaan toko online anda.
Cara membuat toko online menggunakan WooCommerce (Tahap Tiga Puluh Tiga) # FINISH
Setelah kita melalui sekian banyak tahapan dalam proses pembuatan toko online
menggunakan WordPress dan Woocommerce ini, tentunya saat ini anda sudah banyak
mengerti dan juga paham dengan apa yang telah kami terangkan selama ini.
Secara keseluruhan kami telah menyampaikan panduan dasar dalam penggunaan
plugins WooCommerce kepada anda. Untuk lebih maksimal lagi anda bisa
mengembangkannya sendiri dan sesuaikan dengan produk yang anda jual.
Untuk masalah kustomisasi template memang tidak terlalu banyak kami bahas pada
tutorial ini karena tutorial cara membuat toko online menggunakan WooCommerce ini
sengaja kami fokuskan pada cara menggunakan plugins WooCommerce nya.
Untuk lebih mempercantik tampilan template toko online anda tersebut maka lakukanlah
sedikit tweak pada css dari template yang anda pergunakan. Kreatifitas anda tentunya
akan lebih menentukan apakah toko online anda akan terlihat unik dan berbeda dengan
toko online lainnya atau memiliki design yang sama dengan mereka.
Jika anda sudah memahami WooCommerce maka memakai template apa saja tentu anda
tidak akan merasa kesulitan lagi.
Tahap 33 ini merupakan tahap terakhir dalam proses pembuatan toko online dengan
woocommerce. Jika toko online yang anda buat tersebut sudah jadi atau sudah selesai
secara keseluruhan maka yang harus anda lakukan adalah sbb:
Submit Toko Online anda ke Google, Bing dan Yahoo
Agar toko online anda bisa di temukan oleh orang maka anda perlu mensubmit toko
online anda / mendaftarkan toko online anda ke Google, Bing dan Yahoo.
Install beberapa Plugins tambahanUntuk lebih menyempurnakan lagi kesiapan toko online kita maka diperlukan beberapa
plugins tambahan yang mungkin anda perlukan untuk toko online anda tersebut.
Berikut 2 kategori plugins Wajib yang harus anda install
Install SEO plugins
Agar toko online kita berada pada halaman paling depan di mesin pencari kita perlu
menambahkan SEO plugins. Untuk keperluan SEO anda bisa menginstall salah satu dari
plugins SEO yang ada pada artikel kami disini :
Free SEO Plugins
Install WordPress Security plugins
Hal terpenting ketika kita memiliki toko online atau ketika toko online kita sudah tersubmit
di search engine adalah masalah security.
Silahkan anda baca artikelnya pada artikel ini :
Security Plugins 1
Security Plugins 2
Tips untuk memperkuat system securityPada artikel kami lainnya, kami telah membuat beberapa tips kecil agar toko online kita
tersebut tidak mudah kena Hack oleh orang lain.
Silahkan anda baca disini :
Tips dan Alternatif Security Plugins
Jika anda mengalami kendala dengan toko online anda tersebut, silahkan sampaikan
kendala atau permasalahan yang anda hadapi melalui kolom komentar dibawah ini.
Dengan senang hati kami akan mencoba mencarikan solusi permasalahan anda sebaik
mungkin.