1. Install template Mytile dari WooThemes Silahkan anda download terlebih dahulu templatenya di sini . Kemudian install template tersebut dan aktifkan segera. Cara install template wordpress Setelah anda aktifkan template tersebut maka anda akan melihat halaman seperti gambar dibawah ini.
Dan ika anda lihat toko online anda sekarang ini maka akan terlihat seperti berikut ini. !. Setting template Mytile " #ogo Dan $a%i&on ' (ntuk melakukan setting dasar template ini kita tidak perlu kemana ) mana dan angan klik ke halaman lainnya* fokus saa terlebih dahulu di halaman ini. #akukan setting dasar berikut + Theme Stylesheet ini untuk merubah skin dari template Mystile tersebut* ada banyak pilihan disana ada bisa men&oba ) &oba skin apa yang kira ,kira anda sukai. Custom logo adalah untuk mengganti logo untuk toko online kita. " uk. !-- . 1-- p. ' Custom $a%i&on " uk. 1/ . 1/ p. ' Cara mengganti logonya dengan logo kita sendiri adalah sbb + Klik tombol (pload pada Custom #ogo Setelah itu anda akan melihat halaman seperti dibawah. Klik Sele&t $iles Cari lokasi logo anda kemudian pilih logo anda dan dan klik open Setelah proses ipload logo selesai maka anda akan melihat halaman seperti pada gambar . 0ilih $ull Si1e dan kemudian klik tombol (se this image
#ogo anda akan terlihat seperti gambar berikut * kemudian hilangkan tanda &entang pada baris Te.t line #anutkan dengan mengupload $a%i&on " uk. 1/ . 1/ p. ' dalam bentuk png file. #akukan hal yang sama seperti mengupload logo diatas. Setelah selesai maka selanutnya kita simpan pekeraan kita diatas dengan mengeklik tombol Sa%e 2ll Changes #ihat toko online anda maka disana sudah terpasang logo beserta fa%i&onnya. (ntuk settingan yang lain akan kita bahas pada pembahasan selanutnya 3. Install plugin WooCommerce dan YITH magnifier Download WooCommer&e 0lugins di sini Setelah anda download* install plugin tersebut kemudian aktifkan. #ihat artikelCara install plugin di Word0ress ika anda belum tau &aranya. Setelah itu langsung aktifkan plugin tersebut. Setelah anda aktifkan maka anda akan melihat halaman seperti pada gambar berikut. Kemudian klik tombol Install WooCommer&e 0ages. Setelah anda aktifkan maka selanutnya kita akan menginstall sebuah plugins lagi kemudian langsung anda aktifkan plugin tersebut* nama pluginnya 3IT4 WooCommer&e 5oom Magnifier Kegunaan dari plugin ini adalah memberikan efek 5oom pada image produk toko online kita* adi ketika kursor mouse diarahkan diatas image produk yang kita ual maka plugin tersebut akan segera bekera sebagaimana fungsinya. 2nda bisa mendownload plugin tersebut di sini 2gar lebih lebih mengerti maksud dari efek 5oom tersebut maka sebaiknya anda lihat demonya disini 6imana 7 lumayan keren bukan 7 untuk ukuran sebuah plugin gratisan maka 3IT4 merupakan solusi yang terbaik untuk kita pakai guna memper&antik toko online kita dan terlihat lebih profesional. Sementara sampai disini dulu tutorial mengenai &ara membuat toko online menggunakan WooCommer&e tahap pertama ini. 8anti kita akan melanutkannya lagi dengan tahapan kedua dan seterusnya. Semoga anda bisa memahami tutorial mudah diatas tanpa ada kendala yang berarti. Cara membuat toko online menggunakan WooCommerce (Tahap ua) Cara mensetting YITH !agnifier Klik 0lugins Klik Installed 0lugins Klik Settings pada 3IT4 Magnifier 0ada posisi 6eneral settings nya* &entanglah 9nable 3IT4 Magnifier dan$or&ing 5oom Image Si1es Kemudian lihat pada bagian Magnifier Settings. #akukan persis seperti gambar berikut #ihat lagi kebawahnya pada bagian Slider Settings* lakukan lagi persis seperti gambar dibawah in dan diakhiri dengan menyimpan pekeraan kita dengan mengklik tombol :ika kita lihat dari awal maka pekeraan kita diatas langkahnya seperti gambar dibawah ini . (ntuk memperbesarnya klik kanan pada gambar kemudian klik ;iew image Cukup sekian dulu tutorial yang kedua ini* pada kesempatan mendatang kita akan melanutkan dengan tutorial yang ketiga dan seterusnya. Tetap semangat dalam proses belaar ini dan yakinlah kepada diri anda bahwasanya anda mampu dan bisa membuat toko online anda dengan baik dan benar. Cara membuat toko online menggunakan WooCommerce (Tahap Tiga) Cara Mensetting WooCommer&e (ntuk melakukan setting dasar WooCommer&e ini maka anda bisa langsung menuu WooCommer&e < Settings . Setelah terbuka halaman settings tersebut maka anda akan melihat 1- Tabs yang harus kita setting disana + 1. 6eneral !. Catalog =. 0ages >. In%entory ?. Ta. /. Shipping @. 0ayment 6ateway A. 9mails B. Integration 1-. Magnifier " Sudah kita Setting 0ada Tahap Dua '
Cara mensetting 6eneral 2da > bagian pada tab 6eneral ini yang harus kita pahami &ara mensettingnya. Setting pada "eneral #ptions Case #o&ation D 0ilih lokasi anda saat ini atau lokasi toko online anda. Dalam &ontoh ini karena lokasi saya berada di Eiau maka saya pilih Indonesia ) Eiau Curren&y D :ika target anda adalah &ustomer dari Indonesia maka pilih Indonesia Eupiah "Ep' namun ika targetnya adalah International maka pilih Dollar 2llowed Countries D Se&ara default anda akan melihat 2ll Countries disana. Karena target yang kita bidik disini adalah orang Indonesia maka kita pilih Spe&ifi& Countries dan kemudian akan mun&ul pilihan dibawahnya Spe&ifi& Countries D Cari negara Indonesia Store 8oti&e D :ika ini anda &entang maka akan keluar Sti&ky Car diatas toko online anda. 6unanya untuk memberitahu kepada orang bahwasanya toko ini hanya untuk Demo atau nantinya bisa uga anda pakai untuk memberikan pesan &epat ke &ustomer anda apabila ada promo diskon* penawaran khusus atau Kupon Code 2gar lebih elas silahkan perhatikan gambar dibawah ini
Setting $ada Cart% Checkout dan &ccounts Coupons D Centang ini ika anda ingin menggunakan fasilitas kupon belana untuk toko online anda ika tidak ingin memakai kupon maka tidak perlu anda &entang. Che&kout D ada = opsi di sini* berikut penelasannya , 9nable 6uest Che&kout D Centang ini ika anda mengiinkan orang berbelana di toko online anda tanpa melakukan registrasi terlebih dahulu. Misalnya saya berkunung ke toko online anda dan saya ingin membeli produk yang anda ual tapi saya males untuk mendaftar* karena anda men&entang opsi ini maka saya masih bisa berbelana di toko online anda tanpa harus registrasi terlebih dahulu. , 9nable &ustomer note field on Che&kout D :ika anda &entang ini maka ketika &ustomer anda akan melakukan Che&kout mereka bisa menambahkan pesan singkat kepada anda sebagai pemilik toko online. Misalnya isi pesannya + F tolong sms kalau barang sudah dikirim ya G. 0osisi note field tersebut akan terlihat di halaman Che&kout seperti gambar dibawah ini. , $or&e Se&ure Che&kout D Centang ini ika anda mempunyai atau membeli atau menggunakan fasilitas SS# untuk toko online anda "https' namun karena kita akan menggunakan dire&t transfer maka anda tidak perlu men&entang ini dan tidak perlu membeli SS# Eegistration D Centang saa semua pilihan disitu Customer 2&&ount D Centang pilihan pertama dan ke tiga* untuk yang kedua angan di&entang. 6unanya tidak di&entang adalah ika &ustomer anda membuat akun ditoko online anda dan dia sudah mengumpulkan barang yang akan dibeli ditoko online anda namun belum akan membeli pada saat itu uga maka ketika mereka kembali login ke toko online anda barang yang sudah mereka ren&ana beli tidak hilang dan tidak perlu men&ari lagi. Setti ng pada St'le &nd Scripts Centang saa semuanya
Setting pada o(nloadable $roducts (ntuk yang ini tidak perlu ada setting . 8amun ika anda berualan produk digital seperti ebook* software* template dll maka anda perlu mensetting ini :ika kita lihat se&ara keseluruhan maka urut ) urutannya adalah seperti gambar berikut ini. Sampai disini dulu penelasan &ara membuat toko online menggunakan WooCommer&e tahap tiga. Cara membuat toko online menggunakan WooCommerce (Tahap )mpat) Cara Mensettng Cataog Berikut cara mensetting bagian katalognya, perhatikan gambar berikut dan lakukan hal yang sama seperti yang kami lakukan. 1. Pastkan anda memh tab Cataog 2. Defaut Product Sortng = Ph Defaut sortng 3. Shop Page Dspay = Ph Show Both 4. Defaut Category Dspay = Ph Show products 5. Add to Cart = Centang pada enabe A|AX add to cart buttons on archves 6. Product Feds = Centang semuanya 7. Weght unt = Ph Kg 8. Dmenton unt = Ph Cm 9. Product ratngs = Centang semuanya 10. Currency Poston = Left 11. Thousand separator = Gant dengan . ( Ttk ) 12. Decma separator = Gantn dengan , ( Koma ) 13. Trang Zeros = Pastkan anda mencentang Remove zeros 14. Image Optons = Centang semua 15. Kk tombo Save Changes
Cara Mensettng Pages Pada tab pages ini anda tidak perlu melakukan apa -apa, cukup anda ketahui bahwasanya ketika anda sudah membuat static page yang berisikan Peraturan berbelanja di toko online anda mana nantinya anda bisa menaruh pada Term Page ID. Saat ini kami belum membuat static page mengenai peraturan berbelanja maka kami akan mengkosongkan ini terlebih dahulu. amun jika anda ingin membuatnya sekarang maka setelah static page anda ter-publish anda bisa memilihnya disitu dan kemudian klik tombol Sa!e "hanges. #ntuk membuat Static page anda bisa memilih Pages $ %dd ew . Beri judul Peraturan Belanja & Tata "ara Berbelanja & apa saja terserah anda. antinya judul tersebut akan muncul di pilihan Term Page ID. Cara Mensettng Inventory Pada tabs In!entory ini kita akan setting agar customer tau ketersediaan stock barang yang kita jual kepada customer kita. Tujuannya jelas agar customer yakin produk yang akan mereka beli stoknya ada, tinggal sedikit atau sedang kosong. 1. Pastkan anda berada pada tab Inventory 2. Manage Stock = Centang enabe Stock Management. Berguna untuk menampkan ops ketersedaan stok barang yang kta |ua pada customer 3. Notcatons = Centang kedua ops yang ada 4. Notcaton Recpent = Masukkan / ketk ema anda dsana , gunanya untuk menerma pembertahuan |ka ada order 5. Low Stock Threshod = 2 6. Out Oh Stock Threshod = 0 7. Stock Dspay Format = Aways Show Stock 8. Kk Save Changes #ntuk tahap keempat ini cukup sekian dulu, pada kesempatan mendatang kita akan melanjutkan dengan tahapan berikutnya. Cara membuat toko online menggunakan WooCommerce (Tahap Lima) Cara mensettng tab Tax 'psi Ta( atau pajak ini sebetulnya tidak begitu perlu untuk pemilik online yang masih pemula dan belum beromset besar. )adi untuk bagian Ta( ini silahkan anda lewati saja tidak perlu anda setting apapun. Cara mensettng tab Shppng Pada tab shipping merupakan tempat untuk mengakti*kan biaya pengiriman atau ongkos kirim pada produk yang kita jual di toko online kita. #ntuk mengakti*kan *itur ongkos kirim ini silahkan anda melakukan hal berikut + 1. Kk tab Shppng 2. Pastkan anda berada pada Shppng optons 3. Shppng Cacuatons = Centang Enabe shppng dan 4. Centang |uga Enabe the shppng cacuator 5. Shppng method dspay = Rado buttons 6. Shppng Destnaton = Shp to bng address by defaut 7. Pada shppng methods barkan sa|a terebh dahuu apa adanya 8. Kk tombo Save Changes Setelah anda sa!e maka sekarang kita *okus ke bagian Shipping ,ethods, secara de*ault maka -ree Shipping &'ngkos kirim gratis akan akti* di toko online anda. .ihat gambar dibawah agar anda mengerti maksu kami tersebut Selanjutnya kita akan menonakti*kan metode pengiriman gratis ini, caranya sebagai berikut + 1. Kk Free Shppng 2. Enabe/Dsabe = Hangkan tanda centang yang ada dsana 3. Kk tombo Save Changes Selanjutnya kita akan mengakti*kan salah satu metode pengiriman yakni -lat /ate, jadi pengiriman dengan tujuan kemana saja tari*nya sama. Ini contoh saja, jika anda ingin mengakti*kan tari* yang lain 0 misalnya untuk pengiriman keluar negeri atau keluar pulau 1 disana masih ada pilihan yang bisa anda akti*kan juga. 1. Kk Fat Rate 2. Enabe/Dsabe = Centang Enabe ths shppng method 3. Avaabty = Specc Countres 4. Ph Indonesa 5. Tax status = Ph None 6. Cost per Order = Masukkan tarf ongkos krmnya dstu ( contoh : 20000 ) penusan angka tdak usah paka ttk. 7. Kk tombo Save Changes antinya jika dilihat pada halaman "heckout akan terlihat seperti pada gambar berikut Semoga anda tidak mengalami kesulitan dalam menerapkan langkah kelima ini. Cara membuat toko online menggunakan WooCommerce (Tahap Enam) Pada tahap ke enam ini cara membuat toko online dengan 2oo"ommerce akan menjelaskan tentang bagaimana langkah selanjutnya dalam mensetting plugin 2oo"ommerce melalui dashboard toko online wordpress anda. 3arap diperhatikan dengan seksama dan juga dipahami agar anda tidak kebingungan di kemudian hari. %da 4 tab lagi yang belum kita setting pada tahap sebelumnya + 1. Payment Gateways 2. Ema 3. Integraton #ntuk tahap ke enam ini kita akan melakukan setting pada Payment 5ateways saja terlebih dahulu. #ntuk 6mail dan Integration akan kami bahas pada tahap selanjutnya. Cara Mensettng Payment Gateways #ntuk payment gateways ini karena kita *okus untuk membuat toko online dengan target cutomer dari Indonesia maka kita hanya akan menggunakan sistem pembayaran Direct Bank Transfer saja atau pembayaran !ia trans*er bank. 7etika kita buka tab Payment 5ateways maka secara de*ault anda akan melihat halaman seperti dibawah ini %da 8 sistem pembayaran yang akti* saat ini yakni + Drect Bank Transfer Cheque Payment 7arena kita hanya akan memakai sistem Direct Bank Trans*er maka kita akan menonakti*kan sistem pembayaran melalui "he9ue. #ntuk menonakti*kan "he9ue Payment silahkan ikuti langkah berikut ini + 1. Kk Cheque 2. Hangkan tanda centang 3. Kk Save Changes Setelah kita hilangkan sistem pembayaran melalui che9ue maka kita akan melanjutkannya mengedit sistem pembayaran !ia trans*er yang kita akan pergunakan. 7ita akan memasukkan in*ormasi /ekening #tama yang akan kita jadikan tempat tujuan trans*er uang dari customer kita. )ika anda mempunyai banyak /ekening Bank maka anda tidak melakukan hal ini juga tidak masalah. Dengan kata lain anda bisa melakukan hal ini namun anda juga tidak perlu melakukannya 0 tidak wajib 1 1. Kk BACS 2. Tte = Gant tusan Drect Bank Transfer dengan Pembayaran Via Transfer 3. Cutomer Message = Gant dengan pesan daam bahasa Indonesa. Contoh :Mohon akukan pembayaran meau transfer ke rekenng BCA kam segera seteah anda meakukan order. Pengrman barang yang anda pesan akan kam akukan seteah uang yang anda transfer teah kam terma dan kam verkas. |ka anda tdak mempunya rekenng bank sean bank BCA maka ada bsa mentransfer uang pembayaran tersebut ke rekenng bank kam yang annya ( Lhat haaman Cara Berbean|a ) 4. Account Name = Is dengan nama pemk rek yang akan anda pergunakan 5. Account Number = Is dengan no rekenng anda 6. Bank Name = Is nama bank anda , daam contoh n kam menggunakan BCA 7. Kk Save Changes 7ira : kira setelah anda edit akan terlihat seperti pada gambar dibawah )ika sudah diganti maka ketika customer anda akan melakukan order, mereka akan melihat pesan yang sudah kita buat diatas seperti gambar berikut pada saat melakukan proses checkout. Setelah customer anda mengklik Tombol Place 'rder mereka selanjutnya akan melihat in*ormasi rek B"% yang sudah kita masukkan diatas. Proses setting tab Payment 5ateways ini sudah selesai. Semoga tutorial ini bisa berman*aat bagi anda. Cara membuat toko online menggunakan WooCommerce (Tahap Tujuh) "ara membuat toko online pada tahap tujuh ini akan membahas mengenai cara mensetting plugin woocommerce pada Tabs 6mail. Tidak terlalu sulit namun yang terpenting disini anda mengerti dan memahami cara mengeditnya dan memahami alur kerjanya. .angsung saja kita mulai dengan mensetting dari yang paling awal yakni pada halaman 6mail 'ptions. .ebih lengkapnya silahkan simak tutorial berikut ini Cara Mensettng Tab Emas Settng pada Ema optons 1. Kk Emas 2. Pastkan anda pada poss Ema Optons ( Secara Defaut akan angsung berada pada poss n ) 3. "From" Name = Tus Nama Toko Onne Anda ( Msa : Woo Store ) 4. "From" Ema Address = Tus Aamat Ema anda yang nantnya akan berguna untuk : Menerma ema pembertahuan kaau ada orderan dar customer, Sebaga ema Sender pembertahuan ke customer ketka mereka meakukan order. Untuk ema n sebaknya anda menggunakan ema dar doman anda ( Contoh : no-repy@doman-anda.com / customer- servce@doman-anda.com ) 5. Header Image = Anda bsa memasukkan nk ogo toko onne anda dsn. Nantnya semua ema bak tu pembertahuan ke anda sendr dan customer anda ogo tersebut akan men|ad ogo tempate ema tersebut. 6. Ema Footer Text = tus sesua dengan apa yang anda ngnkan. ( Contohnya anda bsa menus Nama Toko Onne anda beserta sogan dar toko onne anda dsana ) 7. Pada bagan n anda bsa merubah warna tampan tempate ema toko onne anda 8. Kk Tombo Save Changes
)ika anda tidak melakukan edit pada langkah no ; dan no < maka yang terjadi jika misalnya ada customer anda melakukan order di Toko 'nline anda yang terjadi adalah sebagai berikut +
Seller : Sebagai pemilik Toko 'nline tersebut anda akan mendapatkan email seperti berikut ini
Customer : Dan customer anda akan menerima email seperti dibawah ini
Settng pada New Order Ini untuk email pemberitahuan ke Pemilik Toko jika ada orderan dari customer. #ntuk mendapatkan email pemberitahuan tersebut maka yang perlu anda lakukan adalah sebagai berikut + 1. Pastkan anda berada pada poss Tabs Emas 2. Kk New Order 3. Enabe/Dsabe = Centang Enabe ths ema notcaton 4. Kk tombo Save Changes Set elah anda klik tombol sa!e changes maka jika ada orderan dari orang atau customer toko online anda maka anda akan di beritahu melalui email yang sudah anda isi pada 6mail 'ptions no.= diatas
Settng pada Processng Order Ini untuk email pemberitahuan ke "ustomer setelah mereka sukses melakukan order di Toko 'nline kita namun belum melakukan trans*er pembayaran. #ntuk bisa mengirimkan email pemberitahuan tersebut maka yang perlu anda lakukan adalah sebagai berikut + 1. Pastkan anda mash pada haaman Tab Emas 2. Kk Processng Order 3. Enabe/Dsabe = Centang Enabe ths ema notcaton 4. Kk tombo Save Changes Setelah anda klik tombol sa!e changes maka jika ada customer yang melakukan order di toko online kita, secara otomatis setelah proses order mereka sukses maka email pemberitahuan akan terkirim ke alamat email customer yang melakukan order.
Settng pada Competed Order Pada bagian "omplete 'rder ini berguna untuk mengirimkan email pemberitahuan ke pembeli bahwa pembayaran mereka sudah di terima & di!eri*ikasi oleh kita bahwa trans*er yang mereka lakukan sudah di terima dan barang siap di kirim. 0 anda juga harus menjelaskan hal ini kepada customer anda di halaman cara berbelanja di toko online anda 1 #ntuk bisa mengirimkan email pemberitahuan tersebut maka yang perlu anda lakukan adalah sebagai berikut + 1. Pastkan anda mash d haaman Tab Emas 2. Kk Competed Order 3. Enabe / Dsabe = Centang Enabe ths ema notcaton 4. Kk Tombo Save Changes Settng pada Customer Invoce,Costumer Note,Reset Password dan |uga New Account .akukan hal yang sama untuk "ustomer In!oice, "ustomer ote, /eset Password dan juga ew %ccount yakni centang pada 6nable this email noti*ication dan jangan lupa klik tombol Sa!e "hanges. Proses mensetting tab 6mails sudah selesai. #ntuk langkah berikutkan akan kami sampaikan pada kesempatan mendatang. Selalu selalu kunjungi blog ini secara reguler untuk mengetahui tutorial selanjutnya. Cara membuat toko online menggunakan WooCommerce (Tahap Delapan) Pada tahap delapan ini kita akan belajar atau mensetting plugin 2oo"ommerce pada tab Integration. Pada bagian ini ada tiga bagian yang perlu kita kerjakan disini yakni + Googe Anaytcs Share Ths dan Share Your Cart
Sebenarnya ketiga hal diatas bisa anda lakukan setelah semua product sudah terposting di toko online anda atau dengan kata lain ketiga hal tersebut merupakan langkah terakhir yang dilakukan sebelum anda melaunching toko online anda.
Cara settng pada Googe Anaytcs 1. Kk Tabs Integraton 2. Ph Googe Anaytcs ( secara defaut akan angsung terbuka ) 3. Masukkan ID Googe Anaytcs Anda ( anda harus mendaftar atau membuat akun GA untuk Toko Onne Anda ) 4. Centang ketga ops tersebut ( Trackng Code ) 5. Kk Tombo Save Changes Cara settng pada Share Ths 1. Kk Tab Integraton 2. Ph Share Ths 3. Masukkan ID Share Ths Pubsher Anda ( Daftar Akun Share Ths D Sn ) 4. Kk Tombo Save Changes C ara settng pada Share Your Cart 1. Kk Tab Integraton 2. Ph Share Your Cart 3. Buat Akun Share Your Cart Untuk Toko Onne Anda 4. Kk Tombo Enabe pada bagan API Status ( Secara defaut beum daktfkan atau mash daam konds dsabe ) 5. Masukkan ID Share Your Cart Anda 6. Masukkan App Key Akun Share Your Cart Anda 7. Kk Tombo Save Changes %khi rnya setting pada plugin 2oo"ommerce ini sudah selesai semua, pada tahapan mendatang kami akan melanjutkan dengan langkah : langkah lainnya. Selalu kunjungi blog kami secara reguler untuk mendapatkan upadate terbaru mengenai cara membuat toko online menggunakan 2oo"ommerce maupun artikel menarik kami lainnya. Cara membuat toko online menggunakan WooCommerce (Tahap Sembilan) "ara membuat toko online menggunakan 2oo"ommerce tahap sembilan ini akan membahas mengenai cara memposting produk di toko online kita. Pada penjelasan posting produk ini kami akan mencoba menjelaskan sedetail mungkin agar anda mengerti dan paham maksud dan tujuan dari masing : masing langkah yang kami berikan. %da beberapa teknik atau metode yang bisa kita pakai dalam 2oo"ommerce ini. ,ari kita mulai dari yang paling mudah terlebih dahulu. anti anda bisa menyesuaikan dengan kebutuhan toko online anda dan juga selera anda.
Cara Postng Product WooCommerce Silahkan anda buka halaman Posting Product dengan langkah sebagai berikut + 1. Kk Products 2. Ph Add Products
Secara de*ault anda akan langsung melihat halaman seperti pada gambar dibawah ini.
Sekarang perhatikan baik- baik bagian yang kami tandai kotak merah diatas> untuk lebih jelas lihat gambar dibawah.
Perhatikan pada Product Data, secara otomatis akan terpilih Simple product 0 Product Type & Tipe Produk 1 . )ika anda klik pada area Product Type tersebut anda akan melihat = pilihan tipe produk yakni + 1. Smpe product 2. Grouped product 3. Externa/Amate product 4. Varabe product
Mari kita mulai dari yang paling mudah terlebih dahulu yakni memposting produk dengan product type = Simple product . Silahkan persiapkan sebuah gambar / photo sebuah produk dengan ukuran : Mnma 500 x 500 pxe dan Maksma 2.000 x 2.000 pxe Simple product bisa anda pergunakan jika produk yang anda jual tersebut hanya mempunya ? model dan ? warna. Dalam contoh ini kami memiliki 2 buah photoproduk modelnya sama dan warnanya sama dengan ukuran ?@8= ( ;<A p( namun di photo dari sudut yang berbeda. Supaya anda lebih mengerti maksud dan tujuan penggunaan dari Product Type : Simple Products lihat contoh riil yang kami ambil dari Balora. )ika anda mempunyai photo lebih banyak maka akan terlihat lebih baik. "alon customer anda lebih leluasa melihat apakah produk yang anda jual tersebut cocok bagi mereka. #sahakan kualitas gambarnya seperti pada contoh dibawah ini 0 klik pada gambar dibawah untuk melihat kualitas gambar 1 ote + Semakin bagus kualitas gambar maka semakin bagus pula ketika di Boom dengan CIT3 ,agni*ier plugin.
ari kita mulai memposting produk untuk toko online kita! 1. Tus |udu Produk Anda 2. Tus Deskrps fu produk anda tersebut
Setelah selesai proses diatas maka lan"utkan dengan melihat ke ba#ah $ Pada Product Data % 1. Pastkan anda memh atau berada pada Smpe Product 2. Vrtua dan Downoadabe |angan anda Centang ( Hanya untuk produk dgta sepert : eBook, Software d ) 3. Buat SKU produk anda tersebut ( Msa : CAM123456 ) 4. Tus Harga produk anda pada Reguar Prce ( Penusan angka tdak peru paka ttk , msa : |ka anda menus harga Seratus &ibu maka tusah '((((( |angan '((!((( )
Pada contoh ini , S7# kami tulis "%,?84=;A dan 3arga kami tulis =;@@@@@
)ika kita lihat 0 7lik Pre!iew 1 maka anda kan melihat halaman produk anda seperti gambar dibawah ini. )ika anda ingin membuat promo dengan memberikan diskon pada harga produk tersebut maka anda bisa langsung mengisi harga sesudah diskonnya pada area & kolom Sale Price. "ontoh + misalnya harga barang tersebut menjadi = juta maka anda tulis disana =@@@@@@
,aka jika di lihat lagi 0 pre!iew lagi 1 anda akan melihat halaman produk anda seperti berikut
)ika anda ingin membuat periode diskon produk anda tersebut maka yang perlu anda lakukan adalah + Kk Schedue Ph tangga mua beraku dskon sampa masa berakhr dskon ( Kk pada con Kaender ) Pada contoh ini kami membuat masa diskon dari tanggal ?4 %gustus 8@?4 s&d 4@ %gustus 8@?4 Setelah masa diskon berakhir maka secara otomatis harga akan kembali normal jadi anda tidak perlu kawatir diskon tersebut akan berlanjut. Sementara ini cukup sekian dahulu penjelasan mengenai cara posting produk dengan memakai produk data : simple product. anti kami lanjutkan lagi dalam tutorial berikutnya masih pada produk data ini. Semoga anda tidak mengalami kesulitan dalam mempelajari hal diatas. Cara membuat toko online menggunakan WooCommerce (Tahap Sepuluh) Pada langkah ke sepuluh ini kita akan melanjutkan tutorial sebelumnya yakni memposting produk dengan product type : simple product. 0 Tahap Semban 1 )ika anda sampai pada artikel ke sepuluh ini langsung dari 5oogle Search maka anda perlu untuk membaca keseluruhan artke dar yang pertama supaya tau jalan ceritanya. Sekedar mengingatkan kembali bahwasanya kita kemarin sudah sampai pada bagian Product Data : Simple product dan masih pada area 5eneral. .ihat gambar dibawah. ,ohon diperhatikan dengan seksama agar anda mengerti dan memahami penjelasan dari kami. Tidak perlu terburu : buru dalam membaca artikel ini. 7arena tutorial tahap kesepuluh ini sedikit agak rumit terutama bagi anda yang belum mengerti betul langkah : langkah sebelumnya. ari kita langsung melan"utkan bela"ar ke langkah selan"utnya INVENTORY Kk Inventory In!entory ini berguna apabila anda ingin menunjukkan jumlah stok barang atau produk yang anda jual. ,isalnya anda menjual 7amera ikon D;8@@ DS./ "amera 8=.?,P 0 seperti dalam contoh ini 1 Stok anda misalnya cuman ada ; unit, jika anda ingin menampilkan in*ormasi stok kamera tersebut ke calon pembeli anda maka anda bisa melakukannya dari sini. 7euntungan bagi pemilik toko online dan calon pembeli + Pemk toko onne : |ka kebetuan produk yang anda |ua tersebut fast movng ( produk yang aku keras ) maka nformas ketersedaan stok terhadap caon pembe bsa mempengaruh caon customer anda untuk sesegera mungkn mengamb keputusan untuk sesegera mungkn meakukan order agar tdak kehabsan. Sangat berguna ketka toko onne anda sedang ada promo dskon. Caon pembe : Mengetahu ketersedaan stok bsa meyaknkan mereka bahwasanya apaba mereka membe produk tersebut mereka yakn barang yang mereka pesan bsa mereka dapatkan. #ntuk mengakti*kan *itur ini 1. Centang pada " Enabe stock management at product eve " 2. Is |umah stok produk anda ,ari kita coba lihat 0 pre!iew 1 tampilan halaman produk tersebut, anda akan melihat jumlah stok produk anda disana.
SHIPPING Kk Shppng Pada bagian shipping ini berguna untuk mensetting atau memasukkan in*ormasi mengenai + 1. Berat Produk tersebut 2. Dmens atau ukuran pan|ang, ebar dan tngg produk tersebut 3. Shppng cass berguna untuk menerapkan ongkos krm dar sebuah produk yang se|ens ( Fat Rate ) Penjelasan Shipping Class : %gar lebih mudah memahami Shipping "lass ini , kami akan menerangkan dengan membuat contoh penerapannya. ,isalnya anda akan menerapkan ongkos yang sama untuk semua produk kamera digital yang anda jual di toko online anda . %ndai kata & anggap saat ini anda menjual 7amera digital berbagai merk ditoko online anda, kemudian anda ingin menerapkan ongkos kirim yang sama untuk semua kamera digital yang ada di toko online anda tersebut 0 contoh + ongkos kirimnya /p.?@@.@@@ 1 7ita harus membuat sebuah shipping class yang khusus agar semua ongkos kirim untuk kamera digital yang ada di toko online anda tersebut sama. Dengan begitu anda akan lebih mudah me-manage ongkos kirim untuk produk kamera digital yang lain di kemudian hari. Buka di Tab baru web browser anda halaman Shipping Classes 1. Kk Products 2. Ph Shppng Casses 3. Tus Shppng Cass yang kta ngnkan ( daam contoh n kam membuat shppng cass baru untuk semua kamera dgta maka kam tus )amera Digital ) 4. Sug = Tus sa|a kamera-dgta ( cara penusan memaka huruf kec semua dan paka tanda mnus ) 5. Kk tombo Add New Shppng Cass Setelah itu Shipping "lass baru untuk 7amera Digital akan muncul disebelah kanan Buka di Tab baru web browser anda halaman *ooCommerce Settings 1. Kk WooCommerce 2. Kk Settngs 3. Ph Shppng 4. Ph Fat Rate 5. Cost Per Order. Pada tutora kemarn pada angkah kema kta teah menuskan baya per ordernya Rp. 20.000 karena kta akan menggunakan Shppng Cass maka kita hapus sa"a biaya tersebut. ( |ka tdak dhapus maka baya pengrmannya men|ad Rp.100.000 + Rp. 20.000 = Rp. 120.000 ) 6. Anda akan mehat Shppng Cass baru yang sudah kta buat pada angkah datas ( Kamera Dgta ) 7. Masukkan ongkos krmnya pada koom tersebut sebesar seratus rbu rupah ( penusannya |angan paka ttk : 100000 ) 8. Kk tombo Save Changes
Sekarang kembali lagi ke halaman Posting Product tadi . Kk Save Draft terebh dahuu pada produk Nkon D5200 DSLR Camera 24.1MP tersebut gunanya agar shppng cass yang tad kta buat muncu dsana. Lhat ag ke bagan Shppng , sekarang Shppng Cass yang kta buat tersebut akan berada dsana #ntuk melihat bagaimana sesungguhnya Shipping "lass diatas bekerja mari kita lihat bersama -sama + Kk Prevew Product ( haaman prevew produk akan terbuka d tab baru web browser anda )
.ihat 3alaman Pre!iew Produk tersebut 1. Kk tombo Add to Chart ( tombo warna abu-abu geap ) 2. Sesaat kemudan akan muncu Notkas atau pembertahun Nkon D5200 .. sudah masuk ke Cart . Lan|utkan dengan meng Kk tombo Vew Cart Pada halaman Diew "art inilah Shipping "lass tadi bekerja , lihat gambar berikut
.ihat pada Shipping $ -lat /ate > disana langsung tertera ongkos kirim untuk kamera digital dengan menggunakan Shipping "lass 7amera Digital sebesar /p. ?@@.@@@ . )ika nantinya anda memposting kamera kedua, ketiga dan seterusnya anda tinggal memakai Shipping "lass 7amera Digital tersebut. #ntuk produk lainnya misalnya Baju, Sepatu, Tas anda juga bisa membuat Shipping "lass yang sama dengan 7amera Digital yang sudah kami contohkan diatas. #ntuk sementara ini, cukup sekian dulu tutorial cara membuat toko online menggunakan 2oo"ommerce ini. Semoga penjelasan kami bisa anda mengerti dengan baik dan benar.
Cara membuat toko online menggunakan WooCommerce (Tahap Sebelas) "ara membuat toko online + Pada tahap sepuluh kemarin kita sudah belajar membuat shipping class untuk ongkos kirim dari salah satu produk yang dalam hal ini atau pada contoh yang kami berikan disana adalah untuk produk kamera digital. 7ali ini kita akan melanjutkannya dengan langkah berikutnya yang tentunya masih berkaitan dengan memposting produk menggunakan Product Type : Simple Product. LINKED PRODUCT Kk Lnked Product
%da 4 bagian yang akan kami terangkan disini + 1. Up-Ses 2. Cross-Ses 3. Groupng
Pada dasarnya ketiga hal diatas berguna untuk menawarkan produk alternati* lainnya ke pelanggan agar mereka membeli produk lain yang masih ada kaitannya dengan produk yang memang mereka inginkan atau mereka cari saat ini. )ika di ibaratkan pada sebuah blog maka linked products ini seperti seperti artikel terkait. "ontohnya seperti berikut ini + )ika pada toko online yang kita buat sekarang ini, nantinya akan terlihat seperti berikut ini + ,ungkin saat ini .inked Products belum bisa langsung anda praktekkan karena anda belum memposting produk : produk di toko online anda. amun nanti setelah produk anda sudah banyak maka anda bisa memakai *itur ini. Berikut penjelasan mengenai .inked produtcs diatas>
Up-Ses #p-Sells ini berguna untuk memberikan & menampilkan pilihan produk yang berkaitan dengan produk yang ditawarkan pada saat customer melihat halaman produk. Lhat demonya dsn /elated produk yang tampil pada halaman tersebut 0 Cou may also like .. 1 merupakan penawaran produk yang dibuat dari #p-Sells Produk yang ditampilkan pada #p-Sells ini sebaiknya produk yang + 1. Mempunya kuatas ebh bak 2. Aksesors yang berkatan dengan produk tersebut 3. d amun anda juga bisa menampilkan produk lainnya yang sesuai dengan keinginan anda.
)ika dilihat dari halaman posting produk tersebut maka akan terlihat seperti gambar berikut
Cara memasukkan produk kedalam Up-Sells Kk pada text area Up-Ses
Ketk nama produk yang ngn dtampkan ( Sebaknya ketk SKU produk yang ngn kta tampkan dsn agar ebh mudah )
Ph Produk yang akan anda tampkan, pada contoh n saya sudah mempostng 3 buah produk dengan SKU CAM |ad kam memh ketga produk tersebut.
Cross-Ses "ross Sells ini mempunyai *ungsi yang sama dengan #p-Sells, namun "ross Sells akan tampil pada halaman "art. 7etika customer meng-klik add to cart dan kemudian meng-klik !iew cart maka produk yang kita pilih untuk ditampilkan akan muncul disana. Produk yang ditampilkan pada "ross Sell ini sebaiknya + 1. Produk yang ag dskon 2. Aksesors yang berkatan dengan produk tersebut 3. d Sama halnya dengan #p-Sells diatas anda juga bisa menampilkan produk lainnya yang sesuai dengan keinginan anda.
Cara memasukkan produk kedalam Cross-Sells Kk pada Text area Cross-Ses Ketk nama produk yang ngn dtampkan ( Sebaknya ketk SKU produk yang ngn kta tampkan dsn agar ebh mudah ) Ph Produknya ( saah satu ) Groupng 5rouping ini akan kami jelaskan pada posting produk dengan Products Data : 5rouped Product. Secara garis besar 5rouping ini akan sangat berguna jika anda mempunyai produk yang banyak dan berencana membuat toko online yang besar dan komplek. Cara membuat toko online menggunakan WooCommerce (Tahap Duabelas) "ara membuat toko online dengan 2oo"ommerce tahap duabelas ini masih melanjutkan langkah sebelumnya pada tahap sebelas. 7emarin kita sudah sampai pada .inked Products yang ber*ungsi seperti layaknya related artikel. ,ari kita lanjutkan dengan langkah berikutnnya dengan membuat attributes dari sebuah produk. %ttributes ini mempunyai *ungsi seperti + Membuat phan ukuran : XL, L, M, S Membuat phan warna : Bru, Kunng, Merah, H|au dan an sebaganya Selain kedua *ungsi diatas anda juga bisa memakai attributes ini untuk berbagai keperluan, tergantung dari jenis produk yang jual pada toko online anda. amun untuk Simple Product *ungsi atribut ini belum bisa di pergunakan secara maksimal. Disini kita hanya bisa membuat satu pilihan saja. Setelah anda memahami *ungsi dari atribut ini maka berikut langkah cara membuatnya + Kk Attrbutes
Kk tombo Add
Anda akan mehat tampan sepert gambar dbawah n 7arena pada contoh ini kami akan memposting sebuah produk kamera ikon dengan warna merah maka kami akan membuat %ttributes untuk kamera ini hanya dengan warna saja yakni warna merah 1. Name : Ketk Warna 2. Vaue : Ketk Merah 3. Centang Vsbe on the product page 4. Kk Save Attrbutes ,aka jika kita pre!iew akan terlihat seperti gambar dibawah+ Kk tab Addtona Informaton
#ntuk langkah berikutnya akan kami sampaikan pada kesempatan mendatang, ,ohon untuk dipahami tehnik memposting produk dengan Product Data : Simple product ini terlebih dahulu karena ini yang paling mudah untuk diterapkan dan dimengerti. Cara membuat toko online menggunakan WooCommerce (Tahap Tigabelas) Tidak terasa tutorial cara membuat toko online dengan menggunakan 2oo"ommerce ini sudah sangat panjang sekali. Dan kami sangat terkejut mengetahui bahwa begitu banyak para sahabat yang begitu antusias mempelajari secara tekun mengenai proses pembuatan sebuah toko online. Pada kesempatan kali ini kita akan mempelajari lebih lanjut mengenai cara memposting produk dengan menggunakan simple product sampai selesai. Pada tahap ke tigabelas ini kita akan langsung ke bagian %d!anced . Tidak banyak yang perlu dijelaskan pada bagian ini karena sangat mudah sekali. ,ari kita lanjutkan dengan mempelajari bagian selanjutnya. ADVANCED
Purchase Note : Anda boeh mengs koom n |ka anda ngn memberkan pesan tambahan untuk pembe anda. Menu Order : Barkan ters angka 0 sa|a agar tdak membngungkan anda. Enabe revews : Secara defaut themes n otomats mencentang phan enabe revews n. Namun |ka anda tdak mengngnkan pengun|ung toko onne anda merevew produk anda maka hangkan tanda centang yang ada dsana.
CUSTOM FIELDS Pada bagian "ustom -ields ini tidak perlu anda isi apapun karena memang tidak begitu penting. .anjutkan dengan langkah berikutnya.
PRODUCT SHORT DESCRIPTION Tulis deskripsi singkat mengenai produk anda tersebut disini. Sebisa mungkin jangan terlalu panjang, tulis saja yang penting : penting saja mengenai produk tersebut.
MYSTILE CUSTOM SETTINGS Tidak ada yang perlu anda lakukan pada bagian custom settings ini.
Sekarang hat ke bagan pane sebeah kanan. Lhat pada bagan berkut : 1. Product Categores 2. Product Tags 3. Product Gaery 4. Features Image
#ntuk lebih jelasnya perhatikan gambar berikut ini.
#ntuk Product "ategories dan Product Tags 0 Point ? dan 8 1 tentunya anda sudah paham maksud dan cara penggunaannya. Sedangkan untuk point 4 dan = berikut penjelasannya + Product Gaery %dalah tempat untuk meletakkan image atau gambar pendukung produk kita 0 tampak belakang, tampak dari atas , tampak samping , dll 1 Featured Image %dalah image atau gambar yang paling utama dan yang akan terlihat besar. -eatured image ini juga secara otomatis akan tampil juga pada product gallery 0 tampak depan 1 -eatured image ini akan menjadi image yang terlihat terlebih dahulu oleh calon pembeli kita. .ihat contoh pada gambar dibawah ini.
"ukup jelas bukan maksud dan tujuan dari Product 5allery dan -eatured Image ini EE
Mari kita mulai dengan mengupload image atau gambar untuk Product Gallery terlebih dahulu Kk Add product gaery mage
Kk tombo Seect Fes
Kemudan carah mage yang sudah anda persapkan ( anda boeh mengupoad 4 - 6 gambar untuk Product Gaery n ). Pada contoh n kam hanya mengupoad 1 gambar sa|a. Seteah ketemu gambar yang sudah anda persapkan maka ph gambar tersebut kemudan kk open untuk memua proses upoad gambar.
Seteah proses upoad gambar sudah seesa maka an|utkan dengan mengkk tombo Add to gaery
Seteah tu anda akan mehat mage gaery tersebut sudah berada dsana )ika anda mengupload = buah gambar maka anda akan melihat = buah gambar juga disana. Mari kita lanjutkan dengan mengupload eatured !mage Kk Set featured mage
Pada *eatured image ini kita hanya perlu untuk menupload ? buah gambar 0 biasanya gambar produk tampak depan 1. .akukan hal yang sama seperti pada langkah mengupload image atau gambar untuk Product 5allery diatas. )ika sudah selesai maka anda akan melihatnya seperti pada gambar berikut.
Proses memposting product dengan menggunakan product data : simple product sudah selesai. Silahkan klik tombol publish untuk melihat hasil kerja anda. Demo secara ve nya bsa dhat dsn #ntuk hasil yang lebih baik usahakan image yang anda pergunakan berukuran lebar dan tinggi yang sama. Dari hasil uji coba kami maka yang terbaik adalah menggunakan image berukuran ?@@@ ( ?@@@ p(. Semoga tutorial ini bisa berman*aat bagi anda semuanya. Tutorial ini akan kami lanjutkan pada kesempatan mendatang. Cara membuat toko online menggunakan WooCommerce (Tahap Empatbelas) Pada tahap empat belas + cara membuat toko online dengan woocommerce ini kita akan membahas mengenai cara mengkustomisasi tampilan toko online kita. Seperti yang kita ketahui bersama , saat ini kita hanya bisa melihat tampilan toko online yang kita buat tersebut masih seperti sebuah blog dan tidak terlihat selayaknya sebuah toko online. Secara khusus pada tahap ke empat belas ini kita hanya akan membahas mengenai hal tersebut diatas. Setidaknya untuk lebih memberi semangat kepada kita bahwasanya proses pembuatan toko online ini sudah mendekati tahap *inishing. Target kita adalah merubah tampilan toko online kita dari yang awalnya hanya menampilkan postingan artikel 0 blog 1 pada halaman homepage menjadi menampilkan produk saja #ntuk menampilkan produk yang kita jual pada halaman depan maka langkah yang perlu kita lakukan adalah sebagai berikut + 1. Kk Myste 2. Kk Theme Optons 3. Kk Homepage
7emudian pada halaman 3omepage tersebut lanjutkan dengan langkah berikut + 1. Centang dspay recent products 2. Masukkan angka berapa |umah produk yang ngn anda tampkan pada haaman homepage. Msanya pada contoh kam n, kam tus 8 |ad nantnya pada haaman homapage toko onne kta hanya akan muncu 8 buah produk sa|a. 3. Kk tombo Save A Changes
,aka jika kita lihat toko online kita sekarang ini , akan terlihat seperti gambar berikut.
Pada gambar diatas masih terlihat postingan blog dibawah produk toko online kita . ah untuk menghilangkan postingan tersebut maka kita perlu melakukan langkah berikutnya. 1. Kk Bog 2. Hangkan tanda centang untuk menampkan postngan artke yang berasa dar bog kta 3. Kk tombo Save A Changes
Sekarang tampilan halaman depan toko online kita sudah menampilkan produk saja . .ihat pada gambar berikut ini. Lve Demo Pada contoh diatas hanya nampak = buah produk , karena sampai saat ini kami hanya membuat atau memposting produknya hanya = buah saja hanya sebagai gambaran saja. #ntuk tahap selanjutnya akan kami jelaskan pada kesempatan mendatang. Semoga tutorial kali ini bisa berman*aat bagi anda. Cara membuat toko online menggunakan WooCommerce (Tahap Limabelas) Setelah kita kemarin membahas mengenai menempatkan produk yang ada di toko online kita berada pada halaman 3omepage maka kali ini kita akan melanjutkannya dengan me- ,ake '!er tampilannya agar menjadi lebih menarik lagi. Template ,ystile ini mempunyai banyak kelebihan yang memungkinkan kita untuk memodi*ikasi template tersebut menjadi lebih baik dan tampil beda dengan toko online yang lain meskipun sama- sama menggunakan template tersebut. Semua tergantung dari kreati*itas anda, namun disini tentu kami akan mencoba menjelaskan tentang bagaimana cara mengkustomisasi template ,ystile ini pada tara* yang mudah saja. Memasang Banner pada Homepage ,ari kita mulai dengan memasang sebuah welcome banner yang besar pada halaman 3omepage toko online kita. #ntuk itu persiapkanlah sebuah image dengan spesi*ikasi sbb+ #kuran 5ambar untuk Banner Lebar : 1247 Tngg : 405 )ika anda belum mempunyai image untuk banner tersebut anda boleh memakai gambar diatas sekedar untuk keperluan latihan agar anda bisa langsung praktek di toko online anda. Setelah kita persiapkan sebuah gambar untuk banner kita maka yang perlu anda lakukan adalah + 1. Kk Myste 2. Kk Theme Optons 3. Kk Homepage 4. Kk Featured Image 5. Centang Dspay a Banner
Setelah anda centang display a banner anda akan melihat tampilan seperti gambar berikut. 7emudian lakukan dengan langkah berikut ini 1. Kk tombo upoad
"ari image banner tersebut diP" atau laptop anda dan mulailah proses upload image tersebut. Setelah imagenya sudah terupload maka akan terlihat tampilan seperti pada gambar seperti berikut
Scroll kebawah sampai anda melihat tampilan seperti dibah ini kemudian pastikan anda + 1. Centang Sze : Fu Sze 2. Kk tombo Use ths mage
Setelah itu banner yang ingin kita pasang di toko online kita sudah terlihat seperti gambar dibawah. 1. Hapus tusan pada banner Headnes 2. Hapus tusan pada banner stand rst 3. Kk tombo Save A Changes
Sekarang lihat toko online anda maka di toko online anda tersebut sudah terpasang sebuah banner yang besar disana. Selamat mencobanya dan semoga anda tidak mengalami masalah yang berarti. Sampai jumpa lagi pada tutorial selanjutnya. "ara membuat toko online menggunakan woocommerce 0 tahap enam belas 1 "ara membuat toko online menggunakan 2oo"ommerce tahap enam belas kali ini kita akan melanjutkan memoles tampilan toko online yang masih terlihat sangat sederhana sekali. )ika anda belum melakukan banyak sentuhan yang berarti maka tampilan toko online anda kurang lebih akan terlihat mirip dengan yang ada padatutora ke ma beas kemarin. )adi dalam tutorial ini kami akan membuat atau mengkustomisasi tampilan toko online kami berdasarkan selera kami. amun kami harap anda bisa mengambil pengetahuannya dan anda bisa berkreasi sesuai dengan selera anda sendiri. #ntuk mengkustomisasi tampilan toko online kita maka kita akan bermain-main dengan template ,ystile itu sendiri. ,ari kita mulai dari atas pada menu ,ystile : Theme 'ptions. Kustomsas CSS 1. Kk Myste 2. Ph Theme Optons 3. Ph Genera Settngs 4. Ph Ouck Start
7ita akan merubah warna themes ,ystyle tersebut dari warna orange 0 de*ault.css 1 ke warna hijau 0 green.css 1. ,ari kita lihat terlebih dahulu tampilan menu pada toko online kita .
Dari halaman theme options-nya anda akan melihatnya seperti berikut ini.
7lik pada tulisan de*ault.css diatas kemudian pilih warna yang sesuai dengan pilihan anda. Dalam contoh dibawah ini kami akan menggantinya dengan warna hijau maka kami memilih green.css
Setelah anda pilih warna kesukaan anda maka lanjutkan dengan mengklik tombol Sa!e %ll "hanges
Tunggu beberapa saat sampai anda melihat noti*ikasi seperti pada gambar dibawah ini 0 'ption #pdated 1.
Setelah anda melihat noti*ikasi seperti diatas silahkan anda lihat menu pada toko online anda. Setiap nantinya anda akan melakukan perubahan dan menyimpannya maka noti*ikasi tersebut akan muncul, itu pertanda proses penyimpanan atau update pada themes options template tersebut sudah berhasil. Pada tahapan selanjutnya gambar tentang noti*ikasi tersebut tidak akan kami tampilkan dan kami anggap anda sudah mengerti dan paham jadi tidak perlu dijelaskan dua kali.
"oops# kita ada sedikit masalah pada big banner$ lihat gambar diba%ah. Pada banner tersebut ada tulisan 0 warna putih 1 dengan tulisan sbb. Wecome to our store We hand make the most awesomest products n the word
%da 8 cara untuk menghapus atau menghilangkan tulisan tersebut + 1. Menghapus sementara ( not recommended ) 2. Menghapus secara permanen tusan tersebut ( recommended )
enghapus Sementara #ntuk menghapusnya secara sementara anda bisa mengulangi langkah yang ada pada tahap ma beas kemarn amun jika nanti anda melakukan perubahan lagi, secara otomatis tulisan tersebut akan muncul lagi di atas banner tersebut. )adi menurut kami itu sia-8 saja dan buang tenaga makanya tidak kami rekomendasikan cara tersebut. enghapus secara permanen Dengan menghapusnya secara permanen anda tidak perlu kawatir lagi tulisannya akan muncul lagi di kemudian hari. %gak sedikit rumit namun tidak sulit, berikut cara menghapus tulisan tersebut secara permanen. 1. Kk Appearance 2. Ph Edtor 3. Anda akan angsung mehat kode stye.css
Sekarang *okus ke panel sebelah kanan anda.
.ihat ke halaman bawah & scoll mouse anda ke bawah, cari theme-options.php kemudian setelah ketemu klik langsung untuk menampilkan kode php pada *ile tersebut..
%nda akan melihat halaman theme-options.php tersebut seperti pada gambar berikut.
%pa langkah selanjutnya E Sebelum kami lanjutkan ada baiknya anda mengerti halaman apa yang sebenarnya yang akan kita edit ini. 7ode php diatas merupakan kode dari option panelnya template ,ystile berikut ini 0 mohon jangan ikut buka , sekedar memberi in*ormasi saja 1.
.ihat pada area yang sudah kami tandai dengan warna merah diatas. Tulisan itulah yang akan kita hilangkan secara permanen melalui halaman theme-options.php ini. Sudah mengerti maksud dan tujuannya, mari kita memulainya, lihat kembali kode theme- options.php tersebut.
?. 7lik "trl F - maka akan muncul pencarian cepat. .ihat pada gambar sebelah pojok kiri bawah 0 ada tanda panah merah 1
8. 7etikkan + *elcome to our store $ kemudian tekan enter $ anda akan melihat tulisan tersebut 2elcome to our store tersebut disana dan dibawahnya anda juga akan melihat tulisan *e hand make the most a#esomest products in the #orld
3apus kedua tulisan tersebut , 3anya tulisan tersebut saja jangan dihapus juga tanda petik diatas 0 G 1 yang berdempetan dengan tulisan tersebut, ada 8 tanda petik yakni sebelum tulisan dan sesudah tulisan itu. ,ohon berhati hati ketika menghapusnya. Dan pastikan setelah anda hapus kondisi kode tersebut seperti pada gambar dibawah 0 tanda petik masih ada 1
7lik Tombol update *ile.
Setelah itu anda akan melihat noti*ikasi update *ile theme-options.php anda sudah sukses.
"oba anda lihat toko online anda sekarang , 'oppsss> kok masih ada tulisannya ya EEE itu karena kita tadi belum menghapusnya dari Theme 'ptions template ini. ,ari kita tuntaskan dengan langkah berikut ini. 1. Kk Myste 2. Kk Theme Optons 3. Kk Homepage 4. Kk Featured Image 5. Pastkan tusan pada banner headne dan banner stand rst anda hapus semuanya 6. Kk tombo Save A Changes ,ulai saat ini anda tidak perlu kawatir lagi tulisan itu akan muncul diatas banner toko online anda jika anda mengedit atau merubah settingan template ,ystile ini di kemudian hari. "ukup sekian dulu tutorial kali ini, semoga anda mengerti dan bisa berman*aat bagi anda semua. "ara membuat toko online menggunakan woocommerce 0tahap tujuh belas1 3ari ini mari kita lanjutkan lagi proses mengkustomisasi template toko online kita agar lebih menarik lagi dari hari kemarin. 7ami harap anda tidak bosan dalam mengikuti tutorial yang S#P6/ P%)%5 ini . 3arapan kami adalah anda bisa benar-benar mengerti dan paham betul cara membuat toko online dengan memakai 2oo"ommerce ini. ,eskipun pada suatu hari nanti anda tidak memakai theme mystile yang gratis ini, katakanlah anda sudah mempunyai uang cukup untuk membeli template toko online yang premium namun yang memakai 2oo"ommerce juga maka pengetahuan yang anda dapatkan dari kami masih bisa anda pergunakan. %pa yang akan kita pelajari hari ini tidaklah terlalu sulit dan masih sangat mudah untuk dipahami. Silahkan anda bukan Theme 'ptions template ,ystile dari halaman dashboard toko online anda. Kk Myste Theme Optons
%da beberapa bagian disana, sebagian kecil sudah kami jelaskan pada tutorial sebelumnya dan sekarang akan kami tambahkan lagi dengan menjelaskan menu-menu selain yang sudah pernah kami jelaskan dan sudah kita lakukan bersama-sama. Penjelasan pada tutorial ini persis seperti apa yang kami lakukan juga ketika membuat tulisan ini. Genera Settngs Kk Genera Settngs Kk Dspay Optons
Pada Display 'ptions ini yang akan kita lakukan adalah sebagai berikut + 1. Post / Page comments : Ph Post ony 2. Post Content : Ph The Excerpt 3. Dspay Breadcrumb : Anda bsa memakanya atau tdak namun daam contoh n kam akan memaka Breadcrumb 4. Dspay Pagnaton : Centang n 5. Pagnaton Stye : Ph Numbers 6. Kk Tombo Save A Changes untuk menympan konguras n
Styng Optons Pada styling option ini anda bisa mengkustomisasi background toko online kita dan juga mungkostomisasi warna links, ho!er dan juga warna button. Silahkan anda coba ganti background dan mencoba mengganti warna links ataupun tombol pada toko online anda.. )angan kawatir jika anda salah pada bagian ini tidak akan berakibat *atal atau merusak toko online anda..
Silahkan anda bereksperimen sendiri dengan kedua menu diatas. )ika ada kesulitan silahkan bertanya pada kolom komentar. Sampai disini dulu tutorial kami kali ini dan sampai jumpa pada tutorial selanjutnya. Cara membuat toko online menggunakan WooCommerce (Tahap Delapan Belas) Pada tahapan ke delapan belas ini kita akan mempelajari langkah selanjutanya dalam tutorial cara membuat toko online dengan woocommerce yang masih dalam area theme options seperti halnya kemarin. )ika kemarin kita telah membahas mengenai Display 'ption dan juga Background maka kali ini kita akan membahas mengenai Typography dan .ayout 'ptions. Typography ini ber*ungsi untuk mengatur jenis huru* yang akan kita pakai dalam toko online kita. )ika kita lihat sekarang ini , toko online kita memakai huru* %rial yang terlihat tidak begitu bagus. #ntuk itu pada kesempatan ini kita akan mencoba merubah huru* %rial tersebut melalui menu Typography ini. Dalam contoh ini kami akan memakai *ont atau huru* 'swald namun anda bisa mencobanya dengan menggunakan *ont lainnya apabila anda kurang menyukainya. Typography '! ari kita mulai bela"ar mengkustomisasi +ont toko online kita 1. Kk Typography 2. Centang Enabe Custom Typography
2! ,anti +ont -rial tersebut dengan .s#ald 1. Kk pada Ara dan kemudan car Oswad gant semua dengan Oswad 2. Kk Tombo Save A Changes
Layout Optons Pada bagian layout ini kita bisa merubah tampilan kerangka toko online kita dari yang *ull page menjadi di dalam B'H 1. Kk Layout Optons 2. Centang Enabe boxed Layout 3. Ph poss Sdebar dsebeah kanan atau dsebeah kr 4. Kk tombo Save A Changes
,aka setelah anda simpan , tampilan toko online anda terlihat lebih rapi didalam bo(.
"ara membuat toko online menggunakan 2oo"ommerce 0Tahap Sembilan Belas1 Pada tahap sembilan belas ini, cara membuat toko online dengan 2oo"ommerce akan membahas tentang bagaimana mengkustomisasi toko online kita dengan menambahkan *itur chatting untuk customer support yang berguna untuk memaksimalkan penjualan toko online anda tersebut. #ntuk melakukan hal diatas kita akan memasang atau menginstall ? buah plugin gratis yang bisa anda pakai selamanya. Proses penginstallan plugin ini secara detail bisa anda lihat pada artikel kami yang berjudul + Cara nsta pugn d wordpress. "lickDesk nama plugin yang akan kita pergunakan . %pa kelebihan plugins tersebut dan kenapa kami memilihnya E Plugins tersebut selain mudah digunakan oleh newbie seperti kita ini, plugins tersebut memungkinkan kita untuk merubah warna tampilannya sehingga bisa kita sesuaikan dengan warna yang ada pada toko online kita tersebut.
Memasang tur Chattng #ntuk kebutuhan customer support ini kita akan memakai "lickDesk yang mempunyai penampilan menarik dan nyaman untuk dilihat. Dersi gratis dari "lickDesk hanya membolehkan kita untuk menda*tarkan ? agent saja atau kita hanya bisa membuat akun untuk ? orang customer ser!ice. Cara install Click&esk '! /ogin ke Dashboard *ordPress anda 1. Kk Pugns 2. Ph Add New 3. Pastkan anda pada poss Search 4. Ketk Chat 5. Kk tombo Search Pugns
2! 0nstall ClickDesk
1! -ktifkan Plugins 'egister Click&esk (ccount Setelah anda mengakti*kan plugin "lickDesk diatas maka selanjutnya kita akan menda*tar sebuah akun baru untuk agent toko online kita yang nantinya akan menjadi akun customer support yang bisa kita pakai. '! Silahkan menu"u ClickDesk Dashboard 1. Kk atau ph CckDesk, possnya dbawah Toos
2! -nda akan melihat halaman seperti gambar berikut 1. Kk tombo Go to CckDesk Dashboard
1! Buatlah sebuah akun ClickDesk #ntuk membuat atau menda*tar akun "lickDesk caranya sangat mudah sekali. %nda bisa menggunakan akun 5mail anda ataupun akun Cahoo anda dan login lah dengan akun anda tersebut. )ika anda belum mempunyai salah satu akun tersebut maka anda bisa membuatnya terlebih dahulu. 7ami sarankan anda membuat akun 5mail saja + baca cara membuat akun Gma
2! /ogin dengan -kun ,mail anda Bukalah tab baru di webbrowser anda dan bukalah sign in ke akun gmail anda. Setelah berhasil Sign ini maka kembali ke
3! Buatlah nama -gent untuk operator Customer Support toko online anda .ihat gambar berikut dan isilah sama persis seperti yang tertera disitu. Setelah selesai 7lik tombol Tes, "reate an %gents
4! Selan"utnya setelah sukses membuat agent toko online anda maka anda akan melihat halaman seperti gambar berikut
)ustomisasi Pro*le (gent Pada gambar diatas terlihat bahwasanya %gent toko online kita belum terdapat photo, jadi selanjutnya kita akan menambahkan photo dan yang lainnya. 5! )lik nama agent untuk mulai mengkustomisasi pro6le 7 nya
8! )lik nama agent untuk mulai mengkustomisasi pro6le 7 nya 9pload Photo + 7lik tombol #pload dibawah photo yang kosong tersebut, setelah anda upload mohon jangan klik tombol Sa!e "hanges. .anjutkan ke tahap& tab berikutnya I, etwork
0 :et#ork + #ntuk network pilih 5oogle Talk or 5oogle %ppa&,ail. 7emudian masukkan username anda, jika email anda beralamat nama;anda<gmail!commaka username anda adalah nama;anda<gmail!com
Phone : #ntuk I,& "ountry pilih saja Skype 0 jika anda punya akun Skype1 jika belum maka isi saja kolom ID& umber dengan no telpon anda dan akhiri dengan mengklik tombol Sa!e "hanges
Menambahkan Photo (gent untuk homepage #ntuk mempercantik tampilan "lickDesk di toko online kita maka kita perlu untuk menambahkan Photo %gent kita agar ketika customer kita ingin bertanya mereka bisa membayangkan wajah orang yang sedang mereka ajak "hatting. Sekedar saran sebaiknya anda memasang Photo asli dan jangan photo orang lain karena secara psikologis Photo asli lebih meyakinkan dari pada photo orang lain atau bahkan photo orang luar negeri.
=! )lik Tab /i>e Chat
'(! Setelah terbuka anda akan melihat tampilan seperti gambar berikut 1. Pastkan anda berada pada poss UI & Themes 2. Theme = Ph Soca ( Medum ) 3. Poston = Bottom Rght 4. Kk Tombo Upoad untuk memua upoad Photo agent anda 5. Coor = Phah warna yang sesua dengan yang anda ngnkan 6. Kk Tombo Save Changes
''! engganti yang ada pada *idget Chatting Tersebut dengan keterangan bahasa 0ndonesia #ntuk merubah tulisan bahasa inggris pada 2idget "hatting "lickDesk maka anda bisa merubahnya dengan mengklik tab -orm I .ocaliJation. %da lima link disana, silahkan anda lihat sendiri karena sudah jelas dan mudah untuk dilakukan. )angan lupa untuk 7lik Tombol #pdate setelah anda mengedit tulisan yang ada disana.
'2! enambahkan akun T#itter dan +acebook anda %nda bisa menambahkan akun Twitter dan -acebook anda dengan mengklik tab Social
Setelah ditambahkan akan terlihat seperti berikut ini.
)ika dilihat di Toko online kita maka anda akan melihatnya seperti berikut ini. T#itter 7lik Icon Twitter dan #pppss>>>. KK 6rror
,ari kita bereskan permasalahan diatas, lihat kembali ke clickdesk dashboard anda. 7lik .ink 5rand %ccess .
,aka akan muncul Pop up untuk meng : %uthoriJe %PP. 7lik tombol %uthoriJe %PP tersebut
Setelah Proses %uthoriJe %PP Twitter tersebut selesai maka anda akan melihat halaman Social itu lagi tanpa ada pertanda khusus lainnya jadi tidak ada perubahan sama sekali. amun yang perlu anda lakukan adalah 7lik Tombol Sa!e "hanges sekali lagi untuk menyimpan apa yang sudah kita lakukan diatas.
Setelah anda Sa!e & Simpan mari kita lihat lagi toko online kita . /e*resh terlebih dahulu kemudian klik icon Twitter lagi. 3emmm>. permasalahan tadi sudah hilang. "ongratulation KK
+acebook Setelah kita lihat Twitternya mari kita lihat juga -acebooknya.
%khirnya proses Install dan mengkustomisasi "lickDesk sudah selesai dan siap untuk kita pergunakan, Semoga penjelasan kami diatas bisa anda mengerti dan pahami dengan baik serta anda tidak mengalami masalah dalam mengikuti tutorial ini. Pada kesempatan mendatang kita akan melanjutkan tutorial ini dengan tema yang berbeda. Cara membuat toko online menggunakan WooCommerce (Tahap Dua Puluh) "ara membuat toko online tahap dua puluh ini akan membahas mengenai kelanjutan tahapan sebelumnya. )ika kemarin kita telah menambahkan *asilitas chatting untuk customer support kita maka selanjutnya kita akan memasang sebuah Sticky Bar untuk memperkuat promosi toko online anda. Idenya begini + 7etika toko online anda jadi dan sudah online nanti terus misalnya anda mempunyai sebuah produk baru , katakanlah nama produk baru anda tersebut L Ba|u Batk |og|a L dan anda berkeinginan untuk *okus mempromosikan produk tersebut agar setiap calon customer anda yang datang bisa dengan mudah mengetahui bahwasanya anda menjual L Ba|u Batk |og|a M. .oh kan sudah ada Banner yang besar E Banner yang besar pada halaman 3omepage tersebut hanya akan terlihat oleh cutomer anda jika mereka membuka homepage anda , sementara lebih dari <@ N pengunjung biasanya tidak pernah melihat halaman 3omepage sebuah website, blog ataupun toko online. )adi peranan Stiky bar disini cukup berpengaruh sekali terhadap promosi toko online anda tersebut. amun jika anda kurang setuju dengan pendapat kami juga tidak masalah karena ini cuman sekedar pemikiran kami berdasarkan hasil analisa pengunjung yang datang ke blog ini. Selain dari *ungsi Sticky Bar diatas sebagai penunjang sarana promosi maka Sticky Bar juga sangat ber*ungsi untuk menupi ruangan yang kosong pada halaman toko online kita sebelah atas. .ihat gambar berikut ini +
)adi ada 8 *ungsi disini + 1. Stcky Bar berfungs untuk sarana promos ( Ca To Acton ) 2. Stcky Bar |uga berguna untuk menutup space kosong pada bagan atas toko onne kta. Lhat Lve Demo Ada 3 buah Stcky bar yang bsa anda paka untuk keperuan n: Silahkan anda pilih dari tiga Sticky Bar dibawah dan tentunya yang sesuai dengan keinginan anda. +. ,ordPress -oti*cation .ar
/. -oti*cation .ar
0. luid -oti*cation .ar
Dalam tutorial ini kami akan memakai yang Sticky Bar yang pertama yakni 2ordPress oti*ication Bar. Berikut langkah yang bisa anda lakukan untuk memasang Sticky Bar tersebut. '! /ogin ke dashboard Toko online anda dan silahkan menu"u ke -dd :e# Plugin 1. Kk Pugns 2. Kk Add New 3. Ketk WordPress Notcaton Bar 4. Kk tombo Search pugns
2! Setelah hasil pencariannya muncul? anda akan melihat halaman seperti berikut 1. Kk Insta Now
1! Setelah selesai diinstall lan"utkan dengan mengaktifkannya
2! Setelah anda aktifkan maka lan"utkan dengan mengklik Settings
3! Pada halaman settings ini kita akan melakukan beberapa hal berikut 1. Centang untuk menampkan Stcky Bar tersebut 2. Ketkah pesan promos produk anda tersebut 3. Ketk tusan yang akan tamp pada tombo Ca to acton d Stcky Bar anda 4. Masukkan nk atau ur produk anda dsn. |ka customer anda mengkk tombo ca to acton pada pont no 3 datas maka akan menu|u kehaaman produk yang anda ketk urnya dsn. 5. Centang Button Target dan Sekagus centang |uga Poston Stcky Bar anda 6. Background coor. Daam contoh n kam ngn warna h|au yang sama dengan warna h|au dar CckDesk yang sudah kta nsta kemarn ( #7EA333 ) 7. Kk tombo Save Changes
Sekarang lihat toko online anda , maka saat ini Sticky Bar sudah berada diatas header toko online anda dan mengisi space yang kosong tersebut. "ara membuat toko online menggunakan 2oo"ommerce 0Tahap Dua Puluh Satu1 3ari ini kita akan melanjutkan tutorial cara membuat toko online dengan 2oo"ommerce ini dengan pokok pembahasan cara membuat custom menu atau merubah menu bawaan ,ystile yang kita pakai sebagai template atau themes toko online kita tersebut. Seperti yang kita ketahui bersama, saat ini toko online yang kita buat sudah mempunyai menu yang muncul secara otomatis tanpa kita buat sendiri. Secara de*ault susunan menu toko online kita akan terlihat seperti gambar berikut +
%nda bisa merubah menu tersebut dengan mudah dan bisa anda sesuaikan dengan kondisi toko online anda. ,isalnya anda ingin menambahkan menu untuk halaman about us, tata cara belanja, kategori produk anda, contact page dan lain sebagai. #ntuk keperluan tutorial ini kami akan membuat beberapa halaman statik & static page dan juga beberapa kategori produk yang bertujuan untuk memudahkan calon pembeli anda dalam memilih dan mencari produk di toko online tersebut. 1alaman Static Page 7ami akan membuat halaman static page sebanyak 4 buah dengan perincian sbb + 1. Haaman tata cara bean|a 2. Haaman about us 3. Haaman contact page %nda boleh membuat halaman static apa saja , silahkan disesuaikan dengan keperluan anda.
)ategori Produk 7ami akan membuat = buah kategori produk sebagai contoh saja supaya custom menu kita kali ini bisa sedikit menggambarkan situasi yang sebenarnya dalam proses pembuatan toko online anda nantinya. 7ami akan membuat kategori produknya sbb + 1. Ba|u anak 2. Ba|u Wanta 3. Ba|u Pra 4. Kamera dgta ,ohon disesuaikan dengan produk anda terlebih dahulu, kira : kira kategori produk anda yang cocok dengan produk anda tersebut
Cara membuat Haaman Statc Page Berikut kami berikan contoh cara membuat sebuah halaman static page : 1. Kk Pages 2. Kk Add New 3. Tus |udu Haaman Statc yang akan anda buat, ms. Tata cara bean|a 4. Tus s statc page anda 5. Kk Tombo Pubsh
)husus untuk pembuatan halaman contact page maka sebelum anda membuatnya seperti diatas ? anda terlebih dahulu harus melakukan setting Contact 0nformation pada Theme .ptions Silahkan menuju Theme 'ptions ,ystile anda. kemudian lanjutkan dengan hal berikut ini 1. Kk Contact Page 2. Ph Contact Informaton 3. Centang Enabe Contact Informaton Pane 4. Tus |udu Lokas Toko Onne anda , ms. Our Store Locaton atau daam contoh n kam buat Woo Store Locaton 5. Tus aamat engkap anda 6. Tus |uga no Tep rumah anda / No tep Toko anda 7. No Fax Anda 8. Tus ema anda . Ema yang dtus dsn akan berfungs sebaga ema penerma apaba ada customer toko onne anda menghubung anda meau haaman contact tersebut 9. Twtter Username dkosong sa|a . | tdak berfungs | 10. Centang Enabe Subscrbe 11. Kk Tombo Save A Changes
)ika anda tidak melakukan langkah ini terlebih dahulu dan anda langsung melakukan %dd ew Page untuk halaman "ontact maka anda akan melihat pesan error seperti gambar berikut
Sekarang kembali ke halaman %dd ew Page tadi diatas untuk membuat static page halaman contact
,ari kita lihat terlebih dahulu bagaimana penampilan toko online kita setelah kita menambahkan 4 buah halaman static page yang baru tersebut. .ihat bagian ,enu
)ika kita perhatikan pada gambar diatas maka menu toko online kita menjadi jelek dan kurang sedap dipandang mata. 7enapa terjadi demikian E hal ini disebabkan karena ,ystile atau themes yang kita pakai dalam tutorial ini secara otomatis akan menambahkan semua static page baru menjadi sebuah menu. .antas bagaimana cara memperbaiki hal tersebut. "aranya sangat mudah kok , nanti akan kami jelaskan cara memperbaiki susunan menu tersebut. Sekarang mari kita lanjutkan dengan membuat kategori produk terlebih dahulu baru kemudian kita susun secara bersamaan agar tidak 8 kali kerja.
Cara membuat Kategor Produk Seperti yang sudah kami jelaskan diatas, kategori produk bisa memudahkan customer kita dalam memilih barang yang ada di toko online kita terlebih jika kategori produk tersebut kita pasang atau kita tempatkan pada menu utama toko online kita. Sebagai gambarannya Silahkan lihat $$ Contoh Kategor Produk OO 7lik. Begitulah kira : kira maksud dari kategori produk tersebut. )adi misalnya anda menjual berbagai macam jenis produk maka calon customer toko online anda akan mudah mencari produk yang sejenis. #ntuk membuat kategori produk silahkan ikuti langkah demi langkah berikut ini + '! ari kita menu"u menu products 1. Kk Products 2. Ph Categores
2! )emudian mulailah membuat kategori produk toko online anda 1. Name = Tus nama kategor produk anda , msa : Ba"u -nak 2. Sug = Tus sug nya dengan huruf kec semua dan spasnya d gant dengan tanda - ( mnus ) , msa : ba"u;anak 3. Dspay Types = Ph Products 4. Upoad sebuah gambar untuk kategor produk tersebut. Usahakan ukurannya ukuran tngg dan ebarnya sama, msa : 300 x 300 px 5. Kk tombo Add New Product Category
1! 9langi langkah diatas untuk membuat kategori produk yang lainnya? setelah selesai maka akan terlihat seperti pada gambar berikut
ah sekarang yang perlu kita lakukan selanjutnya adalah mendapatkan link masing- kategori produk yang sudah kita buat diatas . "ara mendapat link kategori produk anda adalah sbb + 2! /etakkan / arahkan kursor mouse anda tepat diba#ah salah satu nama kategori produk anda yang akan kita cari link url; nya
3! Setelah posisi kursor anda sudah berada diba#ah nama kategori produk ? pastikan anda melihat tampilan seperti gambar diba#ah ini!
4! )lik kanan Vie# dan )lik copy link location
5! Pastekan /ink url produk kategori anda tersebut di :otepad! 9lagi langkah tersebut untuk mendapatkan link url kategori produk anda lainnya
.ink diatas akan berguna pada saat kita akan membuat custom menu. Setelah selesai semua maka selanjutnya kita akan menempatkan kategori produk tersebut pada menu utama toko online kita.
Cara mengatur uang susunan Menus ,ari kita gabungkan antara static page yang telah kita buat diatas dan juga kategori produk toko online kita. '! Silahkan menu"u enu options 1. Kk Appearance 2. Ph Menus
2! Setelah terbuka lan"utkan dengan langkah berikut 1. Tus nama menu anda , Msa : Menu Utama 2. Kk tombo Create Menu 1! Selan"utnya -nda akan melihat halaman seperti berikut 1. Kk Seect A . Kemudan Scro kebawah sampa anda mehat Sampe page yang |uga kut tercentang karena kta mengkk Seect A tersebut. Hangkan centangan Sampe page tersebut karena kta tdak akan mengkutkan ag Sampe page tersebut d Menu Utama toko onne kta. 2. Kk tombo Add To Menu
2! Selan"utnya anda akan melihat calon menu utama anda tersebut terlihat seperti gambar berikut ini! Tanpa ada Sample Page lagi disana )angan anda simpan terlebih dahulu, lanjutkan dengan langkah berikutnya.
3! Sekarang kita akan memasukkan /ink 9&/ produk kategori ke menu utama kita 1. Kk Lnks 2. Masukan satu per satu nk produk kategor yang sudah kta buat dan sudah kta paste d Notepad tad 3. Ber |udu untuk menu produk kategor tersebut 4. Kk tombo Add to Menu
"ontoh + ?. #/. P http+&&www.toko-online-anda.com&product-category&baju-pria& 8. .ink Te(t P Baju Pria 4. 7emudian 7lik tombol %dd to ,enu
4! 9langi langkah tersebut untuk kategori produk anda yang lainnya! Setelah selesai lama akan terlihat seperti berikut "oba anda perhatikan bagian bawah gambar berikut , disana anda akan melihat bahwasanya = buah kategori produk sudah berada disana.
5! Sekarang susunlah menu;menu tersebut seperti gambar diba#ah ini #ntuk bisa menyusun menunya seperti dibawah ini, anda tinggal 7lik kiri salah satu menu tersebut kemudian Tahan dan 5eserlah keatas atau kekanan. )ika posisinya digeser kekanan maka akan menjadi sub menu.
8! Setelah selesai lan"utkan dengan langkah diba#ah 1. Centang Prmary Menu 2. Kk tombo Save Menu
=! Sekarang lihat enu di toko online anda maka anda akan melihat seperti gambar berikut '(! Proses custom menu toko online kita sudah selesai sekarang #ntuk lebih memberikan gambaran secara li!e silahkan lihat /0V@ D@. nya .
Sekian dulu tutorial cara membuat toko online dengan 2oo"ommerce tahap ke dua puluh satu ini. Sampai jumpa lagi pada tutorial selanjutnya. )ika anda mendapat masalah , silahkan ajukan pertanyaan di kolom komentar. Sebisa mungkin akan kami bantu mengatasi permasalahan yang anda alami.
"ara membuat toko online menggunakan 2oo"ommerce 0Tahap Dua Puluh Dua1 3ari ini kita akan melanjutkan tutorial mengenai cara membuat toko online menggunakan 2oo"ommerce tahap dua puluh dua, setelah kita kustomisasi toko online kita dan saat ini sudah cukup baik maka kali ini kita akan belajar bagaimana cara memposting produk yang mempunyai warna berbeda misalnya produk kaos. Sebagai gambarannya begini, %nda mempunyai barang atau produk kaos Polo misalnya. ah kaos tersebut 0model sama dan ukuran sama & all siJe1 namun mempunyai = macam warna yang berbeda dan mungkin setiap warna baju tersebut mempunyai harga jual yang berbeda terus anda ingin menjadikan = macam warna kaos Polo tersebut di posting dalam satu kesatuan produk. Pada tutorial terdahulu kita pernah belajar cara memposting produk dengan Product Data L Simple Product L , nah untuk membuat atau memposting produk dengan menggunakan pilihan warna maka Product Data yang akan kita pakai adalah Dariable Product. #ntuk mengetahui hasil akhir dalam tutorial ini silahkan anda lihat secara langsung demonya dengan meng-klik tombol dibawah ini, kemudian coba pilih warna baju tersebut, kami yakin anda pasti menyukainya Vew Lve Demo Persapan Silahkan anda persiapkan = buah image produk dengan warna yang berbeda. Dalam contoh ini kami akan memakai produk yang memiliki = buah warna yang berbeda. 7ami telah mempersiapkan = buah kaos berwarna #ngu, Putih, ,erah Dan 3itam sebagai gambaran dalam tutorial ini. ,ohon untuk diperhatikan dengan seksama langkah demi langkah yang kami jelaskan nantinya supaya anda tidak mengalami masalah yang berarti.
Lets Start .. '! Silahkan anda menu"u Aalaman -dd :e# product 1. Kk Products 2. Ph Add Product
2! Setelah halaman -dd :e# product sudah terbuka maka lakukan hal berikut 1. Tus |udu Produk anda yang mempunya phan warna tersebut daam contoh n kam menus |udunya : Produk dengan 4 Buah Warna Phan 2. Tus Deskrps Lengkap produk anda tersebut 3. Ph Kategor untuk Produk anda tersebut
Sampai disini pastikan sudah benar langkah anda terlebih dahulu, jika sudah benar silahkan lanjut lagi ke langkah no 4 dibawah ini 1! 9pload gambar untuk ,allery dan +eatured 0mage anda Ini masih langkah mudah terlebih dahulu, silahkan upload gambar produk anda sekarang. "aranya masih sama dengan cara memposting produk dengan Product Data L Simple Product L yang kemarin sudah kami jelaskan. ote + -eatured image cukup ? dan image yang sudah dipakai untuk *eatured image tersebut tidak perlu anda pasang lagi pada product gallery karena secara otomatis akan terlihat juga pada product gallery tersebut. Dalam contoh ini yang kami pasang untuk -eatured Image adalah kaos warna #ngu 0 gambar urutan pertama dari kiri 1 dan untuk yang di Product 5allerynya adalah warna Putih, ,erah dan 3itam. .ihat gambar berikut ini.
)ika kita pre!iew saat ini maka anda akan melihat tampilan produk anda tersebut serupa dengan gambar berikut ini
Pastikan anda melihat hal serupa dengan contoh tersebut diatas. Seperti yang sudah kami terangkan diatas bahwa *eatured image akan secara otomatis masuk kedalam Product 5allery 0 gambar paling kiri sebelum kaos yang berwarna putih 1. Sampai disini masih sangat mudah sekali, silahkan anda lanjutkan dengan dengan langkah yang ke = dibawah ini.
2! Sekarang mari kita beralih ke Produk Data B ,eneral C 1. Ph Product Data , Pastkan anda memh Varabe Product 2. Kemudan sah SKU produk anda ( daam tutora n kam menuskan SKU-nya : SKU 123456 )
3! Sekarang kita beralih ke 0n>entory Pada bagian In!entory ini anda cukup mencentang pilihan manage stocks saja
4! /an"utkan ke bagian Shipping ah pada bagian shipping ini kami akan memilih atau memakai Shipping "lass yang kami beri nama M7aosL. Silahkan anda buat ? buah Shipping "lass baru untuk produk anda tersebut jika anda memutuskan untuk memakai shipping class yang kemarin sudah pernah kita buat juga tidak ada masalah yang penting ongkos kirim pada Shipping "lass yang sudah anda buat kemarin sudah sesuai dan tidak akan merugikan anda. /e*resh + Pada tutorial tahap ke sepuluh kemarin kami telah menerangkan cara membuat Shipping "lass Q Lhat artkenya dsn R
5! Setelah itu lan"utkan ke /inked Products Pada tutorial ini kami tidak mensetting linked products karena kami tidak mempunyai postingan products untuk #pp Sells maupun "ross Sells- nya. )adi jika anda akan memasang .inked Product anda tersebut saat ini maka silahkan lihat panduannya pada tutorial kami yang ke sebelas Q Lhat artkenya dsn R 7ami yakin anda sudah memahami caranya dengan baik.
8! ari kita lan"ut ke bagian -ttibutes Ini merupakan Bagian inti dari pokok pembahasan dalam tutorial ini, mohon untuk dipahami maksud dan tujuannya. Kk tombo Add
Seteah tu anda akan mehat tampan sepert pada gambar berkut n
7emudian lanjutkan dengan langkah berikut ini 1. Name adaah nama untuk attrbutes produk kta n. Daam contoh n kam buah namanya " Warna Ba|u " anda bsa member nama apa sa|a tergantung dar kengnan anda. 2. Centang Vsbe on the product page 3. Centang Used for varatons 4. Vaue (s) s dengan phan warna ba|u yang sesua dengan varas warna pada produk anda tersebut. Daam contoh n karena kam cuma punya 4 buah warna yakn : ungu, puth, merah dan htam maka kam tus sepert berkut :Ungu | Puth | Merah | Htam . Perhatkan format penusan datas, formatnya adaah : Warna |spas| |tekan Shft + Back Sash (\)| |spas| Warna . Atau cara gampangnya copy paste sa|a varas warna kam datas dan kemudan gant tusan warnanya dengan warna yang sesua dengan konds bawah anda saat n. 5. Kk Tombo Save attrbutes
Setelah anda klik tombol Sa!e attributes dan proses penyimpanannya selesai maka anda tidak akan melihat ada perubahan sama sekali dengan gambar diatas , anda masih akan melihat tampilan yang sama. ,ohon dipastikan saja anda telah meng-klik tombol Sa!e attributes tersebut. Sampai disini pastinya anda akan sangat mudah memahaminya. )ika belum mohon jangan lanjutkan ke langkah berikutnya agar anda tidak salah langkah. Silahkan pahami terlebih dahulu. )ika sudah paham betul dan langkah anda sudah sesuai dengan yang ada di gambar maka mari kita lanjut lagi ke langkah berikutnya =! Pada bagian -d>anced ini anda tidak usah mengisi apapun "adi silahkan le#ati sa"a Pastikan satu hal saja disana bahwa untuk pilihan 6nable re!iews sudah tercentang 0 secara de*ault ini sudah tercentang dengan sendirinya 1
'(! +inal Step! ari kita lihat bagian selan"utnya yakni Variations Ini merupakan langkah terakhir sekaligus penentu untuk membuat pilihan warna produk yang kita posting tersebut. Silahkan anda klik Dariations dan anda akan melihat tampilan seperti pada gambar berikut ini
Selanjutnya secara berurutan yang anda lakukan adalah sbb + 1. Kk tombo Add Varaton
Setelah itu anda akan melihat tampilan anda seperti berikut ini
Sekarang kita isi produk dengan 2arna yang pertama yakni yang ada pada *eatures image terlebih dahulu. Pada contoh diatas warna kaos pada *eatured image adalah warna ungu. ote + %gar terlihat rapi dan berurutan maka mulailah dengan urutan sebagai berikut + 1. Warna Kaos yang ada daam Featured Image ( Ungu ) 2. Warna kaos no 1 pada product gaery ( Puth ) 3. Warna kaos no 2 pada produk gaery ( Merah ) 4. Warna Kaos no 3 pada product gaery ( Htam )
Mar kta mua dengan yang pertama ( Warna Kaos Ungu ) 1. Ph Warna Ungu 2. Upoad atau pasang gambar kaos warna ungu anda 3. Tus |umah stok ba|u warna ungu anda dsana Msa : 10 4. Tus Harga untuk Kaos Ungu tersebut Msa : 100000 ( seratus rbu ) ngat penusan angkanya tdak usah paka ttk 5. Shppng Cass = Ph Kaos atau Ph sa|a shppng cass yang anda punya dan sudah anda buat pada angkah sebeumnya 6. Kk Tombo Add Varaton
Setelah anda 7lik tombol add !ariation tersebut maka anda akan melihat tampilan seperti pada gambar berikut
Mar kta an|utkan dengan yang kedua ( Warna Kaos Puth ) 1. Ph Warna Puth 2. Upoad atau pasang gambar kaos warna puth anda 3. Tus |umah stok ba|u warna ungu anda dsana Msa : 15 4. Tus Harga untuk Kaos Ungu tersebut Msa : 110000 ( seratus sepuuh rbu ) ngat penusan angkanya tdak usah paka ttk 5. Shppng Cass = Ph Kaos atau Ph sa|a shppng cass yang anda punya dan sudah anda buat pada angkah sebeumnya 6. Kk Tombo Add Varaton
Mar kta an|utkan dengan yang ketga ( Warna Kaos Merah ) 1. Ph Warna Merah 2. Upoad atau pasang gambar kaos warna merah anda 3. Tus |umah stok ba|u warna ungu anda dsana Msa : 20 4. Tus Harga untuk Kaos Ungu tersebut Msa : 120000 ( seratus dua puuh rbu ) ngat penusan angkanya tdak usah paka ttk 5. Shppng Cass = Ph Kaos atau Ph sa|a shppng cass yang anda punya dan sudah anda buat pada angkah sebeumnya 6. Kk Tombo Add Varaton
Mar kta an|utkan dengan yang keempat / terakhr ( Warna Kaos Htam ) 1. Ph Warna Htam 2. Upoad atau pasang gambar kaos warna htam anda 3. Tus |umah stok ba|u warna ungu anda dsana Msa : 25 4. Tus Harga untuk Kaos Ungu tersebut Msa : 130000 ( seratus tga puuh rbu ) ngat penusan angkanya tdak usah paka ttk 5. Shppng Cass = Ph Kaos atau Ph sa|a shppng cass yang anda punya dan sudah anda buat pada angkah sebeumnya 6. Kk Tombo Prevew (|angan kk tombo Add Varaton ag) untuk mehat has ker|a kta sebeum kta pubsh
Setelah anda klik tombol Pre!iew maka anda akan melihat tampilan produk anda seperti pada gambar berikut ini. Silahkan coba pilih warna kaos dari halaman tersebut, maka secara otomatis akan menampilkan gambar , harga dan stock dari produk tersebut. "ukup lumayan bagus bukan EE
)ika sudah '7 maka silahkan 7lik tombol Publish agar product anda bisa dilihat oleh customer anda. Semoga tutorial ini bisa berman*aat bagi anda semuanya dan sekaligus anda bisa menguasai metode posting produk menggunakan Product data P Dariable Product. "ara membuat toko online menggunakan 2oo"ommerce 0Tahap Dua Puluh Tiga1 Pada tahap ke dua puluh tiga ini , cara membuat toko online dengan 2oo"ommerce akan membahas mengenai bagaimana cara memposting produk dengan menggunakan produk data L 5rouped Product L . 7emarin kita telah membahas mengenai produk data L Dariable Product L yang saat ini pasti anda sudah paham betul bagaimana cara membuatnya. 5rouped product ini digunakan untuk memposting produk yang mempunyai spesi*ikasi tertentu namun masih satu jenis. Biasanya grouped product ini sering digunakan untuk barang : barang elektronik seperti 3P, Tablet, Playstation dan lain sebagainya. %gar lebih jelas lagi mari kita ambil sebuah contoh supaya anda lebih gampang dan cepat mengerti maksud dan tujuan pemakaian produk data M5rouped ProductL ini. ,isalnya anda akan menjual iPhone ; di toko online anda tersebut, ternyata iPhone tersebut mempunyai harga yang berbeda : beda tergantung dari besarnya memory internalnya. #ntuk memposting iPhone tersebut dalam satu kesatuan yang utuh maka kita memerlukan 5rouped Product tersebut. ,ari kita perjelas lagi dengan mempraktekkannya secara langsung dengan produk iPhone yang sudah kami persiapkan dibawah ini. Lve Demo ,arna iPhone 2 : Putih 1arga iPhone 2 ada tiga : Phone 5 16GB Rp. 7.500.000,- Phone 5 32GB Rp. 8.500.000,- Phone 5 64GB Rp. 9.500.000,-
7ami harap anda mengerti terlebih dahulu ilustrasi diatas sebelum memulai mengikuti tutorial ini agar nantinya jika anda mempunyai produk dengan kondisi seperti dalam contoh ini anda tidak akan kebingungan. %da = langkah atau = kali proses memposting produk jika kita memakai 5rouped Product untuk iPhone ; diatas 1. Mempostng Produk Induknya / Parent Product 2. Mempostng Produk Turunannya / Chd Product 1 ( Phone 5 16 GB ) 3. Mempostng Produk Turunannya / Chd Product 2 ( Phone 5 32 GB ) 4. Mempostng Produk Turunannya / Chd Product 3 ( Phone 5 64 GB )
Mempostng Produk Induk Cang pertama kali kita buat adalah Produk induknya terlebih dahulu yang berisi spesi*ikasi lengkap iPhone ; warna putih, kategori, *eatured image, product gallery dll. Pada dasarnya ini membuat postingan produk induk ini sama dengan produk lainnya. '! /ogin ke dashboard toko online anda dan lakukan diba#ah ini 1. Kk Products 2. Kk Add New Product 3. Tus |udu Produknya = Msanya New Phone 5 4. Tus dskrps dar product anda secara engkap
2! Pilih atau buat kategori produk tersebut Dalam contoh ini kami membuat sebuah kategori produk yakni Smart phone
1! 9pload ,ambar untuk +eatured 0mage dan Product ,allery Silahkan upload gambar untuk product gallery dan juga gambar untuk *eatured imagenya. "aranya sama seperti yang sudah kami jelaskan pada tutorial : tutorial kami terdahulu.
2! Pada Product Data pilihlah ,rouped Products Disini anda harus memilih Product datanya L 5rouped Product L dan jangan yang lainnya. #ntuk .inked Products , %ttributes dan ad!anced tidak perlu anda isi apa : apa ketika memposting product indul ini.
3! )lik tombol publish Setelah anda selesai dengan langkah no = diatas, silahkan anda langsung klik tombol Publish
)ika dilihat produk tersebut maka anda akan melihatnya persis seperti pada gambar dibawah ini 0 tidak ada 3arganya 1
Proses memposting produk induknya sudah selesai , lantas bagaimana dengan harga dan lainnya E 7enapa produk induknya hanya seperti itu saja E Tenang> kita akan akan melengkapi kekurangan data produknya seperti S7# , 3arga dan yang lainnya melalui Produk turunannya. Silahkan lanjutkan dengan langkah dibawah ini ..
Mempostng Produk Turunan Disinilah kita akan melengkapi kekurangan pada Produk induk yakni dengan memposting produk turunan yang dalam contoh ini ada 4 yakni + Phone 5 16GB Rp. 7.500.000,- Phone 5 32GB Rp. 8.500.000,- Phone 5 64GB Rp. 9.500.000,- .angkah dalam memposting produk turunan ini pada prinsipnya sama semua, jadi disini kami hanya akan memberikan contoh cara memposting ? buah produk turunan saja yakni + iPhone ; ?A 5B Penting DD Cang berbeda nantinya adalah + |udu Produknya : Kaau yang pertama adaah Phone 5 16 GB , yang kedua Phone 5 32 GB dan yang ketga Phone 5 64 GB SKU nya : Buatah SKU yang berbeda contoh |ka format SKU yang pertama adaah " SP 001 " maka yang kedua " SP 002 " dan yang ketga " SP 003 " Harga produknya : |ka Produk yang pertama mempunya harga Rp. 7.500.000,- maka yang kedua d tus Rp. 8.500.000,- dan yang ke tga Rp. 9.500.000,- ( hat st harga datas ) )adi nanti anda tinggal memposting produk turunan ini 4 kali dengan cara yang sama.
Product Turunan Pertama '! asih dari dalam dashboard toko online anda 1. Kk Products 2. Kk Add New Product 3. Tus |udu Produk turunan yang pertama = Msanya Phone 5 16GB 4. Barkan Kosong Deskrps engkapnya
2! )ategori produk tidak perlu dicentang / biarkan kosong
1! Product gallery dan featured image biarkan kosong
2! Pada area Product data lakukan hal berikut ini B ,eneral C 1. Ph Product Data = Smpe Products 2. Tus SKU produk turunan pertamanya , contoh SP 001 3. Tus Harganya , contoh 7500000 ( tanpa tanda ttk )
2! /an"utkan ke bagian 0n>entory )ika anda ingin menampilkan jumlah stok produk anda tersebut maka lakukan 1. Centang Manage Stock 2. Tus |umah stok barang anda , msa : 10
3! Pilih Shipping Class untuk meng;handle biaya pengiriman product tersebut Pada contoh dibawah ini kami menggunakan Shipping "lass yang pernah kami buat sebelumnya yakni 7amera Digital . anda bisa juga membuat Shipping "lass yang lain. Ini sebagai gambaran saja. 3! /an"ut ke /inked Products Pada bagian .inked Products ini peranan Parent Product atau Produk Induk mulai muncul, %nda akan melihat menu baru yang bernama 5rouping . Posisinya tepat dibawah #pp Sells dan "ross Sells 0 pada contoh ini #pp Sells dan "ross Sellsnya tidak kami isi karena kami tidak atau belum memposting product Smart phone lainnya 1 Silahkan anda pilih ew iPhone ; ama 5rouping tersebut terbentuk secara otomatis menggunakan )udul produk ketika kita memposting Parent Productnya & Produk induknya. Pada postingan produk induk yang kami contohkan diatas kami menulis ew iPhone ; makanya muncul di 5rouping tersebut nama ew iPhone ; . )ika anda membuatnya dengan nama lain maka yang muncul juga beda. )adi nama grouping ini akan sama dengan judul produk induk yang telah kita buat sebelumnya. #ntuk attributes dan %d!anced kita lewati saja, tidak ada yang perlu kita isi, lanjutkan dengan langkah dibawah ini.
5! -lihkan pandangan anda ke po"ok kanan atas .ihat pada area Pre!iew dan tombol Pusblish. Disana anda akan melihat "atalog !isibility+ Catalog/search 7lik link 6dit disamping sebelah kanan tulisan tersebut.
8! Setelah terbuka maka lakukan hal berikut 1. Ph Hdden 2. Kk tombo OK =! /angkah berikutnya adalah mempublish produk turunan pertama kita '(! 9langi langkah diatas untuk memposting produk turunan yang lainnya "ika semuanya telah selesai maka anda akan melihat hasil ker"a anda tersebut persis seperti gambar diba#ah ini
Proses memposting produk dengan menggunakan Produk Data L 5rouped ProductL sudah selesai , semoga anda bisa memahaminya dengan baik dan juga anda tidak mengalami permasalahan apapun ketika mempraktekkan tutorial diatas. )ika anda mengalami masalah, silahkan anda tulis pada kolom komentar dibawah ini. "ara membuat toko online menggunakan 2oo"ommerce 0Tahap Dua Puluh 6mpat1 Salah satu permasalahan yang sangat penting dalam mengelola sebuah toko online adalah permasalahan biaya pengiriman barang dan juga jasa pengiriman apa yang kita pakai untuk meng-handle semua pengiriman barang yang sudah dibeli oleh customer kita. ,engingat toko online kita akan diakses oleh masyarakat luas dari berbagai daerah diseluruh indonesia maka ada satu hal lagi yang menjadi kendala terutama jika anda mendapatkan customer dari luar pulau jawa dan terutama jika si pembeli tersebut bertempat tinggal di sebuah perumahan yang tergolong baru. Sebagai contoh riil begini, kami tinggal di perumahan yang tergolong baru. )ika ada sanak *amili kami mengirimkan paket dan memakai jasa pengiriman tertentu 0 sebut saja namanya )asa Pengiriman % 1itu kiriman paket tersebut bisa sampai ke rumah kami. amun jika memakai jasa pengiriman yang lainnya maka kiriman tersebut tidak akan pernah sampai kerumah kami jadi untuk mengambilnya kami harus menjemput langsung ke kantor jasa pengiriman paket tersebut. ,elihat contoh permasalahan diatas jika misalnya kami sedang berkunjung ke toko online dan ternyata anda tidak menyediakan pilihan pengiriman barang menggunakan jasa pengiriman % maka kami tentu akan sedikit ragu barang yang kami beli dari toko online anda tersebut akan sampai kerumah kami atau tidak. 7emungkinan terbesar keputusan yang kami ambil adalah kami akan mencari toko online lainnya yang menyediakan barang yang kami butuhkan namun juga memakai )asa pengiriman % yang bisa menjamin barang kami yang dibeli dari toko online anda tersebut bisa sampai kerumah kami tanpa harus repot lagi. Inilah mengapa kita harus menyediakan beberapa opsi pilihan mengenai jasa pengiriman apa yang kita pakai di toko online kita agar calon customer kita tetap bisa berbelanja di toko online yang kita kelola tersebut. Setidaknya langkah ini bisa meminimalisir kemungkinan batal transaksi yang akan terjadi karena tentunya akan berdampak turunnya penjualan produk toko online anda. #ntuk mengatasi permasalahan tersebut diatas maka kali ini kita akan belajar membuat beberapa opsi pilihan jasa pengiriman tersebut di toko online kesayangan kita tersebut. Cara menambahkan Ops |asa Pengrman Barang Sebelumnya mari kita lihat terlebih dahulu contoh penggunaan opsi pilihan jasa pengiriman tersebut dengan melihat contoh gambar dibawah ini. "psi pengiriman pada produk yang tidak menggunakan Shipping Class Pada gambar diatas merupakan penerapan opsi pengiriman pada produk yang tidak menggunakan Shipping "lass. )ika produk tersebut tidak menggunakan Shipping "lass apapun maka ongkos kirim yang akan kita jelaskan pada tutorial ini akan berdampak langsung pada produk tersebut.
"psi pengiriman pada produk yang menggunakan Shipping Class Pada tutorial sebelumnya kita sering membahas mengenai biaya pengiriman dengan menggunakan Shipping "lass. )ika customer kita akan membeli produk yang sudah kita setting dengan biaya pengiriman melalui shipping "lass maka secara otomatis tari* shipping class produk tersebut akan mereplace atau menggantikan ongkos kirim dasar pada area "art toko online kita.
Lets Start .. #ntuk membuat pilihan opsi pengiriman diatas maka kita akan memodi*ikasi Shipping -lat /ate . '! Silahkan anda login terlebih dahulu ke dashboard toko online anda dan kemudian lakukan langkah diba#ah ini 1. Kk WooCommerce 2. Ph Settngs 3. Ph Shppng 4. Ph Fat Rate
2! ,antilah ethod Title dari +lat &ate men"adi nama "asa pengiriman default toko online anda )ika toko online anda menggunakan PT Pos Indonesia sebagai pilihan awal jasa pengiriman yang anda pakai dan menggunakan pengiriman reguler maka tulislah pada method title PT P'S Indonesia /eguler atau dalam contoh ini kami menuliskanP.S &eg $ 2 hari % yang secara tidak langsung akan menjelaskan kepada pembeli toko online kita bahwasanya barang yang mereka beli itu akan dikirim Dia Pos reguler dan akan sampai dalam kurun waktu = hari .
antinya dihalaman "art toko online anda ,enthod Title itu akan terlihat seperti pada gambar berikut
1! enambahkan biaya pengiriman dasar "ika menggunakan PT P.S 0ndonesia Perhatikan gambar diatas, secara de*ault atau secara otomatis ketika pertama kali customer kita melihat halaman cart mereka maka ongkos kirim barang yang mereka beli tersebut adalah /p. 8@.@@@ 0 dua puluh ribu rupiah 1 dan menggunakan P'S /eguler tadi diatas dengan estimasi barang akan sampai selama = hari. 'ngkos kirim sebesar /p. 8@.@@@ tersebut hanya ilustrasi saja , mohon anda tanyakan terlebih dahulu sebelum anda menentukan harga pengiriman ini. "ara menambahkan ongkoos pengiriman ini cukup mudah sekali, silahkan anda lihat gambar di bawah ini. 1. Ph Cost Per Order 2. Tus ongkos krm Pos Reguer nya dsn , msa : 2(((( ( mohon |angan paka ttk ) 3. Pastkan anda menus d barsan Any Cass Sampai disini kita sudah selesai menambahkan ongkos kirim dasar pengiriman barang dengan P'S /eguler. )angan di simpan terlebih dahulu dan lanjutkan ke langkah berikutnya dibawah ini. ote + Pilihlah ongkos pengiriman dasar ini yang mempunyai biaya terendah atau harga ekonomi terlebih dulu 2! Selan"utnya kita akan menambahkan opsi pengiriman yang lainnya Disini kita akan menambahkan opsi pengiriman lainnya seperti yang sudah kami terangkan diatas lainnya misalnya Pos 7ilat , TI7I dan )6. Perhatikan gambar dibawah pada bagian %dditional /ates .ihat pada baris pertama + P.S )ilat $ 2 Aari % E '(((( E yes Penjelasan + Pos Kat ( 2 Har ) : Nama phan ke dua Ops pengrman barang '(((( : n merupakan ongkos/ baya tambahan |ka customer memh pengrman barang yang dbe tersebut menggunakan |ens Pos Kat nantnya akan terhat dhaaman cartnya men|ad &p! 1(!((( ( tga puuh rbu rupah ). |ka ongkos r Pos kat tersebut msanya &p! 13!((( ( tga puuh ma rbu ) maka angka '(((( tersebut anda gant men|ad '3((( |angan anda tus 35000 |uga karena angka tersebut akan dtambahkan dengan angka yang anda tus pada angkah no 3 datas yakn 2((((
'umusnya adalah sbb : .ngkos kirim Pos &eguler F Selisih harga ongkos kirim Pos )ilat dan &eguler P.ngkos kirim Pos )ilat sebenarnya ormat penulisannya adalah sbb : :ama .psi Pengiriman S Biaya tambahan S yes
Silahkan anda copy paste opsi pilihan pengiriman berikut ini pada %dditional /ates di toko online anda P'S 7ilat 0 8 3ari 1 S ?@@@@ S yes TI7I /eg 0 8 3ari 1 S 4@@@ S yes TI7I 'ns 0 ? 3ari 1 S ?@@@@ S yes )6 6co 0 4 3ari 1 S ;@@@ S yes )6 SS 0 ? 3ari 1 S ?@@@@ S yes
3! Sekarang simpan peker"aan anda dengan mengklik tombol Sa>e Changes
Silahkan anda sesuaikan 'psi tambahan biaya pengiriman toko online anda tersebut dengan biaya riil dari daerah anda masing : masing. Sampai jumpa lagi pada tutorial selanjutnya. Semoga anda mengerti dengan penjelasan kami diatas. "ara membuat toko online menggunakan 2oo"ommerce 0Tahap Dua Puluh .ima1 7ali ini kita akan belajar tentang bagaimana membuat sebuah kupon diskon untuk keperluan promosi di toko online kita. Selain untuk sarana promosi dalam mencari customer baru untuk datang ke toko online kita, kupon diskon juga merupakan senjata paling e*ekti* untuk meningkatkan omJet penjualan toko online anda. 7enapa kupon diskon ini penting untuk anda buat E Ingat bahwa persaingan yang akan anda hadapi sangatlah ketat sekali dan akan semakin sulit dari hari kehari. Berikut Screenshot data google analytics dari blog ini selama periode ? )uni 8@?4 s&d 84 September 8@?4
)ika dilihat dari data diatas maka kita bisa menyimpulkan bahwasanya akan ada ribuan toko online baru yang akan bersaing dengan toko online anda. ?@ top artikel yang paling banyak dibaca dari blog ini didominasi oleh artikel mengenai toko online artinya anda akan memerlukan strategi khusus agar toko online anda bisa berkembang dan bisa memenangkan persaingan ini. Salah satu senjata promosi yang handal adalah dengan menyediakan kupon diskon ini. ,embuat toko online bukan hanya sekedar memajang produk secara online saja namun akan ada perjuangan yang sangat berat sekali . Cara membuat Kupon Dskon Berikut kami jelaskan bagaimana cara membuat 7upon Diskon untuk toko online anda. 7ita akan membuat kupon diskon dengan kondisi seperti berikut ini + Kupon n akan memotong harga keseuruhan pada haaman Cart Na kupon n adaah Rp.50.000,- Kupon n tdak bsa dgabung dengan kupon yang annya ( msanya anda mengeuarkan banyak kupon ) Kupon n tdak bsa dgunakan pada produk yang sedang konds SALE Kupon n hanya bsa dpaka untuk 20 ka pemakaan '! Silahkan anda login ke dashboard toko online anda 1. Kk WooCommerce 2. Ph Coupons 3. Kk Add Coupon 2! -nda akan melihat halaman -dd :e# Coupon seperti pada gambar diba#ah ini 1! Selan"utnya mari kita buat sebuah )upon Diskon dengan kondisi yang sudah kita tentukan diatas 1. Tus |udu / kode kupon anda, msa Promo-IX 2. Tus deskrps kupon anda, n hanya untuk memudahkan anda daam memanage kupon anda tersebut 3. Dscount Type , ph Cart Dscount 4. Coupon amount , tus nomna Kupon anda tersebut msa 50000 ( penusan tdak peru paka ttk ) 5. Centang ops ndvdua use agar kupon yang kta buat n tdak bsa dgunakan bersama-sama dengan kupon annya yang akan dkeuarkan dkemudan har 6. Centang ops Excude sae tems agar |ka customer anda akan membe produk dengan konds SALE tdak bsa menggunakan kupon dskon n 7. Mnmum amount , tus |umah mnma pembean|aan untuk bsa menggunakan kupon dskon n. Sangat efektf untuk menngkatkan voume saes toko onne anda 8. Usage mt , tus batas |umah pemakaan kupon n. Dengan dtentukannya batasan maksma pemakaan kupon n maka anda bsa mengontro dan menganasa seberapa efektf penggunaan kupon dskon yang kta buat n. 9. Kk tombo Pubsh untuk mua mengaktfkan kupon bean|a n. Setelah anda publish kupon tersebut maka selanjutnya adalah membuat sebuah "ampaign & kampanye & menyebarkan kode kupon tersebut melalui -acebook, Twitter, 5oogle Plus dan lain sebagainya.
#ntuk mengetahui bagaimana kupon ini beraksi anda bisa mencoba menggunakan kupon yang kami buat di demo toko onne kam Pilih salah satu produk disana dan kemudian Diew "art anda 1. Gunakan kode : promo-x 2. Kk appy coupon Selanjutnya anda akan melihat sebuah noti*ikasi bawah kupon tersebut sudah sukses diterapkan pada transaksi tersebut Perhatikan pada point no.8 Q '/D6/ DIS"'#T R terlihat disana ada tulisan -/p.;@.@@@ 0 nilai kupon 1. )ika sudah terlihat demikian maka proses membuat kupon diskon pertama kita sudah selesai. "ara membuat toko online menggunakan 2oo"ommerce 0Tahap Dua Puluh 6nam1 Pada tahap ke dua puluh enam ini kita akan belajar mengenai cara merubah bahasa yang ada di toko online kita. Seperti yang kita ketahui dan kita alami bersama , saat ini toko online kita tersebut masih menggunakan bahasa inggris. Tutorial ini juga sebagai jawaban atas pertanyaan Mas IrwanKade dan Mas Ophn "ara merubah semua bahasa di toko online yang menggunakan 2oo"ommerce dari Inggris ke Indonesia bisa dikatakan mudah namun juga bisa dikatakan sulit. 7enapa kami katakan demikian E )ika dikatakan mudah itu karena anda tahu caranya dan dikatakan sulit itu karena anda belum mengetahui caranya. ah .. melalui tutorial ini kami ingin anda juga bisa mengatakan bahwasanya cara mengganti bahasa di toko online 2oo"ommerce kita menjadi bahasa Indonesia itu ,#D%3 KK. ya anda pasti juga bisa . %pa syarat utama agar anda bisa mengatakan ,#D%3 E Syaratnya adalah ketika anda membaca tutorial ini pastikan anda baca dengan seksama baik tulisan maupun gambarnya. ,ari kita mulai dari yang paling mudah terlebih dahulu . 1. /ogin ke dashboard toko online anda kemudian install plugins CodeStyling /ocaliFation
"ara Install plugin bisa anda hat dsn setelah selesai langsung saja anda akti*kan plugin tersebut. 2! Sekarang mari kita menu"u ke halaman localiFation 1. Kk Toos 2. Ph ocazaton
1! Centang pilihan @nable lo# memory mode )ika anda menggunakan Shared 3osting maka centanglah pilihan tersebut, namun jika anda memakai DPS atau dedicated ser!er maka anda tidak perlu mencentangnya. 2! Selan"utnya yang perlu kita lakukan adalah menambahkan bahasa indonesia ke theme ystile kita 1. Kk Themes 2. Kk Add New Language
Tambahan + terlihat diatas kondisi themes yang kita pakai adalah ,ystile dan disebelah kanan gambar terlihat bahwasanya themes ini hanya ada pilihan bahasa inggris saja. )ika anda memakai template yang lain maka sesuaikan dengan kondisi anda saat ini. 3! )emudian anda akan melihat muncul pilihan berbagai bahasa? cari $ scroll keba#ah % dan pilih Bahasa indonesia $ idG0D % dan lan"utkan dengan mengklik tombol create po;6le 4! Proses membuat 6le;po bahasa 0ndonesia akan ber"alan sekitar 1 7 2 detik dan selan"utnya anda akan melihat Bahasa 0ndonesia sudah tersedia pada theme ystile tersebut %tau lihat gambar dibawah ini supaya anda tahu secara pasti dimana lokasinya
6nam langkah diatas cukup mudah bukan E pastikan terlebih dahulu anda melihat hasil yang sama dengan kami jika tidak sama silahkan anda ulangi dan perhatikan lagi mana tau ada yang terlewat . Sampai dengan tahapan ini kita tidak akan melakukan apa- apa pada halaman localiJation ini. 9ntuk sementara #aktu biarkan halaman ini terbuka dan "angan di tutup atau logout dari halaman dashboard toko online anda ini. .anjutkan dengan langkah no < dibawah ini > 5! Buka sebuah tab baru di #eb bro#ser anda dan silahkan login ke cpanel toko online anda! B cpanel!domain;anda!com $ *ebhosting % C
5! Buka sebuah tab baru di #eb bro#ser anda dan silahkan login ke cpanel toko online anda! $ cpanel!domain;anda!com Setelah terbuka cpanel anda maka selanjutnya klik -ile ,anager
8! Pastikan anda memilih Document &oot folder dan kemudian )lik tombol ,o
=! Setelah terbuka maka silahkan cari #p;con6g!php 1. Ph wp-cong.php ( Kk kr satu ka ) 2. Kk con Edt =! /an"utkan dengan mengklik tombol edit '(!Sekarang silahkan anda cari tulisan ini : de6ne$H*P/-:,I? H H%J ''!Setelah ketemu maka ganti atau tambahkan kode idG0D ? nantinya kode tersebut akan tertulis seperti ini : de6ne$H*P/-:,I? H idG0D H%J
'2!Setelah selesai anda tambahkan kemudian silahkan anda klik tombol sa>e changes yang ada pada sudut kanan atas '1!Proses penyimpanan akan segera ber"alan dan setelah tersimpan silahkan anda logout dari cpanel toko online anda tersebut
'2! ari kita lihat lagi halaman dashboard toko online kita pada langkah no 3 diatas! &efresh halaman tersebut maka anda akan melihat perubahan yang cukup drastis disana! /ihat gambar diba#ah ini WOW sudah berbahasa Indonesia Lhoo !!
'3! Coba anda lihat toko online anda sekarang? maka sebagian tulisan pasti telah berubah men"adi bahasa 0ndonesia &an juga pada halaman Cart
Sma Probems !! %da beberapa kata yang tidak bisa berubah secara otomatis jadi membutuh sedikit ekstra kerja keras lagi. ah untuk itu kita akan membahas permasalahan tersebut pada kesempatan mendatang atau pada tahap ke 8< . Tetap semangat dalam belajar dan yakinlah anda bisa .. KK 5ood .uck. "ara membuat toko online menggunakan 2oo"ommerce 0Tahap Dua Puluh Tujuh1 Pada kesempatan kali ini kita akan melanjutkan tutorial cara mengatasi permasalahan kecil pada tahap sebeumnya ( tahap 26 ). 7emarin kita masih menghadapi sedikit masalah yakni adanya tulisan bahasa Inggris yang belum tertranslate ke bahasa Indonesia. Permasalahan tersebut sebenarnya bisa dibagi ada 8 bagian yakni + 1. Pada Themes Myste 2. Pada Pugns WooCommerce Dalam tutorial ini kami akan memberikan contoh cara mentranslate bahasa yang ada pada Themes dan juga yang ada pada Plugins 2oo"ommercenya. 7ami akan memberikan cara yang paling mudah untuk anda ikuti '! Dari halaman /ocaliFation tersebut / saat ini namanya sudah men"adi /okalisasi 1. Kk Tema 2. Kk Tombo Pnda Uang / Scan 2! -kan uncul Pop up #indo# seperti yang terlihat pada gambar di ba#ah Kk Tombo Pnda sekarang 1! Proses Scan akan ber"alan ? kira 7 kira akan memakan #aktu ' menit 2! Setelah proses scan selesai maka langsung sa"a anda klik tombol Selesai 3! Sekarang kita akan melihat kata yang apa sa"a yang belum di ter"emahkan Kk Tombo Suntng 4! -nda akan melihat sebuah proses persis seperti pada gambar? silahkan ditunggu beberapa saat 5! Setelah proses loading diatas selesai maka anda akan melihat sebuah tampilan seperti gambar berikut Kk Lnk " Tdak Dter|emahkan "
%da ;<? kata yang belum diterjemahkan ke Bahasa Indonesia, sangat banyak sekali bukanE Ini adalah jumlah kata dalam bahasa inggris yang belum diterjemahkan kedalam bahasa Indonesia yang terdapat pada halaman dashboard dan juga halaman yang terlihat oleh orang luar atau customer kita. %gar kita tidak banyak melakukan proses translate maka yang perlu kita translate adalah kata : kata yang nampak oleh customer toko online kita saja. 7alau yang hanya nampak pada dashboard toko online kita sebaiknya tidak perlu anda translate namun jika anda berkenan anda juga bisa mentranslate semua yang ada didalam halaman dashboard. Cara meakukan Proses Transate Cang akan kami terangkan disini adalah cara yang paling mudah untuk anda ikuti 8! Bukalah bro#ser kesayangan anda sebanyak 2 buah Silahkan ditampilkan bersebelahan seperti yang terlihat pada gambar di bawah ini 1. Buka haaman Dashboard Toko onne anda 2. Buka haaman Toko onone anda
=! ari kita coba edit tulisan &ecent Products yang ada pada halaman homepage toko online kita tersebut Copy tusan Recent Products Lhat ke dashboard toko onne anda dan kk con |x Anda kan mehat Pop up sepert gambar berkut 1. Paste-kan Recent Products tad pada koom Ekspres 2. Kk Tombo Car Seteah ketemu sean|utnya kk tombo Suntng ( no 2 ) Sekarang tus kata ter|emahan Recent Product yang anda ngnkan , msanya pada contoh n kam menus ter|emahannya men|ad : )oleksi produk terbaru DD Kemudan anda akan mehat has ter|emahan tersebut sepert pada gambar dbawah n Untuk membuat has transate n beker|a maka an|utkan dengan meng- kk tombo buat berkas-mo Sekarang kta hat haaman homepage toko onne kta untuk mehat hasnya. ( refresh haaman homepage anda terebh dahuu ) Ternyata usaha kita berhasil, sekarang tulisan /ecent Products tersebut sudah berganti menjadi 7oleksi produk terbaru KK Bagamana dengan kata - kata yang an ? #ntuk mentranslate kata yang lainnya maka anda tinggal mengulangi cara diatas sampai semua selesai. 7ami tidak akan melakukan proses translate semua kata di demo toko online yang kami buat. Ini merupakan contoh saja agar anda mengetahui bagaimana langkah : langkahnya , untuk itu anda harus membuka setiap halaman dan mengecek satu persatu kata mana saja yang perlu anda rubah.
Important !! )ika anda menemui sebuah kata yang belum tertranslate ke bahasa Indonesia dan didalam kata tersebut mengandung spesial karakter maka jangan sekali : kali anda hapus spesial karakter tersebut. Contoh : |ka anda ngn merubah atau mentransate kata y Ks Pro6le maka cara menggantnya adaah dengan kata berkut Pro6l Ks Saya Contoh kata yang an msanya K Comments untuk menggant kata tersebut sahkan anda tus kata penggantnya K )omentar Cang terpenting disini jangan sampai anda menghilangkan spesial karaktertersebut 0 tulisan yang kami buat berwarna merah 1 |ka anda kemarn teah merubah atau mengkustom menu yang memasang Kategor Produk ( Tutora tahap 21 ) maka anda harus mengedt kemba nk kategor produk tersebut karena ada perubahan nk dar product-category men|ad Produk Kategor ( bahasa berubah ). |ka tdak anda edt maka haaman kategor produk yang kta maksudkan tdak akan muncu atau Error. Cek nk produk kategor anda yang baru dan kemudan rubahah pada menu tersebut. Tps .. Sebagai panduan saja, bukalah sebuah toko online pro*esional yang sudah terkenal dan yang sudah *ull menggunakan bahasa indonesia untuk mendapatkan ide mengenai kata apa yang tepat untuk anda pakai atau anda terapkan ketika mentranslate manual kata yang masih dalam bentuk bahasa inggris tersebut agar toko online anda juga terlihat pro*esional seperti mereka. "ara membuat toko online menggunakan 2oo"ommerce 0Tahap Dua Puluh Delapan1 Seperti yang telah kami janjikan pada kesempatan yang lalu, kali ini kita akan belajar tentang bagaimana cara menambahkan 2idget pada toko online yang dibuat menggunakan 2ordPress dan 2oo"ommerce ini. %da 8 jenis widget yang bisa kita pasang pada toko online kita tersebut yakni 2idget bawaan dari plugin 2oo"ommerce dan juga 2idget yang berasal dari pihak ketiga, misalnya + 2idget 6mail Subscription, -itur "hatting dari Cahoo ,essenger dan banyak lagi yang lainnya. Pada intinya widget ini bisa kita tampilkan pada sidebar dan juga *ooter, namun karena kita memakai plugin 2oo"ommerce maka widget yang seharusnya bisa tampil atau terlihat di bagian sidebar tidak bisa terlihat. Sebelum kita menambahkan widget ke toko online kita tersebut maka yang perlu kita lakukan pertama kali ada mengakti*kan *itur widgets untuk plugin 2oo"ommercenya terlebih dahulu agar widget bisa muncul pada sidebar toko online kita.
'! /ogin ke Dashboard Toko .nline anda? kemudian lakukan langkah berikut ini agar #idget yang akan kita pasang bisa tampil pada toko online kita 1. Kk Myste 2. Ph Theme Optons 3. Lan|utkan dengan mengkk WooCommerce 4. Kk Layout 5. Centang kedua phan tersebut 6. Kk tombo Save A Changes
2! Setelah kita lakukan hal diatas maka "ika anda melihat salah satu produk anda maka sekarang anda akan melihat sebuah sidebar baru Pada Sidebar sebelah kanan diatas tersebut kita akan menambahkan 2idget yang sesuai dengan kebutuhan toko online kita. 1! Sekarang mari kita menu"u ke halaman *idgets 2! Setelah terbuka maka anda akan melihat halaman #idget tersebut seperti pada gambar diba#ah ini .ihat pada bagian sebelah kanan pada area Primary, pada bagian primary ini anda bisa melihat bahwa disana sudah ada /ecent Posts, /ecent "omments, %rchie!es , "ategories dan ,eta. Sekarang anda lihat lagi pada gambar no 8 diatas, yang terlihat disana itu 0 gambar 8 1 merupakan widget yang muncul dari Primary ini. )adi jika anda ingin mengganti atau memasang widget pada area tersebut maka anda bisa melakukannya dari Primary 2idget ini. 7ami harap anda memahami hal ini terlebih dulu agar ketika anda nanti ingin merubah widget pada sidebar sebelah kanan tersebut anda tahu kemana anda harus pergi. Sekarang mari kita hilangkan atau hapus terlebih dahulu kelima 2idgets bawaan yang muncul secara otomatis tersebut. 3! Cara menghapus #idgets yang sudah ada tersebut cukup mudah ? lakukan langkah diba#ah ini 1. Kk con panah kebawah 2. Kk Deete
#langi langkah diatas untuk menghapus widgets selanjutnya 0 ada = buah lagi 1 hingga nantinya area primary widgets tersebut akan kosong dan terlihat seperti pada gambar berikut. 4! ari kita pela"ari #idgets apa sa"a yang sudah berada disana "oba anda perhatikan deretan 2idgets pada toko online anda tersebut , kira : kira akan terlihat seperti pada gambar dibawah ini. Cang perlu anda ketahui adalah dari sekian banyak 2idgets yang berada disana itu 0lihat gambar diatas1 untuk 2idgets yang berasal dari plugin 2oo"ommerce maka cirinya widget tersebut ada kata-kata 2oo"ommercenya dan ada juga yang cuman berawalan 2oo 0 2oo Search, 2oo -lickr dll 1. Sedangkan yang tidak mempunyai ciri seperti yang sudah kami sebutkan maka widgets tersebut adalah widgets bawaan dari 2ordPress. )adi setiap blog atau website yang dibuat menggunakan 2ordPress pasti akan memilikinya. 5! Cara menambahkan *idgets yang berasal dari *ooCommerce pada area Primary 7arena widgets yang kita letakkan pada primary area ini akan terlihat berdampingan dengan produk yang kita jual maka sebaiknya anda menempatkan widgets yang nantinya berguna bagi calon customer anda dalam mencari produk idaman mereka ataupun produk yang sedang ada promo atau yang sedang diskon. Dalam contoh ini kami akan menambahkan beberapa 2idgets seperti + Wdget Pencaran Produk Wdget Keran|ang Bean|a Wdget Fter Harga Wdget Produk Terars
,idget Pencarian Produk Temukan Wdget WooCommerce Car Produk, seteah ketemu Kk kr pada nama wdget tersebut , tahan / |angan depas / tetap tekan mouse anda . Geser atau tark wdget WooCommerce Car produk tersebut ke area Prmary Wdget Lepaskan Wdget tersebut dsana dengan cara |angan dtekan ag mouse anda tad. |ka benar angkah anda tersebut maka anda akan mehat Wdget WooCommerce Car Produk tad sudah berada area Prmary. Tus |udu Wdgetnya , Msa : Cari produk terbaik kami disini kemudan kk tombo Save Seteah seesa anda smpan an|utkan dengan mengkk nk Cose Gunakan cara datas untuk menambahkan Wdgets annya, caranya sama sa|a dengan cara datas. |ka sudah seesa semua maka akan terhat sepert pada gambar dbawah n. |ka kta hat pada toko onne kta maka sekarang n kta sudah mempunya wdgets tambahan dan sudah tdak memaka defaut wdget yang ada pada gambar angkah no 2 datas. DEMO
8! Cara menambahkan *idgets pada area +ooter "ara menambahkan widget pada *ooter ini sama juga dengan cara menambahkan widget pada area Primary & Sidebar. %nda tinggal menerapkan cara yang sudah kami jelaskan diatas. Cang perlu anda ketahui adalah posisi dari widget yang diletakkan pada -ooter ?, 8, 4 dan = . #rutannya nanti untuk *ooter no ? maka akan terlihat pada -ooter sebelah kiri, -ooter no 8 akan terlihat disebelah kanan *ooter no ? dan begitu seterusnya. |ka anda sudah seesa menambahkan wdget pada footer maka susunannya akan terhat sepert pada gambar dbawah n.
=! Cara menambahkan *idgets dari Pihak ketiga #ntuk memasang 2idget dari pihak ke tiga misalnya yahoo messenger, *acebook *anpage, twitter streamline dan sebagainya anda bisa menggunakan T@LT *idget ,isalnya kita akan memasangan status yahoo messenger di toko online kita, lokasi bebas atau terserah anda 0bisa anda pasang di area Primary atau pun pada -ooter 1. Pada contoh dibawah ini kami akan meletakkan Cahoo ,essengernya pada *ooter no 8, yang perlu anda lakukan adalah sbb + Tark Wdget TEXT tersebut ke area yang kta ngnkan Seteah poss TEXT Wdget tersebut berada pada tempat yang kta ngnkan maka akukan ha berkut n 1. Tus |udu untuk wdget yahoo messenger tersebut 2. Copy dan Paste kan kode dbawah n 3. Kk Tombo Save )ode 3ahoo Messenger <a href="ymsgr:sendIM?0DGMahooG-nda"> <mg src="http://op.yahoo.com/onne? u=0DGMahooG-nda&m=g&tN2&=us"/> )eterangan 5antilah tulisan 0DGMahooG-nda dengan username email yahoo anda . Dalam contoh ini kami menggunakan alamat email "ohny2mdTyahoo.com maka kode yang kami letakkan seperti berikut ini Oa hre*PLymsgr+sendI,E"ohny2mdM$ Oimg srcPLhttp+&&opi.yahoo.com&onlineE uP"ohny2mdIampUmPgIampUtN2IampUlPusL&$
#ntuk mengganti gambar satus C, kita maka silahkan anda ganti tulisan tN2dengan kode gambar dibawah ini '(! Proses memasang *idget Di toko online anda Sudah Selesai Saat ini pastinya anda sudah tahu dan paham langkah : langkah bagaimana cara menambahkan widget di Toko online yang menggunakan 2ordPress ini. 5ood .uck. 7ode Dari ,as Timo 0 ThankVs ya ,as 1 , lihat kegunaan kode dibawah ini pada komentar beliau pada kolom komentar <a href="ymsgr:sendIM?IDYahooAnda"><mg src="http://op.yahoo.com/onne?u=IDYahooAnda&m=g&t=1&=us"/> </a> "ara membuat toko online menggunakan 2oo"ommerce 0Tahap Dua Puluh Sembilan1 Setelah sekian banyak tahapan yang sudah kita pelajari dalam membuat toko online menggunakan 2oo"ommerce ini maka pada tahap ke 8W kita akan belajar lagi mengenai bagaimana cara menghandle sebuah order yang telah dilakukan oleh customer kita. 7enapa kami memilih topik ini pada tahap ke 8W E secara umum sudah banyak rekan- rekan yang sudah sukses dalam menerapkan langkah demi langkah yang telah kami sampaikan. 7emungkinan juga ada yang sudah siap untuk berjualan namun masih belum tahu cara mengelola orderan dari customer. #ntuk itu mari kita belajar mengenai apa yang harus kita lakukan ketika ada sebuah order barang dari customer. %gar anda mengetahui secara pasti bagaimana jalan ceritanya mengenai proses order yang dilakukan oleh customer di toko online kita maka kami akan mendemonstrasikan secara lengkap mengenai apa yang dilihat oleh customer anda ketika melakukan order dan juga apa yang akan anda lihat sebagai pemilik toko online tentunya. Ini juga berguna bagi anda ketika anda akan membuat halaman tata cara belanja ataupun ketika anda sedang berkomunikasi dengan customer anda. Semakin lengkap keterangan yang anda berikan pada halaman tata cara belanja maka akan semakin mudah "ustomer anda merasa nyaman berbelanja di toko online anda tersebut . Dan jika anda mendapat pertanyaan dari customer anda maka anda akan lebih siap untuk memberikan jawaban yang terbaik kepada mereka. ,embuat "ustomer merasa nyaman berbelanja di toko online anda tentunya akan lebih sulit dari pada ketika anda membuat toko online anda sekarang ini. Sebelum kita mulai ada baiknya anda pastikan pada halaman setting anda sama seperti pada gambar berikut ini. ,ohon untuk disamakan kondisi settingan toko online anda dengan gambar diatas dan jangan lupa sa!e setelah anda yakin sudah sama dengan settingan diatas.
Lets Start . Pertama kita akan membuat sebuah order sebuah produk, disini yang bertindak sebagai contoh customernya adalah kami dan sebagai pemilik toko onlinenya adalah anda. '! isalnya kami akan membeli sebuah kaos ditoko online anda dan kami mempunyai )upon belan"a yang anda keluarkan! Dalam hal ini kami memakai kupon belan"a yang pernah anda buat sebelumnya dan anda promosikan melalui "e"aring sosial ? kupon belan"anya misalnya : promo;iO 2! )ami akan membeli sebuah kaos ber#arna biru seperti yang terlihat pada gambar diatas Setelah kami add to cart maka kami sebagai pembeli akan melihat halaman seperti pada gambar dibawah ini. Pada gambar dibawah terlihat bahwasanya kaos yang akan kami beli tersebut ternyata harganya cuman /p.?@@.@@@,- 1! Setelah kami klik tombol check out maka selan"utnya kami akan melihat sebuah halaman yang memungkinkan kami untuk bisa memasukkan kupon belan"a 2! )arena kami sudah memiliki kupon belan"a dari toko online anda ? maka kami memasukkan kode kupon tersebut agar kami mendapatkan diskon belan"a 3! Setelah kami klik tombol Terapkan kupon diatas ternyata ada sebuah pesan baru yang muncul disana %da syarat minimum belanja yakni sebesar /p.4@@.@@@,- agar kupon tersebut bisa kami pakai. ,asih ingat bukan dengan penjelasan cara membuat kupon kemarin E Disinilah kegunaan kupon belanja yang bisa anda pakai sebagai sarana pendongkrak omJet penjualan toko online anda tersebut. Trik seperti ini tentunya anda sudah anda ketahui apabila anda sering berbelanja di ,all. Percaya atau tidak kupon belanja seperti ini masih sangat e*ekti* sekali untuk anda pakai dan anda terapkan di toko online anda. 4! )arena kami merasa butuh dan menyukai kaos yang anda "ual diatas maka mau tidak mau kami menambah keran"ang belan"a kami dengan produk yang anda "ual lainnya Dalam contoh ini kami akan membeli 8 buah lagi kaos namun dengan warna yang berbeda misalnya + kaos yang berwarna merah dan yang berwarna hitam. )adi sekarang belanjaan kami sudah mencukupi syarat minimum agar bisa mendapat diskon belanja yang telah anda keluarkan ote + Pada customer tertentu mungkin metode kupon ini bisa e*ekti* namun juga bisa tidak e*ekti* , tergantung dari customer anda itu sendiri. 5! Selan"utnya kami melakukan check out lagi dengan menerapkan kode kupon tadi! Sekarang kupon tersebut bisa kami pergunakan dan ber*ungsi dengan baik. Terlihat pada gambar dibawah ini bahwa kupon tersebut bernilai /p. ;@.@@@,- 8! Setelah kami mengklik tombol pesanan diatas maka kami akan melihat sebuah halaman yang menyatakan orderan atau pesanan yang kami lakukan sudah sukses! Selain itu kami juga akan menerima email pemberitahuan bahwasanya orderan kami sudah diterima dan juga langkah apa yang harus kami lakukan berikutnya. 7arena kami sebagai customer maka kami akan menerima email seperti ini =!Selan"utnya "ika kita lihat status pesanan kami maka terlihat disana bah#a status pesanan tersebut masih PTertahan Q atau Pending! #ntuk melihat status pesanan maka yang harus kami lakukan & yang harus customer anda lakukan adalah mengklik .ink ,y %ccount Status tertahan ini mempunyai arti bahwa kami belum melakukan trans*er uang untuk pembayaran produk yang kami beli dari toko online anda tersebut. 3al : hal seperti ini bisa anda masukkan kedalam halaman tata cara belanja agar customer anda memahami dan mengerti langkah apa yang harus mereka ambil selanjutnya. Dan juga yang terlebih penting lagi adalah anda juga harus menjelaskan di dalam halaman tata cara belanja tsb bahwa setelah mereka mereka selesai melakukan trans*er uang, mereka harus mengkon*irmasi kepada anda. Bisa melalui S,S, 6mail, "hatting ataupun telpon agar orderan mereka bisa anda proses. '(! ari kita lihat terlebih dahulu apa yang akan anda lihat ketika ada seseorang yang melakukan order ditoko online anda )ika kami sebagai customer menerima email pemberitahuan maka anda juga menerima email pemberitahuan mengenai order yang baru saja kami lakukan. 6mailnya seperti pada gambar berikut Dan jika dilihat dari halaman dashboard toko online anda maka akan terlihat seperti ini. 0 7lik pada gambar untuk memperbesar 1 Disini anda bisa melihat barang yang kami pesan melalui toko online anda. Pada posisi seperti ini yang bisa anda lakukan hanyalah menunggu customer anda melakukan pembayaran dan juga kon*irmasi dari mereka. ''! Sekarang asumsikan bah#a kami telah mentransfer uang untuk pembayaran ba"u tersebut dan kami telah mengirimkan kon6rmasi pembayaran kepada anda )ika pembayaran yang kami lakukan tersebut sudah anda cek di rekening anda dan uangnya sudah masuk maka yang harus anda lakukan adalah mengklik icon pengolahan . .ihat gambar berikut. Setelah anda 7lik icon pengolahan tersebut maka warna status orderan tersebut berubah dari yang sebelumnya berwarna kuning sekarang sudah berwarna hijau. Sel anjutnya yang harus anda siapkan tentu mengepak pesanan kami 0customer1 untuk selanjutnya anda kirim. '2!ari kita lihat apa yang ter"adi pada halaman akun kami yang saat ini men"adi customer anda 7arena anda sudah menerima pembayaran kami dan mengklik icon memproses maka status orderan kami pada halaman akun kami juga berubah menjadi M,emprosesL. %nda juga bisa menyertakan keterangan status seperti ini pada halaman tata cara belanja di toko online anda. )adi "ustomer anda bisa tahu apabila statusnya sudah memproses maka hal ini berarti anda sedang menyiapkan orderan & pesanan kami tersebut. 3al ini akan sangat membantu anda dalam membangun rasa kepercayaan customer kepada anda. 7ondisi ini sangat sensiti* terutama jika customer anda tersebut baru pertama kali melakukan transaksi & berbelanja di toko online anda. Ini sangat e*ekti* jika misalnya customer anda tersebut melakukan trans*er melalui internet banking dan kemudian mereka memantau kesigapan pelayanan di toko online anda. Semua type customer bisa masuk ke toko online anda, jadi sebaiknya anda memberikan pelayanan yang super e(tra. )ika customer puas tentu keuntungan akan kembali lagi kepada anda. ,ereka bisa menjadi customer loyal anda dan juga bisa menjadi orang yang bisa membantu anda promosi secara gratis. 3arapannya tentu mereka bisa mempromosikan toko online anda tersebut ke teman : teman mereka. '1!Setelah proses Packing selesai dan anda sudah mengantar barang tersebut ke "asa pengiriman maka selan"utnya anda bisa mengklik tombol Selesai dan setelah anda klik icon diatas maka warna status orderan tersebut menjadi Biru. '2!Sebagai customer apa yang akan kami lihat pada halaman akun kami 7ami akan melihat status pesanan &orderan kami berubah menjadi Selesai Dan masih ada lagi sebuah email pemberitahuan yang kami dapatkan yang menyatakan bahwa orderan kami sudah "omplete Semoga penjelasan kami diatas bisa anda pahami dengan baik dan tentunya anda bisa mengambil langkah yang lebih baik ketika melayani customer anda kelak. Sampai ketemu pada tahapan selanjutnya. "ara membuat toko online menggunakan 2oo"ommerce 0Tahap Tiga Puluh1 "ara membuat toko online menggunakan 2oo"ommerce kali ini merupakan Tutorial yang akan melengkapi keseluruhan langkah demi langkah yang telah kami sampaikan selama 4 bulan terakhir ini. Secara garis besar semua *itur yang bisa kita pakai pada plugin 2oo"ommerce tanpa pugns premum sudah kami sampaikan kehadapan anda. )ika anda berhasil memahami panduan yang kami berikan maka kami yakin sekali anda sudah mampu mengelola sebuah toko online yang dibuat dengan menggunakan 2oo"ommerce tersebut. Toko online anda memakai template apapun asalkan masih menggunakan plugin 2oo"ommerce maka caranya tetap sama dan yang membedakan hanya pengelolaan dan pengaturan templatenya saja. Pada tahap ke 4@ ini kita hanya akan menyempurnakan tampilan 3omepage toko online kita menjadi terlihat lebih pro*essional lagi dan lebih terlihat kreati* dan unik meskipun template yang kita pakai hanyalan template gratisan. Target yang ingin kita capai dalam tutorial ini bisa anda lihat pada gambar dibawah ini atau jika ingin lebih jelas lagi silahkan kunjungi DEMO secara ve nya. Disana bisa kita lihat bahwa pada halaman homepage kita ada Slideshow , Produk terbaru , Slide testimonial dari customer, Sebuah Dideo /e!iew Produk dan Da*tar nama bank yang kita sediakan sebagai metode pembayaran . ,ari kita mulai dari langkah yang paling mudah dan terlebih dahulu kemudian di teruskan dengan langkah yang lebih sulit.
1. Insta, Settngs dan Add a SdeShow 7ita akan menambahkan *itur Slideshow di halaman beranda & homepage toko online kita tersebut, untuk itu kita akan menggunakan sebuah plugin slideshow gratis yang namanya adalah Slideshow j9uery image gallery D ownoad Insta dan Aktfkan Install plugin Slideshow j9uery image gallery diatas dan kemudian langsung anda akti*kan plugins tersebut. )ika anda belum tahu caranya silahkan lihat pada artikel kami mengenai cara mengnsta sebuah pugn d wordpress.
Settngs pugns Sdeshow Setelah anda install dan mengakti*kan plugin tersebut maka selanjutnya kita akan melakukan setting ukuran yang akan kita pakai dalam slideshow tersebut. Dalam tutorial ini kita akan menambahkan sebuah slideshow dengan ukuran ?@;W ( =4@ p( 0 ote + ukuran image slideshow ini adalah ukuran yang pas untuk template ,ystile, untuk template yang lain silahkan anda sesuaikan sendiri 1 .angkahnya adalah sebagai berikut + 1. Kk Sdeshows 2. Ph Genera Settngs 3. Ph Defaut Sdeshow Settngs 4. -nimation used for transition bet#een slides : Ph Sde Left, Anda bebas memh |ens anmas yang anda suka, dsn sebaga contoh kam memh Sde Left. 5. :umber of slides to 6t into one slide : Tus dsana angka 1 6. aOimum #idth! *hen maOimum #idth is (? maOimum #idth is ignored :tus ebar magenya dsn yakn 1059 ( ebar mage 1059 px ) 7. Proportional relationship bet#een slidesho#Is #idth and height $#idth:height% : Hapus tusan yang ada dsana 8. Slidesho#Is height : Tus tngg magenya dsn yakn 430 ( tngg mage 430 px ) 9. 0mage beha>iour : Ph Natura and Centered 10. Settngan yang annya barkan sepert apa adanya , sekarang an|utkan dengan mengkk tombo Save Changes. Membuat Sdeshow Utama Selanjutnya kita akan membuat sebuah slideshow utama untuk keperluan kustom homepage kita ini. Slideshow utama ini merupakan Slideshow yang menggunakan gambar. +. Kk Add New /. Tus nama sde show anda ( bebas ) 0. Copy dan pastekan shortcode tersebut pada notepad , Shortcode nah nant yang akan kta paka . Pada contoh n Shortcode sdeshow yang kam buat adaah : 4slidesho%5deploy id=6+7768 9. Ph Tempate untuk Sdeshow-nya Fu Screen / Fu Wdth / Tanpa ada Sdebar Upload !mage untuk slidesho% 7arena pada settingan tadi kita menggunakan image sebanyak 4 buah dengan ukuran image ?@;W ( =4@ p( maka kami sudah mempersiapkan ketiga image tersebut. )ika anda belum mempunyai image untuk latihan ini maka anda bisa mendownload & memakai image yang kami pakai untuk tutorial ini disini + http://boggerdscuss.com/woocommerce/wp-content/upoads/kaos- ubuntu1.png http://boggerdscuss.com/woocommerce/wp-content/upoads/kaos- kucng1.png http://boggerdscuss.com/woocommerce/wp- content/upoads/pa|angan1.png #ntuk mengupload image slideshow tersebut lihat pada area sebelah kanan Kk tombo Image Sde Kk Seect Fes. Temukan dmana okas mage yang sudah kta persapkan tad Seteah ketemu maka upoad ketga gambar untuk sdeshow tersebut secara bersamaan bar cepat Seteah seesa proses upoadnya maka sahkan anda ph ketga gambar tersebut kemudan Kk tombo Seect d po|ok kanan bawah Kemudan sah keterangan yang dperukan untuk sdeshow anda tersebut ( |udu , Deskrps dan URL yang mengarah kepada produk yang dmaksud ) . 1. |udu yang akan dtampkan pada mage sde pertama 2. Deskrps untuk mage pada sde pertama 3. Lnk ke produk mage pertama 4. |udu yang akan dtampkan pada mage sde kedua 5. Deskrps untuk mage pada sde kedua 6. Lnk ke produk mage kedua 7. |udu yang akan dtampkan pada mage sde ketga 8. Deskrps untuk mage pada sde ketga 9. Lnk ke produk mage ketga 10. Kk tombo pubsh
Sekarang Slideshow utama kita sudah jadi dan mari kita lanjutkan dengan membuat sebuah Te(t slideshow untuk testimonial dari customer kita. Membuat Sdeshow Tambahan #ntuk membuat slideshow yang dikhususkan sebagai tempat testimonial dari toko online kita maka kita perlu membuat Slideshow berbentuk T6HT. "aranya agak mirip dengan cara membuat slideshow yang menggunakan gambar diatas tadi, langsung saja mari kita membuat slideshow tambahan ini. 7lik %dd ew Slideshow kemudian isikan hal : hal berikut ini +. Tus |udu Sdeshow untuk testmona dar peanggan n , msa : Testmona /. Copy dan pastekan Shortcode tersebut pada Notepad, n nant yang akan kta paka. Punya kam 4slidesho%5deploy id=6/9768 0. Ph Fu Wdth 9. -nimation used for transition bet#een slides : Ph Sde Down 2. aOimum #idth! *hen maOimum #idth is (? maOimum #idth is ignored : Pastkan sa|a angkanya mash 1059 :. Slidesho#Is height : Gant dengan angka 40 . In maksudnya tngg sdeshow untuk testmona tersebut hanya 40 pxe sa|a dan berbeda dengan sdeshow untuk mage datas ;. Ph Yes pada kedua Ops tersebut <. Ph No pada keempat Ops tersebut Seteah tu arahkan pandangan anda ke kebeah kanan, Kk tombo Text sde tersebut 4 ka ( dsn kam akan menampkan 4 buah testmona dar customer sebanyak 4 buah ) . |ka anda ngn menampkan ebh dar 4 maka sesuakan sa|a dengan apa yang anda ngnkan. Lhat pada gambar dbawah mengena apa yang anda harus akukan
Seteah seesa anda s testmona datas maka sekarang an|utkan dengan mengkk tombo Pubsh. Saat ini kita sudah mempunyai 8 buah slideshow + 1. Sdeshow daam bentuk Image 2. Sdeshow daam bentuk Text Sekarang mari kita lanjutkan dengan langkah berikutnya
2. Mencar sebuah Vdeo Silahkan anda cari sebuah !ideo dari Coutube atau jika anda mempunya !ideo sendiri silahkan anda unggah ke Coutube terlebih dahulu dan "opy link url Dideo tersebut. Dalam contoh ini kami memakai sebuah Dideo /e!iew mengenai iPhone ; dengan link sbb + http+&&www.youtube.com&watchE!P.J*%nn!'g4I "opy dan Paste link Dideo yang anda inginkan di otepad lagi, kita akan memakainya nanti,
3. Menyapkan mage ogo Phan Bank Disini kami telah membuat sebuah image yang berisikan A buah logo beberapa bank ternama, pada toko online anda silahkan sesuaikan dengan rekening bank yang anda punya dan yang anda pakai sebagai tempat penampungan pembayaran dari customer anda. 5abungkan logo : logo Bank tersebut menjadi ? dengan ukuran ?@=; ( ?@@ p(. Disini yang terpenting adalah lebarnyanya saja yang harus sama yakni ?@=; pi(el. .oh kenapa berbeda dengan ukuran lebar image pada Slideshow yang pertama tadi ya E Ini memang berbeda , setelah kami coba dengan beberapa image percobaan maka ketemulah ukuran lebar yang pas untuk image logo bank ini. Imagenya bisa anda pakai punya kami terlebih dahulu, untuk percobaan saja. .ink + http+&&bloggerdiscuss.com&woocommerce&wp-content&uploads&A-bank.png
4. Membuat Sebuah Statc Page Ini merupakan inti dari pembuatan kustom homepage untuk toko online kita tersebut, kita akan memakai semua hal yang sudah kita persiapkan diatas, ,ari kita membuat sebuah static page baru yang akan kita pakai sebagai template halaman homepage toko online kita ini. 1. Kk Pages 2. Kk Add New Page 3. Tus |udu Statc Page anda 4. Tempate , ph Fu Wdth Setelah anda tulis judulnya dan juga memilih *ull width sebagai template dari halaman static ini maka yang harus anda lakukan adalah sebagai berikut . Silahkan susun dengan urutan yang ada pada gambar diatas , setelah selesai klik Publish. #ntuk keterangan rincian pembuatannya static page untuk homepage ini bisa anda baca pada tahap selanjutnya. "ara membuat toko online menggunakan 2oo"ommerce 0Tahap Tiga Puluh Satu1 Seperti yang sudah kami janjikan kemarin pada tahap tiga puluh satu ini kami akan meneruskan tutorial yang belum komplit dari tutorial sebelumnya. Disini kami akan membahas mengenai membuat static page yang akan kita pergunakan sebagai 3omepage toko online yang kita buat. %nda tidak harus mengikuti susunan yang sama seperti yang kami buat ini, namun yang kami harapkan kepada anda adalah anda mendapatkan ide tentang bagaimana membuat sebuah custom page untuk toko online anda tersebut. ,ungkin imaginasi anda akan lebih baik lagi dari kami sehingga bisa menghasilkan sebuah design yang lebih bagus untuk toko online anda tersebut. ,ari kita lihat lagi gambar terakhir dari tutorial pada tahap 4@ kemarin. Silahkan anda perhatikan gambar dibawah ini + '! Silahkan anda tulis Rudul Static Page anda? karena "udul ini nantinya muncul atau terlihat oleh customer kita maka buatlah "udul dengan menggunakan kata 7 kata yang menarik!
2! Pilih editor modenya N Visual ! /ihat gambar diatas! 1! Copy Paste Shortcode Slidesho# anda yang pertama Shortcode Slideshow punya kami yang pertama adalah seperti ini +4slidesho%5deploy id=6+7768 2! )emudian kita akan memberikan sedikit "arak antara Slidesho# dengan )ata; kata koleksi terbaru #ntuk memberikan sedikit jarak tersebut kita akan memasukkan Di!ider , "opy paste shortcode Qdi!iderR ini tepat dibawah Shortcode slideshow yang pertama tadi. %tau anda juga bisa memasukkan Shortcode Di!ider ini dengan cara berikut 1. Kk Woothemes Shortcode con 2. Letakkan kursor mouse anda datas tusan Dvder 3. Kk / Ph Dvder
3! )emudian kita akan membuat kata )./@)S0 T@&B-&9 D0 T.). )-0 1. Kk Bod ( Mode tusan teba ) 2. Ph agnmentnya Center ( supaya tusan kta berada d tengah ) 3. Kk Paragraph 4. Sean|utnya Kk Headng 3 ( agar tusan yang kta buat agak besar ) "opy paste tulisan berikut dibawah barisan Di!ider tadi )"=>)S! ?>'.('U &! ?")" )(M! 4! Selan"utnya kita akan memasukkan recent products / produk terbaru diba#ah tulisan tersebut! :amun kita hanya akan memasukkan 2 buah produk sa"a 1. Kk WooCommerce con 2. Ph Recent Products Setelah anda klik /ecent products maka shortcodenya akan muncul , lihat gambar dibawah
Shortcodenya kira : kira seperti ini+ QrecentXproducts perXpagePY'2Y columnsPY=Y orderbyPYdateY orderPYdescYR 5anti angka '2 tersebut dengan angka 2 supaya produk yang ditampilkan hanya = buah produk saja. Secara jika kita lihat 0 pre!iew 1 maka akan terlihat seperti pada gambar berikut. 5! /angkah berikutnya kita akan menambahkan kata Testimonial dari pelanggan .akukan hal yang sama dengan langkah no 4 diatas , namun yang berbeda 3eading-nya saja , pilih 3eading ; kemudian copy paste tulisan berikut ini ?estimonial dari pelanggan kami
antinya akan terlihat seperti pada gambar berikut
8! Sekarang kita akan menambahkan Shortcode Slidesho# Testimonial yang sudah kita buat sebelumnya "opy dan Pastekan Shortcode anda dibawah kata : kata Testimonial dari pelanggan kami tersebut 4slidesho%5deploy id=6/9768 =! :ah? kita akan menambahkan lagi sebuah Di>ider! :amun kali ini supaya Di>ider tersebut mempunyai garis maka kita akan menambahkanDi>ider yang "enis AoriFontal &ule 1. Kk Woothemes Shortcode con 2. Letakkan kursor mouse anda datas tusan Dvder 3. Kk / Ph Horzonta Rue antinya setelah anda klik horiJontal rule diatas maka akan terlihat seperti berikut ini '(! Sekarang kita tambahkan lagi sebuah tulisan sebelum embed >ideo dari Moutube "aranya sama dengan langkah no ; namun untuk 3eadingnya silahkan pilih 3eading ? Revew Phone 5 terbaru !!
anti harus terlihat seperti pada gambar dibawah ini ''! Tiba saatnya kita memasukkan >ideo dari Moutube 7emarin kami telah mempersiapkan sebuah Dideo dengan #/. berikut + http+&&www.youtube.com&watchE!P.J*%nn!'g4I Sebenarnya ada banyak cara yang bisa kita lakukan untuk embed !ideo ini, kami pernah mengulasnya dsn amun jika kita memakai cara tersebut maka customer bisa dengan leluasa melihat !ideo tersebut langsung dari Coutube dan tentunya mereka akan meninggalkan toko online kita. Berikut contohnya : 6mbed Dideo secara langsung menggunakan cara diatas & metode pada artikel kami tersebut )ika anda klik logo Coutube pada pojok kanan bawah maka anda akan bisa melihatnya langsung !ideo tersebut melalui Coutube.
Sekarang coba klik logo Coutube yang ada pada embed Dideo dibawah ini..
Sudah tahu bedanya bukan E ah sekarang kami akan menunjukkan bagaimana caranya supaya !ideo yang kita embed dari Coutube tersebut tidak bisa dilihat ke sumbernya & youtube. Perhatikan .ink Coutube Dideo kami ini + http+&&www.youtube.com&watchE !P/Ff-nn>.g10 7ita hanya membutuhkan tulisan yang berwarna merah paling belakang Oobject widthPL32(L heightPL1((L classidPLclsid+d8<cdbAe-aeAd-??c*-WAbZ- ===;;4;=@@@@[ codebasePLhttp+&&download.macromedia.com&pub&shockwa!e&cabs&*lash&sw*lash.cab\!ers ionPA,@,=@,@[$Oparam namePLallow-ullScreenL !aluePLtrueL &$Oparam namePLwmodeL !aluePLtransparentL &$Oparam namePLsrcL !aluePLhttp+&&www.youtube.com&!&/Ff-nn>.g10L &$Oparam namePLallow*ullscreenL !aluePLtrueL &$Oparam namePLallownetworkingL !aluePLinternalL &$Oparam namePL!alueL !aluePLinternalL &$Oembed widthPL32(L heightPL1((L typePLapplication&(-shockwa!e- *lashL srcPLhttp+&&www.youtube.com&!&/Ff-nn>.g10L allow-ullScreenPLtrueL wmodePLtransparentL allow*ullscreenPLtrueL allownetworkingPLinternalL !aluePLinternalL &$O&object$
)eterangan : 1. Gant /Ff-nn>.g10 dengan tusan terakhr dar ur vdeo yang ngn anda pasang ( ada 2 kode tersebut ) 2. Gant ukuran ebar vdeo payernya 32( dan Tnggnya 1(( ( masng - masng ada 2 kode tersebut) 3. |ka anda ngn menghangkan tur fuscreen nya maka gant tusan truemen|ad Fase. Dalam contoh ini kami akan menempatkan embed Dideo ini dengan kode diatas. "aranya adalah sebagai berikut. Sebelumnya kita dari tadi memakai editor mode Disual #ntuk memasukkan kode embed Coutube diatas kita harus mengganti mode editor kita dari !isual menjadi Te(t . )ika anda sudah berada pada posisi Te(t maka anda akan melihat dilayar anda seperti pada gambar berikut ini. 3apus terlebih dahulu tulisan InbspU . )ika anda meletakkan kode Dideo dibawah tulisan tersebut maka jarak antara tulisan /e!iew dengan Dideonya akan lebih lebar. Setelah anda hapus , silahkan lanjutkan mempaste kode embed !ideo youtube anda tadi. .ihat gambar dibawah ini Sekarang ganti lagi mode editor tersebut ke mode Disual, maka anda akan melihat seperti berikut Posisi !ideo tidak berada di tengah, sekarang kita coba klik Pre!iew maka kita akan melihat !ideo yang akan kita tampilkan di static page ini juga tidak berada di tengah halaman. Sekarang mari kita perbaiki posisi !ideo tersebut supaya berada di tengah halaman. 1. Kk pada area vdeo tad 2. Kk agnmentnya Center )ika langkah anda benar maka sekarang akan terlihat seperti pada gambar berikut '2! Sekarang kita akan menambahkan AoriFontal &ule lagi .ihat lagi langkah no W diatas, setelah anda tambahkan horiJontal rulenya maka anda akan melihat seperti pada gambar berikut '2! ari kita lan"utkan dengan menambahkan tulisan Pilihan etode Pembayaran .akukan hal yang sama dengan langkah no 4 di atas dan pilih heading nya adalah heading ;. "opy paste tulisan berikut atau anda bisa membuat dengan kata : kata yang lain. - Pilih Metode Pembayaran (nda - '1! Mang terakhir kita upload image logo bank .ink image + http+&&bloggerdiscuss.com&woocommerce&wp-content&uploads&A-bank.png "aranya sama seperti memasukkan image biasa, Setelah anda upload dan insert maka akan terlihat seperti pada gambar berikut. '2! Sekarang klik tombol publish Proses pembuatan static page untuk custom homepage sudah selesai. '3! Bagaimana cara supaya halaman static page tersebut men"adi halaman home page toko online kita S caranya mudah sekali? silahkan anda ikuti langkah berikut ini 1. Kk Settngs 2. Kk Readng 3. Ph Statc page 4. Ph |udu haaman statc page yang sudah kta buat datas 5. Kk Save Changes
Semoga penjelasan diatas bisa anda mengerti dan pahami dengan baik. Sampai jumpa lagi pada tutorial berikutnya. "ara membuat toko online menggunakan 2oo"ommerce 0Tahap Tiga Puluh Dua1 Setelah kita kemarin belajar membuat custom homepage untuk toko online kita maka pada tahap ke 48 ini kita perlu menyempurnakan lagi kelengkapan yang perlu kita sediakan untuk customer kita nantinya. Selain untuk keperluan customer ada juga yang tidak kalah pentingnya yakni menyediakan in*ormasi selain in*ormasi mengenai produk yang kita jual tersebut. #ntuk itu kita memerlukan sebuah blog yang nantinya ber*ungsi sebagai sarana berbagi in*ormasi dan sekaligus untuk mendatangkan pengunjung : pengunjung baru ke toko online kita yang berasal dari search engine. ,eskipun tujuan utama kita adalah berjualan online bukan berarti kita tidak membutuhkan blog, malah sebenarnya blog wajib ada berdampingan dengan toko online kita karena terkadang blog yang anda sediakan di toko online anda tersebut bisa menjadi salesman anda dikemudian hari. .antas apa yang bisa kita sampaikan dalam blog tersebut E %nda bisa menulis hal : hal yang masih ada sangkut pautnya dengan barang yang anda jual dan sekaligus dalam artikel tersebut disisipkan link ataupun kalimat : kalimat yang berisikan penawaran barang atau produk yang anda jual kepada mereka. Tips + 7etika menyisipkan kalimat yang berisikan penawaran produk usahakan jangan terlalu berlebihan dan jangan terlihat ada kebohongan disana. Buatlah senatural mungkin sehingga mereka bisa terpancing untuk membeli produk kita tanpa harus merasa disuruh atau dipaksa membeli oleh kita.
Cara menambahkan fasilitas Blog '! 9ntuk menambahkan fasilitas blog di toko online kita? caranya sangat mudah sekali! Mang perlu anda lakukan hanyalah membuat sebuah halaman static page baru namun tanpa perlu anda isi apapun! 1. Kk Pages 2. Kk Add New 3. Tus |udu statc pagenya ( Bog ) 4. Kk tombo pubsh 2! Setelah anda publish static page yang sudah kita beri "udul Blog diatas maka sekarang kita akan mencoba melihat bagaimana tampilan halaman static tersebut %nda akan melihat sebuah halaman kosong seperti pada gambar berikut ini 3alaman kosong diatas merupakan kerangka yang akan kita pergunakan sebagai halaman postingan artikel : artikel yang kita publish melalui blog kita.
1! -gar kita bisa segera membuat artikel 7 artikel pada blog kita dan agar artikel tersebut tidak muncul pada halaman homepage maka kita perlu melakukan sedikit settingan lagi 1. Kk Settngs 2. Kk Readng 3. Ph Statc page 4. Ph Bog 5. Ph Summary 6. Kk tombo Save Changes 2! Sekarang anda sudah bisa memulai membuat artikel 7 artikel di blog anda tersebut dengan cara berikut ini 1. Kk Posts 2. Kk Add New #ntuk cara membuat artikel tentunya tidak perlu kami jelaskan secara detail karena caranya seperti membuat artikel secara umum di 2ordPress. 3! asukkan link ke halaman blog anda melalui menu toko online kita! Pada artikel kami sebelum : sebelumnya sudah dijelaskan tentang bagaimana cara memasukkan atau menambahkan menu di toko online kita tersebut. 7ami berharap anda masih mengingatnya dan masing paham bagaimana caranya.
+asilitas lain untuk Customer ,engenai *asilitas untuk customer kita yang akan kita sediakan di toko online kita tentunya masing : masing orang mempunyai pemikiran yang berbeda. )adi kami tidak bisa memberikan sesuatu hal yang pasti mengenai apa yang harus anda sediakan untuk customer anda. Pada intinya, *asilitas yang ada di toko online anda tersebut harus bisa memberikan nilai lebih kepada calon ataupun customer anda. 3al ini juga tergantung dari strategi marketing anda dalam pengelolaan toko online anda. "ara membuat toko online menggunakan 2oo"ommerce 0Tahap Tiga Puluh Tiga1 \ -IIS3 Setelah kita melalui sekian banyak tahapan dalam proses pembuatan toko online menggunakan 2ordPress dan 2oocommerce ini, tentunya saat ini anda sudah banyak mengerti dan juga paham dengan apa yang telah kami terangkan selama ini. Secara keseluruhan kami telah menyampaikan panduan dasar dalam penggunaan plugins 2oo"ommerce kepada anda. #ntuk lebih maksimal lagi anda bisa mengembangkannya sendiri dan sesuaikan dengan produk yang anda jual. #ntuk masalah kustomisasi template memang tidak terlalu banyak kami bahas pada tutorial ini karena tutorial cara membuat toko online menggunakan 2oo"ommerce ini sengaja kami *okuskan pada cara menggunakan plugins 2oo"ommerce nya. #ntuk lebih mempercantik tampilan template toko online anda tersebut maka lakukanlah sedikit tweak pada css dari template yang anda pergunakan. 7reati*itas anda tentunya akan lebih menentukan apakah toko online anda akan terlihat unik dan berbeda dengan toko online lainnya atau memiliki design yang sama dengan mereka. )ika anda sudah memahami 2oo"ommerce maka memakai template apa saja tentu anda tidak akan merasa kesulitan lagi. Tahap 44 ini merupakan tahap terakhir dalam proses pembuatan toko online dengan woocommerce. )ika toko online yang anda buat tersebut sudah jadi atau sudah selesai secara keseluruhan maka yang harus anda lakukan adalah sbb+
Submt Toko Onne anda ke Googe, Bng dan Yahoo %gar toko online anda bisa di temukan oleh orang maka anda perlu mensubmit toko online anda & menda*tarkan toko online anda ke 5oogle, Bing dan Cahoo.
Insta beberapa Pugns tambahan #ntuk lebih menyempurnakan lagi kesiapan toko online kita maka diperlukan beberapa plugins tambahan yang mungkin anda perlukan untuk toko online anda tersebut. Berikut 8 kategori plugins 2ajib yang harus anda install !nstall S>" plugins %gar toko online kita berada pada halaman paling depan di mesin pencari kita perlu menambahkan S6' plugins. #ntuk keperluan S6' anda bisa menginstall salah satu dari plugins S6' yang ada pada artikel kami disini + +ree S@. Plugins
!nstall ,ordPress Security plugins 3al terpenting ketika kita memiliki toko online atau ketika toko online kita sudah tersubmit di search engine adalah masalah security. Silahkan anda baca artikelnya pada artikel ini + Securty Pugns 1 Securty Pugns 2
?ips untuk memperkuat system security Pada artikel kami lainnya, kami telah membuat beberapa tips kecil agar toko online kita tersebut tidak mudah kena 3ack oleh orang lain. Silahkan anda baca disini + Tps dan Aternatf Securty Pugns )ika anda mengalami kendala dengan toko online anda tersebut, silahkan sampaikan kendala atau permasalahan yang anda hadapi melalui kolom komentar dibawah ini. Dengan senang hati kami akan mencoba mencarikan solusi permasalahan anda sebaik mungkin.