Cara Membuat Toko Online Dalam 1 Hari Dengan Wordpress Dan WooCommerce

108 

Loading....

Loading....

Loading....

Loading....

Loading....

Teks penuh

(1)
(2)

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

(3)
(4)

> 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.

(5)

> 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

(6)

> 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.

(7)

> 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.

(8)

> 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

(9)

> 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.

(10)

> 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.

(11)

> 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.

(12)

> 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.

(13)

> 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.

(14)

> 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.

(15)

> 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.

(16)

> 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.

(17)

> 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.

(18)

> 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.

(19)

> dapur-uang.com 16 Gambar 2 – Tampilan interface Cpanel

(20)

> 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

(21)

> 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.

(22)

> 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.

(23)

> 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.

(24)

> 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

(25)

> 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%.

(26)

> 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

(27)

> 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.

(28)

> 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.

(29)

> 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.

(30)

> 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.

(31)

> 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.

(32)

> 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.

(33)

> 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.

(34)

> 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

(35)

> 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.

(36)

> 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.

(37)

> 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.

(38)

> 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.

(39)

> 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.

(40)

> 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.

(41)

> 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.

(42)

> 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.

(43)

> 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.

(44)

> 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.

(45)

> 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:

(46)

> 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 >

(47)

> dapur-uang.com 44 Ikuti konfigurasi sebagai berikut:

Gambar 42 - Konfigurasi form dan sistem registrasi

Gambar 43 - Konfigurasi form dan sistem registrasi 2

(48)

> 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.

(49)

> 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

(50)

> 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:

(51)

> 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

(52)

> 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.

(53)

> 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.

(54)

> 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.

(55)

> 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

(56)

> 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:

(57)

> 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.

(58)

> 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

(59)

> 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

(60)

> 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

(61)

> 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.

(62)

> dapur-uang.com 59 Gambar 63 - Product short description

(63)

> dapur-uang.com 60 Kalau sudah silahkan klik tombol: Preview Changes. Hasilnya:

(64)

> 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.

(65)

> 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.

(66)

> 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.

(67)

> 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

(68)

> dapur-uang.com 65 Gambar 70 – Pengaturan ukuran gambar di theme options dari tema Virtue

Hasilnya adalah seperti berikut:

(69)

> 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.

(70)

> dapur-uang.com 67 Gambar 73 - Konfigurasi permalink 2

(71)

> 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

(72)

> 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.

(73)

> 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:

(74)

> 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

(75)

> 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

(76)

> 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.

(77)

> dapur-uang.com 74 Gambar 85 - Sliding panel screen option

Ini akan memunculkan TAB Product Categories di sisi kiri.

(78)

> 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.

(79)

> 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.

(80)

> 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.

(81)

> 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.

(82)

> 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.

(83)

> 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.

(84)

> 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

(85)

> 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

(86)

> 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.

(87)

> 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.

(88)

> 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.

(89)

> 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.

(90)

> 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.

(91)

> 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

(92)

> 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 */

(93)

> 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.

(94)

> 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

(95)

> 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.

(96)

> 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

(97)

> 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

Figur

Memperbarui...

Related subjects :