Cara Membuat Toko Online Dalam 1 Hari Dengan Wordpress Dan WooCommerce

Keterangan Hak Cipta ...............................................................................................
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
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 1
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 2
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 3
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 4
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 5
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 6
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 7
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 8
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 9
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 10
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 11
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 12
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 13
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 14
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 15
Gambar 2 – Tampilan interface Cpanel
Gambar 3 – Tampilan interface Spanel
> dapur-uang.com 16
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 17
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 18
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 19
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 20
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 21
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 22
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 23
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 24
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 25
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 26
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 27
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 28
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 29
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 30
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 31
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 32
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 33
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 34
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 35
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 36
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 37
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 38
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 39
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 40
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 41
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 42
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 43
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 44
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 45
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 46
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 47
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 48
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 49
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 50
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 51
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 52
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 53
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 54
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 55
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 56
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 57
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 58
Gambar 63 - Product short description
> dapur-uang.com 59
Kalau sudah silahkan klik tombol: Preview Changes. Hasilnya:
Gambar 64 - Tampilan detil halaman produk
> dapur-uang.com 60
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 61
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 62
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 63
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 64
Gambar 70 – Pengaturan ukuran gambar di theme options dari tema Virtue
Hasilnya adalah seperti berikut:
Gambar 71 – Hasil perubahan ukuran gambar
> dapur-uang.com 65
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 66
Gambar 73 - Konfigurasi permalink 2
> dapur-uang.com 67
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 68
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 69
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 70
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 71
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 72
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 73
Gambar 85 - Sliding panel screen option
Ini akan memunculkan TAB Product Categories di sisi kiri.
Gambar 86 - Tab product categories
> dapur-uang.com 74
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 75
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 76
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 77
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 78
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 79
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 80
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 81
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 82
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 83
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 84
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 85
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 86
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.
Tutotam 2 – Membuat tema anak / child theme
> dapur-uang.com 87
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 88
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 89
Sebenarnya dari sekian baris koding hanya tiga baris yang paling penting
agar tema anak dapat berjalan, yaitu:
1. Theme Name, nama tema anak Anda

2. Template, nama folder tema induk Anda
Ingat huruf besar dan kecil itu berpengaruh. Jika tidak benar
WordPress di Appearance > theme akan memuntahkan eror
seperti: The parent theme is missing. Please install the “Virtue”
parent theme.
3. @import url(“../virtue/style.css”);, kode ini berfungsi untuk
mengambil css dari tema induk masuk ke dalam style.css tema
anak.
Jika Anda ingin membuat css tambahan sendiri tulislah di baris di

bawahnya. Untuk menimpa style yang sudah ada terkadang diperlukan
tanda “!important”, misalnya:
p {line-heigt: 130% !important;}
Gunanya tanda “!important” adalah untuk memberitahu peramban untuk

menggunakan style yang ini dibandingkan yang satunya.
Bagaimana jika Anda ingin menambahkan kode untuk functions.php

dari tema?
Buatlah file baru dan beri nama functions.php. Awali dengan tanda
<?php
Jika sudah selesai, aktifkanlah tema anak Anda. Klik menu samping :
Appearance > Themes. Pilih tema anak Anda dan aktifkan.
> dapur-uang.com 90
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 91
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 92
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 93
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 94
<?php
if ( function_exists( "easingsliderlite" ) )
{ easingsliderlite(); }
?>
Modifikasi kode di atas menjadi seperti kode di bawah ini agar slider
hanya muncul di halaman shop/ toko:
<?php
if (is_page( 'shop' )) {
}
?>
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.
<div id="kad-mobile-nav">
<div>
<div>
<?php
wp_nav_menu( array('theme_location' =>
'mobile_navigation','items_wrap' => '<ul
id="%1$s">%3$s</ul>', 'menu_class' => 'kad-mnav')); ?>
> dapur-uang.com 95
</div>
</div>
</div>
<?php endif; ?>
<?php
if (is_page( 'toko' )) {
}
?>
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 96
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 berdasarkan warnanya, ukuran, dll.
Di WooCommerce hal ini dapat dilakukan dengan mudah, berkat sebuah

plugin bernama Yith WooCommerce Ajax Navigation besutan Yithemes.
Kelebihan dari plugin ini adalah proses sortirnya menggunakan Ajax,

sehingga peramban tidak perlu reload saat melakukan query.
Untuk menggunakannya ikutilah tahapan berikut ini:
Tahap 1. Instal dan aktifkan plugin Yith WooCommerce Ajax Navigation.
Tahap 2. Buatlah daftar atribut produk.
Atribut adalah semacam label yang dipasangkan ke produk, misalnya

atribut: warna, ukuran, bahan, dll. Atribut dimanfaatkan untuk berbagai
keperluan, salah satunya untuk dijalankan bersama plugin ini.
Caranya membuatnya adalah:
1. Klik menu samping: Product > Attribute. Setelah itu Anda akan
masuk ke halaman attributes seperti gambar di bawah ini.
> dapur-uang.com 97
Gambar 104 - Halaman pembuatan atribut
Keterangan:
1. Name/Nama adalah nama attribute Anda. Contohnya bisa dilihat

pada kotak yang bewarna orange pada gambar di atas.
2. Slug adalah nama yang akan muncul di URL Anda. Slug gunanya
agar URL Anda lebih mudah dimengerti oleh mesin pencari seperti
Google. Biasanya mengikuti nama attribute.
> dapur-uang.com 98
3. Type adalah cara pengisian attribute nanti pada saat pembuatan

produk. Type ada dua macam, yaitu select: cara pengisian value
menggunakan dropdown; dan text: cara pengisian value dengan
mengetik.
4. Sort order adalah cara pengurutan nama dari sub attributes.
Tips: Kalau pusing, isi saja nama attribute, setelah itu langsung tekan
enter.
Tahap 3. Buatlah pilihan nilai untuk setiap atribut yang telah dibuat.
Kliklah ikon gear yang terletak di pojok kanan dari setiap nama atribut.
Anda akan dibawa ke halaman seperti di bawah ini. Contoh nilai untuk
atribut warna misalnya ungu, beige, biru, dll.
Gambar 105 - Pengisian sub atribut
Tahap 4. Memasangkan artribut pada produk
> dapur-uang.com 99
Atribut dipasangkan di halaman produk. Carilah tab-tab seperti gambar di

bawah ini, letaknya ada di daerah bagian bawah halaman.
Gambar 106 - Pemasangan atribut
Cara memasangkan attributes adalah:
Gambar 107 - Pengisian nilai
1. Klik tab: Attributes.

2. Pilih jenis atribut-nya, misal: Warna.
> dapur-uang.com 100

3. Klik tombol: Add.

4. Selanjutnya pilihlah warnanya, misalnya: Beige..
Ok, sekarang saya asumsikan segala pengisian berkaitan dengan produk

sudah selesai dan siap untuk diterbitkan
Tahap 5. Pemasangan widget. Klik menu samping: Appearance > Widget.

Letakkan widget Yith WooCommerce Ajax Navigation di sidebar yang
diinginkan.
Selanjtunya Anda perlu melakukan konfigurasi widget:
Gambar 108 - Konfiturasi plugin YITH WooCommerce Ajax Navigation
1. Title diisi dengan judul yang akan muncul di toko depan.

2. Attribute adalah nama atribut yang telah Anda buat.

3. Query Type adalah cara pemfilteran, yaitu AND dan OR. Efeknya
kalau AND, orang bisa filter misalnya untuk menampilkan warna
merah dan biru, sedangkan kalau OR hanya salah satunya saja.
4. Type adalah model penyortiran yang bisa Anda pilih, yaitu:
a. List
Gambar 109 - Tipe list
b. Color
Gambar 110 - Tipe color
c. Label

Gambar 111 - Tipe label
d. Dropdown
Gambar 112 - Tipe Dropdown
Silahkan lanjutkan dan ulangi langkah di atas untuk membuat widget-

widget sortir untuk atribut lainnya.

BAB IV
PENUTUP
Selamat Anda telah menyelesaikan pembuatan tokol Anda. Semoga

tutorial ini dapat membantu Anda memiliki toko online impian Anda.
Satu pesan saya, yaitu memiliki sebuah tokol tidak berarti secara
otomatis orang akan datang ke usaha Anda dan berbisnis dengan Anda.
Jadi bila tokol Anda sudah siap, jangan dibiarkan begitu saja, lakukanlah
marketing. Pelanggan baru perlu “dibeli” melalui usaha marketing dan
kegiatan ini adalah sesatu yang harus Anda jalankan secara terus-
menerus. Tanpanya dapat dipastikan 100% usaha tidak akan berjalan.
Belajarlah tentang pemasaran dari berbagai sumber yang kiranya dapat

membantu Anda mencapai gol Anda.
Apabila Anda ingin menggunakan Adwords untuk pasang iklan, artikel

berikut ini mungkin akan berguna:
Cara Buat Iklan di Google Adwords
Ok, dengan ini saya harapkan usaha Anda berjalan.
Kunjungilah dapur-uang.com untuk berbagai artikel-artikel lain yang

berguna.
Anda bisa mengirimkan saran dan masukkan ke ekajuan@dapur-

uang.com

Bila Anda mengalami berbagai masalah dalam perawatan tokol Anda

beberapa tautan di bawah ini mungkin dapat membantu Anda:
1. Bengkel Tokol - Menghilangkan Tombol Panah Penambah Jumlah

Barang Yang Muncul Tiba-tiba di Firefox
2. Bengkel Tokol - Menghilangkan Judul Halaman Toko, Sortir dan
Keterangan Jumlah Item yang Ditampilkan
3. Bengkel Tokol - Bila Dashboard Wordpress Tiba-tiba Blank
4. Bengkel Tokol - Modifikasi Halaman Blog - Single Post dari Tema
Virtue
5. Bengkel Tokol - Bila Yith WooCommerce Ajax Navigation Tidak
Berjalan di Tema Virtue

Cara Membuat Toko Online Dalam 1 Hari Dengan Wordpress Dan WooCommerce

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Cara Membuat Toko Online Dalam 1 Hari Dengan Wordpress Dan WooCommerce

Diunggah oleh

Hak Cipta:

Format Tersedia

Keterangan Hak Cipta ...............................................................................................

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

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

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

Keterangan Hak Cipta

Anda diperbolehkan untuk memperbanyak dan mendistribusikan Ebook

Halo semuanya, perkenalkan nama saya Juan, lahir tahun 1980 di

Saya termasuk introver konsentrat. Sifat dasarnya serius banget (lihat

Kepribadian saya agak complicated (istilah kerennya) alias aneh karena

Saya senangnya dengan hal-hal yang sederhana dan praktis. Walau

menghabiskan banyak waktu. Mungkin saya cocok jadi ilmuwan yang

Passion saya adalah komputer, internet dan blogging. Cita-citanya ingin

Meskipun saya terlahir dari keluarga keturunan, kalau berteman saya

Wordpress (WP) pada awalnya adalah platform yang dikembangkan

Selain WP masih ada banyak platform blog lainnya, misalnya Blogger,

Pengalaman membuat tokol

Apakah ada platform lain khusus dikembangkan untuk e-commerce?

Saya sendiri pernah coba menggunakan Prestashop. Tapi bagi saya

Tidak sedikit modifikasi, tambahan dan perbaikan yang harus dilakukan

Nah, saya melihat Wordpress (WP) dan WooCommerce (WC) dapat

Kompleksitas pembuatan tokol dengan WP + WC jauh lebih rendah

Keunggulan lain dari menggunakan Wordpress sebagai tokol Anda

mengintegrasikan dua platform dengan sistem berbeda. Menurut saya

Apabila tidak melakukan penggabungan maka alternatif lainnya adalah

Di luar itu, WP dan WC serta plugin-plugin lain di dalam tutorial ini

Tujuan E-Book ini

1. Bisa menampilkan produk Anda.

Target pengguna ebook ini

Apabila dalam proses pembuatannya lancar tanpa masalah, saya yakin

Perbedaan versi bisa saja berarti ketidaksesuaian antara yang diajarkan

Dalam langkah 1-15, saya akan mengajarkan pembuatan tokol standar.

1. Platform Wordpress versi 3.9.1

Modul ini dapat digunakan untuk merubah desain tokol Anda,

Apabila Anda menggunakan tema Virtue buatan

Apabila pemahaman Anda tentang WP semakin meningkat,

3. Plugin WooCommerce - excelling eCommerce versi 2.1.9

4. Plugin WP Mantainence Mode versi 1.8.11

Halaman ini tidak nampak bagi yang login ke tokol, misalnya

Tentu saja Anda bisa menggunakan plugin lain yang menurut

5. Plugin Register Plus Redux versi 3.9.10 (Opsional)

Apabila Anda tidak menginginkan fitur verifikasi email, Anda

Meskipun berbelanja tanpa harus melewati proses verfikasi

Semuanya ada plus minus, silahan Anda putuskan yang terbaik

6. Sidebar Login versi 2.6.0 (Opsional)