Panduan Lengkap Cara Membuat Toko Online WordPress

Di era internet ini, banyak sekali bermunculan sistem yang semakin memudahkan manusia untuk berinteraksi satu sama lain, termasuk interaksi antara penjual dan pembeli begitu juga sebaliknya. Semenjak itulah peluang bisnis online shop semakin terbuka lebar. Banyak sekali orang yang ingin mempunyai toko onlinenya sendiri namun tidak tahu bagaimana cara membuatnya. Oleh karena itu, Melalui postingan ini saya ingin berbagi tutorial / panduan lengkap mengenai cara membuat toko online dengan wordpress kepada sobat semua. Semoga dengan tulisan ini, dapat membantu pembaca sekalian dalam membangun bisnis online shop yang mungkin telah lama di idam-idamkan. Tanpa panjang lebar marilah kita mulai tutorial ini.

1 Beli domain + paket hosting dan Install CMS WordPress

Langkah pertama yang harus dilakukan dalam cara membuat toko online adalah membeli domain, paket hosting dan install CMS WordPress. Bagi sobat yang masih ragu dalam memilih hosting terbaik dan juga masih belum tahu bagaimana cara menginstall wordpress di cpanel maka dapat melihat artikel dibawah, dan semoga dapat membantu

2. Install Sebuah Theme Toko Online di WordPress

Setelah menginstall CMS WordPress di cpanel, silahkan login ke admin wordpress dengan akses namadomain/wp-admin. Setelah masuk ke admin panel wordpress, silahkan install theme toko online yang diinginkan dengan mengklik  appearance > Theme > add new theme. Silahkan klik link berikut untuk mendapatkan rekomendasi theme wordpress toko online terbaik : 10 Theme toko online Gratis & Responsive

Pada tutorial ini saya akan menggunakan theme toko online sederhana dari woootheme yaitu Mystile Theme. Setelah theme toko online diinstal maka biasanya tampilannya akan kosong seperti dibawah.

mystsile-toko-online

3 Install Plugin Woocommerce

Hal yang terpenting dalam tutorial cara membuat toko online adalah menginstal plugin ecommerce. Sebernarnya banyak sekali plugin e-commerce di database wordpress.org, namun saya sangat menyerankan plugin woocommerce pada sobat sekalian dikarenakan ada 4 alasan mengapa plugin adalah plugin ecommerce terbaik :

  • Woocommerce adalah plugin ecommerce terbanyak diinstal di wordpress Lebih 1 Juta active install
  • Mempunyai rating yang sangat baik 4,6 / 5
  • Memiliki fitur yang paling banyak
  • Memiliki tingkat keamanan yang tinggi karena selalu di update secara regular

Cara menginstall plugin woocommerce sangatlah mudah, pada bagian kiri panel admin wordpress klik tab plugin > add new > search “woocommerce” > install now > activate plugin, setelah terinstal maka akan muncul tampilan seperti dibawah

woocommerce-cara-install

Silahkan klik let’s go dan isi semua data mengenai toko online sobat yang terdiri dari :

  • Lokasi toko online
  • Mata Uang yang digunakan
  • Satuan berat dan satuan panjang yang akan digunakan
  • Ongkos kirim ( tidak usah diisi karena ongkir setiap provinsi akan berbeda)
  • Pajak
  • Pembayaran ( via cek, COD, Via bank transfer, paypal)

Mengenai ongkos kirim, banyak toko online di indonesia, ketika kita membeli sebuah barang, maka pada saat checkout, akan terlihat biaya ongkos kirim (JNE, Tiki atau pos) akan otomatis ditambahkan ke total biaya sesuai dengan alamat yang akan dituju. Untuk membuat hal seperti itu, diperlukan plugin tambahan yang terintegrasi langsung dengan plugin woocommerce. berikut dua versi plugin cara membuat toko online premium yang tersedia

  • Plugin Premium : Terdiri dari 7 kurir, lengkap dengan semua paket kirim, volumetrik, fitur asuransi, fitur packing kayu dan lain sebagainya. silahkan klik disini untuk melihat detailnya. (harga lisensi Rp 250.000 / tahun)
  • Plugin Gratis : Hanya terdiri 1 Kurir (JNE) dan untuk 1 paket regular JNE, dan hanya bisa mentraking biaya jne dari jakarta ke beberapa provinsi di indonesia. klik disini untuk melihat detailnya.

Sebenarnya tanpa plugin pun kita masih bisa menkalkulasi secara manual dan menambahkan secara manual ke tagihan pembayaran kepada para pembeli di toko online sobat.

4. Mengenal Fitur yang ada di Woocommerce

Setelah kita menginstal plugin woocommerce, maka akan ada sebuah tab woocommerce di bagian kiri seperti gambar dibawah.

Woocommerce-fitur

  • Orders – Berisi tentang data-data list orderan dari pembeli di toko online yang kita punya, data ini berisi tentang, alamat pembeli, nama, tanggal, nama barang, jumlah barang, status orderan, status pembayaran, total biaya,  dan lain sebagainya.
  • Coupon – Melalui fitur coupon, kita bisa membuat sebuah kode kupon (potongan harga) baik itu dalam rupiah ataupun %, tanggal kadarluarsa kupon tersebut, minimum pembelian, berlaku untuk berapa kali pemakaian dan lain sebagainya.
  • Report  – adalah laporan pembelian (penghasilan) yang telah berhasil dilakukan, bisa dalam rentangan 7 hari, bulanan bahkan tahunan. Bahkan report ini bisa di transferkan ke excel file.
  • Setting – Jika sobat telah mensetting plugin woocommerce pada saat awal penginstalan maka, settingan ini tidak jauh berbeda pada settingan awal, namun memiliki tambahan pada settingan email, pilihan warna, dan settingan akun para pembeli.
  • System Status – system status adalah tab yang berguna untuk melihat sistem dari server atau hosting yang sedang kita gunakan.
  • Add on – adalah plugin tambahan yang untuk menambahkan fitur yang ada di toko online. Kalau sobat menginginkan pembayaran lewat paypal maka bisa

Selain itu, pada bagian kiri wordpress admin panel, juga terdapat sebuah tab product yang berfungsi untuk memasukan dan mensetting barang barang yang kita jual. Berikut adalah screenshootnya.

fitur-produk-ecommerce

  • Product – Daftar barang yang dijual di toko online yang terdiri dari nama barang, tipe barang, stok barang, dan lain sebagainya.
  • Add Product – Berfungsi untuk menambahkan barang yang akan dijual di toko online
  • Categories – Berfungsi untuk membuat kategori barang yang akan di jual. Misalnya sebuah toko online yang akan menjual sebuah baju, maka bisa dikategorikan berdasarkan merek seperti : nike, adisas, GAP, dll
  • Tags – Berfungsi membuat data tags produk / barang yang dijual di toko online.
  • Shipping Classes – Tidak usah diisi
  • Atributes – merupakan tab yang berguna untuk menambah atribut dari barang yang akan dijual misalkan ukuran, warna, dll

5. Persiapan Awal Sebelum Menambahkan Produk di Toko Online

Proses persipan awal sebelum menambahkan barang yang akan dijual di toko online, terdiri dari dua langkah yaitu membuat kategori dan membuat Data data bank untuk proses pembayaran di toko online.

Langkah Pertama : Membuat kategori barang yang akan dijual. Kita bisa membuat  kategori produk dengan mengakses product > categories > buat daftar kategori. Pada tutorial kali ini saya akan mencontohkan sebuah toko online baju dengan memberikan 3 contok kategori yaitu : Nike, GAP, dan Gucci. Seperti yang pada screenshot dibawah.

cara-buat-kategori-woocommerce

 

Langkah Kedua : Menambahkan informasi Transfer Bank, di woocommerce. Silahkan akses Woocommerce Tab > Check Out > BASC > masukan data bank toko online anda , untuk lebih jelasnya silahkan lihat pada Screenshot dibawah.

cara_memasukan_data_rekening_ke_woocommerce

Selain itu, kita juga bisa memasukan Data bank transfer ke widget Sidebar lengkap dengan logo bank tersebut.  silahkan  ikuti langkah-langkah berikut

  • Silahkan upload logo bank ke WordPress dan ambil URL dari gambar tersebut silahkan lihat gambar berikut

logo-bank

  • Silahkan Copy Kode dibawah dan ganti Sesuai dengan nama bank anda
<img src="URL LOGO yang dicopy diatas" width="100px" /> <br />
<strong>No. Rek: 12345678 <br /></strong>
<strong>A/N: Petty MISA <br /></strong>
  • Masukan kode diatas yang telah diganti dengan mengakses Appereance > Widget > Text > save berikut adalah contohnya

cara-memasukan-bank-transfer-kewidget

6. Menambahkan Produk Dengan Woocommerce

Untuk menambahkan barang yang akan dijual di toko online, silahkan klik tab Product > add Product, agar lebih mudah dipahami saya akan membuat tutorial ini dengan sebuah contoh kasus lengkap dengan screenshot.

Contoh produk yang akan di saya masukan di woocommerce adalah :

  • Nama Produk : Kemeja Gucci
  • Ukuran Produk : S , M, L, XL
  • Stok total Produk keseluruhan : 35 buah
  •  Stok produk per ukuran : Ukuran S : 7 Ukuran M : 10 Ukuran  L : 9 Ukuran XL : 9
  • Harga : Rp 250.000 untuk semua ukuran
  • Produk Deskripsi : Kemeja gucci original, warna abu – abu putih, Lengan Panjang
  • Purchace Note :  Pastikan produk sebelum membeli

Cara memasukannya silahkan ikuti langkah-langkah berikut dan lihat screenshotnya  agar lebih mudah dipahami

Langkah pertama : Isi nama produk Nama Produk, kategori produk dan gambar. SIlahkan lihat screenshoot dibawah.

cara-memasukan-produk-dengan-woocommerce-1

  • Kolom pertama, Kolom nama dari sebuah produk atau barang yang akan dijual, dalam kasus ini saya membuat Nama produknya yaitu Kemeja Gucci
  • Kolom kedua, Karena kemeja gucci  termasuk kedalam kategori brand Gucci, maka saya centang gucci sebagai kategori produk ini
  • Kolom ketiga adalah tempat dimana saya memasukan gambar dari kemeja gucci ini.

 

Langkah Kedua : Masukan deskripsi produk, gambar display dan gambar gallery

cara-buat-kategori-woocommerce-2

  • Kolom pertama  (kolom deskripsi) – Tempat memasukan deskripsi mengenai sebuah produk yang akan dijual. Dalam kasus ini, saya memasukan deskripsi dari kemeja gucci ini yaitu “Kemeja gucci original, warna abu – abu putih, Lengan Panjang”
  • Kolom kedua (gambar display) – Adalah gambar yang akan terbit ketika pembeli mencari barang yang diinginkannya.
  • Kolom ketiga (Gallery gambar) – adalah gambar yang berisi lebih dari satu gambar mengenai produk tersebut misalkan foto produk tampak depan, samping dan belakang , intinya produk gallery berfungsi untuk menambahkan foto dari produk tersebut  agar memperjelas detail dari penampakannya.

 

Langkah ketiga : Memasukan Tipe produk, Inventory, Attributes & Variation ( General, Shipping, Linked product harap dikosongkan saja) untuk lebih jelasnya silahkan lihat screenshoot dibawah.

cara-buat-kategori-woocommerce-3

  • Dikarenakan produk kemeja gucci memiliki variasi ukuran, maka product dat saya ubah dari simple product menjadi Variable product, Sedangkan untuk SKU saya kosongkan saja.

cara-buat-kategori-woocommerce-4

  • Pada sisi inventory, saya sengaja checklist enable stock management, untuk memanage semua stok keselurahan dari Kemeja Gucci yang akan saya jual.
  • Dikarenakan semua total kemeja gucci ini adalah 35 maka saya akan memasukan sebanyak 35 buah.
  • Jangan lupa untuk do not allowed backorders jika ingin memanage stok barang

 

cara-buat-kategori-woocommerce-6

  • Dari gambar diatas, langkah pertama yang harus dilakukan adalah, mengklik add sesuai dengan kursor no 1.
  • Dikarenakan produk Kemeja Gucci memiliki pilihan ukuran S, M, L & XL maka saya masukan valuesnya S M L & XL dengan tanda pemisah |
  • Jangan lupa untuk checklist visible on product page dan used variation

 

cara-buat-kategori-woocommerce-9

  • Pada tab variasi, maka akan terlihat variasi yang telah kita buat sesuai dengan tab atributes yakni Ukuran S, M, L dan XL.
  • Silahkan expand masing masing variasi  ukuran tersebut yang terlihat di kursor no 1 pada gambar diatas. setelah di expand silahkan lihat screenshootnya pada gambar dibawah.

 

cara-buat-kategori-woocommerce-10

  • Setelah di expand, pada kolom no 1 saya mencentang enable dan manage stock, agar saya bisa memanage stok Kemeja gucci yang berukuran M, yang akan dijual.
  • Pada kolom no 2 adalah kolom untuk memasukan harga sebuah produk yang akan dijual. Dalam kasus ini, harga kemeja Gucci yang akan saya jual adalah Rp 250.000. Namun bagi sobat yang ingin membuat harga promosi, silahkan isi harga promosinya pada sale price dan buat schedule (tanggal berlaku dari harga promosi tersebut).
  • Pada kolom no 3 – Adalah tempat memasukan total stok barang Kemeja Gucci yang berukuran M, Dikarenakan saya mempunyai stok total kemeja gucci sebanyak 35 buah dengan perincian stok kemeja gucci ukuran S : 7 , M  : 10, L : 9 & XL : 9. Maka pada variation ukuran M saya akan mengisikan jumlah stoknya sebesar 10 buah.
  • Dan jangan lupa untuk mengisi variasi yang lain.

 

cara-buat-kategori-woocommerce-11

  • Pada tab advance, silahkan checklist enable reviews jika ingin mengaktifkan review dari pelanggan yang telah membeli sebuah produk yang telah ia di toko online kita.

Sampai pada tahap ini, maka telah selesai semua tahap kita untuk memasukan kemeja gucci yang akan dijual di toko online dan jangan lupa untuk mengklik publish. Hasil akhir dari produk yang telah dimasukan diatas dapat dilihat dengan mengakses home > shop, silahkan lihat screenshoot dibawah untuk melihat hasil akhirnya

hasil-akhir-produk-woocommerce-1

 

7. Desain Homepage Toko Online

Setelah kita memasukan beberapa produk / yang dijual di toko online, maka setelah itu kita perlu untuk mendesain homepage toko online kita. Saya akan membagi Subjudul ini menjadi 4 langkah pengerjaan.

Langkah pertama : Dibagian kiri klik tab page > add new, Isi judul page baru tersebut dengan HOME, lalu klik publish ( biarkan saja isi dari page tersebut kosong).

Langkah Kedua : Merubah settingan dari homepage Dengan cara Klik Setting > Reading, lalu ubah front page display menjadi static page, kemudian ubah frontpage menjadi home (page home kosong yang baru dibuat) dan ubah Post page menjadi Shop kemudian klik save. Untuk lebih jelasnya silahkan lihat gambar dibawah.

desain-homepage-toko-online-2

 

 

Langkah ketiga : Install Plugin slider soliloquy dan plugin woocommerce shortcode, setelah mengintal kedua plugin tersebut, maka mari kita buat slider untuk mempercantik homepage toko online. Silahkan akses tab soliloquy > add new slider seperti pada gambar dibawah

cara-install-slider-toko-online

Langkah keempat : Silahkan akses kembali Page > all page > edit home (page Home kosong yang kita buat tadi) , setelah itu mari kita masukan slider dan short code dari woocommerce ke homepage. Detailnya dapat dilihat seperti gambar dibawah.

desain-homepage-toko-online-4

Setelah selesai, silahkan klik update dan kembali ke homepage. Maka hasil akhirnya akan seperti gambar dibawah. Silahkan klik kanan gambar dibawah untuk memperbesar tampilannya.

foto-akhir-toko-online

Sekian tutorial cara membuat toko online dari saya, jika ada pertanyaan yang ingin ditanyakan silahkan dibuat pada kolom komentar dibawah postingan ini. Semoga postingan saya dapat bermanfaat bagi teman-teman semuanya.

2 Comments

  1. dila 2 Desember 2016
  2. Fauzan 12 Desember 2016

Leave a Reply