Cara membuat toko online menggunakan woo commerce
Upcoming SlideShare
Loading in...5
×
 

Cara membuat toko online menggunakan woo commerce

on

  • 9,618 views

 

Statistics

Views

Total Views
9,618
Views on SlideShare
9,618
Embed Views
0

Actions

Likes
3
Downloads
1,392
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Artikel yg sangat bermanfaat, sy pelajari untuk menyempurnakan toko online sy http://www.tokodiscount.net/ ada yg siap dropship bisa kirim data barang ke tokodiscount@yahoo.co.id
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Cara membuat toko online menggunakan woo commerce Cara membuat toko online menggunakan woo commerce Document Transcript

  • Cara membuat toko online menggunakan WooCommerce (Tahap Satu) 1. Install template Mytile dari WooThemes Silahkan anda download terlebih dahulu templatenya di sini . Kemudian install template tersebut dan aktifkan segera.  Cara install template wordpress Setelah anda aktifkan template tersebut maka anda akan melihat halaman seperti gambar dibawah ini. Dan jika anda lihat toko online anda sekarang ini maka akan terlihat seperti berikut ini.
  • 2. Setting template Mytile ( Logo Dan Favicon ) Untuk melakukan setting dasar template ini kita tidak perlu kemana – mana dan jangan klik ke halaman lainnya, fokus saja terlebih dahulu di halaman ini. Lakukan setting dasar berikut :  Theme Stylesheet ini untuk merubah skin dari template Mystile tersebut, ada banyak pilihan disana ada bisa mencoba – coba skin apa yang kira -kira anda sukai.  Custom logo adalah untuk mengganti logo untuk toko online kita. ( uk. 200 x 100 px )  Custom Favicon ( uk. 16 x 16 px ) Cara mengganti logonya dengan logo kita sendiri adalah sbb :  Klik tombol Upload pada Custom Logo
  •  Setelah itu anda akan melihat halaman seperti dibawah. Klik Select Files  Cari lokasi logo anda kemudian pilih logo anda dan dan klik open
  •  Setelah proses ipload logo selesai maka anda akan melihat halaman seperti pada gambar . Pilih Full Size dan kemudian klik tombol Use this image
  • Logo anda akan terlihat seperti gambar berikut , kemudian hilangkan tanda centang pada baris  Text line Lanjutkan dengan mengupload Favicon ( uk. 16 x 16 px ) dalam bentuk png file.   Lakukan hal yang sama seperti mengupload logo diatas. Setelah selesai maka selanjutnya kita simpan pekerjaan kita diatas dengan mengeklik tombol Save All Changes
  •  Lihat toko online anda maka disana sudah terpasang logo beserta faviconnya.
  • Untuk settingan yang lain akan kita bahas pada pembahasan selanjutnya 3. Install plugin WooCommerce dan YITH magnifier   Download WooCommerce Plugins di sini  Setelah anda download, install plugin tersebut kemudian aktifkan. Lihat artikelCara install plugin di WordPress jika anda belum tau caranya. Setelah itu langsung aktifkan plugin tersebut. Setelah anda aktifkan maka anda akan melihat halaman seperti pada gambar berikut. Kemudian klik tombol Install WooCommerce Pages.  Setelah anda aktifkan maka selanjutnya kita akan menginstall sebuah plugins lagi kemudian langsung anda aktifkan plugin tersebut, nama pluginnya YITH WooCommerce Zoom Magnifier Kegunaan dari plugin ini adalah memberikan efek Zoom pada image produk toko online kita, jadi ketika kursor mouse diarahkan diatas image produk yang kita jual maka plugin tersebut akan segera bekerja sebagaimana fungsinya. Anda bisa mendownload plugin tersebut di sini
  • Agar lebih lebih mengerti maksud dari efek Zoom tersebut maka sebaiknya anda lihat demonya disini Gimana ? lumayan keren bukan ? untuk ukuran sebuah plugin gratisan maka YITH merupakan solusi yang terbaik untuk kita pakai guna mempercantik toko online kita dan terlihat lebih profesional. Sementara sampai disini dulu tutorial mengenai cara membuat toko online menggunakan WooCommerce tahap pertama ini. Nanti kita akan melanjutkannya lagi dengan tahapan kedua dan seterusnya. Semoga anda bisa memahami tutorial mudah diatas tanpa ada kendala yang berarti. Cara membuat toko online menggunakan WooCommerce (Tahap Dua) Cara mensetting YITH Magnifier  Klik Plugins  Klik Installed Plugins  Klik Settings pada YITH Magnifier
  •  Pada posisi General settings nya, centanglah Enable YITH Magnifier danForcing Zoom Image Sizes  Kemudian lihat pada bagian Magnifier Settings. Lakukan persis seperti gambar berikut Lihat lagi kebawahnya pada bagian Slider Settings, lakukan lagi persis seperti gambar dibawah in dan diakhiri dengan menyimpan pekerjaan kita dengan mengklik tombol
  • Jika kita lihat dari awal maka pekerjaan kita diatas langkahnya seperti gambar dibawah ini . Untuk memperbesarnya klik kanan pada gambar kemudian klik View image
  • Cukup sekian dulu tutorial yang kedua ini, pada kesempatan mendatang kita akan melanjutkan dengan tutorial yang ketiga dan seterusnya. Tetap semangat dalam proses belajar ini dan yakinlah kepada diri anda bahwasanya anda mampu dan bisa membuat toko online anda dengan baik dan benar.
  • Cara membuat toko online menggunakan WooCommerce (Tahap Tiga) Cara Mensetting WooCommerce Untuk melakukan setting dasar WooCommerce ini maka anda bisa langsung menuju WooCommerce > Settings . Setelah terbuka halaman settings tersebut maka anda akan melihat 10 Tabs yang harus kita setting disana : 1. General 2. Catalog 3. Pages 4. Inventory 5. Tax 6. Shipping 7. Payment Gateway 8. Emails 9. Integration 10. Magnifier ( Sudah kita Setting Pada Tahap Dua ) Cara mensetting General Ada 4 bagian pada tab General ini yang harus kita pahami cara mensettingnya. Setting pada General Options  Base Location = Pilih lokasi anda saat ini atau lokasi toko online anda. Dalam contoh ini karena lokasi saya berada di Riau maka saya pilih Indonesia – Riau  Currency = Jika target anda adalah customer dari Indonesia maka pilih Indonesia Rupiah (Rp) namun jika targetnya adalah International maka pilih Dollar  Allowed Countries = Secara default anda akan melihat All Countries disana. Karena target yang kita bidik disini adalah orang Indonesia maka kita pilih Specific Countries dan kemudian akan muncul pilihan dibawahnya  Specific Countries = Cari negara Indonesia  Store Notice = Jika ini anda centang maka akan keluar Sticky Bar diatas toko online anda. Gunanya untuk memberitahu kepada orang bahwasanya toko ini hanya untuk Demo atau
  • nantinya bisa juga anda pakai untuk memberikan pesan cepat ke customer anda apabila ada promo diskon, penawaran khusus atau Kupon Code Agar lebih jelas silahkan perhatikan gambar dibawah ini Setting Pada Cart, Checkout dan Accounts  Coupons = Centang ini jika anda ingin menggunakan fasilitas kupon belanja untuk toko online anda jika tidak ingin memakai kupon maka tidak perlu anda centang.  Checkout = ada 3 opsi di sini, berikut penjelasannya - Enable Guest Checkout = Centang ini jika anda mengijinkan orang berbelanja di toko online anda tanpa melakukan registrasi terlebih dahulu. Misalnya saya berkunjung ke toko online anda dan saya ingin membeli produk yang anda jual tapi saya males untuk mendaftar, karena anda mencentang opsi ini maka saya masih bisa berbelanja di toko online anda tanpa harus registrasi terlebih dahulu. - Enable customer note field on Checkout = Jika anda centang ini maka ketika customer anda akan melakukan Checkout mereka bisa menambahkan pesan singkat kepada anda sebagai pemilik toko online. Misalnya isi pesannya : ” tolong sms kalau barang sudah dikirim ya “. Posisi note field tersebut akan terlihat di halaman Checkout seperti gambar dibawah ini.
  • - Force Secure Checkout = Centang ini jika anda mempunyai atau membeli atau menggunakan fasilitas SSL untuk toko online anda (https) namun karena kita akan menggunakan direct transfer maka anda tidak perlu mencentang ini dan tidak perlu membeli SSL  Registration = Centang saja semua pilihan disitu  Customer Account = Centang pilihan pertama dan ke tiga, untuk yang kedua jangan dicentang. Gunanya tidak dicentang adalah jika customer anda membuat akun ditoko online anda dan dia sudah mengumpulkan barang yang akan dibeli ditoko online anda namun belum akan membeli pada saat itu juga maka ketika mereka kembali login ke toko online anda barang yang sudah mereka rencana beli tidak hilang dan tidak perlu mencari lagi.
  • Setti ng pada Style And Scripts  Centang saja semuanya
  • Setting pada Downloadable Products  Untuk yang ini tidak perlu ada setting . Namun jika anda berjualan produk digital seperti ebook, software, template dll maka anda perlu mensetting ini
  • Jika kita lihat secara keseluruhan maka urut – urutannya adalah seperti gambar berikut ini.
  • Sampai disini dulu penjelasan cara membuat toko online menggunakan WooCommerce tahap tiga.
  • Cara membuat toko online menggunakan WooCommerce (Tahap Empat) Cara Mensetting Catalog Berikut cara mensetting bagian katalognya, perhatikan gambar berikut dan lakukan hal yang sama seperti yang kami lakukan. 1. Pastikan anda memilih tab Catalog 2. Default Product Sorting = Pilih Default sorting 3. Shop Page Display = Pilih Show Both 4. Default Category Display = Pilih Show products 5. Add to Cart = Centang pada enable AJAX add to cart buttons on archives 6. Product Fields = Centang semuanya 7. Weight unit = Pilih Kg 8. Dimention unit = Pilih Cm 9. Product ratings = Centang semuanya 10. Currency Position = Left 11. Thousand separator = Ganti dengan . ( Titik ) 12. Decimal separator = Gantin dengan , ( Koma ) 13. Trailling Zeros = Pastikan anda mencentang Remove zeros 14. Image Options = Centang semua 15. Klik tombol Save Changes
  • Cara Mensetting Pages Pada tab pages ini anda tidak perlu melakukan apa -apa, cukup anda ketahui bahwasanya ketika anda sudah membuat static page yang berisikan Peraturan berbelanja di toko online anda mana nantinya anda bisa menaruh pada Term Page ID. Saat ini kami belum membuat static page mengenai peraturan berbelanja maka kami akan mengkosongkan ini terlebih dahulu. Namun jika anda ingin membuatnya sekarang maka setelah static page anda ter-publish anda bisa memilihnya disitu dan kemudian klik tombol Save Changes. Untuk membuat Static page anda bisa memilih Pages > Add New . Beri judul Peraturan Belanja / Tata Cara Berbelanja / apa saja terserah anda. Nantinya judul tersebut akan muncul di pilihan Term Page ID.
  • Cara Mensetting Inventory Pada tabs Inventory ini kita akan setting agar customer tau ketersediaan stock barang yang kita jual kepada customer kita. Tujuannya jelas agar customer yakin produk yang akan mereka beli stoknya ada, tinggal sedikit atau sedang kosong. 1. Pastikan anda berada pada tab Inventory 2. Manage Stock = Centang enable Stock Management. Berguna untuk menampilkan opsi ketersediaan stok barang yang kita jual pada customer
  • 3. Notifications = Centang kedua opsi yang ada 4. Notification Recipient = Masukkan / ketik email anda disana , gunanya untuk menerima pemberitahuan jika ada order 5. Low Stock Threshold = 2 6. Out Off Stock Threshold = 0 7. Stock Display Format = Always Show Stock 8. Klik Save Changes Untuk tahap keempat ini cukup sekian dulu, pada kesempatan mendatang kita akan melanjutkan dengan tahapan berikutnya.
  • Cara membuat toko online menggunakan WooCommerce (Tahap Lima) Cara mensetting tab Tax Opsi Tax atau pajak ini sebetulnya tidak begitu perlu untuk pemilik online yang masih pemula dan belum beromset besar. Jadi untuk bagian Tax ini silahkan anda lewati saja tidak perlu anda setting apapun. Cara mensetting tab Shipping Pada tab shipping merupakan tempat untuk mengaktifkan biaya pengiriman atau ongkos kirim pada produk yang kita jual di toko online kita.
  • Untuk mengaktifkan fitur ongkos kirim ini silahkan anda melakukan hal berikut : 1. Klik tab Shipping 2. Pastikan anda berada pada Shipping options 3. Shipping Calculations = Centang Enable shipping dan 4. Centang juga Enable the shipping calculator 5. Shipping method display = Radio buttons 6. Shipping Destination = Ship to billing address by default 7. Pada shipping methods biarkan saja terlebih dahulu apa adanya 8. 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 Gateways Untuk payment gateways ini karena kita fokus untuk membuat toko online dengan target cutomer dari Indonesia maka kita hanya akan menggunakan sistem pembayaran Direct Bank Transfer saja atau pembayaran via transfer bank. Ketika kita buka tab Payment Gateways maka secara default anda akan melihat halaman seperti dibawah ini
  • Ada 2 sistem pembayaran yang aktif saat ini yakni :  Direct Bank Transfer  Cheque Payment Karena kita hanya akan memakai sistem Direct Bank Transfer maka kita akan menonaktifkan sistem pembayaran melalui Cheque. Untuk menonaktifkan Cheque Payment silahkan ikuti langkah berikut ini : 1. Klik Cheque 2. Hilangkan tanda centang 3. Klik Save Changes
  • Setelah kita hilangkan sistem pembayaran melalui cheque maka kita akan melanjutkannya mengedit sistem pembayaran via transfer yang kita akan pergunakan. Kita akan memasukkan informasi Rekening Utama yang akan kita jadikan tempat tujuan transfer uang dari customer kita. Jika anda mempunyai banyak Rekening Bank maka anda tidak melakukan hal ini juga tidak masalah. Dengan kata lain anda bisa melakukan hal ini namun anda juga tidak perlu melakukannya ( tidak wajib ) 1. Klik BACS 2. Title = Ganti tulisan Direct Bank Transfer dengan Pembayaran Via Transfer 3. Cutomer Message = Ganti dengan pesan dalam bahasa Indonesia. Contoh :Mohon lakukan pembayaran melalui transfer ke rekening BCA kami segera setelah anda melakukan order. Pengiriman barang yang anda pesan akan kami lakukan setelah uang yang anda transfer telah kami terima dan kami verifikasi. Jika anda tidak mempunyai rekening bank selain bank BCA maka ada bisa mentransfer uang pembayaran tersebut ke rekening bank kami yang lainnya ( Lihat halaman Cara Berbelanja ) 4. Account Name = Isi dengan nama pemilik rek yang akan anda pergunakan 5. Account Number = Isi dengan no rekening anda 6. Bank Name = Isi nama bank anda , dalam contoh ini kami menggunakan BCA 7. Klik Save Changes
  • Kira – kira setelah anda edit akan terlihat seperti pada gambar dibawah
  • Jika sudah diganti maka ketika customer anda akan melakukan order, mereka akan melihat pesan yang sudah kita buat diatas seperti gambar berikut pada saat melakukan proses checkout.
  • Setelah customer anda mengklik Tombol Place Order mereka selanjutnya akan melihat informasi rek BCA yang sudah kita masukkan diatas.
  • Proses setting tab Payment Gateways ini sudah selesai. Semoga tutorial ini bisa bermanfaat bagi anda.
  • 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 : no-reply@domain-anda.com / customerservice@domain-anda.com ) 5. Header Image = Anda bisa memasukkan link logo toko online anda disini. Nantinya semua email baik itu pemberitahuan ke anda sendiri dan customer anda logo tersebut akan menjadi logo template email tersebut. 6. Email Footer Text = tulis sesuai dengan apa yang anda inginkan. ( Contohnya anda bisa menulis Nama Toko Online anda beserta slogan dari toko online anda disana ) 7. Pada bagian ini anda bisa merubah warna tampilan template email toko online anda 8. Klik Tombol Save Changes
  • Jika anda tidak melakukan edit pada langkah no 5 dan no 7 maka yang terjadi jika misalnya ada customer anda melakukan order di Toko Online anda yang terjadi adalah sebagai berikut : Seller : Sebagai pemilik Toko Online tersebut anda akan mendapatkan email seperti berikut ini
  • Customer : Dan customer anda akan menerima email seperti dibawah ini
  • Setting pada New Order • Ini untuk email pemberitahuan ke Pemilik Toko jika ada orderan dari customer. Untuk mendapatkan email pemberitahuan tersebut maka yang perlu anda lakukan adalah sebagai berikut : 1. Pastikan anda berada pada posisi Tabs Emails 2. Klik New Order 3. Enable/Disable = Centang Enable this email notification 4. 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 Analytics 1. Klik Tabs Integration 2. Pilih Google Analytics ( secara default akan langsung terbuka ) 3. Masukkan ID Google Analytics Anda ( anda harus mendaftar atau membuat akun GA untuk Toko Online Anda ) 4. Centang ketiga opsi tersebut ( Tracking Code ) 5. 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 Ca ra setting pada Share Your Cart 1. Klik Tab Integration 2. Pilih Share Your Cart 3. Buat Akun Share Your Cart Untuk Toko Online Anda 4. Klik Tombol Enable pada bagian API Status ( Secara default belum diaktifkan atau masih dalam kondisi disable ) 5. Masukkan ID Share Your Cart Anda 6. Masukkan App Key Akun Share Your Cart Anda 7. 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 WooCommerce Silahkan anda buka halaman Posting Product dengan langkah sebagai berikut : 1. Klik Products 2. Pilih Add Products Secara default anda akan langsung melihat halaman seperti pada gambar dibawah ini.
  • Sekarang perhatikan baik- baik bagian yang kami tandai kotak merah diatas… untuk lebih jelas lihat gambar dibawah. Perhatikan pada Product Data, secara otomatis akan terpilih Simple product ( Product Type / Tipe Produk ) . Jika anda klik pada area Product Type tersebut anda akan melihat 4 pilihan tipe produk yakni : 1. Simple product 2. Grouped product 3. External/Affiliate product 4. Variabel product Mari kita mulai dari yang paling mudah terlebih dahulu yakni memposting produk dengan product type = Simple product . Silahkan persiapkan sebuah gambar / photo sebuah produk dengan ukuran :  Minimal 500 x 500 pixel dan  Maksimal 2.000 x 2.000 pixel Simple product bisa anda pergunakan jika produk yang anda jual tersebut hanya mempunya 1 model dan 1 warna. Dalam contoh ini kami memiliki 2 buah photoproduk modelnya sama dan warnanya sama dengan ukuran 1024 x 576 px namun di photo dari sudut yang berbeda.
  • Supaya anda lebih mengerti maksud dan tujuan penggunaan dari Product Type – Simple Products lihat contoh riil yang kami ambil dari Zalora. Jika anda mempunyai photo lebih banyak maka akan terlihat lebih baik. Calon customer anda lebih leluasa melihat apakah produk yang anda jual tersebut cocok bagi mereka. Usahakan kualitas gambarnya seperti pada contoh dibawah ini ( klik pada gambar dibawah untuk melihat kualitas gambar ) Note : Semakin bagus kualitas gambar maka semakin bagus pula ketika di Zoom dengan YITH Magnifier plugin.
  • Mari kita mulai memposting produk untuk toko online kita. 1. Tulis Judul Produk Anda 2. Tulis Deskripsi full produk anda tersebut Setelah selesai proses diatas maka lanjutkan dengan melihat ke bawah ( Pada Product Data ) 1. Pastikan anda memilih atau berada pada Simple Product 2. Virtual dan Downloadable jangan anda Centang ( Hanya untuk produk digital seperti : eBook, Software dll ) 3. Buat SKU produk anda tersebut ( Misal : CAM123456 ) 4. Tulis Harga produk anda pada Regular Price ( Penulisan angka tidak perlu pakai titik , misal : jika anda menulis harga Seratus Ribu maka tulislah 100000 jangan 100.000 )
  • Pada contoh ini , SKU kami tulis CAM123456 dan Harga kami tulis 4500000 Jika kita lihat ( Klik Preview ) maka anda kan melihat halaman produk anda seperti gambar dibawah ini.
  • Jika anda ingin membuat promo dengan memberikan diskon pada harga produk tersebut maka anda bisa langsung mengisi harga sesudah diskonnya pada area / kolom Sale Price. Contoh : misalnya harga barang tersebut menjadi 4 juta maka anda tulis disana 4000000 Maka jika di lihat lagi ( preview lagi ) anda akan melihat halaman produk anda seperti berikut
  • Jika anda ingin membuat periode diskon produk anda tersebut maka yang perlu anda lakukan adalah :  Klik Schedule  Pilih tanggal mulai berlaku diskon sampai masa berakhir diskon ( Klik pada icon Kalender )
  • Pada contoh ini kami membuat masa diskon dari tanggal 13 Agustus 2013 s/d 30 Agustus 2013 Setelah masa diskon berakhir maka secara otomatis harga akan kembali normal jadi anda tidak perlu kawatir diskon tersebut akan berlanjut. Sementara ini cukup sekian dahulu penjelasan mengenai cara posting produk dengan memakai produk data – simple product. Nanti kami lanjutkan lagi dalam tutorial berikutnya masih pada produk data ini. Semoga anda tidak mengalami kesulitan dalam mempelajari hal diatas.
  • 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-Sells Up-Sells ini berguna untuk memberikan / menampilkan pilihan produk yang berkaitan dengan produk yang ditawarkan pada saat customer melihat halaman produk. Lihat demonya disini Related produk yang tampil pada halaman tersebut ( You may also like .. ) merupakan penawaran produk yang dibuat dari Up-Sells Produk yang ditampilkan pada Up-Sells ini sebaiknya produk yang : 1. Mempunyai kualitas lebih baik 2. Aksesoris yang berkaitan dengan produk tersebut 3. dll Namun anda juga bisa menampilkan produk lainnya yang sesuai dengan keinginan anda.
  • Jika dilihat dari halaman posting produk tersebut maka akan terlihat seperti gambar berikut
  • Cara memasukkan produk kedalam Up-Sells  Klik pada text area Up-Sells  Ketik nama produk yang ingin ditampilkan ( Sebaiknya ketik SKU produk yang ingin kita tampilkan disini agar lebih mudah )  Pilih Produk yang akan anda tampilkan, pada contoh ini saya sudah memposting 3 buah produk dengan SKU CAM jadi kami memilih ketiga produk tersebut.
  • Cross-Sells Cross Sells ini mempunyai fungsi yang sama dengan Up-Sells, namun Cross Sells akan tampil pada halaman Cart. Ketika customer meng-klik add to cart dan kemudian meng-klik view cart maka produk yang kita pilih untuk ditampilkan akan muncul disana. Produk yang ditampilkan pada Cross Sell ini sebaiknya : 1. Produk yang lagi diskon 2. Aksesoris yang berkaitan dengan produk tersebut 3. dll Sama halnya dengan Up-Sells diatas anda juga bisa menampilkan produk lainnya yang sesuai dengan keinginan anda.
  • Cara memasukkan produk kedalam Cross-Sells  Klik pada Text area Cross-Sells  Ketik nama produk yang ingin ditampilkan ( Sebaiknya ketik SKU produk yang ingin kita tampilkan disini agar lebih mudah )
  •  Pilih Produknya ( salah satu ) Grouping Grouping ini akan kami jelaskan pada posting produk dengan Products Data – Grouped Product. Secara garis besar Grouping ini akan sangat berguna jika anda mempunyai produk yang banyak dan berencana membuat toko online yang besar dan komplek.
  • 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 FIELDS Pada bagian Custom Fields ini tidak perlu anda isi apapun karena memang tidak begitu penting. Lanjutkan dengan langkah berikutnya.
  • PRODUCT SHORT DESCRIPTION Tulis deskripsi singkat mengenai produk anda tersebut disini. Sebisa mungkin jangan terlalu panjang, tulis saja yang penting – penting saja mengenai produk tersebut. MYSTILE CUSTOM SETTINGS Tidak ada yang perlu anda lakukan pada bagian custom settings ini.
  • Sekarang lihat ke bagian panel sebelah kanan. Lihat pada bagian berikut : 1. Product Categories 2. Product Tags 3. Product Gallery 4. Features Image Untuk lebih jelasnya perhatikan gambar berikut ini.
  • Untuk Product Categories dan Product Tags ( Point 1 dan 2 ) tentunya anda sudah paham maksud dan cara penggunaannya. Sedangkan untuk point 3 dan 4 berikut penjelasannya :  Product Gallery Adalah tempat untuk meletakkan image atau gambar pendukung produk kita ( tampak belakang, tampak dari atas , tampak samping , dll )  Featured Image Adalah image atau gambar yang paling utama dan yang akan terlihat besar. Featured image ini juga secara otomatis akan tampil juga pada product gallery ( tampak depan ) Featured image ini akan menjadi image yang terlihat terlebih dahulu oleh calon pembeli kita. Lihat contoh pada gambar dibawah ini. Cukup jelas bukan maksud dan tujuan dari Product Gallery dan Featured Image ini ??
  • Mari kita mulai dengan mengupload image atau gambar untuk Product Gallery terlebih dahulu  Klik Add product gallery image  Klik tombol Select Files  Kemudian carilah image yang sudah anda persiapkan ( anda boleh mengupload 4 – 6 gambar untuk Product Gallery ini ). Pada contoh ini kami hanya mengupload 1 gambar saja. Setelah ketemu gambar yang sudah anda persiapkan maka pilih gambar tersebut kemudian klik open untuk memulai proses upload gambar.
  •  Setelah proses upload gambar sudah selesai maka lanjutkan dengan mengklik tombol Add to gallery  Setelah itu anda akan melihat image gallery tersebut sudah berada disana
  • Jika anda mengupload 4 buah gambar maka anda akan melihat 4 buah gambar juga disana. Mari kita lanjutkan dengan mengupload Featured Image  Klik Set featured image Pada featured image ini kita hanya perlu untuk menupload 1 buah gambar ( biasanya gambar produk tampak depan ). Lakukan hal yang sama seperti pada langkah mengupload image atau gambar untuk Product Gallery diatas. Jika sudah selesai maka anda akan melihatnya seperti pada gambar berikut.
  • Proses memposting product dengan menggunakan product data – simple product sudah selesai. Silahkan klik tombol publish untuk melihat hasil kerja anda. Demo secara live nya bisa dilihat disini Untuk hasil yang lebih baik usahakan image yang anda pergunakan berukuran lebar dan tinggi yang sama. Dari hasil uji coba kami maka yang terbaik adalah menggunakan image berukuran 1000 x 1000 px. Semoga tutorial ini bisa bermanfaat bagi anda semuanya. Tutorial ini akan kami lanjutkan pada kesempatan mendatang.
  • 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 meMake Over tampilannya agar menjadi lebih menarik lagi. Template Mystile ini mempunyai banyak kelebihan yang memungkinkan kita untuk memodifikasi template tersebut menjadi lebih baik dan tampil beda dengan toko online yang lain meskipun sama- sama menggunakan template tersebut. Semua tergantung dari kreatifitas anda, namun disini tentu kami akan mencoba menjelaskan tentang bagaimana cara mengkustomisasi template Mystile ini pada taraf yang mudah saja. Memasang Banner pada Homepage Mari kita mulai dengan memasang sebuah welcome banner yang besar pada halaman Homepage toko online kita. Untuk itu persiapkanlah sebuah image dengan spesifikasi sbb: Ukuran Gambar untuk Banner  Lebar : 1247  Tinggi : 405 Jika anda belum mempunyai image untuk banner tersebut anda boleh memakai gambar diatas sekedar untuk keperluan latihan agar anda bisa langsung praktek di toko online anda.
  • Setelah kita persiapkan sebuah gambar untuk banner kita maka yang perlu anda lakukan adalah : 1. Klik Mystile 2. Klik Theme Options 3. Klik Homepage 4. Klik Featured Image 5. Centang Display a Banner Setelah anda centang display a banner anda akan melihat tampilan seperti gambar berikut. Kemudian lakukan dengan langkah berikut ini 1. Klik tombol upload
  • Cari image banner tersebut diPC atau laptop anda dan mulailah proses upload image tersebut. Setelah imagenya sudah terupload maka akan terlihat tampilan seperti pada gambar seperti berikut Scroll kebawah sampai anda melihat tampilan seperti dibah ini kemudian pastikan anda : 1. Centang Size : Full Size 2. Klik tombol Use this image
  • Setelah itu banner yang ingin kita pasang di toko online kita sudah terlihat seperti gambar dibawah. 1. Hapus tulisan pada banner Headlines 2. Hapus tulisan pada banner stand first 3. 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 CSS 1. Klik Mystile 2. Pilih Theme Options 3. Pilih General Settings 4. Pilih Quick Start
  • Kita akan merubah warna themes Mystyle tersebut dari warna orange ( default.css ) ke warna hijau ( green.css ). Mari kita lihat terlebih dahulu tampilan menu pada toko online kita . Dari halaman theme options-nya anda akan melihatnya seperti berikut ini. Klik pada tulisan default.css diatas kemudian pilih warna yang sesuai dengan pilihan anda. Dalam contoh dibawah ini kami akan menggantinya dengan warna hijau maka kami memilih green.css
  • Setelah anda pilih warna kesukaan anda maka lanjutkan dengan mengklik tombol Save All Changes Tunggu beberapa saat sampai anda melihat notifikasi seperti pada gambar dibawah ini ( Option Updated ). Setelah anda melihat notifikasi seperti diatas silahkan anda lihat menu pada toko online anda. Setiap nantinya anda akan melakukan perubahan dan menyimpannya maka notifikasi tersebut akan muncul, itu pertanda proses penyimpanan atau update pada themes options template tersebut sudah berhasil. Pada tahapan selanjutnya gambar tentang notifikasi tersebut tidak akan kami tampilkan dan kami anggap anda sudah mengerti dan paham jadi tidak perlu dijelaskan dua kali.
  • Ooops… kita ada sedikit masalah pada big banner, lihat gambar dibawah. Pada banner tersebut ada tulisan ( warna putih ) dengan tulisan sbb.  Welcome to our store  We hand make the most awesomest products in the world Ada 2 cara untuk menghapus atau menghilangkan tulisan tersebut : 1. Menghapus sementara ( not recommended ) 2. Menghapus secara permanen tulisan tersebut ( recommended ) Menghapus Sementara
  • Untuk menghapusnya secara sementara anda bisa mengulangi langkah yang ada pada tahap lima belas kemarin Namun jika nanti anda melakukan perubahan lagi, secara otomatis tulisan tersebut akan muncul lagi di atas banner tersebut. Jadi menurut kami itu sia-2 saja dan buang tenaga makanya tidak kami rekomendasikan cara tersebut. Menghapus secara permanen Dengan menghapusnya secara permanen anda tidak perlu kawatir lagi tulisannya akan muncul lagi di kemudian hari. Agak sedikit rumit namun tidak sulit, berikut cara menghapus tulisan tersebut secara permanen. 1. Klik Appearance 2. Pilih Editor 3. Anda akan langsung melihat kode style.css Sekarang fokus ke panel sebelah kanan anda.
  • Lihat ke halaman bawah / scoll mouse anda ke bawah, cari theme-options.php kemudian setelah ketemu klik langsung untuk menampilkan kode php pada file tersebut.. Anda akan melihat halaman theme-options.php tersebut seperti pada gambar berikut.
  • Apa langkah selanjutnya ? Sebelum kami lanjutkan ada baiknya anda mengerti halaman apa yang sebenarnya yang akan kita edit ini. Kode php diatas merupakan kode dari option panelnya template Mystile berikut ini ( mohon jangan ikut buka , sekedar memberi informasi saja ).
  • Lihat pada area yang sudah kami tandai dengan warna merah diatas. Tulisan itulah yang akan kita hilangkan secara permanen melalui halaman theme-options.php ini. Sudah mengerti maksud dan tujuannya, mari kita memulainya, lihat kembali kode themeoptions.php tersebut.
  • 1. Klik Ctrl + F maka akan muncul pencarian cepat. Lihat pada gambar sebelah pojok kiri bawah ( ada tanda panah merah ) 2. Ketikkan : Welcome to our store > kemudian tekan enter > anda akan melihat tulisan tersebut Welcome to our store tersebut disana dan dibawahnya anda juga akan melihat tulisan We hand make the most awesomest products in the world
  • Hapus kedua tulisan tersebut , Hanya tulisan tersebut saja jangan dihapus juga tanda petik diatas ( ‘ ) yang berdempetan dengan tulisan tersebut, ada 2 tanda petik yakni sebelum tulisan dan sesudah tulisan itu. Mohon berhati hati ketika menghapusnya. Dan pastikan setelah anda hapus kondisi kode tersebut seperti pada gambar dibawah ( tanda petik masih ada ) Klik Tombol update file.
  • Setelah itu anda akan melihat notifikasi update file theme-options.php anda sudah sukses. Coba anda lihat toko online anda sekarang , Ooppsss… kok masih ada tulisannya ya ??? itu karena kita tadi belum menghapusnya dari Theme Options template ini. Mari kita tuntaskan dengan langkah berikut ini. 1. Klik Mystile 2. Klik Theme Options 3. Klik Homepage 4. Klik Featured Image 5. Pastikan tulisan pada banner headline dan banner stand first anda hapus semuanya 6. 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 Options Pada styling option ini anda bisa mengkustomisasi background toko online kita dan juga mungkostomisasi warna links, hover dan juga warna button. Silahkan anda coba ganti background dan mencoba mengganti warna links ataupun tombol pada toko online anda.. Jangan kawatir jika anda salah pada bagian ini tidak akan berakibat fatal atau merusak toko online anda..
  • Silahkan anda bereksperimen sendiri dengan kedua menu diatas. Jika ada kesulitan silahkan bertanya pada kolom komentar. Sampai disini dulu tutorial kami kali ini dan sampai jumpa pada tutorial selanjutnya.
  • 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 Options Pada bagian layout ini kita bisa merubah tampilan kerangka toko online kita dari yang full page menjadi di dalam BOX 1. Klik Layout Options 2. Centang Enable boxed Layout 3. Pilih posisi Sidebar disebelah kanan atau disebelah kiri 4. 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 Chatting Untuk kebutuhan customer support ini kita akan memakai ClickDesk yang mempunyai penampilan menarik dan nyaman untuk dilihat. Versi gratis dari ClickDesk hanya membolehkan kita untuk mendaftarkan 1 agent saja atau kita hanya bisa membuat akun untuk 1 orang customer service. Cara install ClickDesk • 1. Login ke Dashboard WordPress anda
  • 1. 2. Pilih Add New 3. Pastikan anda pada posisi Search 4. Ketik Chat 5. • Klik Plugins Klik tombol Search Plugins 2. Install ClickDesk
  • • 3. Aktifkan Plugins
  • Register ClickDesk Account Setelah anda mengaktifkan plugin ClickDesk diatas maka selanjutnya kita akan mendaftar sebuah akun baru untuk agent toko online kita yang nantinya akan menjadi akun customer support yang bisa kita pakai. 1. Silahkan menuju ClickDesk Dashboard • 1. Klik atau pilih ClickDesk, posisinya dibawah Tools 2. Anda akan melihat halaman seperti gambar berikut • 1. Klik tombol Go to ClickDesk Dashboard
  • • 3. Buatlah sebuah akun ClickDesk Untuk membuat atau mendaftar akun ClickDesk caranya sangat mudah sekali. Anda bisa menggunakan akun Gmail anda ataupun akun Yahoo anda dan login lah dengan akun anda tersebut. Jika anda belum mempunyai salah satu akun tersebut maka anda bisa membuatnya terlebih dahulu. Kami sarankan anda membuat akun Gmail saja : baca cara membuat akun Gmail
  • • 4. Login dengan Akun Gmail anda Bukalah tab baru di webbrowser anda dan bukalah sign in ke akun gmail anda. Setelah berhasil Sign ini maka kembali ke
  • • 5. Buatlah nama Agent untuk operator Customer Support toko online anda Lihat gambar berikut dan isilah sama persis seperti yang tertera disitu. Setelah selesai Klik tombol Tes, Create an Agents
  • • 6. Selanjutnya setelah sukses membuat agent toko online anda maka anda akan melihat halaman seperti gambar berikut
  • Kustomisasi Profile Agent Pada gambar diatas terlihat bahwasanya Agent toko online kita belum terdapat photo, jadi selanjutnya kita akan menambahkan photo dan yang lainnya. • 7. Klik nama agent untuk mulai mengkustomisasi profile – nya • 8. Klik nama agent untuk mulai mengkustomisasi profile – nya Upload Photo : Klik tombol Upload dibawah photo yang kosong tersebut, setelah anda upload mohon jangan klik tombol Save Changes. Lanjutkan ke tahap/ tab berikutnya IM Network
  • IM Network : Untuk network pilih Google Talk or Google Appa/Mail. Kemudian masukkan username anda, jika email anda beralamat nama-anda@gmail.commaka username anda adalah nama-anda@gmail.com
  • Phone : Untuk IM/ Country pilih saja Skype ( jika anda punya akun Skype) jika belum maka isi saja kolom ID/ Number dengan no telpon anda dan akhiri dengan mengklik tombol Save Changes
  • Menambahkan Photo Agent untuk homepage Untuk mempercantik tampilan ClickDesk di toko online kita maka kita perlu untuk menambahkan Photo Agent kita agar ketika customer kita ingin bertanya mereka bisa membayangkan wajah orang yang sedang mereka ajak Chatting. Sekedar saran sebaiknya anda memasang Photo asli dan jangan photo orang lain karena secara psikologis Photo asli lebih meyakinkan dari pada photo orang lain atau bahkan photo orang luar negeri.
  • • 9. Klik Tab Live Chat
  • 10. Setelah terbuka anda akan melihat tampilan seperti gambar berikut • 1. 2. Theme = Pilih Social ( Medium ) 3. Position = Bottom Right 4. Klik Tombol Upload untuk memulai upload Photo agent anda 5. Color = Pilihlah warna yang sesuai dengan yang anda inginkan 6. • Pastikan anda berada pada posisi UI & Themes 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. Twitter Klik Icon Twitter dan Upppss………. !! Error
  • Mari kita bereskan permasalahan diatas, lihat kembali ke clickdesk dashboard anda. Klik Link Grand Access .
  • Maka akan muncul Pop up untuk meng – Authorize APP. Klik tombol Authorize APP tersebut Setelah Proses Authorize APP Twitter tersebut selesai maka anda akan melihat halaman Social itu lagi tanpa ada pertanda khusus lainnya jadi tidak ada perubahan sama sekali.
  • Namun yang perlu anda lakukan adalah Klik Tombol Save Changes sekali lagi untuk menyimpan apa yang sudah kita lakukan diatas. Setelah anda Save / Simpan mari kita lihat lagi toko online kita . Refresh terlebih dahulu kemudian klik icon Twitter lagi. Hemmm…. permasalahan tadi sudah hilang. Congratulation !!
  • Facebook Setelah kita lihat Twitternya mari kita lihat juga Facebooknya.
  • Akhirnya proses Install dan mengkustomisasi ClickDesk sudah selesai dan siap untuk kita pergunakan, Semoga penjelasan kami diatas bisa anda mengerti dan pahami dengan baik serta anda tidak mengalami masalah dalam mengikuti tutorial ini. Pada kesempatan mendatang kita akan melanjutkan tutorial ini dengan tema yang berbeda.
  • 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 Page Kami akan membuat halaman static page sebanyak 3 buah dengan perincian sbb : 1. Halaman tata cara belanja 2. Halaman about us 3. Halaman contact page Anda boleh membuat halaman static apa saja , silahkan disesuaikan dengan keperluan anda.
  • Kategori Produk Kami akan membuat 4 buah kategori produk sebagai contoh saja supaya custom menu kita kali ini bisa sedikit menggambarkan situasi yang sebenarnya dalam proses pembuatan toko online anda nantinya. Kami akan membuat kategori produknya sbb : 1. Baju anak 2. Baju Wanita 3. Baju Pria 4. Kamera digital Mohon disesuaikan dengan produk anda terlebih dahulu, kira – kira kategori produk anda yang cocok dengan produk anda tersebut Cara membuat Halaman Static Page Berikut kami berikan contoh cara membuat sebuah halaman static page : • 1. 2. Klik Add New 3. Tulis Judul Halaman Static yang akan anda buat, mis. Tata cara belanja 4. Tulis isi static page anda 5. • Klik Pages Klik Tombol Publish Khusus untuk pembuatan halaman contact page maka sebelum anda membuatnya seperti diatas , anda terlebih dahulu harus melakukan setting Contact Information pada Theme Options
  • Silahkan menuju Theme Options Mystile anda. kemudian lanjutkan dengan hal berikut ini 1. Klik Contact Page 2. Pilih Contact Information 3. Centang Enable Contact Information Panel 4. Tulis Judul Lokasi Toko Online anda , mis. Our Store Location atau dalam contoh ini kami buat Woo Store Location 5. Tulis alamat lengkap anda 6. Tulis juga no Telp rumah anda / No telp Toko anda 7. No Fax Anda 8. Tulis email anda . Email yang ditulis disini akan berfungsi sebagai email penerima apabila ada customer toko online anda menghubungi anda melalui halaman contact tersebut 9. Twitter Username dikosongi saja . [ tidak berfungsi ] 10. Centang Enable Subscribe 11. Klik Tombol Save All Changes
  • Jika anda tidak melakukan langkah ini terlebih dahulu dan anda langsung melakukan Add New Page untuk halaman Contact maka anda akan melihat pesan error seperti gambar berikut Sekarang kembali ke halaman Add New Page tadi diatas untuk membuat static page halaman contact
  • Mari kita lihat terlebih dahulu bagaimana penampilan toko online kita setelah kita menambahkan 3 buah halaman static page yang baru tersebut. Lihat bagian Menu Jika kita perhatikan pada gambar diatas maka menu toko online kita menjadi jelek dan kurang sedap dipandang mata. Kenapa terjadi demikian ? hal ini disebabkan karena Mystile atau themes yang kita pakai dalam tutorial ini secara otomatis akan menambahkan semua static page baru menjadi sebuah menu. Lantas bagaimana cara memperbaiki hal tersebut. Caranya sangat mudah kok , nanti akan kami jelaskan cara memperbaiki susunan menu tersebut. Sekarang mari kita lanjutkan dengan membuat kategori produk terlebih dahulu baru kemudian kita susun secara bersamaan agar tidak 2 kali kerja. Cara membuat Kategori Produk Seperti yang sudah kami jelaskan diatas, kategori produk bisa memudahkan customer kita dalam memilih barang yang ada di toko online kita terlebih jika kategori produk tersebut kita pasang atau kita tempatkan pada menu utama toko online kita. Sebagai gambarannya Silahkan lihat >> Contoh Kategori Produk << Klik. Begitulah kira – kira maksud dari kategori produk tersebut. Jadi misalnya anda menjual berbagai macam jenis produk maka calon customer toko online anda akan mudah mencari produk yang sejenis. Untuk membuat kategori produk silahkan ikuti langkah demi langkah berikut ini :
  • 1. Mari kita menuju menu products • 1. Klik Products 2. Pilih Categories
  • 2. Kemudian mulailah membuat kategori produk toko online anda • 1. Name = Tulis nama kategori produk anda , misal : Baju Anak 2. Slug = Tulis slug nya dengan huruf kecil semua dan spasinya di ganti dengan tanda – ( minus ) , misal : baju-anak 3. Display Types = Pilih Products 4. Upload sebuah gambar untuk kategori produk tersebut. Usahakan ukurannya ukuran tinggi dan lebarnya sama, misal : 300 x 300 px 5. Klik tombol Add New Product Category
  • • 3. Ulangi langkah diatas untuk membuat kategori produk yang lainnya, setelah selesai maka akan terlihat seperti pada gambar berikut Nah sekarang yang perlu kita lakukan selanjutnya adalah mendapatkan link masingkategori produk yang sudah kita buat diatas . Cara mendapat link kategori produk anda adalah sbb : • 4. Letakkan / arahkan kursor mouse anda tepat dibawah salah satu nama kategori produk anda yang akan kita cari link 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 Persiapan Silahkan anda persiapkan 4 buah image produk dengan warna yang berbeda. Dalam contoh ini kami akan memakai produk yang memiliki 4 buah warna yang berbeda. Kami telah mempersiapkan 4 buah kaos berwarna Ungu, Putih, Merah Dan Hitam sebagai gambaran dalam tutorial ini. Mohon untuk diperhatikan dengan seksama langkah demi langkah yang kami jelaskan nantinya supaya anda tidak mengalami masalah yang berarti.
  • Let’s Start .. 1. Silahkan anda menuju Halaman Add New product • 1. Klik Products 2. Pilih Add Product 2. Setelah halaman Add New product sudah terbuka maka lakukan hal berikut • 1. Tulis Judul Produk anda yang mempunyai pilihan warna tersebut dalam contoh ini kami menulis judulnya : Produk dengan 4 Buah Warna Pilihan 2. Tulis Deskripsi Lengkap produk anda tersebut 3. Pilih Kategori untuk Produk anda tersebut
  • Sampai disini pastikan sudah benar langkah anda terlebih dahulu, jika sudah benar silahkan lanjut lagi ke langkah no 3 dibawah ini 3. Upload gambar untuk Gallery dan Featured Image anda • Ini masih langkah mudah terlebih dahulu, silahkan upload gambar produk anda sekarang. Caranya masih sama dengan cara memposting produk dengan Product Data ” Simple Product ” yang kemarin sudah kami jelaskan. Note : Featured image cukup 1 dan image yang sudah dipakai untuk featured image tersebut tidak perlu anda pasang lagi pada product gallery karena secara otomatis akan terlihat juga pada product gallery tersebut. Dalam contoh ini yang kami pasang untuk Featured Image adalah kaos warna Ungu ( gambar urutan pertama dari kiri ) dan untuk yang di Product Gallerynya adalah warna Putih, Merah dan Hitam. Lihat gambar berikut ini.
  • Jika kita preview saat ini maka anda akan melihat tampilan produk anda tersebut serupa dengan gambar berikut ini
  • Pastikan anda melihat hal serupa dengan contoh tersebut diatas. Seperti yang sudah kami terangkan diatas bahwa featured image akan secara otomatis masuk kedalam Product Gallery ( gambar paling kiri sebelum kaos yang berwarna putih ). Sampai disini masih sangat mudah sekali, silahkan anda lanjutkan dengan dengan langkah yang ke 4 dibawah ini. 4. Sekarang mari kita beralih ke Produk Data [ General ] • 1. Pilih Product Data , Pastikan anda memilih Variable Product 2. Kemudian isilah SKU produk anda ( dalam tutorial ini kami menuliskan SKU-nya : SKU 123456 )
  • • 5. Sekarang kita beralih ke Inventory Pada bagian Inventory ini anda cukup mencentang pilihan manage stocks saja • 6. Lanjutkan ke bagian Shipping Nah pada bagian shipping ini kami akan memilih atau memakai Shipping Class yang kami beri nama “Kaos”. Silahkan anda buat 1 buah Shipping Class baru untuk produk anda tersebut jika anda memutuskan untuk memakai shipping class yang kemarin sudah pernah kita buat juga tidak ada masalah yang penting ongkos kirim pada Shipping Class yang sudah anda buat kemarin sudah sesuai dan tidak akan merugikan anda. Refresh : Pada tutorial tahap ke sepuluh kemarin kami telah menerangkan cara membuat Shipping Class [ Lihat artikelnya disini ]
  • 7. Setelah itu lanjutkan ke Linked Products • Pada tutorial ini kami tidak mensetting linked products karena kami tidak mempunyai postingan products untuk Upp Sells maupun Cross Sells- nya. Jadi jika anda akan memasang Linked Product anda tersebut saat ini maka silahkan lihat panduannya pada tutorial kami yang ke sebelas [ Lihat artikelnya disini ] Kami yakin anda sudah memahami caranya dengan baik. 8. Mari kita lanjut ke bagian Attibutes • Ini merupakan Bagian inti dari pokok pembahasan dalam tutorial ini, mohon untuk dipahami maksud dan tujuannya.  Klik tombol Add
  •  Setelah itu anda akan melihat tampilan seperti pada gambar berikut ini Kemudian lanjutkan dengan langkah berikut ini 1. Name adalah nama untuk attributes produk kita ini. Dalam contoh ini kami buah namanya ” Warna Baju ” anda bisa memberi nama apa saja tergantung dari keinginan anda. 2. Centang Visible on the product page 3. Centang Used for variations 4. Value (s) isi dengan pilihan warna baju yang sesuai dengan variasi warna pada produk anda tersebut. Dalam contoh ini karena kami cuma punya 4 buah warna yakni : ungu, putih, merah dan hitam maka kami tulis seperti berikut :Ungu | Putih | Merah | Hitam . Perhatikan format penulisan diatas, formatnya adalah : Warna [spasi] [tekan Shift + Back Slash ()] [spasi] Warna . Atau cara gampangnya copy paste saja variasi warna kami diatas dan kemudian ganti tulisan warnanya dengan warna yang sesuai dengan kondisi bawah anda saat ini. 5. Klik Tombol Save attributes
  • Setelah anda klik tombol Save attributes dan proses penyimpanannya selesai maka anda tidak akan melihat ada perubahan sama sekali dengan gambar diatas , anda masih akan melihat tampilan yang sama. Mohon dipastikan saja anda telah meng-klik tombol Save attributes tersebut. Sampai disini pastinya anda akan sangat mudah memahaminya. Jika belum mohon jangan lanjutkan ke langkah berikutnya agar anda tidak salah langkah. Silahkan pahami terlebih dahulu. Jika sudah paham betul dan langkah anda sudah sesuai dengan yang ada di gambar maka mari kita lanjut lagi ke langkah berikutnya
  • 9. Pada bagian Advanced ini anda tidak usah mengisi apapun jadi silahkan lewati • saja Pastikan satu hal saja disana bahwa untuk pilihan Enable reviews sudah tercentang ( secara default ini sudah tercentang dengan sendirinya ) 10. Final Step. Mari kita lihat bagian selanjutnya yakni Variations • Ini merupakan langkah terakhir sekaligus penentu untuk membuat pilihan warna produk yang kita posting tersebut. Silahkan anda klik Variations dan anda akan melihat tampilan seperti pada gambar berikut ini Selanjutnya secara berurutan yang anda lakukan adalah sbb : 1. Klik tombol Add Variation
  • Setelah itu anda akan melihat tampilan anda seperti berikut ini Sekarang kita isi produk dengan Warna yang pertama yakni yang ada pada features image terlebih dahulu. Pada contoh diatas warna kaos pada featured image adalah warna ungu. Note : Agar terlihat rapi dan berurutan maka mulailah dengan urutan sebagai berikut : 1. Warna Kaos yang ada dalam Featured Image ( Ungu ) 2. Warna kaos no 1 pada product gallery ( Putih ) 3. Warna kaos no 2 pada produk gallery ( Merah ) 4. Warna Kaos no 3 pada product gallery ( Hitam )
  • Mari kita mulai dengan yang pertama ( Warna Kaos Ungu ) 1. Pilih Warna Ungu 2. Upload atau pasang gambar kaos warna ungu anda 3. Tulis Jumlah stok baju warna ungu anda disana Misal : 10 4. Tulis Harga untuk Kaos Ungu tersebut Misal : 100000 ( seratus ribu ) ingat penulisan angkanya tidak usah pakai titik 5. Shipping Class = Pilih Kaos atau Pilih saja shipping class yang anda punya dan sudah anda buat pada langkah sebelumnya 6. Klik Tombol Add Variation Setelah anda Klik tombol add variation tersebut maka anda akan melihat tampilan seperti pada gambar berikut
  • Mari kita lanjutkan dengan yang kedua ( Warna Kaos Putih ) 1. Pilih Warna Putih 2. Upload atau pasang gambar kaos warna putih anda 3. 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 Induk Yang pertama kali kita buat adalah Produk induknya terlebih dahulu yang berisi spesifikasi lengkap iPhone 5 warna putih, kategori, featured image, product gallery dll. Pada dasarnya ini membuat postingan produk induk ini sama dengan produk lainnya. 1. Login ke dashboard toko online anda dan lakukan dibawah ini • 1. 2. Klik Add New Product 3. Tulis Judul Produknya = Misalnya New iPhone 5 4. • Klik Products Tulis diskripsi dari product anda secara lengkap 2. Pilih atau buat kategori produk tersebut Dalam contoh ini kami membuat sebuah kategori produk yakni Smart phone
  • • 3. Upload Gambar untuk Featured Image dan Product Gallery Silahkan upload gambar untuk product gallery dan juga gambar untuk featured imagenya. Caranya sama seperti yang sudah kami jelaskan pada tutorial – tutorial kami terdahulu.
  • • 4. Pada Product Data pilihlah Grouped Products Disini anda harus memilih Product datanya ” Grouped Product ” dan jangan yang lainnya. Untuk Linked Products , Attributes dan advanced tidak perlu anda isi apa – apa ketika memposting product indul ini. • 5. Klik tombol publish Setelah anda selesai dengan langkah no 4 diatas, silahkan anda langsung klik tombol Publish Jika dilihat produk tersebut maka anda akan melihatnya persis seperti pada gambar dibawah ini ( tidak ada Harganya )
  • Proses memposting produk induknya sudah selesai , lantas bagaimana dengan harga dan lainnya ? Kenapa produk induknya hanya seperti itu saja ? Tenang… kita akan akan melengkapi kekurangan data produknya seperti SKU , Harga dan yang lainnya melalui Produk turunannya. Silahkan lanjutkan dengan langkah dibawah ini .. Memposting Produk Turunan Disinilah kita akan melengkapi kekurangan pada Produk induk yakni dengan memposting produk turunan yang dalam contoh ini ada 3 yakni :  iPhone 5 16GB Rp. 7.500.000,-  iPhone 5 32GB Rp. 8.500.000,-  iPhone 5 64GB Rp. 9.500.000,- Langkah dalam memposting produk turunan ini pada prinsipnya sama semua, jadi disini kami hanya akan memberikan contoh cara memposting 1 buah produk turunan saja yakni : iPhone 5 16 GB Penting !!
  • Yang berbeda nantinya adalah :  Judul Produknya : Kalau yang pertama adalah iPhone 5 16 GB , yang kedua iPhone 5 32 GB dan yang ketiga iPhone 5 64 GB  SKU nya : Buatlah SKU yang berbeda contoh jika format SKU yang pertama adalah ” SP 001 ” maka yang kedua ” SP 002 ” dan yang ketiga ” SP 003 “  Harga produknya : Jika Produk yang pertama mempunyai harga Rp. 7.500.000,- maka yang kedua di tulis Rp. 8.500.000,- dan yang ke tiga Rp. 9.500.000,- ( lihat list harga diatas ) Jadi nanti anda tinggal memposting produk turunan ini 3 kali dengan cara yang sama. Product Turunan Pertama 1. Masih dari dalam dashboard toko online anda • 1. 2. Klik Add New Product 3. Tulis Judul Produk turunan yang pertama = Misalnya iPhone 5 16GB 4. • Klik Products Biarkan Kosong Deskripsi lengkapnya 2. Kategori produk tidak perlu dicentang / biarkan kosong
  • • 3. Product gallery dan featured image biarkan kosong • 4. Pada area Product data lakukan hal berikut ini [ General ] 1. Pilih Product Data = Simple Products 2. Tulis SKU produk turunan pertamanya , contoh SP 001 3. Tulis Harganya , contoh 7500000 ( tanpa tanda titik )
  • 4. Lanjutkan ke bagian Inventory • Jika anda ingin menampilkan jumlah stok produk anda tersebut maka lakukan 1. 2. • Centang Manage Stock Tulis jumlah stok barang anda , misal : 10 5. Pilih Shipping Class untuk meng-handle biaya pengiriman product tersebut Pada contoh dibawah ini kami menggunakan Shipping Class yang pernah kami buat sebelumnya yakni Kamera Digital . anda bisa juga membuat Shipping Class yang lain. Ini sebagai gambaran saja.
  • • 5. Lanjut ke Linked Products Pada bagian Linked Products ini peranan Parent Product atau Produk Induk mulai muncul, Anda akan melihat menu baru yang bernama Grouping . Posisinya tepat dibawah Upp Sells dan Cross Sells ( pada contoh ini Upp Sells dan Cross Sellsnya tidak kami isi karena kami tidak atau belum memposting product Smart phone lainnya ) Silahkan anda pilih New iPhone 5 Nama Grouping tersebut terbentuk secara otomatis menggunakan Judul produk ketika kita memposting Parent Productnya / Produk induknya. Pada postingan produk induk yang kami contohkan diatas kami menulis New iPhone 5 makanya muncul di Grouping tersebut nama New iPhone 5 . Jika anda membuatnya dengan nama lain maka yang muncul juga beda. Jadi nama grouping ini akan sama dengan judul produk induk yang telah kita buat sebelumnya. Untuk attributes dan Advanced kita lewati saja, tidak ada yang perlu kita isi, lanjutkan dengan langkah dibawah ini.
  • 7. Alihkan pandangan anda ke pojok kanan atas • Lihat pada area Preview dan tombol Pusblish. Disana anda akan melihat Catalog visibility: Catalog/search Klik link Edit disamping sebelah kanan tulisan tersebut. 8. Setelah terbuka maka lakukan hal berikut • 1. Pilih Hidden 2. Klik tombol OK
  • • 9. Langkah berikutnya adalah mempublish produk turunan pertama kita • 10. Ulangi langkah diatas untuk memposting produk turunan yang lainnya jika semuanya telah selesai maka anda akan melihat hasil kerja anda tersebut persis seperti gambar dibawah ini
  • Proses memposting produk dengan menggunakan Produk Data ” Grouped Product” sudah selesai , semoga anda bisa memahaminya dengan baik dan juga anda tidak mengalami permasalahan apapun ketika mempraktekkan tutorial diatas. Jika anda mengalami masalah, silahkan anda tulis pada kolom komentar dibawah ini.
  • 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 Barang Sebelumnya mari kita lihat terlebih dahulu contoh penggunaan opsi pilihan jasa pengiriman tersebut dengan melihat contoh gambar dibawah ini.
  • Opsi pengiriman pada produk yang tidak menggunakan Shipping Class Pada gambar diatas merupakan penerapan opsi pengiriman pada produk yang tidak menggunakan Shipping Class. Jika produk tersebut tidak menggunakan Shipping Class apapun maka ongkos kirim yang akan kita jelaskan pada tutorial ini akan berdampak langsung pada produk tersebut.
  • Opsi pengiriman pada produk yang menggunakan Shipping Class Pada tutorial sebelumnya kita sering membahas mengenai biaya pengiriman dengan menggunakan Shipping Class. Jika customer kita akan membeli produk yang sudah kita setting dengan biaya pengiriman melalui shipping Class maka secara otomatis tarif shipping class produk tersebut akan mereplace atau menggantikan ongkos kirim dasar pada area Cart toko online kita. Let’s Start .. Untuk membuat pilihan opsi pengiriman diatas maka kita akan memodifikasi Shipping Flat Rate .
  • 1. Silahkan anda login terlebih dahulu ke dashboard toko online anda dan kemudian • lakukan langkah dibawah ini 1. 2. Pilih Settings 3. Pilih Shipping 4. • Klik WooCommerce Pilih Flat Rate 2. Gantilah Method Title dari Flat Rate menjadi nama jasa pengiriman default toko online anda Jika toko online anda menggunakan PT Pos Indonesia sebagai pilihan awal jasa pengiriman yang anda pakai dan menggunakan pengiriman reguler maka tulislah pada method title PT POS Indonesia Reguler atau dalam contoh ini kami menuliskanPOS Reg ( 4 hari ) yang secara tidak langsung akan menjelaskan kepada pembeli toko online kita bahwasanya barang yang mereka beli itu akan dikirim Via Pos reguler dan akan sampai dalam kurun waktu 4 hari .
  • Nantinya dihalaman Cart toko online anda Menthod Title itu akan terlihat seperti pada gambar berikut • 3. Menambahkan biaya pengiriman dasar jika menggunakan PT POS Indonesia
  • 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 sebenarnya Format 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 bersamasama 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&amp;m=g&amp;t=2&amp;l=us”/> Keterangan Gantilah tulisan ID_Yahoo_Anda dengan username email yahoo anda . Dalam contoh ini kami menggunakan alamat email johny2md@yahoo.com maka kode yang kami letakkan seperti berikut ini <a href=”ymsgr:sendIM?johny2md“> <img src=”http://opi.yahoo.com/online? u=johny2md&amp;m=g&amp;t=2&amp;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 rekanrekan 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 SlideShow Kita 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 Aktifkan Install 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 Slideshow Setelah 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 slideshow Karena 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 Tambahan Untuk 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-96b8444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#vers ion=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 &nbsp; . 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 Customer Mengenai 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 tambahan Untuk 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 security Pada 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.