CARA MENGINSTAL DAN MENJUAL BARANG DI WORDPRESS E-COMMERCE

Toko online WordPress – Membuat tokol (toko online) sangat menyita waktu dan tuntutan teknikalitasnya juga tinggi. Sebagai benchmark dulu saya belajar dari nol, siang dan malam, Senin hingga Senin dan itu memakan waktu sekitar dua bulan.

Akan tetapi kini dengan WordPress dan WooCommerce Anda dapat membuat tokol dalam 1 hari saja dengan relatif mudah.

Tutorial ini telah menelan ratusan jam dari hidup saya dan saya telah merevisinya beberapa kali agar selalu up to date. Oleh karena itu saya akan sangat berterimakasih sekali, kalau Anda mau memberikan backlinkke laman ini atau share ke teman-teman Anda yang mungkin membutuhkan.

Saya ucapkan:

Terimakasih kepada Mas Darmawan dari PanduanIM yang sudah backlink kemari dari artikel: 4 Langkah untuk Mulai Berjualan Online

Sebaiknya Anda Bookmark (CTRL+D) laman ini, karena panjangnya hampir mencapai 8000 kata di luar tutorial tambahan lainnya. Jadi Anda bisa balik lagi jika diperlukan.

Tutorial ini terbagi menjadi 3 bagian besar:

1.      Tutorial dasar

2.      Tutorial tambahan

3.      Bengkel tokol

Tutorial dasar – Ada 15 langkah untuk membangun tokol dasar dan inilah yang akan Anda pelajari:

• Beli Domain dan Sewa Hosting
• Instal WordPress dalam 5 Menit
• Masuk ke WordPress Dashboard
• Instal dan Konfigurasi Plugin Jetpack by WordPress
• Instal dan Konfigurasi Tema Virtue
• Instal dan Konfigurasi Plugin WooCommerce
• Instal Plugin Theme My Login
• Memasang Widget Log in dari Theme My Login di Sidebar
• Instal dan Konfigurasi Plugin WooCommerce JNE Shipping (Free Version)
• Buat Produk Anda
• Pengaturan Gambar WooCommerce
• Mengubah Format URL
• Membuat Menu
• Membuat Terjemahan dengan Software Poedit

Tutorial tambahan – Tutotam bertujuan untuk memperkaya tokol Anda:

1.      Cara Membuat Tema Anak

2.      Cara Memasang Aplikasi Chat

3.      Cara Menambahkan Slider Pada Tema

4.      Cara Memindahkan Posisi Harga Awal Ketika Diskon

5.      Cara Membuat Laman Konfirmasi Pembayaran

6.      Cara Menambah Info Kontak di Atas Menu Utama Tema Virtue

7.      Cara Menampilkan Informasi Rekening

8.      Cara Membuat Pita/Badge “Sale” dan Barang “Baru” di WooCommerce

9.      Cara Membuat Navigasi Filter Produk

10. Cara Membuat Kaca Pembesar

11. Cara Membuat Halaman Sold Out

12. Cara Menerapkan Harga Grosir di WooCommerce

13. Cara Memanfaatkan WooCommerce Image Flipper di Tema Virtue

14. Cara Membuat Email Dengan Nama Domain Kita

15. Cara Agar Email Tokol Tidak Masuk Folder Spam

16. Tingkatkan Keamanan Tokol dengan reCAPTCHA

17. Cara Membuat Menu di Footer

Silahkan klik: Cara Membuat Toko Online WordPress dalam 1 Hari[Tutotam]

Bengkel tokol – Tutorial untuk perawatan dan modifikasi:

1.      Bila Yith WooCommerce Ajax Navigation Tidak Berjalan di Tema Virtue

2.      Modifikasi Halaman Blog – Single Post dari Tema Virtue

3.      Menghilangkan Judul Halaman Toko, Sortir dan Keterangan Jumlah Item yang Ditampilkan

4.      Bila Dashboard WordPress Tiba-tiba Blank

5.      Menghilangkan Tombol Panah Penambah Jumlah Barang Yang Muncul Tiba-tiba di Firefox

6.      Cara Terlarang Tampilkan Slideshow Tema Virtue di Laman Toko

Silahkan klik: Cara Membuat Toko Online WordPress dalam 1 Hari [Bengkel Tokol]

Catatan:

1.      Tidak bisa menggunakan wordpress.com – Sebab di sana tidak boleh instal plugin. Sementara WooCommerce adalah sebuah plugin yang harus diinstal.

2.      Perhitungan 1 hari – Ini di luar proses mengunggah produk ke tokol dan kustomisasi lainnya.

WooCommerce gratis tapi handal

WooCommerce pada mulanya dikembangkan oleh WooThemes. Kemudian pada bulan Mei 2015 diakuisisi oleh WordPress. Jadi sekarang toko online Anda didukung oleh perusahaan yang telah mengembangkan sebuah platform paling populer di dunia.

Menurut situs dari WooThemes, plugin WooCommerce telah diunduh sebanyak 13.760.235 kali dan dipakai oleh 37% toko online di dunia.

Keunggulan WooCommerce

Saya sudah pernah menjajal 2 platfom eCommerce lain sebelum WooCommerce, misalnya:

1.      Prestashop – menurut saya pengoperasiannya tidak mudah

2.      Opencart 1.5.6 – saya menghabiskan waktu 2 bulan penuh untuk belajar. Meskipun sederhana, tetapi ada banyak bug. Dibutuhkan pengetahuan koding yang tinggi.

Bila Anda ingin memulai bisnis online, sebaiknya jangan berlama-lama dengan pembangunan tokol-nya. Melainkan segera ke sisi pemasaran dan penjualan. Sebab uang tunai akan terus menipis untuk membayar ini dan itu.

Nah, kemudahan mempersiapkan tokol dengan WordPress danWooCommerce bisa menjadi solusi itu. Cocok untuk Anda yang baru mau mulai dan ingin tokonya secepatnya berjalan.

Keunggulan lain dari menggunakan WordPress sebagai tokol Anda adalah Anda bisa menggunakan blog sebagai media marketing Anda. Sebab WordPress memang sebenarnya platform untuk blogging.

Namun demikian perlu Anda ketahui, marketing konten memerlukan keahlian tersendiri. Anda bisa saja membuat 10 artikel dan mendapatkan trafik yang tinggi, jika Anda tahu konten apa yang dicari orang dan bagaimana mempromosikannya.

Dengan WooCommerce besutan Woothemes Anda akan mendapatkan:

1.      Platform untuk memajang produk

2.      Sistem keranjang

3.      sistem stok

4.      Sistem pembayaran

5.      Sistem registrasi pelanggan

6.      Sistem pengelolaan data pesanan, pelanggan dan produk

Biaya pembuatan toko online

Biaya yang dikeluarkan untuk membuat tokol standar, relatif tidak besar, yaitu: Domain, Hosting, Internet, dan Plugin.

Saya katakan relatif karena besarannya tergantung beberapa faktor pilihan dan daya finansial Anda.

WordPress dan WooCommerce, serta beberapa plugin, gratis. Namun untuk fitur lain seperti penghitungan biaya kirim (JNE, Tiki, POS), laman konfirmasi, filter produk dan lain-lain diperlukan tambahan plugin lainnya dan di antaranya berbayar.

Target pengguna

Ketika membuat tutorial ini saya menargetkan para pengguna WordPress pemula. Oleh karena itu saya banyak memberikan penjelasan dan detil tahapan yang harus dilakukan untuk mencapai sesuatu.

Keuntungan jualan menggunakan toko online

#1 Biaya relatif lebih murah

Apabila Anda pernah menyewa tempat untuk jualan, misalnya di mal. Anda tentu tahu, semakin luas tempatnya, semakin mahal harganya. Misalnya ukuran 2 x 1 meter bisa kena 3-6 juta per bulan. Apalagi kalau malnya elite.

Dengan toko online biaya tempat bisa digantikan dengan biaya domain dan hosting. Biaya .com setahun hanya sekitar Rp.120-140rb, hosting $2.95 – $3.95 per bulan. Anda bisa pajang produk hingga ribuan jenis.

Kalau sewa tempat, pemilik sewa dapat selalu menaikkan ongkos sewa. Begitu Anda terlihat sukses, uang sewa dinaikkan. Lama-lama Anda yang awalnya ingin bekerja sendiri, malah jadi seolah bekerja untuk pemilik tempat. Uang yang didapat, langsung berpindah tangan lagi ke pemberi sewa.

#2 Tidak perlu khawatir uang hilang

Memegang uang cash, apalagi dalam jumlah yang banyak bisa menjadi incaran penjahat.

Misalnya karyawan Anda hendak membawa uang hasil jualan di mal ke rumah Anda. Di dalam perjalanan ia bisa saja kena rampok atau dihipnotis di angkot. Atau bisa juga karyawan Anda pura-pura kena rampok. Uang pun raib.

Kalau transaksi di toko online, duit langsung masuk ke rekening.

#3 Tidak perlu khawatir kena tipu-tipu karyawan

Contoh kejadian di outlet baju, karyawati Anda naksir dengan salah satu baju yang Anda jual. Tapi dia tidak mau keluar uang sendiri. Trik yang ia lakukan adalah dengan menaikkan harga baju-baju yang dijual, nah dari kelebihannya itulah, ia gunakan untuk membayar baju yang ia inginkan.

Apabila Anda jualan di toko online, hal semacam itu tidak bisa terjadi.

#4 Pelanggan Anda tidak mudah dicuri

Apabila saat ini Anda berjualan di BBM group, pesaing Anda dapat pura-pura masuk ke group Anda sebagai pelanggan. Lalu ia catat no pin pelanggan Anda. Kemudian ia undang mereka untuk masuk ke groupnya.

Jika Anda menggunakan website, maka pesaing tidak bisa mencuri pelanggan semudah di BBM Group.

#5 Jangkauan pasar yang luas

Apabila Anda mampu memasarkan toko Anda, pada dasarnya tidak ada lagi batasan geografis. Orang di ujung dunia pun kalau mau bisa beli barang Anda.

Peringatan

Memiliki toko online yang siap operasi hanyalah langkah awal. Selanjutnya Anda HARUS melakukan marketing. Jika tidak, toko online Anda DIJAMIN kosong.

Persiapan

Teknologi berkembang dengan sangat pesat. Dalam mengikuti tutorial ini perhatikanlah versi WordPress dan plugin yang terkini dengan yang digunakan di tutorial. Sebab perbedaan versi bisa berarti perbedaan tampilan, fitur, dll.

Ada kemungkinan perbedaan versi bisa menyebabkan plugin-plugin atau tema yang dulunya bekerja menjadi sebaliknya.

Untuk infomarsi platform, plugin dan tema (tampilan grafik dan tekstual) yang akan kita gunakan adalah:

1.      Platform WordPress versi 4.1.1

2.      Plugin Jetpack by WordPress versi 3.4.1
Plugin ini penuh dengan berbagai fitur yang bisa Anda gunakan untuk blog Anda. Sehubungan untuk proses pembuatan tokol ini Anda akan memerlukan fitur custom css-nya untuk merubah sedikit desain tata letak produk Anda nantinya.

3.      Plugin WooCommerce – excelling eCommerce versi 2.4.11
Ini adalah plugin utama yang menginjeksi sistem pengelolaan tokol ke WP Anda mulai dari produk, pemesanan, dsb.

4.      Theme My Login 6.4.1
Plugin ini menyediakan pengaturan form registrasi pelanggan dan menyediakan fitur verifikasi alamat email pelanggan untuk memastikan alamat email yang diberikan benar.

5.      Woocommerce JNE Shipping versi 8.1.02 dari AgenWebiste
Plugin ini untuk untuk mengatur biaya pengiriman JNE tarif reguler.

6.      Tema Virtue dari Kandencethemes.com
Tema adalah tampilan grafik dan teks, tata letak dari tokol Anda. Tentu Anda bisa menggunakan tema mana saja yang Anda suka. Di internet tersedia tema yang berbayar dan gratis.
Untuk kepentingan tutorial ini, tema yang saya gunakan adalah Virtue. 

Langkah 1
Beli Domain dan Sewa Hosting

Setiap orang yang ingin menjalankan tokol perlu memiliki domain dan hosting. Di langkah ini saya akan menjelaskan hal-hal yang perlu Anda ketahui.

Domain

Pengertian – Sederhananya domain adalah “alamat” tokol Anda di dunia maya.

Apabila ada orang yang mengetikkan alamat tersebut di peramban, misalnya www.domainanda.com, maka orang dapat melihat-lihat tokol Anda di layar komputer mereka.

Harga – Tergantung dari buntut atau ekstensinya, entah itu .com, .web.id, dan lain-lain harganya berlainan. Sesungguhnya mereka semua hanya nama saja, namun strategi pemasaran dan peruntukkan yang membuat harganya jadi tak sama.

Harga domain antara satu registrar dengan yang lain bisa berbeda. Biasanya tidak terlalu signifikan selisihnya.

Istilah – Suatu saat Anda akan mendengar kata TLD atau Top Level Domain. Ini hanya sebutan untuk kelompok domain yang berada di hirarki paling atas, contoh: www.domainanda.com. Inilah yang nanti Anda akan beli.

TLD ada yang dikhususkan untuk negara tertentu, yaitu ccTLD atau Code Country Top Level Domain, contoh:

1.      Perancis – www.domainanda.fr

2.      Indonesia – www.domainanda.id

3.      Amerika – www.domainanda.us

4.      dan lain-lain.

Domain khusus – Ada beberapa ektensi domain tidak boleh dipakai oleh sembarangan orang, misalnya:

1.      .go.id – hanya untuk instansi pemerintah.

2.      .co.id – hanya untuk perusahaan.

3.      .ac.id – hanya untuk lembaga pendidikan atau kursus dengan jenjang minimal setara diploma 1.

4.      .sch.id – hanya untuk lembaga pendidikan setingkat SD-SMA.

5.      dan lain-lain.

Memilih ekstensi domain – Untuk mudahnya gunakan saja .com untuk toko online. Ini boleh dipakai oleh siapa saja dan paling umum digunakan.

Cara memilih nama domain – Sebagai panduan ada 3 pilihan yang biasanya orang gunakan:

1.      Nama yang brandable, seperti:
alibaba.com, zalora.com, bibli.com

2.      Nama Anda sendiri, seperti:
hardisuwarno.com, bettysiantar.com

Hosting

Pengertian – Tempat Anda menaruh tokol Anda.

Wujud sesungguhnya tokol Anda adalah kumpulan file. Jadi Anda sewa tempat di sebuah web server untuk menaruh file-file tokol Anda disana.

Web server ini terkoneksi dengan jaringan internet. Dengan demikian semua orang dari seluruh penjuru dunia dapat mengaksesnya dan melihat-lihat tokol Anda.

Web server itu mirip dengan komputer Anda hanya saja lebih bertenaga.

Jenis-jenis hosting – Ada 3 jenis:

1.      Shared hosting – satu web server dipakai ramai-ramai, sumber daya seperti kapasitas memori dan cpu saling berbagi, ibarat rusun

2.      VPS / Virtual Private Server – Masih berbagi, tetapi jumlah usernya jauh lebih sedikit, ibarat kondominium.

3.      Dedicated hosting – Satu web server dipakai sendiri, ibarat rumah.

Setiap jenis, biasanya memiliki beberapa plan produk tergantung dari masing-masing perusahaan.

Di awal gunakan saja shared hosting. Bila trafik semakin tinggi dan kebutuhan akan sumber daya tidak lagi mencukupi, bisa pindah ke plan yang lebih tinggi atau gunakan jenis server yang selanjutnya

Biaya VPS dan dedicated hosting jauh lebih mahal daripada shared hosting, tapi jauh lebih bertenaga dan dapat melayani trafik yang banyak.

Panel kontrol – Pengelolaan hosting dilakukan melalui panel kontrol. cPanel adalah nama panel kontrol paling umum yang digunakan.

Jika ada pilihan sPanel, saran saya pilihlah cPanel, karena secara pengalaman pengguna lebih nyaman.

cPanelSpanel

Cara sewa hosting dan beli domain

Dimana Anda bisa sewa hosting?

Ada banyak perusahaan yang menawarkan jasa hosting. Baik di dalam negeri maupun di luar negri.

Masalahnya ada hosting yang buruk dan bagus.

2 Kriteria saya dalam memilih hosting:

1.      Server yang kuat dan cepat

2.      Pelayanan pelanggan yang luar biasa

Pada dasarnya orang hanya bisa mengetahui kualitas hosting dengan menjajalnya. Akan tetapi sayangnya Anda tidak bisa jajal sembarangan. Sebab biasanya ada kontrak. Dengan kata lain Anda harus bayar di muka untuk sekian bulan. Jika Anda tidak puas uang tidak bisa kembali.

Bila Anda benar-benar buta dengan hosting, saat research, jangan:

1.      Membaca artikel review yang hanya mencomot profil perusahaan hosting.
Sebab yang menulis belum tentu menggunakannya sendiri. Kredibilitasnya rendah.

2.      Membaca testimonial yang ada di website hosting
Testimonial itu mudah dipalsukan. Apalagi di dalam dunia bisnis, yang seringkali tidak terlalu mementingkan kredibilitas, mereka bisa mendapatkan testimonial dari mana saja.

Sebaiknya:

1. Baca rekomendasi dari blogger besar
Meskipun biasanya mereka berafiliat dengan hosting yang mereka rekomandasikan. Dengan kata lain mereka mendapatkan komisi jika Anda menggunakan hosting yang mereka anjurkan. Tetapi selama mereka sendiri menggunakannya dan blogger itu termasuk kredibel dalam ucapannya. Karena jika mereka menganjurkan produk jelek, kepercayaan pembaca kepadanya akan turun.

2. Gunakan checklist yang saya berikan

Cek list ini adalah hasil dari pengalaman setelah menjajal 4 web hosting (3 lokal + 1 luar)

1.      Apakah hosting didukung layanan 24/7?
Berbagai kejadian bisa terjadi kapan saja, dari masalah sepele hingga masalah yang besar. Akan lebih nyaman jika Anda bisa mendapatkan pelayanan yang cepat kapan saja.
Perlu dicatat, ada hosting yang sekedar hanya mencantumkan layanan 24/7 tapi tidak memenuhi janjinya.

2.      Apakah server menggunakan SSD Storage?
SSD storage lebih cepat dari storage biasa. Sebagian hosting ada yang menggunakannya secara penuh pada servernya ada yang hanya sebagian.
Untuk melihat perbedaan SSD dan storage biasa bisa Anda lihat video dari PCmag ini:

3.      Apakah server mendukung browser caching?
Agar laman Anda bisa terbuka, ada berbagai file yang dikirim dari web server ke browser Anda. Namun sesungguhnya ada file-file yang tidak perlu dikirim berulang-ulang. Sebab jarang berubah isinya.
Apabila browser caching diaktifkan, file-file tersebut akan disimpan oleh browser. Sehingga bila dibutuhkan, web server tidak perlu lagi mengirim ulang. Browser bisa mengambilnya langsung dari komputer Anda. Namun server Anda perlu mendukung ini.

4.      Apakah server mendukung keep alive?
Di dalam setiap file yang dikirim sebuah sesi akan dibuka dan ditutup. Proses buka dan tutup memakan waktu jika file yang ditransfer banyak. Akan lebih baik jika dalam satu sesi, beberapa file bisa langsung ditransfer. Untuk hal ini fitur keep alive perlu didukung oleh server.

5.      Apakah server menggunakan cloudlinux?
Kalau dulu, jika ada user menggunakan sumber daya server melewati batas, maka penghuni lain akan kena getahnya. Administrator server harus mencari biangnya dan mematikan apa pun yang sedang user itu lakukan. Dengan cloudlinux hal tersebut dapat dicegah.

6.      Apakah server menggunakan Google Page Speed Module?
Berdasarkan pengalaman Google Page Speed Module bila diaktifkan dapat meningkatn peforma situs dengan cepat.

7.      Apakah server terintegrasi dengan CDN?
CDN memungkinkan blog Anda didistribusikan ke server-server milik perusahaan CDN tersebut ke seluruh dunia.Tujuannya agar pengunjung Anda bisa dilayani dengan konten Anda dari server terdekat. Hal ini memotong jarak transfer, sehingga waktu untuk loading laman berkurang. Biasanya hosting menyedian layanan dari pihak ketiga, misalnya: CloudFlare.

8.      Apakah ada keunggulah lainnya?
Seperti menggunakan litespeed, Facebook caching technology, dan sebagainya

LIHAT JUGA: Technical Support Hosting yang Baik dan Buruk

Perlu diingat, saat Anda melakukan penelitian, mungkin Anda menemukan satu orang mengatakan hosting A bagus, tapi yang lain ada juga yang bilang tidak. Wajar saja, setiap orang punya pengalaman pribadi di perusahaan hosting yang sama. Selain itu tidak ada perusahaan hosting yang sempurna.

Rekomendasi hosting

Jika Anda bingung mencari hosting sendiri, saya merekomendasikan hosting luar Fastcomet. Dari 4 web hosting yang pernah saya jajal, ini adalah yang terbaik, dilihat dari sisi pelayanan dan kecepatan.

Setelah mengalami 2 kali kecewa berat menggunakan hosting lokal, FastComet itu seperti air segar. Inilah alasannya:

1.      Pelayanan luar biasa
Standby 24/7 – waktu respon 2-10 menit. Ada masalah siang, malam, atau pagi, selalu ada yang siap membantu.
Sebagian besar orang dari sales hingga tesunya ramah dan berpengetahuan. Ada juga sih pernah ketemu satu yang agak kurang helpful, tapi masalah tetap diurus.

2.      Server kuat dan cepat
Sudah SSD, memiliki berbagai caching teknologi, mendukung berbagai fitur untuk optimasi kecepatan.

3.      Domain gratis seumur hidup
Jika mengambil salah satu dari paket mereka.

4.      Garansi 45 hari uang kembali
Tidak puas dalam 45 hari, uang kembali.

5.      Tidak ada kontrak
Artinya jika pelayanan mereka buruk setelah 45 hari. Anda bisa angkat kaki kapan saja dan sisa uang kembali. Anda selalu berada di sisi yang aman.

6.      Dapat 1 hosting gratis untuk 1 tahun.
Anda bisa mengaktifkan 1 akun gratis dengan fitur yang sama seperti hosting yang Anda pesan selama 1 tahun. Setelah 1 tahun Anda dapat menentukan, apakah Anda ingin terus menggunakannya atau tidak.

7.      SSL Gratis
Untuk paket E-commerce di shared hosting Anda akan mendapatkan SSL. Dengan demikian transaksi yang menyangkut data-data sensitif tidak dicuri orang.

Kekurangannya:

1.      Dari plan shared hosting tertinggi ke plan VPS terendah harganya jomplang. Bagi yang tidak punya budget bisa shock.

2.      Kalau pakai SSL di shared hosting, situs akan terasa lebih pelan. Jadi lebih baik terapkan SSL pada bagian transaksi saja atau pindah ke VPS.

Memilih hosting yang bagus itu penting, sebab Anda tidak ingin situs Anda sering mati atau bahkan disuspen tanpa pemberitahuan.

Anda bisa membeli domain dan hosting di tempat yang sama atau terpisah. Di FastComet, domain gratis.

Pengaturan bila membeli atau memiliki domain di tempat lain

Jika Anda membeli domain di tempat lain, maka Anda harus mengarahkan Nameservernya ke hosting yang bersangkutan.

Cara mengarahkan domain ke hosting lain

1.      Akses clientarea registrar Anda.

2.      Buka laman My domains.

3.      Di laman My domains, klik tanda panah kecil dari domain yang bersangkutan seperti yang ditunjukkan pada gambar di bawah, pilih Manage nameservers.

4.      Di laman Nameserver, ubah nameserver yang sekarang ke nameserver hosting Anda. Tanyakan namanya dari customer service hosting Anda.

Setelah itu Anda harus tunggu hingga terjadi propagasi. Propagasi adalah waktu yang diperlukan sebuah domain tersambung dengan server hosting yang dituju. Kecepatannya bisa lama dan sebentar.

Cara memindahkan domain lama ke tempat hosting yang sekarang

Jika sebelumnya Anda sudah memiliki domain di tempat lain dan ingin dipindahkan:

1.      Ubah nameserver – Lakukan seperti yang diajarkan di atas.

2.      Disable registrar lock – Agar tesu hosting Anda dapat memindahkan domain Anda

3.      Catat EPP Code – Berikan kepada tesu hosting Anda. Dengan ini tesu hosting Anda memiliki otorisasi memindahkan domain Anda ke tempat mereka.

Baik registrar lock maupun EPP Code dapat ditemukan di laman client area Anda.

Langkah 2
Instal WordPress dalam 5 Menit

Domain dan hosting Anda sudah siap. Berikut yang perlu Anda lakukan untuk menginstall WordPress

Tahap 1 – Login cPanel

Setelah Anda membeli domain dan hosting Anda akan mendapat email. Isinya username dan password cPanel.

1.      Untuk mengakses laman login cPanel ketik:
www.namadomainanda.com/cpanel
di bilah alamat browser, kemudian tekan enter.

2.      Anda akan melihat kotak login seperti di bawah ini, isikan username dan password, tekan enter

Tahap 2 – Install WordPress

Antar muka cPanel antar hosting bisa saja berbeda. Tapi tahap-tahapnya sama saja.

1.      Di cPanel klik icon “Softaculous”.
Atau untuk mudahnya gunakan ruas pencari, ketik “softa”, maka aplikasinya akan muncul. 

2.      Selanjutnya layangkan kursor ke atas logo WordPress dan klik tombol “Install”

3.      Anda akan masuk ke laman instalasi WordPress.

Ikuti pengaturan ini:

Software Setup
Choose Protocol: http:// (Jika Anda tidak menggunakan SSL. Kalau Anda tidak tahu apa itu SSL, kemungkinan besar Anda tidak menggunakannya)
Choose Domain: (pilih nama domain Anda)
In Directory: (kosongkan)

Site Settings
Site Name: (Isi nama Anda)
Site Description: (Berikan deskripsi singkat tentang tokol Anda)
Enable Multisite: kosongkan

Admin Account
Admin Username: (Ubah, jangan gunakan “admin” untuk keamanan)
Admin Password: (Ubah, buat jadi kuat)
Admin email: (Masukkan email Anda)

Choose Language
Select Language: (Pilih bahasa)

Select Plugins
(Kosongkan saja semua)

Advanced Settings
(Biarkan saja)

Select Theme
(Tidak usah pilih tema, Anda akan instal tema sendiri)

Terakhir tekan tombol “Install.”

Selesai. Tunggu hingga proses instalasi selesai.

Langkah 3
Masuk ke WordPress Dashboard

Untuk mengakses dashboard WordPress, ketik di bilah alamat:

www.domainanda.com/wp-admin

Masukkan username dan password yang telah Anda buat pada saat proses instalasi. Jika Anda memasukkan dengan benar, maka Anda akan masuk.

Ini adalah penampakan dari WordPress Dashboard.

Langkah 4
Instal dan Konfigurasi Plugin Jetpack by WordPress

Jetpack adalah sebuah plugin yang terdiri dari kumpulan modul plugin.

Untuk instalasi plugin pertama ini, saya akan bimbing Anda setahap demi setahap. Selanjutnya diharapkan Anda bisa melakukannya instalasi plugin lainnya sendiri.

Tahap 1

Install plugin Jetpack

1. Klik menu: Plugin > Add New.

2. Isi: jetpack di field Search dan tekan enter.
Setelah plugin Jetpack muncul, klik tombol: Install Now pada plugin Jetpack by WordPress.com.

3. Klik: Activate Plugin.

Sampai sini tahapan umum untuk melakukan instalasi sebuah plugin di WordPress telah selesai.

Sehubungan dengan plugin Jetpack itu sendiri, masih ada pengaturan yang harus dilakukan. Mari kita lanjut ke tahap berikutnya.

Tahap 2

Koneksikan tokol Anda dengan Jetpack

1. Di bagian atas laman Anda akan melihat banner seperti pada gambar. klik tombol: Connect to WordPress.com

2. Anda akan masuk ke laman seperti di bawah ini.

Jika Anda sudah memiliki akun WordPress
Isi username dan password WordPress.com Anda *.
Klik tombol Approve

*) Ingat akun WordPress.com tidak sama dengan akun yang Anda gunakan untuk masuk ke dalam WP dashboard Anda.

Jika Anda belum memiliki akun WordPress

Klik tautan Need an account 

Di laman berikutnya:

Isi email address, username, password
Klik tombol Create My AccountJika sudah bukalah: email Anda dan aktifkan akun WordPress Anda. Setelah itu kembali koneksikan tokol Anda dengan WordPress.

Tahap 3

Aktifkan modul. Klik Jetpack > Settings. Aktifkan modul plugin jetpack:

1.      Custom CSS

2.      Photon

Matikan yang lain.

Cara mengaktifkan/mematikan modul, silahkan layangkan kursor ke modul yang dituju > Klik activate atau deactivate.

Catatan: Tentu saja nantinya Anda boleh mengaktifkan modul-modul lainnya. Terserah Anda.  Akan tetapi saran saya modul stats dan monitor sebaiknya tidak digunakan karena sangat memakan resources.

Langkah 5
Instal dan Konfigurasi Tema Virtue

Gunakanlah tema yang dikembangkan secara khsusus untuk Woocommerce. Sebab tampilannya akan jauh lebih baik.

Di dalam turoial ini saya merekomendasikan tema Virtue. Silahkan Anda gunakan versi gratisnya, jika Anda suka, boleh beli versi yang premium.

Versi premium akan terlihat lebih cantik. Sebab dilengkapi dengan fitur-fitur yang tidak dimiliki versi gratis, seperti slider, animasi, dan berbagai hal lainnya.

Tips: Tema yang tidak mengikuti perkembangan WooCommerce bisa saja menjadi eror.

Cara Instalasi Tema Virtue

Untuk tema Virtue, ikuti tahap-tahap berikut ini.

TAHAP 1

Klik menu Appearance > Themes > Add New

TAHAP 2

Tunggu hingga halaman Add Themes muncul.
Isi kata virtue di field search for themes by keyword.
Nanti akan muncul temanya. Arahkan kursor ke tema tersebut dan kliktombol Install.

TAHAP 3

Instalasi selesai, klik Activate.

TAHAP 4

Pada sisi atas WordPress Dashboard Anda akan melihat tulisan seperti di bawah ini. Klik begin installing plugin.

Di laman berikutnya, klik Install.

Tunggu hingga proses instalasi selesai. Klik Return to Required Plugins Installer

Klik Activate untuk mengaktifkan plugin tersebut.

Lakukan konfigurasi untuk tema Virtue

Klik menu samping Appearance > Theme Options.

Di sini adalah pusat pengaturan theme Anda.

Saat ini Anda hanya perlu mengatur sidebar dan logo.

TAHAP 1

Jika Anda ingin sidebar tampil di laman depan, klik TAB Home Layout.
Kemudian di bagian Display a sidebar on the Home Page? pilih ikon gambar yang sebelah kanan.

TAHAP 2

Jika Anda ingin menampilkan sidebar di laman category produk, Klik TAB Shop Settings.
Lalu di bagian Display a sidebar on shop archives? pilih ikon gambar yang sebelah kanan. Jika sudah, klik tombol Save Changes.

TAHAP 3

Pengaturan logo dapat dilakukan di TAB Main Settings.
Di bagian Logo, upload logo tokol Anda. Upload juga logo dengan ukuran 2x dari logo ukuran normal untuk device yang menggunakan layar retina.

Jika sudah, klik tombol Save Changes

Langkah 6
Instal dan Konfigurasi Plugin WooCommerce

Sekarang waktunya untuk menyuntikkan manajemen toko ke dalam WordPress.

Tahap 1 – Instal dan aktifkan plugin WooCommerce – excelling ecommerce

Bila Anda lupa cara menginstal plugin, silahkan lihat kembali Langkah 4 untuk contoh.

Setelah plugin diaktifkan, maka Anda akan melihat dua menu tambahan, yaitu Woocommerce dan Products.:

Tahap 2 – Jalankan Setup Wizard

Semenjak versi 2.4 instalasi WooCommerce sedikit berbeda dari biasanya. Setelah plugin diaktifkan, Anda akan melihat banner Run the Setup Wizarddi bagian atas WP Anda. Dulunya Install Woocmmerce Pages.

Tujuan setup wizard ini adalah mempermudah dan membimbing Anda menyiapkan tokol Anda di awal.

PAGE SETUP

Di laman selanjutnya klik tombol Continue untuk menginstal 4 laman WooCommerce: Shop, Cart, Checkout dan My Account.

Info: Keempatnya nanti dapat Anda temukan di menu Pages.

STORE LOCALE SETUP

Selanjutnya Anda akan melihat hal-hal yang perlu Anda setting.

Cara mengisi:

1.      Where is your store based – Dimanakah lokasi bisnis Anda. Jika Anda di Indonesia, isi Indonesia.

2.      Which currency will your store use – Mata uang apa yang Anda gunaka untuk tokol. Jika Anda di Indonesia, isi rupiah.

3.      Currency position – Posisi mata uang. Tiap negara memiliki kebiasaan meletakkan posisi mata uang yang berbeda. Jika Anda di Indonesia silahkan isi left atau kiri.  only dan Anda dapat membatasi negara-negara mana yang hendak Anda layani.

4.      Thousand separator – Pemisah ribuan. Indonesia menggunakan titik. Kalau luar negri biasanya memakai koma.

5.      Decimal separator – Pemisah desimal untuk sen. Indonesia menggunakan koma. Sementara orang luar negri memakai titik.

6.      Number of Decimal – Jumlah desimal. Pilih 0 bila Anda tidak ingin menampilkan sen.

SHIPPING & TAX SETUP

Di laman berikutnya Anda akan mengisi hal berkaitan dengan pengiriman dan pajak. Perhatikan apa yang Anda isi di sini akan tergantung dari bisnis Anda. Gambar di bawah ini adalah settingan defaultnya.

Will you be shipping products? Anda ditanya apakah Anda akan mengrim produk fisik. Jika ya silahkan centang kotak Yes, I will be shipping physical product to customers. Kotak di bawahnya kosongkan saja. Karena untuk pengriman kita akan menggunakan JNE.

Will you be charging sales tax? Ini settingan mengenai pajak berdasarkan lokasi. Apabila Anda melakukan transaksi di Indonesia, ini tidak diperlukan.

Berbeda jika Anda melakukan bisnis, misalnya di Amerika. Di sana ada peraturan pajak yang berdasarkan origin-based atau destination-based.Tiap negara bagian memliki aturannya sendiri.

Jika Anda ingin menerapkan pajak lokasi pada tokol, silahkan centang kotak Yes, I will be charging sales tax. Jika tidak, hilangkan.

How will you enter product prices? BagaimanaAnda akan menuliskan harga pajak? Apakah termasuk di dalam harga atau di luar harga produk.

Apabila pajak sudah termasuk di dalam harga barang, pilih I will enter prices inclusive of tax.

Apabila pajak belum termasuk di dalam harga barang, pilih I will enter prices exclusive of tax.

Jika sudah selesai klik tombol Continue.

PAYMENTS

Sekarang adalah urusan pembayaran. Karena di Indonesia paling banyak menggunakan bank transfer, maka untuk tutorial ini centanglah Enable BACS payment.

Klik tombol Continue.

Your store is ready

Di laman terakhir Anda ditanya apakah Anda ingin mengizinkan WooCommerce mengirim data yang non-sensitif untuk analisis merek untuk membuat WooCommerce. Ini terserah Anda. Saran saya klik tombolNo Thanks.

Dari sini Anda bisa saja mencoba membuat produk pertama Anda. Akan tetapi lebih baik lanjut ke tahap 3 untuk konfigurasi tokol lebih detil.

Klik Return to the WordPress Dashboard.

Tahap 3 – Konfigurasi WooCommerce

Klik WooCommerce > Settings.

Sebagian dari konfigurasi di bawah ini sudah dilakukan melalui wizard setup di atas. Akan tetapi saya akan menunjukkan kembali jika Anda perlu melakukannya tanpa wizard.

Untuk sekedar informasi di bagian halaman setting terdapat beberapa TAB, yaitu :

1.      General – berisi hal-hal yang umum, seperti konfigurasi jenis mata uang, registrasi, penampilan tokol, dll.

2.      Products – berisi konfigurasi berkaitan dengan produk di Anda, seperti satuan berat, satuan panjang, inventory, dll.

3.      Tax – konfigurasi pajak.

4.      Checkout – berisi konfigurasi untuk berbagai jenis pembayaran

5.      Shipping – konfigurasi pengiriman, contohnya tarif pengiriman.

6.      Accounts – konfigurasi berkaitan dengan akun pelanggan.

7.      Emails – konfigurasi email.

8.      Webhooks – konfigurasi untuk mengirim notifikasi ke sebuah URL

TAHAP 3.1 – KONFIGURASI DI TAB GENERAL

General Options

Klik TAB General dan lakukan pengaturan di General Options sebagai berikut :

Keterangan:

1.      Base Location – Ini adalah lokasi bisnis Anda.

2.      Selling Location(s) – Pilih :
a. Sell to all countries bila Anda melayani pengiriman ke seluruh dunia.
b. Sell to specific countries only bila Anda melayani pengiriman ke negara-negara tertentu saja.

3.      Specific Countries – pilihan ini muncul jika pada parameter no. 2 Anda memilih Sell to specific countries only dan Anda dapat membatasi negara-negara mana yang hendak Anda layani.

4.      Default Customer Address – lokasi pelanggan. Fungsinya untuk memperkirakan besaran pajak dan biaya pengiriman.

o    Shop base address – sistem berasumsi lokasi pelanggan sama dengan tokol

o    No address – Tanpa lokasi – pajak tidak akan dihitung.

o    Geolocate address – memperkirakan lokasi pelanggan otomatis dan memperhitungkan besaran pajak berdasarkan lokasi.

o    Geolocate address (with page caching support) – Jika Anda ingin WooCommerce bisa memperikirakan lokasi pelanggan dan Anda melakukan bisnis dengan banyak negara.

CURRENCY OPTIONS

Silahkan ikuti konfigurasi seperti di bawah ini:

Keterangan:

1.      Currency – Jenis mata uang

2.      Currency Position – Posisi mata uang, apakah di kiri seperti Rp 1.000 atau di kanan seperti 1.000 Rp.

3.      Thousand separator – Pemisah ribuan, kalau Indonesia menggunakan titik. Kalau luar negri biasanya memakai koma.

4.      Decimal separator – Pemisah desimal untuk sen, kalau Indonesia menggunakan koma. Sementara orang luar negri memakai titik.

5.      Number of Decimal – Jumlah desimal. Pilih 0 bila Anda tidak ingin menampilkan sen.

Ingat setelah selesai disimpan, klik tombol: Save Changes

TAHAP 3.2 – KONFIGURASI DI TAB CHECKOUT

Atur sistem pembayaran, klik TAB Checkout

Untuk kepentingan tutorial ini kita hanya menggunakan pembayaran melalui bank transfer, sebagai cara pembayaran yang paling sering digunakan di tokol di Indonesia.

Ikuti konfigurasi seperti di bawah ini:

1.      Jika Anda tidak menggunakan kupon, hilangkan centang pada Enable the use of coupons.

2.      Jika Anda ingin hanya pelanggan teregistrasi yang bisa belanja di tokol Anda, hilangkan centang pada Enable guest checkout

Setelah selesai klik tombol: Save Changes, lalu klik tautan: Bacs.

Disini adalah tempat untuk mengatur pembayaran menggunakan Bank Transfer.

Lihat di bagian Account Details, isilah detil akun bank Anda. Untuk pembayaran lokal Anda hanya perlu mengisi Account Name, Account Number, dan Bank Name

Satu hal yang menarik, sejak versi 2.1 Anda sudah bisa menggunakan akun bank lebih dari satu.

Setelah selesai, klik tombol Save Changes.

Tahap 4 – Ubah tampilan front page

Secara default WordPress akan menampilkan blog di laman muka. Tapi kini Anda ingin menampilkan tokol. Caranya klik Setting > Reading.

Lakukan konfigurasi seperti gambar di bawah ini:

Tahap 5 – Tingkatkan WP memory limit

Apabila Anda ke WooCommerce > System Status > Cari WP Memory Limit, WooCoomerce menyarankan untuk menambahkan WP memory limit dari default 40 MB menjadi minimal 64MB untuk operasional.

Hal ini bisa dilakukan lewat cpanel > file manager > pergi ke folder tempat Anda instal WordPress. Jika Anda ikuti tutorial ini, maka seharusnya ada di public_html > Edit file wp-config.php (klik kanan > edit) > Tambahkan define (‘WP_MEMORY_LIMIT’, ’64M’).

Jika Anda menggunakan hosting FastComet, WP Memory Limit kemungkinan sudah diset 256MB.

Langkah 7
Instal Plugin Theme My Login

Tujuan utama plugin ini diinstal adalah untuk fitur verifikasi emailnya.  Kegunaan tambahan lainnya adalah form login bisa disesuaikan dengan tema. dan Anda juga bisa menggunakan widget login, jika Anda mau.

Apa itu verifikasi email?
Saat calon pelanggan registrasi, mereka bisa saja salah atau dengan sengaja memberikan alamat email palsu. Ini sering terjadi. Tidak hanya itu, tak jarang ada bot-bot yang dirancang untuk mengisi form pendaftaran secara otomatis, sehingga lama-lama database pengguna Anda dipenuhi akun bodong.

Dengan fitur verifikasi email, calon pelanggan akan diminta untuk mengklik sebuah tautan di email yang dikirim kepadanya sesaat setelah ia registrasi. Sesudah itu ia akan mendapatkan username, dan dapat menset password.

Plugin TML adalah besutan dari Jeff Farthing. Pada saat artikel ini dibuat, plugin telah dipakai oleh 100.000 orang lebih.

Siap kerja? Mari kita mulai.

Tahap 1 – Instal dan aktifkan Plugin Theme My Login

Lakukan instalasi dan pengaktifan plugin seperti biasanya.

Jika sudah, maka pada menu samping Anda akan muncul Menu TML. Kliklah menu tersebut.

Tahap 2 – Konfigurasi umum Plugin Theme My Login

Pada saat pertama, Menu TML tidak memiliki sub menu. Setelah Anda mengaktifkan beberapa fiturnya, sub-sub menu baru muncul. Centanglah pilihan yang ada sesuai petunjuk gambar.

Tentu saja nanti Anda dipersilahkan untuk menggunakan fitur-fitur lainnya, seperti custom email yang akan dikirim ke pelanggan Anda, jika diperlukan.

Bila sudah, klik tombol Save Changes.

Tahap 3 – Konfigurasi redirection

Klik menu samping TML > Redirection.

Di laman selanjutnya, Anda akan melihat setiap role yang ada di tokol Anda, seperti: customer, admin, dll. memiliki pilihan redirect untuk log in dan log out.

Redirect artinya setelah log in dan log out, user diarahkan ke laman tertentu. Ada 3 pilihan redirect:

1.      Default – user dikirim ke dashboard/profile.

2.      Referer – user dikirim ke laman sebelum log in.

3.      Tentukan URL laman untuk tujuan redirect.

Untuk mudahnya silahkan ikuti petunjuk gambar ini untuk Role “Customer”:

1.      Log in: referer

2.      Log out: Isi dengan URL laman muka/front page tokol Anda, misal: http://www.dapur-uang.com atau lainnya.

Role lainnya bisa Anda atur sendiri sesuai kebutuhan.

Tahap 4 – Konfigurasi security

Apabila Anda punya toko online. Pasti akan ada orang jahat yang akan mencoba membobol tokol Anda.

Username dan Password adalah pintu menuju “isi rumah Anda.” Mencuri username dan pass adalah hal yang paling suka dilakukan  para hacker.

Salah satu cara untuk membongkar Username dan Password adalah dengan Brute Force. Metodenya mereka menggunakan bot untuk log in menggunakan berbagai kombinasi huruf dan angka secara berulang-ulang.

Untuk mencegah hal itu terjadi, maka batasilah kesalahan login. Theme My Login menyediakan fitur untuk mencegah Brute Force. Aturlah batasan itu sesuai kebutuhan Anda.

Pada contoh gambar di bawah ini, setelah user melakukan kesalahan log in sebanyak 10x dalam kurun waktu 1 jam, maka akunnya dikunci selama 24 jam.

Selain centanglah Disable wp-login.php dengan demikian semua akan dipaksa untuk login dari laman TML. Ini juga untuk mencegah bot mengeksploitasi wp-login.php dan melakukan bruteforce atau registrasi palsu.

Jika Anda sudah selesai, klik tombol Save Changes.

Tahap 5 – Konfigurasi moderation

Klik menu samping TML > moderation.

Pilih E-mail Confirmation untuk mengaktifkan verifikasi email.

Tahap 6 – Ubah tampilan form

Tampilan standar form registrasi TML di tema Virtue adalah seperti di bawah ini:

Jika sudah diubah tampilannya, maka akan seperti di bawah ini:

Tampilannya saya sesuaikan dengan form WooCommerce dengan mengatur CSS-nya.

Untuk mengubah tampilan:

1. Pelajari cara membuat tema anak di Tutotam Tokol – Membuat Tema Anak / Child Theme WordPress.
2. Setelah Anda membuat tema anak, tambahkan tepat di bawah dari isi dari style.css dengan kode css di bawah ini

.tml {

max-width: 600px !important;

margin:0 auto;

}

#theme-my-login input[type="text"], #theme-my-login input[type="password"], .widget_theme_my_login input[type="text"], .widget_theme_my_login input[type="password"]{

width: 100% !important;

padding: 8px;

height: auto;

border: 1px solid #999;

box-sizing: border-box;

border-radius: 0px;

}

#theme-my-login input[type="submit"],.widget_theme_my_login input[type="submit"] {

padding: 10px 18px;

margin-top: 15px;

background: #2D5C88 none repeat scroll 0% 0%;

color: #FFF;

cursor: pointer;

border: medium none;

display: inline-block;

transition: background-color 0.6s ease-out 0s;

}

#theme-my-login input[type="submit"]:hover, .widget_theme_my_login input[type="submit"]:hover {

background: #6C8DAB none repeat scroll 0% 0%;

}

#theme-my-login input[type="checkbox"],  .widget_theme_my_login input[type="checkbox"]{

float:left;

margin: 4px 8px 0px 0px;

}

#theme-my-login form {

border: 1px solid #DFDBDF;

padding: 20px;

margin: 2em 0px;

text-align: left;

border-radius: 0px;

}

Setelah Anda membuat tema anak, silahkan ganti temanya untuk  menggunakan tema anak Virtue.

Lebar form login bisa diatur dari kode ini  yang ada di atas. Ganti angka 600 dengan angka yang Anda kehendaki.

.tml {

    max-width: 600px !important;

}

Setelah itu Anda perlu mengedit 5 laman yang diciptakan oleh Theme My Login dan mengubah jenis templatenya.

Klik menu samping: Pages > Klik laman berjudul Log In.

Di laman selanjutnya, cari kotak bernama Page Attributes dan ubah nilai Template menjadi Fullwidth:

Jika sudah klik tombol Update.

Lakukan hal yang sama untuk laman:

1.      Log Out

2.      Lost Password

3.      Register

4.      Reset Password

Penutup

Apabila saat ini Anda ingin melihat tampilan form Anda, silahkan Anda buka page/laman yang bersangkutan dan klik tombol Preview.

Dari kelima  laman Theme My Login, nanti akan kita buat menu navigasi pada langkah 13.

Langkah 8
Memasang Widget Log in dari Theme My Login di Sidebar

Widget ini bersifat opsional. Fungsinya untuk memudahkan pelanggan log in. Caranya dengan menempatkan widget log in di sidebar.

Widget adalah sebuah aplikasi tambahan yang dapat dipasang ke tokol Anda.

Tahap 1 – Masuk ke laman widget

klik menu samping Apperance > Widgets

Tahap 2 – Delete widget

Di laman Widgets pada sisi kiri terdapat widget-widget yang tersedia, di sisi sebelah kanan adalah beberapa posisi sidebar yang tersedia dari tema Virtue.

Di awal mula, di Primary Sidebar sudah terdapat beberapa widget terpasang. Hapus itu semua. Caranya mudah. Klik widget bersangkutan, misalnya widget “Search”. Kemudian klik delete.

Lakukan hal yang sama untuk widget lainnya.

Tahap 3 – Pasang Widget Theme My Login

Jika sudah, kita letakkan Widget Theme My Login pada Primary Sidebar.Ada dua cara:

1.      Anda klik geser widget yang bersangkutan ke posisi yang Anda inginkan.

2.      Jika widgetnya berada terlalu jauh di bawah, Anda bisa lakukan hal berikut ini:
Klik Widget Theme My Login, maka akan muncul pilihan Primary, Footer Column 1-4, dst.
Pilih Primary Sidebar. Sesudah itu klik tombol Add Widget.
Maka widget yang bersangkutan akan berada pada posisi Primary Sidebar.

Tahap 4 – Konfigurasi Widget Theme My Login

Ikuti settingan seperti pada gambar di bawah ini. Apabaila Anda ingin menggunakan settingan lain, silahkan.

Jika sudah klik tombol Save.

Pergi ke settings > general > centang membership: Allowed anyone to register.
Dengan ini link untuk register akan muncul.

Silahkan Anda logout dan hasilnya adalah seperti ini:

Langkah 9
Instal dan Konfigurasi Plugin WooCommerce JNE Shipping (Versi Gratis)

Ini adalah saatnya Anda mengatur sistem pengiriman Anda.

Plugin JNE versi gratis pada dasarnya hanya untuk menunjukkan bagaimana plugin ini bekerja. Pertimbangkanlah menggunakan plugin versi berbayar, apabila:

1.      Anda kesulitan mendapatkan data ongkir JNE yang lengkap dan up to date

2.      Anda mengirim benda yang nilainya tinggi, sehingga wajib asuransi

3.      Anda mengirim produk yang harus menggunakan peti kayu

4.      Anda mengirim produk yang perhitungannya harus menggunakan volume dan bukannya berat

5.      Anda ingin menambahkan fasilitas cek resi dan tracking resi

6.      Anda ingin menyediakan pilihan JNE OKE/REG/YES

Untuk ulasan versi berbayar secara detil dapat dilihat disini. Dapatkan juga kupon potongan 10%. Karena dapur Uang saat ini menjalin kerjasama dengan Agenwebsite pengembang dari plugin ini.

Tahap 1 – Instal dan aktifkan Plugin JNE Shipping

Kini plugin WooCommerce JNE Shipping sudah ada di WordPress repository. Silahkan lakukan instalasi seperti biasa.

Tahap 2 – Matikan shipping calculator

Klik WooCommerce > Setting > TAB Shipping

Apabila Anda menggunakan JNE Shipping versi gratis, sebaiknya hilangkan centang Enable the shipping calculator on the cart page.

Sebab JNE versi gratis tidak menyediakan fasilitas untuk di bagian ini. Anda bisa memilih menggunakan versi berbayar jika itu yang Anda inginkan.

Dengan Anda menghilangkan calculate shipping konsumen Anda nantinya tidak akan dibingungkan. 

Perhitungan biaya kirim akan dilakukan di laman checkout.

Jika sudah klik tombol Save Changes

Tahap 3 – Upload data ongkir JNE

Klik tautan JNE Shipping seperti pada gambar di bawah

Di laman berikutnya Anda akan lihat banner dengan tulisan Download Data Kota. Klik.

Anda akan dibawa ke laman belanja Data Kota, jangan khwatir ini gratis. Klik Selesai Belanja.

Di laman berikutnya silahkan isi form di sebelah kiri untuk buat akun. lalu klik Selesai Belanja.

Jika sudah silahkan cek email Anda untuk sebuah email untuk mengunduh filenya. Klik tombol Unduh File Anda. Selanjutnya Anda akan di bawa ke laman download.

Silahkan klik Download.

Anda akan mendapatkan sebuah file zip. Ekstrak isinya.

Selanjutnya upload file .csv-nya.

Setelah selesai klik tombol Save Changes.

Tampilan plugin versi gratis nantinya sebagai berikut:

Ingat agar pluginnya JNE-nya bisa bekerja nanti Anda perlu menetapkan berat pada saat pembuatan produk.

Langkah 10
Buat Produk Anda

Sekarang adalah waktunya Anda memasukkan beberapa produk untuk uji coba.

Ada berbagai macam cara untuk menampilkan produk. Saya mengajarkan cara yang paling sederhana. Silahkan ikuti tahapan berikut ini:

Tahap 1

Buat kategori produk. Klik menu samping Product > Categories.

Silahkan isi kategori tokol Anda di field Name.

Kalau sudah klik tombol Add New Product Category di bagian bawah.

Tahap 2

Buat produk. Klik menu samping Product > Add Product.

Anda akan dibawa ke halaman Add New Product.

Selanjutnya Lakukan langkah berikut :

1.      Isi nama produk.

2.      Isi deskripsi produk.

3.      Pilih kategori produk.

• Klik Set featured image untuk memilih gambar utama produk.
• Klik Add product gallery images untuk gambar-gambar tambahan.

Setelah diisi:

Di bagian bawah keterangan produk terdapat beberapa TAB dan isian.

TAB General:

1.      Isi SKU / no produk bila ada.

2.      Isi Reguler Price (Rp) / harga produk.

3.      Isi Sale Price / harga diskon bila ada penawaran khusus. Klik scheduleuntuk mengatur tenggang waktu berdasarkan tanggal.

TAB Shipping :

1.      Isi Weight (kg) / berat produk

2.      Isi Dimensions (cm)/ dimensi produk bila diperlukan

Di bagian bawahnya lagi masih ada Product Short Description, sebuah keterangan singkat yang akan muncul di sebelah gambar utama. Silahkan digunakan jika Anda ingin pakai.

Kalau sudah silahkan klik tombol: Preview Changes

Ukurang gambar product gallery mungkin saja terlihat tidak rapi. Jangan khawatir di pelajaran berikutnya kita akan lakukan pengaturan ukuran gambar.

Langkah 11
Pengaturan Gambar WooCommerce

Secara default ukuran gambar WooCommerce adalah bujur sangkar. Bila Anda puas dengan konfigurasi ini, Anda bisa lanjut ke langkah selanjutnya.

Untuk mengubahnya menjadi ukuran gambar persegi panjang, silahkan ikuti tahapan berikut ini.

Tahap 1 – Mengubah ukuran gambar produk

Klik WooCommerce > Settings > TAB Product > tautan display

Di bagian paling bawah Anda akan melihat konfigurasi ukuran gambar seperti di bawah ini

Keterangan:

1.      Catalog Images – Gambar di laman depan dan laman category. .

2.      Single Product Image – Gambar utama di laman produk (laman setelah Anda mengklik salah satu dari catalog image)

3.      Product Thumbnails – Gambar berukuran kecil yang letaknya di bawah gambar utama di halaman produk.

4.      Hard Crop – pengaturan untuk memangkas gambar Anda apabila melewati ukuran yang ditetapkan untuk memastikan tata letak yang rapi.

Jika Anda menggunakan tema yang khusus dibuat untuk WooCommerce pengaturan ukuran gambar bisa dilakukan dengan sangat mudah.

Bila Anda menginginkan gambar berbentuk rasio persegi panjang, silahkan ikuti pengaturan berikut ini atau Anda bisa menentukan ukuran sendiri.

WordPress sendiri memiliki pengaturan ukuran gambar sendiri. Sebaiknya Anda samakan settingannya. Sebab jika tidak, maka untuk setiap satu gambar yang diupload akan dibuat 6 variasi ukuran gambar berbeda. Ini akan makan tempat.

Pengaturan ukuran gambar WP terdapat di Settings > Media. Sesuaikan angkanya seperti gambar di bawah ini. jika sudah klik tombol Save Changes.

Catatan 1: Bila Anda membuat blog di tokol Anda. Format gambarnya biasanya horizontal. Silahkan sesuaikan ukurannya di Media Settings di atas. Mau tidak mau, Anda harus menyediakan space untuk variasi ukuran gambar Anda.

Catatan 2: Apabila Anda hendak menggunakan fitur kaca pembesar, seabagaimana diajarkan di Tutotam Tokol – Kaca Pembesar. Pastikan Anda memiliki gambar dengan ukuran yang lebih besar dari ukuran Single Product Image. Selanjutnya instal plugin yang direkomendasikan di Tutotam itu sebelum lanjut ke tahap 2. Tujuannya agar Anda tidak perlu 2x regenerate gambar.

Tahap 2 – Regenerate gambar

Lakukan tahap 2 ini apabila Anda telah mengunggah beberapa gambar sebelum melakukan perubahan ukuran gambar di atas. Jika tidak, langsung saja lompat ke tahap 3.

Instal dan aktifkanlah plugin Regenarate Thumbnails. Selanjutnya klik menu samping Tools > Regen. Thumbnails.

Pada halaman Regenerate Thumbnails, klik tombol Regenerate All Thumbnails

Tunggulah hingga seluruh proses regenerasi gambar selesai.

Alasan menjalankan prosedur ini adalah karena WP menyimpan satu gambar ke dalam beberapa ukuran sesuai dengan pengaturan di WooCommerce dan yang di Settings > Media.

Jadi kalau Anda mengubah ukuran gambar, maka gambar-gambar yang sudah ada harus dibuat ulang oleh WP.

Tahap 3 – Konfigurasi ukuran gambar di Tema Virtue

Jika sudah, ada beberapa setelan yang harus Anda lakukan di Theme Options dari tema Virtue:

1.      Klik menu samping: Appearance > Theme Options > Tab Shop Settings.

2.      Off-kan: enable product image crop on catalog pages dan enable product image crop on poduct page.

Nanti hasilnya adalah seperti berikut:

Tahap 4 – Membuat kotak gambar produk sejajar

Sebagaiman Anda lihat tulisan ADD TO CART tidak sejajar. Untuk mengatasi hal ini Anda dapat mengaturnya di Appearance > Theme options > Shop Settings > Product Title Min Height.

Hasilnya:

Ada kalanya ketidakrataan diakibatkan oleh posisi angka seperti kasus yang ditunjukkan oleh gambar ini:

Untuk solusinya silahkan tambahkan CSS ini:

.product_item .product_price {

    font-size: 15px;

    min-height: 52px;

    padding: 6px 2px;

}

.product_item .product_price span.amount:nth-child(2) {

    display: block;

}

• Pada Jetpack custom css (appearance > edit css) atau
• Pada style.css dari tema anak atau
• Pada appearance > Theme Options > advanced settings

Ingat pilih salah satu metode saja.

Tahap 5 – Mengatur jumlah produk per laman

Khusus Tema Virtue pengaturan dapat dilakukan di Appearance > Theme options > Shop Settings > Shop Archive Page Settings > Geser slider-nya sesuai dengan jumlah yang diinginkan.

Sampai disini pengaturan gambar produk telah selesai.

Langkah 12
Mengubah Format URL

Kenapa format URL sebaiknya diubah? Karena tampilannya tidak friendly. Contoh http://demoshop.dapur-uang.com/?p=123.

Kalau orang biasa yang baca tidak akan mengerti maksudnya. Tetapi kalau diubah menjadi seperti: http://demoshop.dapur-uang.com/rok-kasual-merah, siapa saja akan bisa menangkap maksudnya.

Cara mengubahnya klik menu samping settings > permalink. Ikuti instruksi di bawah ini.

Mudah bukan?

Langkah 13
Membuat Menu

Fungsi menu adalah sebagai navigasi. Menu yang baik memberikan pengalaman bernavigasi yang mudah.

Setiap tema memiliki lokasi menu sendiri-sendiri. Namanya pun bisa berbeda. Semua tergantung dari desain pengembangnya.

Navigasi tokol biasanya memanfaatkan kategori dari produk yang tersedia. Apabila seseorang mengklik sebuah kategori, maka barang-barang di dalam kategori yang sama akan ditampilkan.

Navigasi tokol bisa menjadi lebih canggih dengan filter, berdasarkan warna, harga, dan lain-lain. Akan tetapi itu tidak di bahas disini. Jika ingin mempelajarinya langsung silahkan baca: Tutotam Tokol – Navigasi Filter Produk

Tentu saja navigasi yang baik juga mempermudah user jika mereka ingin mencari informasi lainnya seperti FAQ, About, Kebijakan Tokol, Standar Ukuran, dan lain-lain.

Bernavigasi di tokol dengan kategori produk bisa menggunakan:

1.      Menu – kategori menu berada di lokasi menu yang disediakan theme developer.

2.      Widget – kategori menu muncul menggunakan aplikasi/fungsi tambahan yang dapat dipasang pada sidebar atau footer.

Di tutorial ini kita akan fokus membuat membuat menu untuk:

1.      Akun – log in, registrasi, hilang password, reset password dan melihat data pelanggan.

2.      Navigasi produk

1. Membuat menu akun standar

Secara default WooCommerce menyediakan sebuah laman untuk melakukan log in, registrasi dan data pelanggan di laman”My Account”. Anda cukup membuat sebuah menu untuk mengakses laman tersebut.

Berkaitan dengan registrasi, WooCommerce tidak memiliki kemampuan verfikasi email. Itulah mengapa di Langkah 8 (Update), Anda belajar menggunakan plugin Theme My Login.

Meskipun demikian, di tutorial ini saya akan perlihatkan fasilitas standar dari WooCommerce dan cara membuat menunya. Apabila Anda memilih menggunakan fasilitas standar ini, maka Anda tidak perlu melakukan Langkah 8 (update). Silahkan hapus plugin Theme My Login tersebut.

Selanjutnya saya akan ajarkan cara membuat menu akun khusus yang memerlukan sedikit koding agar dapat bekerja dengan Plugin Theme My Login.

Berikut adalah tampilan standar laman “My Account” sebelum user login:

Berikut adalah tampilan laman standar “My Account” sesudah user login:

Registrasi WooCommerce bisa dilakukan di laman “My Account” atau di laman “Check Out”.

Lokasi pengaturannya: klik menu samping WooCommerce > Settings > Tab Accounts.

Centang Enable registration on the “Checkout” page dan Enable registration on the “My Account” page.

Tampilan form registrasi standar di laman “My Account” :

Sekarang, mari kita buat menu standar untuk laman akun:

TAHAP 1 – MASUK KE LAMAN MENU

Klik menu samping Appearance > Menu

TAHAP 2 – BUAT MENU BARU

Di laman menu, isi nama di ruas Menu Name: Account atau nama apa pun yang Anda inginkan.
Lalu klik tombol Create Menu.

TAHAP 3 – PILIH LOKASI MENU

Centang Topbar Navigation.

TAHAP 4 – MASUKKAN LAMAN MY ACCOUNT KE MENU BARU

My Account page atau laman My Account sudah dibuat saat Anda menginstal WooCommerce. Sekarang Anda cukup membuat menu menuju ke laman tersebut.

Lihat di sisi kiri, centang My Account > Klik tombol Add to Menu.

Hasilnya adalah seperti di bawah ini:

Jika sudah selesai, ingat untuk klik tombol Save Menu.

Tampak depan dari menu tersebut adalah sebagai berikut

Yap, Anda telah membuat menu akun standar.

2. Membuat menu akun khusus untuk Theme My Login

Pada pembuatan menu ini, tampilan menu saat sebelum dan sesudah user login akan dibuat berbeda.

Tampilan sebelum login:

Tampilan sesudah login:

TAHAP 1 – INSTALL DAN AKTIFKAN PLUGIN NAV MENU ROLES BUATAN KATHY DARLING

Fungsi dari plugin ini adalah agar Anda bisa menyembunyikan dan memunculkan menu item berdasarkan pengguna yang logged in,logged out, atau semua orang.

TAHAP 2 – TAMBAHKAN KODING INI PADA FUNCTIONS.PHP TEMA ANAK

Kode di bawah ini sesungguhnya untuk mematikan fungsi tertentu dari tema Virtue sehingga plugin Nav Menu Roles dapat berfungsi.

Jika Anda ingin belajar membuat tema anak silahkan ke Tutotam Tokol – Membuat Tema Anak / Child Theme WordPress.

<?php

function remove_kt_menu() {

global $kt_custom_menu;

remove_filter( 'wp_setup_nav_menu_item', array( $kt_custom_menu, 'kt_add_nav_fields' ) );

remove_action( 'wp_update_nav_menu_item', array( $kt_custom_menu, 'kt_update_nav_fields'), 10, 3 );

remove_filter( 'wp_edit_nav_menu_walker', array( $kt_custom_menu, 'kt_edit_admin_walker'), 10, 2 );

}

add_action('init','remove_kt_menu', 100);

TAHAP 2 – BUAT MENU ‘ACCOUNT’

Di laman menu, isi nama di ruas Menu Name: Account atau nama apa pun yang Anda inginkan.
Lalu klik tombol Create Menu.

TAHAP 3 – TAMBAHKAN MENU ITEM

Tambahkan menu dari page: Log In, Log Out, Register, My Account. Atur posisinya seperti di bawah ini.

TAHAP 4 – ATUR PENAMPAKAN MENU ITEM

Sebelumnya mari saya jelaskan sedikit. Dengan plugin yang Anda instal tahap 1, Anda bisa mengatur penampakan menu item.

Namun khusus untuk laman Log In, Log Out dan Register yang berasal dari plugin Theme My Login, Anda cukup biarkan saja pilihannya ke everyone (default). Sebab plugin TML versi terkini sudah bisa mengatur dirinya sendiri kapan harus muncul atau menghilang.

Yang perlu Anda setel cukup menu item: My Account. Pilih: Logged In Users

TAHAP 4 – PILIH LOKASI MENU.

Centang Topbar Navigation.

Catatan: Pastikan settings > general > membership: Allowed anyone to register telah tercentang. Dengan demikian pelanggan Anda bisa registrasi.

3. Membuat navigasi produk

TAHAP 1 – BUAT MENU NAVIGASI PRODUK

Buatlah satu menu lagi.

Berikan nama yang Anda inginkan, misalnya “Main Navigation” dan posisikan di Primary Navigation dan Mobile Navigation.

TAHAP 2 – ISI ITEM UNTUK MENU NAVIGASI

Klik Screen Option di pojok kanan atas halaman.

Selanjutnya akan muncul screen option sliding panel seperti di bawah ini dan centanglah Product Categories:

Ini akan memunculkan tab Product Categories yang sebelumnya tidak ada. Gambarnya dapat Anda lihat di tahap 8.

TAHAP 3 – MASUKKAN PRODUCT CATEGORIES KE MENU MAIN NAVIGATION

Di product categories, klik tab View All dan centang semua kategori yang Anda miliki, lalu klik tombol Add to Menu.

Hasilnya:

Jika sudah klik tombol Save Menu.

Lihat di laman depan toko Anda, akan muncul menu di sebelah kanan di bawah top bar, menu Kategori Anda.

Tampilan menu di mobile:

Jika tulisannya terlalu kecil, untuk tema Virtue kalian bisa mengatur ukuran dan jenisnya di Appearance > Theme Option > Menu Settings. Disini terdapat pilihan untuk menu Primary, Secondary dan Mobile.

Tahap 4 – Cara membuat sub menu

Apabila kategori Anda memiliki sub kategori, caranya mengaturnya mudah saja.

Contoh menu Dress Anda memiliki sub kategori Short Dress dan Long Dress,maka cara mengaturnya:

a. Pilihlah kategori dan sub kategorinya dari Tab Produk Categories

Hasilnya akan muncul di daftar menunya seperti ini:

b. Setelah itu klik dan geserlah sub-sub kategorinya agak menjorok ke kanan:

Hasilnya jadinya di tokol adalah seperti ini:

Langkah 14
Membuat Terjemahan dengan Software Poedit

Plugin terus berubah. Plugin Codestyling Localization yang dulu digunakan untuk menerjemahkan sekarang sudah tidak ada lagi. Oleh karena itu dibutuhkan cara lain untuk melakukan penerjemahan.

Tahap 1 – Ubah bahasa WordPress menjadi Bahasa Indonesia

Di dashboard WP, klik menu samping Settings > General.
Ubah Site Language menjadi bahasa Indonesia.

Tahap 2 – Memperbaiki terjemahan

Apabila Anda tidak puas dengan hasil terjemahan dari WooCommerce, silahkan Anda edit. Ada 2 cara untuk edit:

1.      Gunakan software Poedit yang bisa diunduh gratis.

2.      Gunakan plugin Loco Translate.

Saya lebih memilih menggunakan software Poedit. Software ini diinstal di komputer Anda. Sehingga tokol Anda tidak terbebani plugin terlalu banyak. Apalagi jika Anda menggunakan hosting dengan server yang tidak mumpuni.

Poedit dapat diunduh disini

Silahkan instal software tersebut.

Selanjutnya Anda perlu download file id_ID.po yang terletak di wp-content/languages/woocommerce/
Caranya cukup double klik di baris file yang bersangkutan, asal jangan kena nama filenya.

Sebuah window kecil akan muncul, pilih Save File kemudian klik tombolOK.

File akan disimpan ke komputer Anda. Lokasi folder tergantung dari setingan default browser Anda, misalnya:

1.      Lokasi download browser Chrome

2.      Lokasi download browser Firefox

Tahap 4 – Operasikan Poedit

Jalankan Poedit. Kemudian klik Edit Translation.

Pilih file po-nya. Lalu klik Open.

Setelah itu Anda akan melihat antar muka sepeti gambar di bawah ini.

Keterangan:

1.      Daftar bahasa sumber

2.      Daftar bahasa terjemahan

3.      Kata bahasa sumber yang sedang aktif

4.      Terjemahan dari kata bahasa sumber yang sedang aktif.

Silahkan Anda pilih kata yang hendak Anda edit di no.1 kemudian buat terjemahannya di no. 4.

Apabila sudah selesai, klik File > Compile to MO.

Ini akan menghasilkan file MO.

Jika sudah upload kedua file ke wp-content/languages/woocommerce/
dan timpa/overwrite file yang sebelumnya.