Cara Membuat Toko Online Dalam 1 Hari Dengan Wordpress Dan WooCommerce

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

Tutotam 3 Memasang slider pada tokol ............................................................ 91

Tutotam 4 Navigasi untuk menyortir produk ...................................................... 97

BAB IV PENUTUP ................................................................................................. 104

Cara Cepat Membangun Toko Online dalam 1 Hari Menggunakan Wordpress dan WooCommerce Eka Juan

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

Tampilan muka kedua panel dapat Anda lihat pada gambar di bawah ini.


> dapur-uang.com 16

Gambar 2 Tampilan interface Cpanel

Gambar 3 Tampilan interface Spanel


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

Gambar 6 - Halaman konfigurasi instalasi Wordpress


> 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

email. Kemudian klik tombol: Install.


> 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

Gambar 9 - Halaman login admin Wordpress


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

Gambar 11 - Halaman plugin


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

Gambar 13 - Hasil pencarian


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

Tahap 6. Setelah aktivasi, Anda akan melihat gambar seperti di bawah ini.


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

klik tombol: Sign up.


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

Gambar 19 - Halaman telah berhasil tersambung ke Wordpress.com


> 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

Tahap 5. Setelah selesai klik tombol: save


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

Gambar 25 - Pencarian tema Wordpress


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

Klik tombol: Save Changes


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

Gambar 30 CSS Stylesheet Editor


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

Gambar 32 - Halaman-halaman WooCommerce


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

3. Tax - konfigurasi pajak.


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

Setelah selesai, klik tombol: Save Changes.


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

Gambar 41 - Konfigurasi halaman depan tokol


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

Register Plus Redux.


> dapur-uang.com 44

Ikuti konfigurasi sebagai berikut:

Gambar 42 - Konfigurasi form dan sistem registrasi

Gambar 43 - Konfigurasi form dan sistem registrasi 2

Setelah selesai simpan perubahan.


> 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

Untuk mengatur widget Anda, klik: Appearance > Widget


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

Gambar 49 - Tanda pelanggan sudah login


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

Gambar 50 Mematkan shipping calculator


> 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

Untuk daftar ongkir tarif JNE bisa Anda dapat cari di Google.


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

Save Changes .


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


Gambar 56- Mematikan metode pengiriman


> 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

Nanti akan terlihat seperti berikut ini:


> 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

Di TAB General


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

Gambar 64 - Tampilan detil halaman produk


> 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


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.

Gambar 68 Ukuran gambar persegi panjang


> 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

product image crop on poduct page.


> dapur-uang.com 65

Gambar 70 Pengaturan ukuran gambar di theme options dari tema Virtue

Hasilnya adalah seperti berikut:

Gambar 71 Hasil perubahan ukuran gambar


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

Gambar 72 - Konfigurasi permalink 1


> 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

3. Menu Kategori


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

Gambar 75 - Posisi menu


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

Gambar 77 - Struktur menu


> 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

Pada URL, isi: http://nama-domain.com/wp-login.php?action=register


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

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

Tahap 2. Berikan nama untuk menu yang baru, misalnya: kategori


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

Gambar 86 - Tab product categories


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

Gambar 89 - Pengaturan font menu


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

Gambar 90 - Login cpanel


> 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

Save & Next untuk lanjut ke kosa kata/ kalimat berikutnya.


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

Tapi slidernya ini jadi mengecil, hampir menjadi seperti garis saja.


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

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.

Tutotam 2 Membuat tema anak / child theme


> 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

*/

@import url("../virtue/style.css");


> 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


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

menyuntikkan shortcode ke halaman toko atau kode PHP ke 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 mobile lain 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.

Penyuntikan


> 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

Hasilnya adalah slider di samping sidebar:


> 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

Kode slider yang akan disuntikkan ke header adalah sebagai berikut:


> dapur-uang.com 95

Modifikasi kode di atas menjadi seperti kode di bawah ini agar slider

hanya muncul di halaman shop/ toko:

Nama shop bisa diganti dengan nama halaman yang Anda pakai untuk

shop/ toko.

Selanjutnya di file header.php letakkan kode di atas pada posisi

sebagaimana dicontohkan di bawah ini.


> dapur-uang.com 96

Ingat untuk menyimpan hasil perubahan.

Jika sudah, silahkan lihat halaman depan tokol Anda maka hasilnya akan

sebagai berikut:

Gambar 103 - Hasil penyuntikan kode PHP slider


> dapur-uang.com 97

Tutotam 4 Navigasi untuk menyortir produk

Bila Anda melihat ecommerce besar yang memiliki jumlah produk yang

sangat banyak, mereka akan menyediakan fasilitas sortir untuk

mempermudah calon pembelinya, sebagai contoh, produk pakaian bisa

disortir berda

Cara Membuat Toko Online Dalam 1 Hari Dengan Wordpress Dan WooCommerce

Documents

Transcript of Cara Membuat Toko Online Dalam 1 Hari Dengan Wordpress Dan WooCommerce