USER MANUAL

MEMBUAT TOKO ONLINE DENGAN WOOCOMMERCE

OLEH:

NAMA NIM
AJI MIFTAKHUROZAK 2015140996
RIZKY SARAAN 2015140762
SAYUDI MALIKI MUBALIK 2015140993
SISWATI 2015141487

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK
UNIVERSITAS PAMULANG
TANGERANG SELATAN
2019
 DAFTAR ISI

A. Install Wordpress .................................................................................................................. 1

B. Install Woocomerce ............................................................................................................... 8

C. Memulai WooCommerce ...................................................................................................... 9

D. Mengaktifkan Tema Storefront ........................................................................................... 14

E. Menambahkan dan Mengatur Product ................................................................................. 17

F. Import Product ..................................................................................................................... 28

G. Export Produk ..................................................................................................................... 31

H. Membuat Navigasi Toko ..................................................................................................... 34

I. Install plugin Ongkoskirim.id ............................................................................................... 37

J. Menambahkan Metode Pembayaran Bank Transfer ............................................................ 40

K.Manajemen user ................................................................................................................... 44

L.Menyesuaikan Tampilan Toko ............................................................................................. 46

M.Mengatur Transaksi Woocommerce ................................................................................... 50

N.Upload Woocommerce Pada Penyedia Hosting Free .......................................................... 55

ii
A. Install Wordpress
1. Download CMS wordpress pada link berikut ini https://wordpress.org/download/
2. Extrack file tersebut kemudian pindahkan folder hasil extract tersebut kedalam
folder C:/xampp/htdocs/ dan ganti nama folder tersebut dengan nama toko kalian
3. Contoh seperti gambar dibawah ini saya ganti nama foldernya dengan nama
toko_kami

4. Selanjutnya aktifkan xampp kemudian buka browser dan ketikan pada url
http://localhost/toko_kami maka akan muncul tampilan seperti berikut

1
5. Kemudian pilih Bahasa yang ingin anda gunakan, disini saya menggunakan bahasa
Indonesia dan klik continue kemudian klik ayo maka akan tampil halaman seperti
gambar dibawa ini.

6. Sebelum lanjut ke tahap berikutnya kalian harus membuat database terlebih dahulu
untuk caranya sebagai berikut :
a. Buka browser kemudian ketikan http://localhost/phpmyadmin/ pada url
browser maka akan muncul halaman seperti gambar dibawah ini.

b. Selanjutnya klik databases seperti pada gambar diatas yang diberikan kotak
warna merah maka akan muncul tampilan seperti berikut

2
 c. Dan isikan nama database terserah kalian namun saya disini memberikan
nama databasenya yaitu db_toko_kami dimana nama database ini yang
akan digunakan untuk proses instalasi wordpress selanjutnya klik create.
d. Maka jika database berhasil dibuat aka nada disebelah kiri seperti gambar
dibawah ini.

7. Setelah database terbuat maka untuk tahap selanjutnya pada proses installasi
wordpress isikan seperti gambar dibawah ini

3
 Berikut penjelasan dari parameter diatas
a. Nama Basis data yaitu nama database yang barusan tadi kita buat yaitu
db_toko_kami atau kalian berbeda dengan ini sesuaikan dengan nama database
yang kalian buat
b. Nama pengguna yaitu username yang digunakan oleh settingan mysql kalian
biasanya menggunakan root
c. Sandi yaitu password yang digunakan oleh settingan mysql kalian biasanya jika
menggunakan xampp defaultnya tidak ada kata sandi
d. Host basis data yaitu host dimana tempat website kita diletakan karena kita
menggunakan local server maka isi hostnya adalah localhost
e. Prefiks table yaitu prefiks yang akan ditambahkan didepan table ketika table
tersebut dibuat

8. Setelah semua diisi selanjutnya kalian hanya cukup klik tombol kirim seperti
gambar diatas yang diberikan kotak warna merah maka jika berhasil akan muncul
tampilan seperti gambar dibawah ini.

4
9. Selanjutnya klik jalankan pemasangan maka akan muncul halaman seperti gambar
dibawah ini kemudian isikan datanya seperti gambar.

Penjelasan dari gambar diatas

a. Judul situs yaitu nama website kalian
b. Nama pengguna yaitu username yang akan digunakan untuk masuk
kedalam halaman admin wordpress
c. Sandi yaitu password yang akan digunakan untuk masuk kedalam halaman
admin wordpress
d. Tegaskan (ulangi ) kata sandi yaitu izin untuk menggunakan kata sandi
yang lemah karena ini hanya sebatas percobaan agar mudah di ingat kami
menggunakan kata sandi admin alangkah baiknya menggunakan kata sandi
yang kuat agar tidak mudah dihack

5
 e. Email anda yaitu email kalian yang digunakan untuk profile user
f. Penampakan pada mesin pencari yaitu untuk memunculkan halaman
web kalian pada mesin pencarian seperti google , bing dll oleh karena itu
jangan di checklist

10. Setelah semua diisi maka langkah selanjutnya klik tombol install wordpress dan
jika berhasil akan muncul tampilan seperti gambar dibawah ini

11. kemudian kalian hanya cukup klik tombol log masuk untuk masuk kehalaman login

12. selanjutnya isikan sesuai dengan data yang tadi kalian setting yaitu username =
admin dan sandi = admin kemudian klik log masuk dan jika data yang kalian
masukan sesuai maka kalian akan langsung diarahkan ke halaman admin wordpress
seperti gambar dibawah ini.

6
13. jika sudah semua maka kalian sudah berhasil untuk installasi wordperess

7
B. Install Woocomerce
1. Pastikan anda sudah terkoneksi dengan internet
2. Masuk kedalam halaman admin wordpress kalian
3. Pilih plugin dari menu sisi kiri wordpress admin kalian selanjutnya klik tombol
tambah baru seperti pada gambar dibawah ini yang dikotak warna merah.

4. Dihalaman tambah plugin ketik WooCommerce di kolom pencarian plugin.

5. Cari plugin WooCommerce di hasil pencarian dan klik tombol Pasang Sekarang
seperti gambar dibawah ini.

6. Akan muncul pemberitahuan bahwa instalasi WooCommerce sedang berlangsung.

Setelah proses instalasi selesai, klik tombol aktifkan.

8
C. Memulai WooCommerce
1. Setelah proses instalasi selesai, akan muncul pesan selamat datang (welcome
message) dari WooCommerce yang meminta Anda untuk menjalankan Setup
Wizard. Memulai WooCommerce sangatlah mudah, jadi jangan ragu untuk
memulainya dengan mengklik tombol berwarna ungu tersebut. Bilamana Anda
secara tidak sengaja mengklik tombol Skip Setup, Wizard tetap bisa dijalankan dari
halaman WooCommerce -> Help -> Setup Wizard.

2. Pada tahap Store Setup ini kalian akan menentukan lokasi toko, mata uang dan
barang apa saja yang akan kalian jual pada contoh kali ini kami hanya memjual
barang fisik jadi memilih I plan to sell physical products. Isilah dengan rincian
yang sesuai kebutuhan dan keinginan Anda, lalu klik tombol Let’s go

3. Pada tahap Payment ini Anda bisa menentukan metode pembayaran yang hendak
diterima di halaman ini. Sebagai contoh, kami menggunakan metode pembayaran
COD dan Transfer bank untuk bisnis WooCommerce kami dengan menekan tombol
yang ada pada gambar menjadi enable ( berwarna ).

9
 Jangan khawatir jika anda ingin terlebih dulu melakukan riset dan akhirnya
memutuskan metode pembayarn seperti apa yang dapat diterima. Di bagian terakhir
tutorial WooCommerce ini, Anda akan tahu bagaimana caranya menambahkan
metode pembayaran secara manual. Klik tombol Continue jika Anda sudah siap

4. Tahap selanjutnya adalah Shipping dimana pada tahap ini kalian diharuskan untuk
mengatur proses pengiriman apa saja yang digunakan pada toko online yang kalian
miliki. Untuk pengiriman default yang ada hanyalah flat rate yaitu tarif yang tidak
menyesuaikan lokasi dimana pembeli berasal. Jadi semua pembeli dari manapun itu
semua tarif ongkos kirimnya sama. Namun untuk selanjutnya kami akan
menggunakan plugin Ongkoskirim.id yang akan dijelaskan pada tahap selanjutnya
dimana dengan plugin ini ongkos kirim akan menyesuaikan dengan berat barang
dan jarak pembeli terhadap toko.untuk saat ini pengaturan shippingnya sesuaikan
saja seperti gambar dibawah ini dan jika dirasa sudah sesuai langsung klik continue

10
5. Tahap Recommended yaitu pada tahap ini ada beberapa plugin yang
direkomendasikan oleh woocommerce seperti pada gambar dibawah ini
woocommerce merkomendasikan plugin mailchimp dan storefront theme dan
jika kalian ingin install plugin tersebut checklist pada bagian sebelah kiri dan
otomatis akan terinstall namun jika tidak kalian bisa skip this step atau uncheck.

11
6. Tahap selanjutnya adalah activate yaitu berisi konfirmasi apakah ingin
menggunakan plugin jetpack atau tidak. Jika kalian ingin menggunakan plugins
ini cukup pilih continue with jetpack namun jika tidak kalian pilih skip this step
yang terlihat kotak merah pada gambar . Plugin jetpack adalah plugins yang
sangat powerfull, plugins ini merupakan ibu dari beberapa plugins, kenapa disebut
begitu karena satu plugins mempunyai 30+ fitur yang bisa anda gunakan dan
aktifkan.

12
7. Setelah semua selesai masuk ke tahap ready dimana woocommerce sudah berhasil
di setup dan selanjutnya ada beberapa pilihan seperti pada gambar dibawah ini.

a. Masukan email kalian pada inputan tersebut untuk mendapatkan tips ,

update product dan insiprasi untuk kemajuan toko kalian.
b. Jika kalian ingin langsung menambah product untuk toko kalian cukup pilih
create product seperti pada gambar diatas
c. Jika kalian sudah punya data product berbentuk csv maka kalian bisa
langsung import product tanpa harus menambahkan product 1 demi 1
untuk caranya sendiri akan dijelaskan ditahap selanjutnya
d. Visit dashboard yaitu kalian langsung akan diarahkan kehalaman dashboard
admin.
e. Review Setting yaitu kalian akan langsung diarahkan ke halaman setting
untuk mengatur profile toko kalian
f. View & Customize yaitu akan langsung diarahkan ke halaman untuk
customize design website toko online kalian.

Selanjutnya kalian bisa pilih salah satu dari pilihan diatas.

13
D. Mengaktifkan Tema Storefront
1. Masuk ke halaman admin store
2. Selanjutnya pastikan bahasa yang kalian gunakan adalah Bahasa Indonesia
3. Kalian bisa atur Bahasa pada menu pengaturan -> umum
4. Pilih Bahasa Indonesia

5. Pastikan tema storefront sudah kalian install pada woocomerce kalian namun jika
belum kalian bisa tambahkan terlebih dahulu caranya sebagai berikut
a. kalian cukup kemenu Tampilan -> Tema

b. Pada halaman tema pilih tambahkan tema baru

c. Pada inputan pencarian kalian ketikan Storefront seperti pada gambar

dibawah ini ( harus terkoneksi dengan internet )

d. Maka akan muncul tema storefront dan selanjutnya kalian cukup klik
tombol install

6. Namun jika tema storefront sudah diinstall pada toko kalian abaikan tahap diatas
14
7. Untuk mengaktifkan tema storefront pada toko kalian perhatikan pada halaman
dashboard kalian aka nada tampilan seperti ini

8. Pastikan create homepage terceklis seperti pada gambar diatas dan jika kalian ingin
menambahkan contoh product kalian bisa juga checklist add example product
9. Jika sudah kalian hanya cukup klik tombol Let’s Go! Maka kalian akan diarahkan
kedalam halaman customize atau sesuaikan yaitu halaman untuk menyesuaikan
tampilan home toko anda ingin seperti apa dimana pada halaman ini terdapat
beberapa parameter yang bisa kalian ubah salah satunya yang terlihat seperti pada
gambar dibawah ini yaitu identitas situs dimana kalian bisa mengatur judul toko ,
slogan toko dan logo toko.

15
10. Jika kalian sudah selesai mengatur halaman home sesuai dengan yang kalian
inginkan selanjutnya kalian cukup klik tombol Terbitkan untuk menyimpan hasil
perubahan yang kalian lakukan. Ketika sudah terbit klik tombol close yang ada di
pojok kiri atas untuk menutup halaman sesuaikan. Jika berhasil akan muncul pesan
setup complete pada halaman dashboard kalian seperti pada gambar dibawah ini.

16
E. Menambahkan dan Mengatur Product
Pada bagian Products ini anda dapat menambah produk, menambah kategori produk dan
menambah atribut produk.

1. Menambah Kategori Produk

Category Product membantu Anda dalam mengelompokkan produk. Misalnya, jika
Anda hendak menjual pakaian, maka ‘top wear’, ‘bottom wear’, dan ‘night wear’
merupakan product category. Product category memudahkan pengunjung untuk
menemukan produk dari kelompok yang sama. Anda dapat membuat sebanyak
mungkin kategori dan menyuntingnya kapan saja.
a. Pertama yang dilakukan sebelum menambah produk yaitu menambah
kategori produk. Pilih menu Product -> Categories.

b. Kemudian tuliskan kategori produk yang ingin anda jual pada kolom Add
New Product Category. Setelah selesai, klik Add New Category. Maka
kategori produk anda telah selesai dibuat.

17
2. Menambah Attribute
Attribute berfungsi untuk memfilter produk. Attribute produk, seperti ukuran,
warna, bahan, dan likes, memudahkan pelanggan memiliki produk yang disukai.
Anda dapat memilih apakah ingin menentukan attribute untuk setiap produk atau
untuk seluruh halaman web (attribute secara global). Langkah langkah untuk
menambah attributes sebagai berikut :
a. Pilih menu Products -> Attributes

b. Selanjutnya isikan nama attribute dan slug dan klik tombol add attribute
untuk menyimpan attribute tersebut.

18
3. Menambah Produk
Setelah kategori dan atribut dibuat maka langkah selanjutnya adalah menambah
produk. Untuk langkah – langkahnya sebagai berikut
a. Pilih menu Products -> Add New

b. Masukan nama produk dan deskripsi produk tentang produk yang ingin
kalian jual sertakan juga informasi yang sangat penting dan relevan terkait
produk tersebut.

19
c. Kemudian scroll ke bagian bawah, maka anda akan menemukan dashboard
seperti berikut. Di dalam dashboard ini, anda dapat mengatur produk yang
ingin ditambahkan. Seperti menambahkan atribut barang, deskripsi barang,
harga barang dan sebagainya. Apabila anda tidak memiliki atribut tertentu
seperti ukuran, merek, warna, dll maka pilih Simple Data. Apabila anda
memiliki atribut tertentu maka pilih Variabel Product. Berikut penjelasan
dari type produk .
Simple – Produk jenis ini dikirim tanpa pilihan apa pun. Contohnya, sebuah
buku cetak.
Grouped – Produk jenis ini merupakan kelompok barang yang saling
terkait. Misalnya, 1 kodi pakaian.
Virtual – Produk jenis ini tidak perlu dikirim, misalnya layanan.
Downloadable : Produk jenis dapat Anda unduh. Misalnya, lagu, gambar,
video, e-book, etc.
External : Produk yang diiklankan di website Anda dapat terjual di mana
saja.
Variable : Produk jenis ini memiliki faktor yang berkualitas, seperti ukuran,
warna, dll. Contohnya, pakaian.

Jadi untuk kasus ini dikarenakan produk kita adalah jaket maka kita pilih
type produk yang variable.

20
Tab Inventory

Pada tab Inventory, dapat anda tambahkan jumlah stok produk. Beri tanda
centang pada enable stock management at product level. Tuliskan jumlah
stok pada kolom Stock Quantity.

Tab Shipping

Pada bagian ini, anda dapat menambahkan berat, tinggi, lebar serta panjang
produk.

Tab Linked Products

Bagian ini untuk menambahkan produk yang sejenis atau terkait agar nanti
muncul rekomendasi produk yang sama.

21
Tab Attributes

Pada bagian ini, anda dapat menambahkan atribut yang telah ditambahkan
tadi. Pada Custom product attribute, pilih atribut yang ditambahkan.
Misalnya atribut warna, kemudian klik Add. Tuliskan warna barang lalu
klik Save Attributes. Berikan tanda centang pada Used for Variations.

Tab Variations

Anda dapat memberikan variasi pada stok barang. Misalnya, barang A

dengan Ukuran X memiliki stok C. Sehingga, didapatkan barang yang
sama dengan stok yang berbeda di setiap atributnya. Pada pilihan Add
Variations, klik Go. Tentukan produk yang ingin divariasi. Kemudian klik
toogle disamping tanda Remove dan jika sudah klik tombol save changes
untuk menyimpan datanya.

22
 Tab Advanced

Bagian ini berisi catatan optional yang akan dikirim ke customer setelah
membeli.

d. Menambahkan deskripsi produk

Adapun step selanjutnya yaitu menambahkan deskripsi produk. Anda dapat
menambah deksripsi produk pada Product Short Description.

23
e. Menambakan gambar produk
Untuk menambahkan gambar pada produk yang akan dijual kalian cukup
cari bagian product image dan pilih set product image

Kemudian pilih gambar produk yang sesuai. Setelah selesai, maka pilih Set
product image. Namun jika gambar tidak ada kalian bisa Pilih Berkas pada
Tab unggah berkas untuk upload gambar dari komputer kalian.

untuk product image ini hanya 1 gambar yang akan ditampilkan untuk
thumbnail namun jika kalian ingin menampilkan banyak gambar kalian bisa
ke bagian product gallery dan pilih add products gallery images

Pilih gambar gambar yang ingin ditampilkan

24
 Selanjutnya tekan Add to gallery yang ada dipojok kanan bawah

f. Memilih kategori produk

Ini adalah bagian penting juga untuk mengelompokan setiap produk yang
kalian miliki agar sesuai dengan kategorinya jadi tidak berantakan. Untuk
memilih kategorinya kalian cukup cari bagian products category yang
biasanya ada disebelah kanan sidebar. Pilih kategori jaket dan jika kalian
ingin menambahkan kategori baru bisa langsung klik Add New Category

g. Mempublish produk / terbitkan produk

Setelah semua parameter yang dibutuhkan terkait produk tersebut sudah
dilengkapi maka langkah terakhir adalah mempublish atau menerbitkan
produk tersebut dimana produk tersebut akan langsung muncul pada toko
yang kita miliki. Namun kalian juga bisa menyimpannya terlebih dahulu
sebagai draf dan juga bisa melakukan preview atau pratinjau sebelum
produk tersebut dipublish.

25
h. Produk siap dijual
Untuk melihat produk yang sudah kita buat kalian bisa ke menu
Products -> All Products

Dan berikut produk yang ada tadi kita sudah buat

Untuk melihat tampilan produk ketika ditoko klik tampil seperti pada
gambar diatas yang diberikan kota merah dan gambar dibawah adalah
tampilan pada toko.

26
4. Mengatur Produk
Kalian bisa melihat semua produk dan mengaturnya di halaman
Products -> All Products. Di halaman ini kalian bisa menyunting, menghapus,
menyalin, dan menonjolkan sebuah produk. Jika memiliki banyak barang untuk
dijual, kalian bisa menerapkan bulk actions.

a. Menyalin sebuah produk dapat dilakukan di halaman produk. Yang perlu Anda
lakukan adalah klik pilihan Duplicate. Draft baru akan dibuatkan
WooCommerce. Bukalah draft tersebut. Pilihan ini akan sangat berguna jika
Anda hendak menjual banyak produk.
b. Anda juga bisa memberi tanda pada sebuah produk yang ingin ditonjolkan. Klik
tanda Star pada pilihan untuk produk. Produk yang diunggulkan akan
terpampang di halaman utama atau diikutsertakan di dalam post dengan
menggunakan shortcode.
c. Untuk menghapus produk, klik tombol Trash yang muncul di bawah Product
Name ketika Anda menggerakkan kursor di sekitarnya.

27
F. Import Product
Jika kalian memiliki barang yang banyak dan kalian malas untuk memasukan barang itu
satu persatu kedalam toko fitur ini akan sangat berguna, dikarenakan pada fitur ini kalian
hanya cukup memasukan semua data barang yang kalian miliki kedalam file CSV dan
hanya dengan sekali upload, barang kalian akan langsung masuk kedalam toko online
kalian. Dengan ketentuan file CSV yang akan diupload harus sesuai format yang sudah
ditentukan oleh woocommerce jadi kalian harus mengikuti polanya. Untuk formatnya
CSVnya kalian bisa unduh pada link ini https://docs.woocommerce.com/wp-
content/uploads/2017/06/wc-importer-sample-products.csv

untuk langkah langkahnya adalah sebagai berikut :

1. Kalian pilih menu Products -> All Products -> Import

2. Maka akan muncul halaman Import seperti gambar dibawah ini, siapkan file CSV
yang sesuai dengan format yang sudah ditentukan dan pastikan juga kalian sudah
memasukan data barang barang yang ingin kalian tambahkan ke toko kalian
kedalam file CSV tersebut. Jika semua sudah siap klik tombol Choose File pilih
file CSVnya dan selanjutnya klik Continue

28
3. Column Mapping, pada tahap ini kalian akan menentukan field apa saja yang ada
pada file csv yang kalian upload tadi yang ingin dilakukan proses import ke
database toko kalian. Jika field tersebut tidak ada pada file csv yang kalian upload
silahkan pilih pada dropdown Do not import dan jika ada sesuaikan dengan
fieldnya seperti terlihat pada gambar dibawah ini yaitu dimana type tidak ada di file
csv dan id ada pada file csv.

4. Setelah semua field dipasangkan scroll sampai kebawah dan kalian cukup klik
tombol Run the importer untuk melakukan proses import.

29
5. Tunggu sampai proses import barang selesai jangan direfresh browsernya atau
diklik apapun agar tidak terjadi masalah dalam proses import. Dan setelah proses
import selesai maka akan ada pesan import berhasil disertai jumlah produk yang
berhasil diimport.

6. Untuk melihat barang yang tadi berhasil diimport kalian cukup klik tombol view
products

30
G. Export Produk
Export produk ini sangat berguna ketika pemilik toko ingin melihat daftar barang yang
ada pada toko kalian dalam bentuk file CSV dan bisa melakukan perubahan melalui file
CSV tersebut kemudian melakukan import ulang tanpa harus melakukan perubahan satu
persatu. Langkah langkahnya untuk export produk adalah sebagai berikut

1. pilih menu Products -> All Products -> Export

2. maka akan tampil halaman export seperti pada gambar dibawah ini

31
 a. yaitu kalian bisa memilih kolom mana saja yang ingin diexport
b. yaitu kalian bisa memilih tipe produk apa saja yang ingin di export
c. yaitu kalian bisa memilih kategori produk apa saja yang ingin diexport

3. Centang export custom meta untuk Mengekspor Meta Khusus. Data meta pada
produk Anda biasanya dari plugin lain. Kolom data meta diekspor mengikuti
meta:standar -prefix yang dirinci di atas di bagian pemetaan importir. Secara
default, tidak ada data meta tambahan yang diekspor.
4. Jika semua parameter sudah di isi kemudian klik generate csv untuk memulai proses
export

32
5. Tunggu sampai proses export data selesai dan jangan refresh browser file csv akan
otomatis terdownload.

33
H. Membuat Navigasi Toko
Navigasi Toko mempermudah pelanggan anda untuk menggunakan toko online anda. Anda
dapat menggunakan menu sebagai navigasi toko online anda.

1. Masuk ke panel Menu dasbor admin WordPress anda buatlah menu baru untuk
navigasi toko online anda. Pilih Tampilan -> Menu

2. Tampilkan WooCommerce endpoints untuk menambah halaman penting bagi

pengguna toko online anda ke Menu Navigasi yang akan anda buat. Anda juga dapat
mencentang Product Category jika ingin menambah kategori produk yang anda
jual.

3. Selanjutnya Sesuaikan Navigasi Toko Online anda sesuai kebutuhan. Untuk

caranya kalian cukup centang menu yang ingin anda tambahkan dan klik tambahkan
ke menu

34
4. Berikut contoh navigasi toko online yang dapat kalian gunakan dan jangan lupa
ceklis primary menu agar menjadi menu utama yang digunakan pada toko kalian.

5. Klik tombol simpan menu untuk menyimpan menu yang sudah kalian buat. Untuk
hasilnya nanti akan seperti ini.

35
36
I. Install plugin Ongkoskirim.id
Plugin ongkoskirim.id merupakan plugin tambahan untuk woocommerce yang berfungsi
untuk menghitung ongkos kirim dari berbagai ekspedisi di Indonesia, mulai dari JNE, Tiki,
Pos, J&T, Sicepat dan Wahana.

Plugin ini sangat mudah digunakan, hanya cukup sekali klik dan anda siap berjualan ke
seluruh pelosok negri. Untuk menerapkan plugin tersebut langkah langkah adalah sebagai
berikut.

1. Pilih menu plugin -> tambah baru

2. Pastikan kalian sudah terkoneksi dengan internet
3. Pada halaman tambah plugin kalian cari plugin ongkoskirim pada form pencarian
maka nanti akan muncul tampilan seperti berikut.

Selanjutnya kalian cukup klik tombol pasang sekarang untuk memasang plugin
tersebut pada toko kalian tunggu sampai proses pemasangan selesai lalu klik tombol
aktifkan. Setelah berhasil kalian aktifkan maka akan ada menu tambahan
OngkosKirim.id pada menu sebelah kiri kalian seperti terlihat pada gambar
dibawah ini.

37
Untuk selanjutnya kita lakukan konfigurasi caranya
a. Kalian pilih menu ongkoskirim.id -> klik tombol konfigurasi seperti terlihat
pada gambar dan jika kalian ingin membaca dokumentasi bisa klik baca
dokumentasi dari plugin tersebut.

b. Selanjutnya kalian akan diarahkan kehalaman shipping

c. Dikarenakan ini plugin gratis maka ekpedisi yang tersedia terbatas dan
kalian bisa ceklis ekspedisi yang ingin kalian gunakan.
d. Setelah itu kalian scroll ke bawah dan klik tombol save changes untuk
menyimpan hasil konfigurasi.

38
Untuk melihat hasil penggunaan ongkoskirim ini kalian harus terkoneksi
dengan internet nanti pada saat proses checkout ongkos kirim akan
menyesuaikan dengan lokasi alamat kalian seperti terlihat pada gambar
dibawah ini.

39
J. Menambahkan Metode Pembayaran Bank Transfer
Untuk menambakan bank transfer kalian bisa menggunakan plugin Indonesian banks for
woocommerce dimana dengan plugin tersebut kalian bisa menambahkan Tiga bank
Indonesia: Bank BNI, Bank Mandiri, dan Bank BRI dikarenakan versi gratis yang kami
gunakan jadi terbatas. Untuk langkah langkahnya sebagai berikut

1. Pilih menu Plugin -> Tambah Baru

2. Cari plugin Indonesian banks for woocommerce pada form pencarian seperti
terlihat pada gambar dibawah ini.

3. Klik tombol pasang sekarang untuk menginstall plugin tersebut selanjutnya klik
aktifkan untuk mengaktifkan plugin tersebut.
4. Selanjutnya untuk mengatur konfigurasi pembayaran kalian bisa masuk ke menu
woocommerce -> setting -> payments maka akan tampil halaman seperti gambar
dibawah ini

40
5. Kalian bisa mengatur nomor rekening kalian sesuai dengan bank yang tertera pada
metode pembayaran yang ada. Untuk caranya seperti berikut
a. Pilih bank yang ingin diatur
b. Klik manage maka akan tampil seperti gambar dibawah ini

c. Silakan setup masing-masing bank yang tersedia dan jangan lupa isikan
Judul, Deskripsi, Instruksi transfer kepada pembeli di front-end,
keterangan bank penjual: nama pemilik rekening, nomor rekening, nama
bank, Sort code, IBAN, dan BIC/Swift.
d. Selanjutnya klik save changes untuk menyimpan konfigurasi tersebut
6. Selanjutnya kalian bisa setting kode pembayaran untuk memudahkan Anda
mengidentifikasi pembayaran dari pembeli. Untuk caranya sebagai berikut
a. silakan masuk ke bagian WooCommerce -> Setting -> advanced ->
payment code

41
 b. maka akan tampil halaman seperti gambar dibawah ini. Silakan centang
pilihan Enable Setting kemudian Save Changes untuk menggunakan
Payment Code. Apabila tidak ingin menggunakannya, silakan hilangkan
centang.

7. Payment code disini akan memberikan 3 angka terakhir pada jumlah yang haris
ditransfer oleh pembeli

42
8. Setelah mengatur konfigurasi kalian bisa cek prosesnya untuk memastikan apakah
plugin tersebut berfungsi atau tidak kalian bisa pergi ke halaman pada saat
checkout pembayaran seperti pada gambar dibawah ini

9. Nanti ketika proses pembelian berhasil maka pembeli akan diarahkan kehalaman
yang memberikan informasi instruksi pembayaran.

43
K. Manajemen user
1. Menambahkan pengguna baru
Ikutilah langkah-langkah di bawah ini untuk membuat pengguna WordPress baru:
a. Login ke dashboard WordPress kalian, dan pilih Pengguna -> Tambah
Baru
b. Isi data dan tambahkan informasi pribadi pengguna baru, seperti username,
nama pertama, nama terakhir, dan alamat email.
c. buat password baru dengan mengklik Tampilkan Sandi (opsional
pengguna baru dapat mengubahnya kapan pun).
d. Pilih peranan pengguna toko kalian yang kalian inginkan dari menu
dropdown.
e. Klik tambah pengguna baru untuk menyimpan data pengguna tersebut

2. Menghapus pengguna
a. Login ke dashboard Woocommerce kalian, dan pilih Pengguna -> Semua
Pengguna
b. Pilih salah satu akun pengguna dan klik Hapus

44
3. Memperbarui pengguna
a. Login ke dashboard Woocommerce kalian, dan pilih Pengguna -> Semua
Pengguna
b. Pilih salah satu akun pengguna dan klik sunting

c. Perbarui data pengguna tersebut sesuai yang kalian inginkan dan klik
tombol perbarui pengguna yang ada di paling bawah untuk menyimpan
data tersebut.

45
L. Menyesuaikan Tampilan Toko
Untuk menyesuaikan tampilan toko kalian agar lebih menarik pelanggan yang harus
kalian lakukan adalah masuk ke dashboard woocommerce -> Tampilan -> Sesuaikan
maka akan tampil halaman seperti gambar dibawah ini.

Ada beberapa yang kita lakukan perubahan toko antara lain

1. Menghapus sidebar toko

a. Pada halaman sesuaikan tampilan kalian bisa pilih menu widget - >
Sidebar

b. Klik tombol panah untuk memunculkan detail dari widget tersebut

c. Klik tombol Hapus untuk menghapus widget tersebut dari sidebar
d. Klik tambahkan widget untuk menambahkan widget yang kalian inginkan
kedalam sidebar untuk kasus ini dikarenakan kita ingin menghilangkan
sidebar maka kita hapus semua widget yang ada pada sidebar.
e. Setelah semua dihapus kalian bisa klik tombol terbitkan yang ada di pojok
kiri atas untuk menyimpa hasil perubahan.

46
2. Mengganti warna button
a. Pilih menu Tampilan -> Sesuaikan
b. Cari dan pilih menu Buttons
c. Sesuaikan warna button yang kalian inginkan

Background color untuk memberikan warna background buttons pada toko

kalian dan textcolor untuk memberikan warna teks pada button tersebut

3. Mengatur Halaman Home

a. Masuk kedalam dashboard toko -> Laman -> Semua Laman
b. Cari halaman welcome pada form pencarian
c. Lalu klik tombol sunting untuk memperbarui halaman home

47
 d. Selanjutnya kalian bisa ganti kata kata sesuai dengan keinginan kalian
seperti gambar dibawah ini

Untuk mengganti banner kalian bisa klik tombol replace image kemudian
cari gambar yang kalian inginkan.
e. Setelah semua dirasa sudah sesuai kalian cukup klik tombol update untuk
memperbarui tampilan home toko kalian

4. Menghapus shop by category di home

a. Install plugin baru yaitu homepage control
b. Plugin -> Tambah Baru -> Homepage Control
c. Pasang plugin tersebut kemudian aktifkan

48
d. Pilih menu Tampilan -> Sesuaikan
e. Pilih menu Homepage Control
f. Uncheck storefront product categorie untuk menghilangkan category
pada tampilan home

g. Selanjutnya klik Terbitkan untuk menyimpan pembaruan

49
M. Mengatur Transaksi Woocommerce
Pada bagian ini kalian bisa mengatur transaksi masuk , melihat laporan transaksi ,
membuat coupon transaksi

1. untuk melihat transaksi pembelian masuk kalian bisa pilih menu

Woocommerce -> Orders seperti terlihat pada gambar

Maka akan tampil halaman seperti berikut

Dari gambar diatas kalian bisa mencari transaksi pada search order dan untuk
melihat status transaksi tersebut terlihat pada kolom status dimana pada gambar
diatas statusnya On Hold yang berarti ada orderan masuk namun belum diproses.
Untuk melihat detail transaksinya kalian cukup klik icon mata pada transaksi
tersebut maka akan tampil halaman detail seperti pada gambar dibawah ini.

50
 Pada gambar diatas terdapat kotak warna merah berikut penjelasannya
a. Processing yaitu untuk update status transaksi tersebut menjadi process
dimana menandakan bahwa barang sudah siap dikirim seperti pada gambar
dibawah ini.

b. Completed yaitu untuk update status transaksi tersebut menjadi completed

dimana menandakan bahwa transaksi tersebut sudah selesai dan barang
sudah diterima pembeli seperti terlihat pada gambar dibawah ini

c. Edit yaitu untuk memperbarui transaksi yang masuk

2. Selanjutnya coupons yaitu untuk membuat coupons setiap produk yang berguna
untuk diskon barang. Untuk caranya kalian bisa pilih menu Woocommerce ->
coupons -> create your first coupon.

51
 Nanti akan tampil halaman untuk membuat coupons

Isi coupon data sesuai dengan keinginan kalian.

3. Reports yaitu menu untuk melihat laporan transaksi penjualan toko , laporan
customer yang mendaftar pada toko kami , dan juga laporan stok barang yang
sudah habis.

52
 a. Laporan transaksi penjualan toko , disini kalian bisa menlihat laporan
transaksi dimana bisa difilter berdasarkan periode tertentu dan juga bisa
diexport ke file CSV

b. Laporan customer yaitu laporan untuk melihat jumlah customer yang

sudah terdaftar dan mengunjungi toko kami

c. Stock yaitu untuk melihat laporan stok yang sudah low in stock , out of
stock , stock terbanyak

4. Setting yaitu pada menu ini kalian bisa mengatur banyak hal seperti info tentang
toko kalian , pengiriman , pembayaran dll

53
54
N. Upload Woocommerce Pada Penyedia Hosting Free
1. Kunjungi link ini https://www.000webhost.com/free-website-sign-up dan lakukan
pendaftaran

2. Lakukan konfirmasi email pada email yang kalian gunakan

3. Klik link click here to verify your email maka akan muncul pesan

55
4. Selanjutnya click tombol create your first website maka akan muncul popup
seperti gambar dibawah ini , kemudian kalian isikan sesuai dengan nama toko
kalian dan klik create.

5. Setelah berhasil dibuat maka kalian akan diarahkan kehalaman dashboard untuk
memulai mengupload woocommerce kalian.

6. Pilih Upload Own Website dikarenakan kita sudah memiliki website ecommerce
yang sudah kita buat dilocalhost.
7. Nanti kalian akan diarahkan kehalaman file manajer untuk mengupload file
woocommerce yang kalian miliki

56
8. Sebelum kalian upload woocommercenya lebih baik kalian lakukan compresing
file tersebut menjadi zip agar lebih efesien dalam proses uploadnya
9. Kemudian klik tombol upload seperti terlihat pada gambar diatas
10. Pilih file woocommerce yang sudah kalian zip lalu klik Upload

11. Tunggu sampai proses upload selesai kemudian lakukan extract pada file tersebut
dengan cara klik kanan -> Extract

57
12. Tunggu sampai proses extract selesai kemudian pindahkan semua file yang ada
didalam folder kedalam folder public_html

13. Setelah file berhasil diupload langkah selanjutnya adalah dengan mengimport
database woocomerce yang ada dilokal kita kedalam tempat hostinger tapi
sebelumnya kita harus membuat database terlebih dahulu
a. Pergih ke link berikut ini
https://www.000webhost.com/members/website/tokokamiunpam/build
b. Pilih menu Website Manager -> Database Manager

c. Klik tombol New Database

58
d. Sesuaikan nama database kalian dengan database yang dibuat pada
localhost sebelumnya

e. Jika berhasil maka tampilan tablenya akan menjadi seperti ini

f. Selanjutnya klik Manage -> PhpMyAdmin maka kalian akan diarahkan

kehalaman phpmyadmin tokokamiunpam

g. Masuk ke php myadmin localhost lakukan proses export database terlebih

dahulu yang nantinya akan import ulang ke database yang ada di hostinger

59
h. Pilih database woocommerce kalian -> Export -> Go

i. Balik lagi phpmyadmin hostinger pilih database yang kalian buat

kemudian pilih import

j. Pilih file database yang sebelumnya kalian sudah export lalu klik Go

k. Tunggu sampai proses import selesai , kembali ke halaman file manager

pilih website manager -> file manager -> upload file now

60
l. Perbarui konfigurasi database yang ada pada file wp-config.php dengan
cara klik kanan file tersebut lalu pilih Edit samakan nama databasenya
dengan nama database yang ada pada phpmyadmin hostinger

Jika sudah sesuai lalu klik save untuk menyimpan konfigurasinya dan
masuk ke phpmyadmin lagi buka table wp-options ganti siteurl dan home
menjadi http://tokokamiunpam.000webhostapp.com seharusnya ketika
kalian akses alamat domain http://tokokamiunpam.000webhostapp.com

61
sudah bisa muncul woocommerce toko kami. Seperti terlihat pada gambar
dibawah ini.

62