Keterangan Hak Cipta ... 1
Penulis ... 2
Pendahuluan... 4
BAB I PERSIAPAN TOKOL ... 8
BAB II PEMBANGUNAN TOKOL DIMULAI ... 13
Langkah 1 - Beli domain & sewa hosting ... 13
Langkah 2 - Instal Wordpress ... 19
Langkah 3 – Masuk ke panel admin Wordpress ... 23
Langkah 4 - Instal dan konfigurasi plugin Jetpack by Wordpress ... 25
Langkah 5 – Instal dan konfigurasi plugin WP Maintenance Mode... 31
Langkah 6 – Instal dan konfigurasi tema Virtue ... 32
Langkah 7 - Instal dan konfigurasi plugin WooCommerce - excelling eCommerce ... 36
Langkah 8 – Instal dan konfigurasi plugin Register Plus Redux ... 43
Langkah 9 – Instal dan konfigurasi plugin Sidebar Login ... 46
Langkah 10 – Instal plugin WooCommerce JNE Shipping (Free Version) ... 50
Langkah 11 – Buat produk Anda ... 55
Langkah 12 – Konfigurasi gambar WooCommerce ... 61
Langkah 13 – Merubah format URL / Permalink ... 66
Langkah 14 – Pembuatan menu ... 68
Langkah 15 – Membuat Terjemahan... 77
BAB III TUTOTAM TOKOL ... 84
Tutotam 1 - Memasang kaca pembesar ... 84
Tutotam 2 – Membuat tema anak / child theme ... 87
> dapur-uang.com 1
Keterangan Hak Cipta
Anda diperbolehkan untuk memperbanyak dan mendistribusikan Ebook ini dalam bentuk apa pun tanpa perlu meminta izin dari penulis. Akan tetapi Anda tidak diperkenankan menggandakan Ebook ini demi kepentingan komersial. Anda juga tidak diizinkan untuk merubah isi dari Ebook ini.
> dapur-uang.com 2
Penulis
Halo semuanya, perkenalkan nama saya Juan, lahir tahun 1980 di Jakarta.
Saya termasuk introver konsentrat. Sifat dasarnya serius banget (lihat saja fotonya), berorientasi pada kerja, dan ada kecenderungan perfeksionis dan detil.
Kepribadian saya agak complicated (istilah kerennya) alias aneh karena suka menentang kebiasaan yang ada.
Saya senangnya dengan hal-hal yang sederhana dan praktis. Walau kadang hobi berkutat di hal-hal yang ngejelimet dan dipantengin sampai ketemu jawabannya. Hal ini bisa juga jadi masalah, karena
> dapur-uang.com 3 menghabiskan banyak waktu. Mungkin saya cocok jadi ilmuwan yang kerja di laboratorium kali ya.
Passion saya adalah komputer, internet dan blogging. Cita-citanya ingin menjadi blogger bernilai 6 digit dalam dolar.
Saya anti SARA, tidak suka dengar orang yang merasa suku, agama, rasa, atau golongannya yang paling hebat dan tidak ada cacat.
Meskipun saya terlahir dari keluarga keturunan, kalau berteman saya tidak peduli dengan bungkusan luar. Apa pun bentuk rambutmu, matamu, warna kulitmu, agamamu asal kepribadianmu nyambung dengan saya, maka kita dapat berteman.
> dapur-uang.com 4
Pendahuluan
Wordpress (WP) pada awalnya adalah platform yang dikembangkan untuk menulis blog, bukan e-commerce.
Apa itu blog? Blog merupakan kependekan dari kata web-log yang artinya catatan di internet.
Berkat internet dan blog semua orang kini dapat menulis apa saja, mempublikasikannya sendiri, dan tetap berkesempatan untuk dikenal oleh banyak orang. Pada era sebelumnya hal ini hanya dapat dilakukan melalui penerbit.
Selain WP masih ada banyak platform blog lainnya, misalnya Blogger, Typepad, Tumblr, dll. Akan tetapi untuk saat ini hanya Wordpress yang bisa digunakan untuk blog dan mengelola tokol (toko online).
Pengalaman membuat tokol
Apakah ada platform lain khusus dikembangkan untuk e-commerce? Jawabannya ada, misalnya saja Magento, Opencart, Prestashop, dll.
Saya sendiri pernah coba menggunakan Prestashop. Tapi bagi saya pengoperasian sistem Prestashop masih terlalu membingungkan. Jadi baru sebentar saya coba, saya putuskan untuk meninggalkannya.
Platform lain yang pernah coba adalah Opencart (OC) versi 1.5.6. Dengan nol pengetahuan dan pengalaman diperlukan waktu sekitar 2 bulan lebih bagi saya untuk belajar hingga akhirnya tokol saya beroperasi.
> dapur-uang.com 5 Itu pun masih terus saya permak sana-sini. Karena OC sendiri masih banyak kekurangan, bug, dan lain-lain. Selain itu secara operasional ada banyak pekerjaan berulang yang ingin saya efisiensikan melalui user interface-nya di halaman admin.
Tidak sedikit modifikasi, tambahan dan perbaikan yang harus dilakukan pada OC dari instalasi yang mula-mula. Hal ini juga yang membuat saya kurang sreg, sebab terlalu banyak tambahan dari berbagai pengembang berbeda ke dalam tokol saya.
Apakah OC itu jelek? Tidak juga, namun demikian menurut saya platform ini menuntut tingkat teknikalitas yang lumayan tinggi untuk mempersiapkannya. Tanpa pengetahuan akan PHP, Javascript, HTML, CSS rasanya akan terlalu sulit untuk membuatnya.
Solusi
Nah, saya melihat Wordpress (WP) dan WooCommerce (WC) dapat memberikan solusi itu. Keduanya cocok bagi Anda yang baru mau mulai memiliki tokol, dan ingin tokonya secepatnya berjalan.
Kompleksitas pembuatan tokol dengan WP + WC jauh lebih rendah dibandingkan dengan platform yang pernah saya coba sebelumnya. Namun demikian tetap bisa memberikan fitur standar yang kurang lebih sama seperti OC (bahkan ada yag lebih baik) dengan user interface di halaman admin yang lebih mudah dan enak untuk dioperasikan.
Keunggulan lain dari menggunakan Wordpress sebagai tokol Anda adalah Anda bisa menggunakan blog sebagai salah satu media marketing Anda. Sementara bila menggunakan platform lain Anda perlu
> dapur-uang.com 6 mengintegrasikan dua platform dengan sistem berbeda. Menurut saya cara ini terlalu rumit dan memusingkan.
Apabila tidak melakukan penggabungan maka alternatif lainnya adalah mengelola 2 platform terpisah. Tapi ya jadi repot mengurusnya. Belum lagi tema dari kedua platform yang tidak menyatu, sehingga lagi-lagi perlu memodifikasi berbagai kode agar desainnya selaras satu sama lain.
Biaya pembuatan
Biaya yang dikeluarkan untuk membuat tokol ini relatif tidak besar, yaitu hanya untuk:
1. biaya domain 2. hosting
3. internet.
Sekedar gambaran saja pada saat E-Book ini ditulis (2014) harga domain untuk .com kurang lebih Rp.95.000,-/tahun dan biaya hosting di penyedia jasa hosting Rumahweb untuk kapasitas 500Mb adalah Rp. 35.000,- per bulan.
Tentu saja biaya ini akan menjadi variatif tergantung dari pilihan-pilihan Anda lainnya.
Di luar itu, WP dan WC serta plugin-plugin lain di dalam tutorial ini biayanya gratis.
> dapur-uang.com 7
Tujuan E-Book ini
E-Book ini bertujuan untuk menuntun Anda secara cepat, langsung dan praktis mengenai dasar-dasar untuk membangun tokol impian Anda yang fungsional. Tokol Anda akan:
1. Bisa menampilkan produk Anda.
2. Memiliki sistem belanja dan pembayaran. 3. Memiliki sistem registrasi.
4. Terdapat sistem pengelolaan data pelanggan dan produk.
5. Memiliki sistem perhitungan biaya pengiriman menggunakan JNE. 6. Berbahasa Indonesia.
Target pengguna ebook ini
Ketika membuat E-Book ini saya memikirkan target pembaca yang sudah mengenal internet dan memiliki pengetahuan dasar tentang Wordpress.
Waktu pembuatan
Apabila dalam proses pembuatannya lancar tanpa masalah, saya yakin dalam waktu 24 jam atau kurang tokolnya Anda siap untuk mulai diisi dengan produk-produk Anda.
Perlu diingat, bahwa tutorial ini hanya mengajarkan dasarnya saja. Waktu pembuatan dapat saja berubah, bila kemudian Anda ingin melakukan kustomisasi sesuai dengan selera Anda sendiri.
> dapur-uang.com 8
BAB I
PERSIAPAN TOKOL
Perkembangan dunia web itu cukup cepat. Bahkan selama saya menulis E-Book ini, berbagai versi dari WP, tema dan plugin sudah muncul kembali yang baru. Oleh karena itu saat Anda menggunakan ebook ini selalu perhatikanlah versinya dari untuk memastikan relevansinya.
Perbedaan versi bisa saja berarti ketidaksesuaian antara yang diajarkan disini dengan situasi yang terkini.
Dalam langkah 1-15, saya akan mengajarkan pembuatan tokol standar. Berikutnya akan ada tutorial tambahan yang mengajarkan hal-hal yang tidak standar dan memerlukan sedikit pengetahuan tentang pemograman. Pada dasarnya sih yang perlu dilakukan hanya kopi tempel saja.
Okay, mari kita mulai saja sesi awal dengan hal-hal yang perlu Anda ketahui sebelum memulai membangun tokol Anda.
Platform, plugin dan tema (tampilan grafik dan tekstual) yang akan kita gunakan adalah:
1. Platform Wordpress versi 3.9.1
2. Plugin Jetpack by Wordpress versi 3.0.1 (Opsional)
Plugin Jetpack penuh dengan berbagai fitur yang bisa Anda gunakan tokol Anda. Berkaitan dengan pembuatan tokol, alasan utama penggunaan plugin ini adalah modul custom css-nya.
> dapur-uang.com 9 Modul ini dapat digunakan untuk merubah desain tokol Anda, misalnya memindahkan posisi sidebar dari kiri ke kanan.
Apabila Anda menggunakan tema Virtue buatan Kandencethemes, maka Anda tidak perlu menginstal plugin Jetpack. Sebab khusus untuk tema ini telah disediakan fitur untuk custom css. Kecuali bila Anda ingin memanfaatkan kemampuan lain dari plugin Jetpack ini
Apabila pemahaman Anda tentang WP semakin meningkat, Anda bisa bisa menggunakan tema anak untuk pengaturan custom css sebagaimana akan diajarkan pada Tutorial Tambahan, Tutotam 2 di Bab III. Tetapi untuk saat ini, kita lakukan cara yang sederhana saja.
3. Plugin WooCommerce - excelling eCommerce versi 2.1.9 Ini adalah plugin utama yang menginjeksi sistem pengelolaan tokol ke WP Anda, seperti pembuatan produk, pemesanan, dsb.
4. Plugin WP Mantainence Mode versi 1.8.11
Plugin ini berfungsi agar bila ada orang yang datang saat tokol Anda belum siap, mereka akan disuguhkan sebuah halaman yang memberitahukan, bahwa tokol sedang dalam proses pembangunan.
Halaman ini tidak nampak bagi yang login ke tokol, misalnya Anda.
Tentu saja Anda bisa menggunakan plugin lain yang menurut Anda lebih baik dari plugin ini.
> dapur-uang.com 10 5. Plugin Register Plus Redux versi 3.9.10 (Opsional)
Plugin ini digunakan untuk sedikit mengubahsuaikan form default registrasi WP dan menyediakan fitur verifikasi alamat email untuk memastikan alamat email yang diberikan calon pembeli, benar.
Apabila Anda tidak menginginkan fitur verifikasi email, Anda tidak perlu memasang plugin ini. Lagipula WooCommerce telah memiliki sistem registrasi sendiri, namun tanpa kemampuan verifikasi email.
Meskipun berbelanja tanpa harus melewati proses verfikasi email bisa dikatakan lebih memudahkan pelanggan di awal, tetapi sebagai konsekuensinya adalah Anda membuka kemungkinan mendapatkan email yang salah ketik atau fiktif, sehingga akan menyusahkan komunikasi nantinya.
Semuanya ada plus minus, silahan Anda putuskan yang terbaik untuk Anda.
6. Sidebar Login versi 2.6.0 (Opsional)
Plugin ini berguna untuk menambah fitur login pada sisi sidebar, untuk memudahkan pelanggan untuk login.
7. Woocommerce JNE Shipping (Free Version) versi 4.1.0
Plugin ini untuk untuk mengatur biaya pengiriman JNE tarif reguler.
> dapur-uang.com 11 8. Tema Virtue dari Kandencethemes.com
Tema adalah wajah dari tokol Anda, berkaitan dengan tampilan grafik, teks, dan tata letaknya.
Untuk kepentingan tutorial ini saya memanfaatkan Tema Virtue yang dikembangkan oleh tim dari Kandencethemes.
Tentu saja Anda dapat menggunakan tema lainnya. Saya sarankan agar Anda menggunakan tema yang dirancang khusus untuk Woocommerce. Karena tema semacam itu sudah lebih dioptimalkan untuk sebuah tokol.
Sayangnya untuk tema yang gratis saat ini jumlahnya terbatas. Hanya sedikit pula yang tampilannya lumayan. Namun kalau Anda memiliki dana tidak ada salahnya Anda menggunakan versi yang berbayar.
Sekedar referensi Anda dapat menggunakan para pengembang tema untuk WooCommerce, seperti Yiththemes, Kandencethemes, dan Codecanyon.
9. Plugin Regenerate Thumbnails versi 2.2.4
Plugin ini digunakan untuk menghasilkan kembali gambar-gambar yang sudah ada ke ukuran baru.
Oleh sistem WooCommerce sebuah gambar akan disimpan ke beberapa gambar dengan berbagai ukuran.
Bila tiba-tiba Anda berubah pikiran dan ingin menggunakan satu set ukuran yang baru, maka Anda akan memerlukan plugin ini.
> dapur-uang.com 12 10. Plugin Codestyling Localization versi 1.99.30
Pada dasarnya WP dan WooCommerce menggunakan bahasa Inggris. Dengan plugin ini Anda bisa merubahnya ke dalam bahasa Indonesia.
> dapur-uang.com 13
BAB II
PEMBANGUNAN TOKOL
DIMULAI
Langkah 1 - Beli domain & sewa hosting
Arti kata domain dalam konteks tutorial ini secara sederhananya adalah alamat tokol Anda di dunia maya. Jadi kalau ada orang yang mau berkunjung ke tokol Anda, dia cukup mengetikkan alamat tokol Anda di address bar dari peramban web, misalnya feju-fashion.com, maka orang dapat masuk dan melihat-lihat isi tokol Anda dari depan layar komputer mereka.
Gambar 1 - Alamat tokol
Anda perlu membeli sebuah domain. Disini perlu diperhatikan meskipun istilah umumnya beli domain, namun lebih tepat kalau saya katakan sewa domain, karena setiap satu tahun Anda harus memperpanjangnya.
Harga domain berbeda-beda, tergantung dari buntutnya atau ekstensinya apakah itu .com, .web.id, .co.id, .asia, dll.
Sebenarnya mereka semua hanya nama saja, namun strategi pemasaran yang membuat harganya jadi beda-beda.
> dapur-uang.com 14 Beberapa ekstensi tidak bisa dipakai sembarang orang dan hanya dimaksudkan untuk instansi tertentu, seperti go.id. hanya dapat dipakai untuk instansi pemerintah, .co.id hanya untuk perusahaan, dan sebagainya.
Untuk mudahnya sebaiknya tokol Anda pakai .com saja. Anda dapat membelinya pada saat bersamaan dengan sewa hosting.
Apabila Anda sedang beruntung biasanya mereka memiliki promo di hari-hari besar, misalnya gratis hosting 6 bulan dan gratis domain untuk paket 1 tahun.
Apa arti kata hosting? Secara gamblang hosting adalah tempat untuk menaruh tokol Anda. Penyedia jasa hosting berarti perusahaan yang menyediakan jasa untuk itu.
Tokol Anda sebenarnya hanyalah kumpulan file yang ditaruh di suatu tempat di dalam sebuah web server. Lebih tepatnya di dalam sebuah harddisk di sebuah web server. Server ini bertugas melayani akses pengunjung dari seluruh penjuru dunia secara otomatis.
Sesungguhnya web server itu mirip komputer desktop Anda, tetapi jauh lebih canggih dan kompleks.
Pilih shared hosting atau dedicated hosting?
Selanjutnya saat menyewa hosting, Anda pasti pasti akan bertemu dua istilah umum, yaitu shared hosting dan dedicated hosting.
> dapur-uang.com 15 Shared hosting artinya satu web server dibagi dan dipakai ramai-ramai. Sedangkan dedicated hosting artinya satu server hanya Anda sendiri yang menggunakannya.
Untuk pertama-tama disarankan agar Anda memakai shared hosting saja, sebab biasanya di permulaan belum banyak orang yang masuk ke tokol Anda.
Biaya shared hosting lebih murah dari dedicated hosting, tetapi dedicated hosting dapat melayani lalu lintas pengunjung dalam jumlah jauh lebih banyak.
Bila tokol Anda semakin ramai dan menjadi pelan atau berat kerjanya, barulah pindah ke dedicated hosting atau bahkan jika perlu membuat web server sendiri di rumah.
Selanjutnya pada saat Anda hendak menyewa hosting, mungkin Anda diberikan pilihan untuk menggunakan S-Panel atau C-Panel. Keduanya itu adalah nama untuk sistem pengelolaan hosting Anda. Keduanya memiliki tampilan dan pengalaman pengguna yang berbeda.
Saya sarankan untuk menggunakan C-Panel saja, karena menurut saya user interface-nya lebih enak dipakai dibandingkan S-Panel. Akan tetapi semuanya kembali ke selera masing-masing.
> dapur-uang.com 16 Gambar 2 – Tampilan interface Cpanel
> dapur-uang.com 17 Dimana Anda bisa sewa hosting? Ada banyak perusahaan yang menyediakan jasa hosting, baik di dalam negeri maupun di luar negri.
Kalau Anda belum pernah menyewa hosting pasti Anda bingung, hosting mana yang sebaiknya Anda pakai. Saya bisa sarankan untuk menggunakan jasa Rumahweb. Karena saya sendiri saat ini menaruh tokol dan blog saya disana.
Mereka bukan yang termurah, tetapi mereka menyediakan pelayanan technical support (tesu) 24 jam menggunakan live chat. Sementara perusahaan lain biasanya harus memasukkan tiket layanan dulu dan menunggu dalam waktu yang tidak jelas.
Terkadang untuk masalah kecil urusannya jadi terlalu lama belum lagi jika satu permasalahannya belum selesai, teknisinya yang menangani berubah-ubah terus sesuai dengan siapa yang bertugas pada hari itu. Padahal belum tentu mereka menguasai sikon atau pembicaraan yang sebelumnya dilakukan.
Selain itu apakah Anda pernah mengalami saat sedang sedang live chat dengan sales, tiba-tiba ditinggal begitu saja. Belum jadi pelanggan saja sudah diperlakukan seperti itu apalagi kalau sudah jadi pelanggan. Jika Anda mengalami hasli seperti ini, mungkin sebaiknya Anda berpikir 3x sebelum menggunakan jasa hosting tersebut.
Jadi saat menentukan hosting mana yang akan Anda gunakan. Janganlah hanya bertanya hosting mana yang paling murah dan melihat nominalnya saja. Melainkan apa yang akan Anda dapatkan dan
> dapur-uang.com 18 bagaimana Anda akan diperlakukan. Hal ini biasanya hanya bisa diketahui melalui ulasan orang lain, atau pengalaman pribadi.
Namun demikian keputusan Anda menggunakan penyedia jasa hosting yang mana ada di tangan Anda sendiri.
Apablia Anda sudah menjatuhkan pilihan, proses penyewaan hosting dan pembelian domain dapat dilakukan secara dalam jaringan (online) dan prosesnya cukup mudah.
Lokasi Server
Kemudian apabila Anda ditanya, ingin menggunakan server yang berlokasi di Indonesia, Singapura, atau US? Lihatlah dari target market Anda. Bila Anda melayani orang Indonesia, pilihlah server Indonesia, bila luar negeri, pilihlah US, jika dalam dan luar negeri, pilihlah Singapura.
Lokasi server mempengaruhi kecepatan loading tokol Anda di layar calon pelanggan Anda.
Kapasitas Hosting
Saya sarankan untuk menggunakan hosting berkapasitas 500MB untuk berbagai keperluan. Tetapi kalau saat ini Anda hanya sekedar untuk coba-coba membuat tokol, hosting berkapasitas 250MB sudah cukup walaupun ngepas sekali.
> dapur-uang.com 19
Langkah 2 - Instal Wordpress
Dengan asumsi Anda sudah memiliki domain dan tempat hosting yang menggunakan C-Panel, berikut adalah cara untuk menginstal Wordpress:
Tahap 1. Di C-Panel gunakanlah Softaculous.
Cara cepatnya ketikkan saja kata: Soft pada field Find. Ini akan memfilter dan memunculkan aplikasi-aplikasi Softaculous. Diantaranya adalah Wordpress.
Tahap 2. Klik ikon: Wordpress.
Gambar 4 - Cpanel & aplikasi-aplikasi Softaculous
Tahap 3. Setelah itu Anda akan masuk ke halaman baru seperti di bawah ini, klik tombol: Install.
> dapur-uang.com 20 Gambar 5 - Halaman instalasi Worpress di Softaculous
Tahap 5. Selanjutnya Anda akan di bawa ke halaman lain untuk menyiapkan Wordpress Anda.
> dapur-uang.com 21 1. Di bagian Choose Domain, pilih nama domain yang akan Anda
gunakan untuk instalasi WP.
2. Di bagian In Directory, dikosongkan saja. Dengan ini Wordpress akan terinstal di root directory. Bila Anda tidak tahu apa itu root directory, kosongkan saja.
3. Di bagian Tabel Prefix untuk keamanan gantilah dengan nama lain selain wp_.
Prefix adalah awalan dari nama tabel Anda di dalam database Wordpress.
Tujuan dari penggantian prefiks adalah untuk lebih menyulitkan peretas untuk membobol tokol Anda. Sebab bila tidak, saat mereka melakukan aksinya akan dapat dengan lebih mudah menebak nama-nama tabel di database Anda dan memiliki tingkat kesuksesan lebih tinggi saat melakukan aksinya.
Mengapa ada orang yang ingin menjahati saya? Pikir Anda. Terkadang orang yang memiliki kekuatan dan pengetahuan ingin mempraktikan ilmunya.
Janganlah terlalu naif untuk berpikir, ah hal itu tidak akan terjadi pada saya. Jangan tunggu sampai kejadian, baru menyesal.
4. Dilanjutkan dengan mengisi: username, password dan alamat
> dapur-uang.com 22 Gambar 7 - Halaman konfigurasi instalasi Wordpress
Tips: untuk keamanan gantilah Admin Username dari Admin menjadi username yang lain.
Selanjutnya Anda hanya perlu menunggu hingga proses instalasi Wordpress mencapai 100%.
> dapur-uang.com 23
Langkah 3 – Masuk ke panel admin Wordpress
Sekarang buka peramban Anda, ketikkan:
www.namadomainanda.com/wp-admin di address bar peramban Anda, sebagai contoh: www.feju-fashion.com/wp-admin
Gambar 8 - address bar
Nanti Anda akan dibawa masuk ke halaman login seperti di bawah ini. Silahkan masukkan: username dan password Anda, lalu klik tombol:
Log In
> dapur-uang.com 24 Dan ini adalah penampakan dari panel admin Wordpress.
Gambar 10 - Panel admin Wordpress
Pada sisi sebelah kiri terdapat menu samping yang akan kita sering pakai nantinya, misalnya pages, appearance, plugins, tools, setting, dll.
> dapur-uang.com 25
Langkah 4 - Instal dan konfigurasi plugin Jetpack
by Wordpress
Untuk instalasi plugin pertama ini, Anda akan dibimbing setahap demi setahap. Diharapkan dengan demikian Anda sudah bisa melakukannya instalasi plugin lainnya sendiri.
Tahap 1. Klik menu: Plugin > Add New.
> dapur-uang.com 26 Tahap 2. Isi: jetpack di field Search. Klik tombol: Search Plugin.
Gambar 12 - Halaman instalasi plugin
Tahap 3. Klik: Install Now untuk memulai instalasi plugin.
> dapur-uang.com 27 Tahap 4. Klik tombol: OK untuk mengonfirmasi instalasi.
Gambar 14 - Kotak dialog instal plugin
Tahap 5. Tunggu hingga selesai proses instalasi selesai Klik: Activate Plugin.
Gambar 15 - Aktivasi plugin
Sampai di sini tahapan umum untuk melakukan instalasi sebuah plugin di Wordpress telah selesai.
Sehubungan dengan plugin Jetpack itu sendiri, masih ada konfigurasi yang harus dilakukan. Mari kita lanjut ke tahap berikutnya.
> dapur-uang.com 28 Gambar 16 – Proses menghubungkan domain ke Wordpress.com
Klik tombol: Connect to Wordpress.com.
Anda akan di bawah ke halaman seperti ini:
Gambar 17 - Halaman login untuk tersambung ke Wordpress
Tahap 7. Apabila Anda sudah memiliki akun Wordpress Isi: username
dan password wordpress Anda > Klik tombol: Authorize Jetpack.
Selanjutnya lompat ke tahap 9.
Jika belum silahkan klik tautan: Need and account dan lanjutkan ke tahap 8.
Tahap 8. Di halaman berikutnya isi: email address, username, password.
> dapur-uang.com 29 Gambar 18 - Form daftar akun Wordpress
Jika sudah bukalah: email Anda dan aktifkan: akun Wordpress Anda dengan mengklik sebuah tautan aktivasi. Setelah itu kembalilah ke halaman plugin dan lakukan tahap 6 & 7.
Tahap 9. Jika domain Anda sudah terkoneksi dengan Wordpress.com maka Anda akan melihat halaman seperti di bawah ini.
> dapur-uang.com 30 Tahap 11. Klik Tab: Settings untuk melakukan pengaturan
Gambar 20 – Tab Jetpack
Tahap 12. Aktifkan: Custom: CSS.
Gambar 21 - Aktivasi custom CSS
Info: Jika tema Anda sudah menyediakan fitur untuk custom CSS, seperti tema Virtue, Anda tidak perlu menggunakan custom CSS dari Jetpack; atau jika Anda sudah tahu cara menggunakan tema anak untuk mengatur berbagai perubahan, gunakanlah tema anak.
> dapur-uang.com 31
Langkah 5 – Instal dan konfigurasi plugin WP
Maintenance Mode
Tahap 1. Silahkan instal dan aktifkan plugin WP Maintenancemode.
Tahap 2. Setelah itu lakukan konfigurasi dengan cara klik: Setting
Gambar 22 - Plugin WP Maitenance Mode
Tahap 3. Lakukan konfigurasi sederhana berikut ini: pilih: True > Klik tombol: Update.
Gambar 23 - Mengaktifkan mode perawatan
Tahap 4. Isi kata-kata yang ingin Anda sampaikan kepada pengunjung situs yang datang di bagian Text.
Gambar 24 - Pesan mode perawatan
> dapur-uang.com 32
Langkah 6 – Instal dan konfigurasi tema Virtue
Tahap 1. Klik menu samping: Appearance > Themes > Klik tombol: Add New.
Isi: Virtue di field Search.
Tahap 2. Di halaman seperti di bawah ini, masukkan kata: Virtue di field dan WP akan secara otomatis mencari tema yang bersangkutan. Setelah muncul klik: Install.
> dapur-uang.com 33 Tahap 3. Setelah instalasi selesai, klik: Activate
Gambar 26 - Aktivasi tema Virtue
Tahap 4. Lakukan konfigurasi untuk tema Virtue, klik menu samping:
Appearance > Theme Options.
Gambar 27 – Theme options tema Virtute
Disini ada banyak hal yang bisa Anda atur, untuk saat ini Anda hanya akan mengatur tata letak sidebar untuk Home Layout dan Shop Layout.
Klik tab: Home Layout > Pilih: ikon gambar yang sebelah kanan pada bagian dispaly a sidebar on the Home Page.
> dapur-uang.com 34 Gambar 28 – Pengaturan sidebar tokol
Lakukan hal yang sama untuk TAB Shop Settings. Setelah itu ingat untuk menyimpan perubahan, klik tombol: Save Changes
Pengaturan ini bertujuan agar tokol Anda menampilkan sidebar pada sisi sebelah kanan.
Apabila Anda lebih memilih sidebar berada di sebelah kiri, maka Anda harus memasukkan selentingan kode ke custom CSS Anda sebagaimana akan dijelaskan di bawah ini.
Pembuatan atau penggunaan custom CSS dapat dilakukan dengan tiga cara. Untuk saat ini saya akan memberitahukan dua cara yang paling sederhana, yaitu:
1. Gunakan fitur custom CSS dari tema Virtue.
Klik menu samping: Appearance > Theme Options > Tab
Advanced Settings
Masukkan kode: #content .main {float:right;} ke kotak Custom CSS.
> dapur-uang.com 35 Gambar 29 - Kotak custom CSS tema Virtue
2. Jika Anda menggunakan tema lain yang tidak menyediakan custom CSS, dan Anda telah menginstal plugin Jetpack sera telah mengaktifkan modul custom CSS-nya, sebagaimana dijelaskan pada langkah 4, maka lakukan tahapan berikut ini:
Klik menu samping: Appearance > Edit CSS
Masukkan kode: #content .main {float:right;} seperti di bawah ini
Klik tombol: Save Stylesheet.
> dapur-uang.com 36
Langkah 7 - Instal dan konfigurasi plugin
WooCommerce - excelling eCommerce
Tahap 1. Silahkan instal dan aktifkan plugin: WooCommerce – excelling
ecommerce. Bila Anda lupa cara menginstal plugin, silahkan lihat kembali Langkah 4 untuk contoh.
Tahap 2. Setelah plugin WooCommerce aktif Anda akan melihat tulisan berikut ini:
Gambar 31 - Pesan untuk menginstal halaman WooCommerce
Klik: Install WooCommerce Pages.
Ini akan memunculkan halaman-halaman / pages yang Anda butuhkan untuk tokol Anda.
> dapur-uang.com 37 Setelah proses instalasi halaman-halaman itu selesai maka akan muncul muka halaman seperti di bawah ini. Dan pada menu samping muncul dua menu tambahan, yaitu WooCommerce dan Products.
Gambar 33 - Halaman WooCommerce selesai diinstal
Tahap 3. Masuklah ke halaman konfigurasi / setting dari Woocommerce, klik: WooCommerce > Setting.
Untuk sekedar informasi di bagian setting terdapat beberapa TAB, yaitu :
Gambar 34 - TAB –TAB di halaman konfigurasi WooCommerce
1. General - berisi hal-hal yang umum, seperti konfigurasi lokasi dan jenis mata uang, dll.
2. Products - berisi konfigurasi berbagai hal yang berkaitan dengan produk di tokol Anda, seperti satuan berat, satuan panjang, inventory, dll.
> dapur-uang.com 38 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.
Tahap 4. Lakukan konfigurasi lokasi dan mata uang pada TAB General, klik: TAB General dan ikuti pengaturan seperti berikut ini:
Konfigurasi lokasi di general options
Gambar 35 - Konfigurasi lokasi
Keterangan:
1. Base Location - Ini adalah lokasi bisnis Anda. 2. Selling Location - pilih :
a. Sell to all countries bila Anda melayani pengiriman ke seluruh dunia.
> dapur-uang.com 39 b. Sell to specific countries only bila Anda melayani pengiriman
ke negara-negara tertentu saja
3. Specific Countries - parameter 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.
Konfigurasi mata uang di currency options
Gambar 36 - Format mata uang
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.
> dapur-uang.com 40 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 urusan selesai, klik tombol: Save Changes
Tahap 5. 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:
Gambar 37 – Konfigurasi proses checkout
1. Jika Anda tidak menggunakan kupon hilangkan centang pada Enable the use of coupons.
> dapur-uang.com 41 2. Jika Anda ingin hanya pelanggan yang telah registrasi di tokol
Anda yang bisa belanja, hilangkan centang pada Enable guest checkout
Setelah selesai klik: Save Changes, lalu klik tautan: Bacs.
Gambar 38 – Halaman untuk konfigurasi bank transfer
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
Gambar 39 – Pembuatan akun bank
Satu hal yang menarik adalah mulai dari versi 2.1 Anda sudah bisa menggunakan multi akun bank.
> dapur-uang.com 42 Selanjutnya silahkan matikan metode pembayaran cheque yang tidak diperlukan dengan menghilangkan centang dari Enable Cheque Payment.
Gambar 40 - Mematikan metode pembayaran cheque
Tahap 6. Rubah tampilan halaman front page
Secara default Wordpress akan menampilkan blog di halaman muka. Tapi kini Anda ingin menampilkan produk Anda. Caranya klik: Setting >
Reading. Lakukan konfigurasi seperti gambar di bawah ini:
> dapur-uang.com 43
Langkah 8 – Instal dan konfigurasi plugin
Register Plus Redux
Plugin ini digunakan untuk membuat form registrasi pelanggan, menggantikan form registrasi dari WooCommerce.
Kelebihan plugin Register Plus Redux adalah adanya fitur verifikasi alamat email untuk memastikan, bahwa alamat email yang didaftarkan oleh pelanggan sungguh-sungguh ada.
Cara kerjanya adalah sebagai berikut: setelah proses registrasi diselesaikan, sistem akan mengirimkan sebuah email verifikasi ke alamat email yang diberikan oleh calon pembeli. Yang bersangkutan kemudian akan diminta untuk mengklik sebuah tautan di dalam email tersebut untuk mengaktifkan akunnya sebelum ia dapat berbelanja.
Secara default, sistem verifikasi ini tidak ada, akibatnya orang dapat salah atau dengan sengaja memberikan alamat email palsu.
Bila Anda tidak ingin menggunakan proses ini, maka Anda dapat melewatkan langkah ini dan menggunakan proses registrasi dari WooCommerce itu sendiri (tanpa verifikasi).
Ok sekarang, mari kita mulai proses instalasinya
Tahap 1. Lakukan instalasi plugin Register Plus Redux dan aktifkan.
Tahap 2. Lakukan konfigurasi dasar, klik menu samping: Setting >
> dapur-uang.com 44 Ikuti konfigurasi sebagai berikut:
Gambar 42 - Konfigurasi form dan sistem registrasi
Gambar 43 - Konfigurasi form dan sistem registrasi 2
> dapur-uang.com 45 Selanjutnya klik menu samping: Setting > General. Ikuti konfigurasi seperti di bawah ini
Gambar 44 - Konfigurasi izin registrasi
Dengan konfigurasi ini pelanggan dapat masuk ke halaman registrasi dan melakukan pendaftaran. Kemudian setelah melalui proses verifikasi ia akan otomatis terdaftar sebagai Customer.
> dapur-uang.com 46
Langkah 9 – Instal dan konfigurasi plugin Sidebar
Login
Tahap 1. Instal dan aktifkan: plugin Sidebar Login. Plugin ini akan memunculkan sebuah widget untuk login.
Widget pada dasarnya adalah sebuah fungsionalitas yang bisa Anda tambahkan pada blog atau tokol Anda.
Tampilan dari widget Sidebar Login adalah sebagai berikut:
Gambar 45 – Tampilan widget Sidebar Login
> dapur-uang.com 47 Anda dapat lihat daftar widget yang tersedia ada di bagian kiri. Sementara pada sisi sebelah kanan terdapat beberapa posisi sidebar yang tersedia dari tema Virtue, total ada 6 posisi. Hal ini akan berbeda bila Anda menggunakan tema lain.
Gambar 46 - Halaman widget
Anda akan meletakkan widget Sidebar Login pada sidebar primary. Anda dapat klik dan geser widget yang bersangkutan ke posisi yang Anda inginkan. Atau jika widgetnya berada terlalu jauh di bawah, lakukan hal berikut ini:
Klik: widget Sidebar Login, maka akan muncul pilihan posisi. Pilih:
Primary Sidebar. Sesudah itu klik: Add Widget, sebagaimana dicontoh pada gambar di bawah ini:
> dapur-uang.com 48 Gambar 47 - Penempatan widget
Dengan demikian widget yang bersangkutan akan berada pada posisi sidebar yang primary.
Setelah itu lakukan konfigurasi sebagai berikut pada widget Sidebar Login:
1. Hapus: Dashboard | %admin_url%
2. Hapus: Profile | %admin_url%/profile.php
Sehingga menyisakan: Logout | %logut_url% saja 3. Hapus centang dari: Show logged-in user avatar 4. Isi Logout Redirect URL: nama domain Anda 5. Klik tombol: Save
> dapur-uang.com 49 Gambar 48 - Konfigurasi widget Sidebar Login
Jika calon pelanggan sudah memiliki akun dan memasukkan username dan password-nya, nanti mereka akan melihat ucapan selamat datang seperti di bawah ini.
> dapur-uang.com 50
Langkah 10 – Instal plugin WooCommerce JNE
Shipping (Free Version)
Pada saat Ebook ini ditulis versi plugin ini adalah 5.0.4. Versi gratis dari plugin ini hanya dapat digunakan untuk perhitungan pengiriman JNE Reguler
Kekurangan dari plugin versi ini adalah tidak dapat berjalan di fitur Shipping Calculator di halaman Cart, yaitu halaman tempat pelanggan dapat melhat barang yang telah dipilhnya. Oleh karena itu sebaiknya Anda menghilangkan fitur Shipping Calculator lewat halaman konfigurasi WooCommerce, agar tidak membingungkan pelanggan.
> dapur-uang.com 51 Namun demikian plugin ini tetap dapat berfungsi dengan baik di halaman checkout saat melakukan perhitungan total.
Halaman checkout adalah halaman terakhir dari proses pembelian.
Tahap 1. Plugin ini harus diunduh dari :
http://www.agenwebsite.com/plugin-woocommerce-jne-shipping-indonesia-free-version.html/woocommerce-jne-free
Tahap 2. Sedikit berbeda dari biasanya untuk instalasi Anda harus mengunggah plugin ini. Caranya klik: Plugin > Add New > Upload
Gambar 51 – Unggah plugin
Tahap 3. Klik tombol: Browse. Nanti akan muncul window pop up, cari dan pilih file pluginnya: woocommerce-jne-free-5.0.4 (dalam bentuk zip), kemudian klik tombol: Install Now.
> dapur-uang.com 52 Gambar 52 - Browse
Setelah plugin selesai diinstalasi dan diaktifkan, berikutnya lakukan konfigurasi.
Tahap 4. Klik: WooCommerce > Setting > TAB Shipping > klik JNE Free
Shipping
Gambar 53 - Konfigurasi pengiriman JNE
> dapur-uang.com 53 Dari daftar yang sudah Anda dapatkan masukkan daftar biaya pengiriman di kotak seperti di bawah ini dengan format: Nama Kota/Kabupaten x Nama Kecamatan, Tarif REG.
Misalnya: DKI Jakarta x Jakarta Barat, 8000
Gambar 54 – Pengisian biaya pengiriman JNE
JNE menghitung biaya pengiriman berdasarkan kecamatan. Jadi Anda sebenarnya cukup memasukkan nama kecamatan saja. Tapi saya sarankan untuk menyertakan juga kota/kabupatennya untuk memudahkan identifikasi.
Setelah selesai klik tombol: Save.
Tahap 5. Selanjutnya Anda akan menentukan jenis pengiriman default, klik TAB: Shipping, klik tombol radio: JNE REG, jika sudah klik tombol:
> dapur-uang.com 54 Gambar 55 - Pemilihan metode pengiriman
Matikan metode pengiriman lain jika ada, dengan klik: tautan jenis
pengirimannya, lalu hilangkan centang: enable this shipping method, seperti di bawah ini.
> dapur-uang.com 55
Langkah 11 – Buat produk Anda
Tahap 1. Buat kategori produk, klik menu samping: Product > Categories
Gambar 57 - Pembuatan kategori produk
Silahkan isi kategori tokol Anda di field Name. Kemudian tekan enter. Ulangi proses tersebut hingga selesai.
Tahap 2. Buat produknya, klik menu samping: Product > Add Product
Anda akan dibawa ke halaman Add New Product.
Lakukan langkah berikut :
1. Isi: nama produk 2. Isi: keterangan produk 3. Pilih: kategori produk
> dapur-uang.com 56 Gambar 58 –Pembuatan produk
4. Klik: Set featured image untuk memilih gambar utama produk Anda
5. Klik: Add product gallery images untuk gambar-gambar tambahan Anda
Gambar 59 – Pemasangan gambar produk
> dapur-uang.com 57 Gambar 60 - Tampilan setelah gambar di set
Di bagian bawah keterangan produk terdapat beberapa TAB dan isian
Gambar 61 - Pengisian no kode produk dan harga
> dapur-uang.com 58 6. Isi: SKU / no produk Anda bila ada.
7. Isi: Reguler Price (Rp) / harga produk Anda
8. Isi: Sale Price / harga diskon Anda bila ada penawaran khusus. Klik: schedule untuk mengatur tenggang waktu. Tenggang waktu hanya bisa berdasarkan tanggal.
Kemudian kita pindah ke TAB Shipping /Pengiriman.
Gambar 62 - Pengisian untuk pengiriman
Di Tab Shipping:
9. Isi: Weight (kg) / berat produk Anda. Ini diperlukan untuk perhitungan JNE.
10. Isi: Dimensions (cm)/ dimensi produk Anda bila diperlukan.
Di bagian bawahnya lagi masih ada Product Short Description, sebuah keterangan singkat yang akan muncul di bawah nama produk di halaman produk. Silahkan digunakan jika ingin dipakai.
> dapur-uang.com 59 Gambar 63 - Product short description
> dapur-uang.com 60 Kalau sudah silahkan klik tombol: Preview Changes. Hasilnya:
> dapur-uang.com 61
Langkah 12 – Konfigurasi gambar WooCommerce
Secara default WooCommerce menggunakan pengaturan gambar berukuran bujur sangkar. Bila Anda puas dengan konfigurasi ini maka Anda bisa melewatkan langkah ini. Akan tetapi bila Anda ingin mengubah ukurannya dan menggunakan gambar dengan rasio persegi panjang, silahkan ikuti tahapan-tahapan berikut ini.Tahap 1. Klik: WooCommerce > Setting > TAB Product
Di bagian paling bawah Anda akan melihat konfigurasi ukuran gambar seperti di bawah ini.
Gambar 65 - Konfigurasi ukuran gambar di TAB Catalog
Sebelumnya beberapa istilah yang perlu Anda ketahui:
1. Catalog Images - Gambar yang pelanggan lihat pertama kali di halaman depan tokol Anda.
> dapur-uang.com 62 Gambar 66 – Catalog images
2. Single Product Image - Gambar utama di halaman produk
3. Product thumbnails - Gambar tambahan berukuran kecil yang letaknya di bahwa gambar utama, jika Anda memasangnya.
4. Hard Crop – konfigurasi untuk memotong gambar Anda agar memiliki ukuran yang seragam.
> dapur-uang.com 63 Gambar 67 - Single product image dan product thumbnails
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.
> dapur-uang.com 64 Tahap 2. Lakukan ini apabila Anda telah memasukkan/mengunggah beberapa gambar sebelum melakukan tahap 1.
Instal dan aktifkanlah plugin Regenarate Thumbnails. Selanjutnya klik menu samping: Tools > Regen. Thumbnails.
Pada halaman Regenerate Thumbnails, Klik tombol: Regenerate All
Thumbnails
Gambar 69 - Generate thumbnails
Tunggulah hingga seluruh proses regenerasi gambar selesai.
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
> dapur-uang.com 65 Gambar 70 – Pengaturan ukuran gambar di theme options dari tema Virtue
Hasilnya adalah seperti berikut:
> dapur-uang.com 66
Langkah 13 – Merubah format URL / Permalink
Permalink adalah URL yang merujuk pada suatu post atau kategori tertentu. Bentuknya ada yang jelek dan cantik (mudah dimengerti).
1. Bentuk yang jelek : http://feju-fashion.com/?product=blouse 2. Bentuk yang cantik : http://feju-fashion.com/product/blouse
Agar bentuk permalink menjadi seperti nomor 2, klik: Setting >
Permalink. Lalu ikuti pengaturan di bawah ini.
> dapur-uang.com 67 Gambar 73 - Konfigurasi permalink 2
> dapur-uang.com 68
Langkah 14 – Pembuatan menu
Menu apa saja yang berada di dalam tokol? Itu terserah pemiliknya. Meskipun demikian berikut ini adalah menu yang paling umum digunakan:
1. Menu akun, seperti: My Account. 2. Menu belanja, seperti: Cart.
3. Menu kategori, misalnya: Dress, Blouse, Jumpsuit, dll. (tergantung barang dagangan Anda)
Oh ya kalau di WooCommerce halaman Login dan My Account menjadi satu. Apabila seseorang belum login, jika ia mengklik menu My Accoynt, maka yang tampil adalah halaman login, jika sudah login, baru halaman Account yang muncul.
Menurut saya Nama My Account kurang deskriptif untuk menjelaskan, bahwa halaman ini bisa juga dipakai untuk login. Karena alasan inilah saya menganjurkan penggunaan plugin sidebar login untuk mengatasi hal ini.
Selanjutnya kita bicara tentang posisi menu. Posisi menu tergantung dari tema yang Anda gunakan.
Sekarang kita akan buat empat menu dasar:
1. Menu My Account & Menu Cart
(Untuk tema Virtue, menu cart sudah ada secara otomatis) 2. Menu Registrasi
> dapur-uang.com 69
1. My Account
Tahap 1. Masuk ke halaman menu, klik menu samping: Appearance >
Menu
Tahap 2. Di halaman pembuatan menu, beBerikan nama untuk menu Anda, isi di field menu name: Akun atau gunakan nama apa pun yang Anda inginkan. Lalu klik tombol: Create Menu.
Gambar 74 – Buat menu
Tahap 3. Posisikan menu Akun di Topbar Navigation, centang: Topbar
Navigation. Kemudian klik tombol: Save Menu.
Ingat jika Anda menggunakan tema lain, nama posisi bisa berbeda, dan Anda bisa letakkan dimana saja yang menurut Anda baik.
> dapur-uang.com 70 Tahap 4. Isi menu Akun dengan Page: My Account. Pada sisi kiri Anda akan melihat daftar halaman/Pages. Centang: My Account, lalu klik tombol: Add to Menu.
Gambar 76 - Daftar menu
Hasilnya bila Anda lihat pada struktur menu Anda adalah seperti di bawah ini:
> dapur-uang.com 71 Jika sudah selesai, ingat untuk klik tombol: Save Menu.
Tampak depan dari menu tersebut adalah seperti di bawah ini:
Gambar 78 - Menu Topbar
Kebetulan untuk tema Virtue, menu Cart sudah otomatis tersedia (Your Cart), jadi tidak perlu ditambahkan lagi. Untuk tema yang tidak menyediakan silahkan tambahkan Page: Cart.
2. Menu registrasi & Menu Cart
Tahap 1. Lihat kembali di sisi kiri, di bawah Page, klik: Links. Ini untuk menampilkan jenis menu berdasarkan links.
Gambar 79 - Menu tautan
> dapur-uang.com 72 Gantilah nama-domain.com dengan nama domain Anda, misalnya butikbubariah.com, tokousb.com, dll.
Pada Link Text, isi: Registrasi.Lalu klik tombol: Add to menu.
Sekedar informasi, apabila saat Anda menguji coba menu ini dan Anda melihat pesan eror: User registration is currently not allowed, maka yang perlu Anda lakukan adalah klik menu samping: Setting > General. KemudianIkuti konfigurasi seperti di bawah ini
Gambar 80 - Konfigurasi izin registrasi
3. Menu kategori
Menu ini dimaksudkan agar calon pembeli dapat menyortir tampilan barang Anda berdasarkan kategeri tertentu.
Tahap 1. Buatlah menu baru, klik tautan: create a new menu
Gambar 81 - Buat menu baru
> dapur-uang.com 73 Gambar 82 – Buat menu baru kategori
Tahap 3. Posisikan menu di Primary Navigation dan Mobile Navigation (menu untuk perangkat mobile).
Gambar 83 – Posisi menu
Tahap 4. Munculkan TAB “Product Categories” yang sebelumnya tidak ada, caranya:klik: Screen Option di pojok kanan atas halaman.
Gambar 84 - Screen option
Selanjutnya akan muncul screen option sliding panel seperti di bawah ini dan centanglah: Product Categories.
> dapur-uang.com 74 Gambar 85 - Sliding panel screen option
Ini akan memunculkan TAB Product Categories di sisi kiri.
> dapur-uang.com 75 Tahap 5. Isi menu Kategori.
Klik TAB: Product Categories.
Centang semua kategori yang Anda miliki. Pada contoh di bawah terdapat 2 kategori produk yang sudah dibuat, yaitu Dress dan Blouse. Kemudian klik tombol: Add to Menu.
Gambar 87 - Kategori produk
Jika sudah klik tombol: Save Menu.
Maka hasilnya di halaman depan toko Anda, akan muncul menu di sebelah kanan di bawah top bar, menu Kategori Anda.
> dapur-uang.com 76 Gambar 88 - Menu kategori
Jika tulisannya terlalu kecil, untuk tema Virtue Anda bisa mengatur ukuran dan jenisnya di Appearance > Theme Option > Menu Settings.
> dapur-uang.com 77
Langkah 15 – Membuat Terjemahan
Tahap 1. Instal dan aktifkan plugin Codestyling Localization.
Tahap 2. Anda perlu memberitahu WP, bahwa platform Anda akan menggunakan bahasa Indonesia. Caranya adalah dengan mengedit file: wp-config.php.
Silahkan masuk ke Cpanel, dengan mengetikkan nama domain Anda di address bar, misalnya: www.namadomain.com/cpanel
Lalu masukkan username dan password Anda.
> dapur-uang.com 78 Tahap 3. Setelah masuk ke Cpanel, klik: File Manager > Pilih: Document
Root for: > Klik tombol: Go.
Gambar 91 - File Manager
Setelah Anda di bawa ke halaman selanjutnya
Carilah file: wp-config.php, klik kanan pada file tersebut > pilih edit, maka sebuah window text editor akan muncul, klik tombol: edit.
> dapur-uang.com 79 Gambar 92 - Window text editor
Setelah text editornya muncul, carilah tulisan: define(‘WPLANG’, ”);
ganti menjadi:
define(‘WPLANG’, ‘id_ID’);
Jika sudah, klik tombol: save changes di pojok kanan atas.
Dengan ini WordPress telah diatur untuk menggunakan Bahasa Indonesia.
> dapur-uang.com 80 Pada dasarnya sekarang tokol Anda sudah berbahasa Indonesia, sebab WooCommerce telah menyediakan file terjemahan Bahasa Indonesianya. Tapi terjemahan ini tidak lengkap.
Tahap 5. Lakukan penerjemahan yang kurang, klik menu samping: Tools
> Localization
Kemudian Scroll ke bawah sampai Anda menemukan terjemahan untuk WooCommerce. Sebagaimana bisa Anda lihat pada gambar di bawah, ada dua kotak kecil yang bertuliskan po dan mo. Ini adalah indikator keberandaan file terjemahan. Warna hijau berarti ada. Carilah untuk bahasa Indonesia.
Po adalah file berisi bahasa sumber dan terjemahannya yang mudah dibaca oleh manusia. Sementara mo sama seperti po, tetapi sudah dikompres dan mudah dibaca oleh mesin.
Jika file po-nya belum ada maka kliklah tombol: Rescan. Peringatan: Bila tokol Anda diletakkan di shared hosting, biasanya akan kehabisan sumber daya memory untuk memprosesnya.
> dapur-uang.com 81 Solusinya adalah dengan mengaktifkan enable low memory mode, yang terletak di paling atas halaman, sebagaimana ditunjukkan oleh gambar di bawah ini.
Gambar 93 - Enable low memory mode
Jika masih tidak berhasil, solusi selanjutnya yang saya gunakan adalah menginstal WordPress dan WooCommerce di laptop saya dengan menggunakan WAMPSERVER. Kemudian saya proses. Setelah filenya terjemahannya tercipta, baru saya unggah ke webserver.
Disini saya tidak akan menjelaskan cara menggunakan WAMPSERVER, silahkan Anda mencari tutorialnya di Google.
Ok, balik lagi. Bila file po sudah ada, maka kita tinggal edit saja. Klik tombol: Edit.
Gambar 94 - Edit terjemahan
Nanti Anda akan masuk ke halaman terjemahan. Mari saya beri penjelasan sedikit. Di sisi kanan adalah kosa kata/ kalimat dalam Bahasa Inggris, dan di sisi kanan adalah terjemahannya. Untuk mengedit
> dapur-uang.com 82 terjemahannya, silahkan klik tombol: edit dari kata-kata yang bersangkutan.
Gambar 95 - Halaman terjemahan
Nanti akan muncul window seperti di bawah ini.
Gambar 96 - Edit Catalog Entry
Silahkan diisi kotak terjemahannya, kalau sudah klik tombol: Save atau
> dapur-uang.com 83 Jika Anda sudah selesai. Pastikan Anda mengklik tombol: generate mo
file. Bila tidak, terjemahan yang sudah Anda masukkan tidak akan muncul di tokol Anda.
Yay! Selamat! Kini tokol Anda sudah selesai.
Untuk artikel berikutnya saya akan mengajarkan tutorial tambahan (tutotam), untuk membahas lebih dalam tentang tokol ini.
> dapur-uang.com 84
BAB III
TUTOTAM TOKOL
Tutotam 1 - Memasang kaca pembesar
Gambar 97 - Kaca pembesar
Web E-Commerce pada umumnya memiliki fitur magnifier atau kaca pembesar pada halaman product detail. Fungsinya adalah agar pengunjung bisa melihat secara lebih detail produk yang bersangkutan.
> dapur-uang.com 85 Bila Anda ingin melengkapi tokol / toko online Anda dengan fitur ini, alternatif plugin yang bisa digunakan adalah YITH WooCommerce Zoom Magnifier versi 1.1.1.
Caranya Anda harus mengunduhnya pluginnya langusng dari situsnya di http://yithemes.com/themes/plugins/yith-woocommerce-zoom-magnifier/ Kemudian instal, aktifkan, dan lakukan konfigurasi di WooCommerce > Setting > Tab Magnifier.
Dibandingkan dengan plugin magnifier WooCommerce lain yang beredar saat ini. Berdasarkan penilaian saya plugin besutan Yithemes ini adalah yang terbaik.
Selain hasil tata letak pembesarannya tidak berantakan, ada cukup banyak opsi setelan yang bisa Anda tentukan, misalnya Anda bisa memilih gambar yang diperbesar berada di samping gambar utama atau di dalamnya; Atau tetap berada di luar, tetapi untuk tampilan mobile device berubah menjadi di dalam; dst.
Kelebihan lain dari plugin ini adalah Product Gallery yang biasanya akan tersusun berderet ke dalam beberapa baris ke bawah, kini berubah menjadi carousel untuk menghemat tempat.
Setelah instalasi dan pengaktifan plugin, pada dasarnya fitur kaca pembesar sudah dapat berjalan dengan baik tanpa perlu pengaturan lain-lain.
> dapur-uang.com 86
Permasalahan dan Solusi
Berdasarkan pengalaman saya, plugin ini bisa terjadi glitch atau gangguan. Melalui penyelidikan di internet memang ditemukan kasus-kasus serupa. Sayangnya solusinya tidak ada. Akan tetapi jangan khawatir, karena saya telah menemukan jawabannya.
Gangguan terjadi bila produk Anda memiliki product gallery. Eror dimuntahkan di halaman produk dengan bunyi seperti berikut ini:
Warning: Division by zero in /home/myaccount/public_html/feju-
fashion/wp-content/plugins/yith-woocommerce-zoom- magnifier/templates/single-product/product-thumbnails-magnifier.php on line 34
Efek lain dari eror ini adalah fitur kaca pembesar juga menjadi tidak berjalan.
Saya mencoba menelusuri kesalahan ini. Ternyata kalau diperhatikan di admin, pada WooCommerce > Setting > Tab Magnifier, pada parameter Items, disana seharusnya terdapat slider untuk menentukan Number of items to show atau dengan kata lain jumlah item yang ingin ditampilkan pada product gallery.
> dapur-uang.com 87 Gambar 98 - Slider mengecil
Penyebabnya adalah karena value tidak ada. Kok bisa? Secara pasti saya tidak tahu mengapa. Mungkin saat proses penyimpanan value-nya tidak tersimpan, mengakibatkan timbulnya masalah ini.
Cara memperbaikinya adalah gunakan Inspect element dari browser Chrome (atau browser lainnya), klik kanan, pilih Inspect element, cari potongan kode ini:
<input name="yith_wcmg_slider_items" id="yith_wcmg_slider_items" type="hidden">
Hapus: type=”hidden”.
Dengan demikian sebuah kotak input untuk memasukkan value-nya akan muncul. Ketikkanlah jumlah angka yang Anda inginkan, misalnya: 3.
Gambar 99 - Kotak input tersembunyi
Selanjutnya klik tombol: save changes.
Nah, seharusnya dengan ini masalah erornya sudah selesai. Setelah valuenya sudah masuk, maka slider akan muncul, dan kini Anda bisa mengubahnya dengan cukup menggeser slider-nya.
> dapur-uang.com 88 Pada saat membuat tokol mungkin Anda menemukan hal-hal yang perlu dipermak. Bila Anda melakukannya langsung pada file-file tema bawaan aslinya, maka bila tema tersebut diperbarui/update maka file yang telah Anda ubah akan tertimpa dengan file baru. Alhasil semua yang telah diedit hiang.
Untuk mencegah hal ini terjadi, maka Anda bisa menggunakan tema anak atau child theme.
Tema anak bisa digunakan untuk menimpa file yang ada di tema induk. File yang paling sering ditimpa adalah style.css dan functions.php
Pada tutorial sebelumnya saya tidak mengajarkan penggunaan tema anak untuk menimpa css atas pertimbangan tingkat pengetahuan pengguna.
Kini dengan bertambahnya pengetahuan dan keahlian, saya kira sekarang sudah saatnya bagi Anda untuk mengetahui cara membuat tema anak atau child theme.
Dasar yang perlu dimiliki untuk tutotam (tutorial tambahan) ini:
1. Pemahaman akan Cpanel
2. Pemahaman akan platform WordPress 3. CSS
> dapur-uang.com 89 Selanjutnya ikutilah tahapan berikut ini:
Tahap 1. Di Cpanel, klik app: File Manager. Aplikasi ini untuk menjelajah isi perut file tokol Anda.
Tahap 2. Masuk ke folder: wp-content > themes. Disini Anda akan melihat folder-folder dari tema yang Anda pakai.
Tahap 3. Buatlah folder baru untuk tema anak Anda. Pada dasarnya namanya terserah Anda. Di tutotam ini saya menggunakan tema Virtue dengan foldernya bernama, virtue, maka saya buat saja folder untuk tema anaknya, virtue-child.
Tahap 4. Masuk ke folder yang baru Anda buat tadi. Untuk membuat tema anak, sebenarnya hanya dibutuhkan satu file, yaitu file “style.css”. Jadi buatlah sebuah file baru dan beri nama “style.css”
Tahap 5. Isi dari file style.css inilah yang akan menentukan tema anak berjalan dengan baik atau tidak. Kopi tempel dan rubahlah koding di bawah ini sesuai kebutuhan.
/*
Theme Name: Virtue Child Theme
Theme URI: http://feju-fashion.com/
Description: Ini adalah tema anak buatan saya Author: Juan feju
Author URI: http://feju-fashion.com/ Template: virtue
Version: 0.1 */
> dapur-uang.com 90 Sebenarnya dari sekian baris koding hanya tiga baris yang paling penting agar tema anak dapat berjalan, yaitu:
1. Theme Name, nama tema anak Anda 2. Template, nama folder tema induk Anda
Ingat huruf besar dan kecil itu berpengaruh. Jika tidak benar WordPress di Appearance > theme akan memuntahkan eror seperti: The parent theme is missing. Please install the “Virtue” parent theme.
3. @import url(“../virtue/style.css”);, kode ini berfungsi untuk mengambil css dari tema induk masuk ke dalam style.css tema anak.
Jika Anda ingin membuat css tambahan sendiri tulislah di baris di bawahnya. Untuk menimpa style yang sudah ada terkadang diperlukan tanda “!important”, misalnya:
p {line-heigt: 130% !important;}
Gunanya tanda “!important” adalah untuk memberitahu peramban untuk menggunakan style yang ini dibandingkan yang satunya.
Bagaimana jika Anda ingin menambahkan kode untuk functions.php dari tema?
Buatlah file baru dan beri nama functions.php. Awali dengan tanda <?php
Jika sudah selesai, aktifkanlah tema anak Anda. Klik menu samping : Appearance > Themes. Pilih tema anak Anda dan aktifkan.
> dapur-uang.com 91
Tutotam 3 – Memasang slider pada tokol
Pada tutotam (tutorial tambahan) kali ini saya akan mengajarkan cara agar tema tokol Anda bisa menggunakan slider.
Mengingat tidak semua tema memiliki fitur slider (terutama yang gratis), oleh karena itu saya menyediakan alternatifnya.
Apa gunanya slider di tokol?
1. Bisa sebagai sarana untuk mempromosikan sesuatu 2. Bisa untuk memberikan citra pada tokol Anda.
3. Bisa untuk memberikan informasi tertentu
Kembali saya ingatkan untuk ebook ini saya menggunakan tema Virtue dari Kandecetheme. Bila Anda menggunakan tema lain, maka Anda perlu menyesuaikan tutorial ini dengan situasi Anda.
Khusus untuk Tema Virtue meskipun ditheme options-nya terlihat berbagai parameter pengaturan slider, sebenarnya untuk versi gratis mereka tidak bisa digunakan untuk di halaman tokol.
Lalu plugin slider lain apa yang bisa digunakan? Carilah plugin yang bisa menyuntikkanshortcode ke halaman toko ataukode PHPke dalam file header tokol Anda. Untuk tutotam ini saya menyarankan plugin Easing
Slider “Lite”. Karena plugin ini sederhana dan bisa melakukan keduanya.
Kelebihan lain dari slider ini adalah responsive.Jadi kalau calon pembeli membuka suatu tokol dari perangkat mobilelain seperti Ipad atau HP
> dapur-uang.com 92 yang memiliki lebar layar yang berbeda-beda, maka slider ini dapat menyesuaikan lebar slidernya.
Nah, selanjutnya silahkan instal dan aktivasikan plugin ini.
Konfigurasi
Klik menu samping:Slideshow. Lakukan konfigurasi sederhana berikut ini, centang kotak:Make this slideshow responsive. Untuk lebar dan tinggi, Anda bisa tentukan sendiri, sesuaikan dengan kebutuhan. Bila lebar dan tingginya tidak sama dengan gambar yang Anda gunakan, maka gambar tesebut akan terpotong.
Gambar 100 - Konfigurasi easing slider lite
Sementara untuk penyetelan parameter yang lain dari slider ini, seperti kecepatan slider, dll., semuanya tergantung pada preferensi/kesukaan masing-masing. Oleh karena itu tidak saya bahas disini.
> dapur-uang.com 93 Saya akan menunjukkan dua cara penyuntikkan slider ini ke tokol Anda. Cara 1 – Dengan menggunakan shortcode
Cara pertama ini sangat mudah:
1. Klik menu samping: pages/ halaman 2. Buka page: shop/ toko Anda
3. kopi tempel kode: [easingsliderlite] ke page shop/ toko Anda; atau cukup klik saja tombol: Add Slideshow untuk memasukkan kode tersebut.
Gambar 101 - Memasukkan shortcode
> dapur-uang.com 94 Gambar 102 - Hasil penyuntikan shortcode slider
Cara 2 – Dengan menyuntikkan kode PHP ke header
Cara kedua ini untuk menampilkan slider dengan lebar penuh. Anda akan mengedit file header.php yang terletak di:
wp-content/themes/virtue/templates/header.php
Peringatan: Jika Anda melakukan perubahan tanpa menggunakan anak tema /child theme, maka perubahan apa pun akan hilang bila tema yang bersangkutan diperbaharui ke versi selanjutnya.
Jika Anda menggunakan tema lain, maka foldernya akan berbeda, misal:
wp-content/themes/nama tema/templates/ header.php
