Modul II

Membangun dan Mengelola Website E-Commerce

Dengan Wordpress

Modul Pelatihan Kompetensi Siswa

SMK Forward Nusantara
Depok
 Pengaturan Tampilan/Tema Wordpress

1. Proses login

Buka halaman administrasi CMS, Sejutaweb menggunakan CMS Wordpress, sehingga tautan untuk
administrasi cms di bagian akhir terdapat /wp-admin

Contoh : template-ukm.sejutaweb.id/wp-admin

Masukkan username dan password

(kredensial didapat di halaman daftar.1juta.id masing-masing fasilitator)

setelah login berhasil, akan ditampilkan dasboard situs yang akan anda kustomasi.

2. kustomasi template

Agar proses drafting website bisa dilakukan lebih cepat, kami sudah menyiapkan tema berikut
konten yang bersifat umum sesuai standar kominfo, namun demikian perlu dilakukan kustomasi
untuk konten-konten yang spesifik, seperti kategori produk, produk, profil ukm, alamat, kontak dan
lain sebagainya.
Tema yang kami gunakan adalah accesspress store pro, yang memiliki menu pengaturan yang
cukup lengkap dan mudah di pahami.

A. Gambar Tajuk/Logo

Jika umkm sudah memiliki logo yang akan ditampilkan di header, gambar untuk logo diatur
tingginya kurang lebih 70 px dengan program editor gambar (mis. Gimp). Agar gambar tersebut
bisa menyatu dengan latar belakang halaman web, sebaiknya dibuat dalam format png dengan
transparansi.
Untuk mengupload logo :

Buka menu tampilan → sesuaikan

 Buka menu General setting → Gambar Tajuk → klik tambahkan gambar baru → unggah gambar
logo

Klik tombol Simpan & Terbitkan di bagian atas setelah melakukan perubahan.

B. Ikon Situs

Selain logo, jika diperlukan Anda juga bisa mengunggah ikon situs, untuk itu diperlukan gambar
persegi dengan ukuran optimal 512x512 px, untuk mengunggah logo situs:

Buka menu General Setting → Identitas Situs → klik seleksi gambar → unggah gambar ikon situs

Di menu ini anda juga bisa mengatur kata-kata yang digunakan untuk judul dan slogan situs, atau
menyembunyikannya dari tampilan website.

Klik tombol Simpan & Terbitkan di bagian atas setelah melakukan perubahan.

C. Background

Jika di inginkan anda bisa mengunggah background untuk website, namun perlu diingat gambar
yang di perlukan untuk background yang baik cenderung berukuran besar, sehingga menambah
waktu load halaman website. Jika memang di inginkan anda bisa menggunakan gambar dengan
ukuran yang sudah di optimasi atau menggunakan gambar seamless pattern.

Buka menu General Setting → Background → pilih opsi background atau unggah gambar
background

Klik tombol Simpan & Terbitkan di bagian atas setelah melakukan perubahan.

D. Layout setting

Layout yang bisa digunakan ada dua yaitu boxed dan fullwidth.

Buka menu General Setting → Layout Setting

Klik tombol Simpan & Terbitkan di bagian atas setelah melakukan perubahan.

E. Header Layout

Menu ini digunakan untuk mengatur tampilan Header atau tajuk website

Buka menu Header Setting → Header Layout → pilih dari opsi yang ada

Klik tombol Simpan & Terbitkan di bagian atas setelah melakukan perubahan.

F. Pengaturan Warna

Anda bisa menyesuaikan warna tema sesuai dengan produk pelanggan, misalnya warna untuk
produk olahan kopi cenderung menggunakan warna coklat gelap atau hitam, sedangkan untuk
produk fashion lebih cenderung warna-warna terang.

Buka menu Color Setting → Color Option → pilih warna tema yang akan anda gunakan
Klik tombol Simpan & Terbitkan di bagian atas setelah melakukan perubahan.

G. Pengaturan Font

Font yang di gunakan bisa diatur menu Typography, menggunakan google font
https://fonts.google.com/

Klik tombol Simpan & Terbitkan di bagian atas setelah melakukan perubahan.

3. Widget

Widget adalah program wordpress yang melakukan sebuah fungsi khusus yang bisa ditempatkan di
halaman sebuah website yang menggunakan wordpress. Tema yang kami gunakan memiliki widget-
widget khusus yang siap digunakan untuk membuat tampilan toko online menjadi lebih menarik
diantaranya :

A. AP:Woocommerce product slider, untuk menampilkan produk berdasarkan kriteria tertentu

B. Woocommerce price filter, untuk menyaring produk berdasarkan harga.
C. Woocommerce cart, untuk menampilkan produk yang dipilih pembeli.
D. Woocommerce recent review, untuk menampilkan ulasan produk oleh pelanggan.

Penggunaan widget ini disesuaikan berdasarkan area di halaman website. Sebagai patokan, kami
sudah mengatur wigdet di halaman utama atau beranda digunakan untuk menampilkan produk-
produk yang sudah tersedia, di halaman utama ini kami tidak menggunakan bilah sisi/sidebar untuk
memaksimalkan tampilan produk, sedangkan halaman lain di bilah sisi/sidebar kami tempatkan
widget cart dan lain-lain dengan berbagai variasi antara satu website dengan website yang lain.

Klik tombol Simpan & Terbitkan di bagian atas setelah melakukan perubahan.

4. Pengaturan Footer

Informasi utama tentang situs kami tempatkan di bagian footer, dengan pertimbangan bagian ini
selalu konstan ada di setiap halaman, seperti halnya header, namun karena letak footer yang ada di
bagian paling bawah laman, informasi yang disampaikan bias lebih detail dengan tidak
mengganggu keseluruhan tampilan situs.
Karena informasi di masing-masing situs bersifat spesifik, maka tugas fasilitator adalah
memasukkan informasi sesuai dengan data pendaftar, seperti alamat usaha, nomer telefon dan
informasi lain yang sekiranya perlu di tampilkan. Pada tampilan situs, footer kami bagi menjadi 3
kolom yang pada dasarnya adalah:

A. Footer 1 yang berisi informasi umum pemilik situs (alamat, nomer telefon dll)
B. Footer 2 yang berisi panduan penggunaan situs (saran, pembayaran, pengiriman)
C. Footer 3, bisa diisi akun sosial media pemilik situs, atau akun marketplace mereka
D. Copyright text

Anda bisa menambahkan 1 footer lagi yaitu footer 4 jika memang diperlukan.

Untuk merubah isi informasi di footer:

Buka menu Widget → footer area 1 → klik di kotak widget text → klik visual untuk mengedit text
secara visual, atau klik text jika akan mengedit text html.
Untuk merubah copyright text:

Buka menu footer setting → sub footer setting → isikan text hak cipta beserta tahun pembuatan.

Tampilan depan setelah template di kustomasi kurang lebih sebagai berikut :

5. Plugin

Plugin adalah perangkat lunak tambahan yang digunakan untuk menjalankan fungsi tertentu. Plugin
dapat diakses melalui menu plugin. Plugin yang diinstall bisa di dapat di direktory plugin wordpress
yang terdapat di website wordpress.
 Pengelolaan Produk dengan WooCommerce

Selamat bergabung di sejutaweb, disini anda memiliki website toko online milik anda sendiri,
bukan sekedar numpang nama di website milik orang lain.

Website anda dibangun dengan perangkat lunak sistem manajemen manajemen konten Wordpress,
perangkat lunak ini merupakan salah satu yang paling populer dan telah digunakan untuk
membangun jutaan website, baik website pribadi maupun website milik korporasi besar.

Untuk kegiatan niaga anda, dalam website yang anda miliki telah kami sediakan pula perangkat
lunak yang ditujukan untuk manajemen penjualan, yaitu Woocommerce. Dengan perangkat lunak
ini, segala aspek yang berhubungan dengan penjualan online seperti pengaturan tampilan produk,
pengaturan stok, perhitungan total belanja, total biaya yang harus dibayarkan dan lain-lain sudah
diatur oleh sistem, sehingga lebih praktis dan meminimalisir faktor kesalahan manusia. Berikut
adalah beberapa hal yang harus dikuasai untuk bisa menggunakan woocommerce:

Menentukan kategori produk

Penataan produk menurut kategori akan sangat memudahkan pembeli menentukan pilihan,
bandingkan kenyamanan belanja di toko yang item-itemnya tertata rapi sesuai kategori dengan toko
yang barangnya tergeletak disembarang tempat. Anda mungkin harus menata produk anda dalam
beberapa kategori, dan dalam satu kategori mungkin anda juga memerlukan beberapa sub-kategori,
hal ini sangat memudahkan pengunjung website menemukan produk yang dicarinya, misalnya:

Kategori utama/Parent category Sub-kategori I Sub-kategori II

Pakaian Wanita Kasual
Formal
Tradisional
Pria Kasual
Formal
Tradisional
Anak-anak Kasual
Formal
Tradisional
Sepatu Wanita Kasual
Formal
Tradisional
Pria Kasual
Formal
Tradisional
Anak-anak Kasual
Formal
Tradisional
Dst Dst Dst
 Pengaturan kategori dapat dilakukan melalui menu Product →Categories. Seperti pada
gambar berikut:

→ Isikan nama kategori anda di kolom nama

→ Kolom slug berisi versi ramah url(link yang ditampilkan di browser) dari nama yang anda
masukkan dalam kolom nama. Slug ini berguna untuk membuat url yang lebih mudah di-index oleh
mesin pencari.
→ Induk, jika kategori yang anda buat adalah sub-kategori, anda bisa memilih kategori lain sebagai
kategori induknya.
→ Diskripsi, untuk menggambarkan kategori.
→ Display type menentukan bagaimana kategori tersebut ditampilkan
→ Default : sesuai pengaturan tema
→ Product : hanya menampilkan produk yang termasuk dalam kategori tersebut
→ Subcategory : hanya menampilkan subkategori yang termasuk dalam kategori.
→ Both : menampilkan sub-kategori beserta produk yang ada diddalamnya.
→ Thumbnail, gambar kecil yang digunakan sebagai gambar tampilan kategori.

Setelah semua dirasa lengkap klik tombol Add New Product Category, kategori yang ditambahkan
akan ditampilkan di daftar sebelah kanan. Anda bisa melakukan perubahan pada kategori yang
sudah ada dengan meng-klik tombol edit yang muncul saat pointer mouse ditempatkan diatas
kategori yang akan dirubah.

Menambahkan Produk

Menu untuk menambah produk bisa di akses di Product → Add Product, di menu ini disamping
memasukkan nama produk, ada beberapa data yang perlu di isi, yaitu:

 Jenis produk,
◦ Simple Product, merupakan tipe paling sederhana, karena hanya membutuhkan sedikit
pengaturan, jika produk yang dijual tidak berupa barang, seperti jasa atau produk digital
yang bisa di download, maka bisa dipilih opsi virtual dan downloadable. Contoh simple
 product berupa barang misalnya perhiasan dan alat elektronik, sedangkan yang virtual
bisa berupa jasa seperti jasa kost, pembuatan web dll, sedangkan yang virtual
downloadable misalnya jasa terjemahan yang hasil terjemahannya bisa di download oleh
pembeli.
◦ Grouped Product, yaitu beberapa produk yang dijual bersama-sama, misalnya satu set
komputer (lengkap dengan keyboard mouse dll) atau satu satu perangkat perlengkapan
makan dimana harga satu set mungkin berbeda jika dibeli per item.
◦ External/affiliate, yaitu produk yang anda tampilkan di website, tetapi dijual di tempat
lain atau anda sebagai agen/distributor.
◦ Variable Product, yaitu produk yang memiliki lebih dari satu variasi, misalnya variasi
ukuran, warna dan bahan yang berbeda, jumlah stok per variasi harus dihitung, serta
harga yang bisa berbeda antara satu varian dengan yang lain,
contoh:
Sepatu dengan pilihan ukuran 29-44, pilihan bahan dari kulit asli atau sintetis,
dengan pilihan warna coklat dan hitam.
Kue bolu dengan pilihan rasa coklat, vanila dan pandan, dengan pilihan ukuran
12x12 cm dan 16x16 cm.

 General , data umum yaitu harga reguler dan harga sales (obral) yang bisa di jadwalkan.
 Inventory, yaitu data yang berkaitan dengan perhitungan stok, yaitu:
◦ SKU atau Stock Keeping Unit yaitu kode indentifikasi yang unik untuk masing2 produk.
◦ Manage stock, yaitu pilihan agar sistem bisa mengatur stok secara otomatis.
◦ Stock status, yaitu status ketersediaan stock, apakah tersedia (in stock) atau habis (out of
stock).
◦ Sold individually, jika di centang maka produk tersebut hanya bisa dibeli secara satuan
dalam sekali order.
 Shipping, disini anda bisa mengisikan data berat satuan item produk berikut volumenya
( panjang x lebar x tinggi), hal ini diperlukan untuk menentukan ongkos kirim yang nanti
akan ditambahkan di perhitungan biaya total. Opsi shipping class diperlukan jika anda
memiliki produk dengan perlakuan biaya pengiriman yang berbeda, misalnya untuk produk
dengan yang harus di packing dengan kerangka kayu dibedakan kelasnya dengan produk
yang cukup dengan packing biasa.
 Linked product, untuk menghubungkan satu produk dengan yang lain, yaitu:
◦ Up-sells, untuk merekomendasikan produk lain yang kualitas danharganya diatas produk
yang sedang ditambahkan/disunting.
◦ Cross-sells, untuk merekomendasikan produk-produk yang bisa melengkapi produk
yang sedang ditambahkan/disunting.
◦ Grouping untuk memasukkan produk kedalam sebuah group (terlebih dulu harus
ditambahkan produk dengan jenis Grouped product)
 Attributes, yaitu untuk variable product, namun terlebih dahulu harus ditambahkan variabel
global yang bisa digunakan sebagai atribut produk.
 Advance, untuk pengaturan tingkat lanjut seperti pengaturan pesan pada kustomer dan
pengaturan untuk menghidupkan atau mematikan fitur review. Fitur review digunakan untuk
menerima masukan dari pelanggan terhadap produk yang dijual, jika dikelola dengan baik
fitur ini bisa meningkatkan ranking halaman produk di peringkat mesin pencari.
 Product video, digunakan untuk menyematkan video durasi pendek tentang produk.
Menambahkan Simple Product

→ Isikan nama produk di kotak product name.

→ Jika produk memerlukan artikel pendukung, bisa dituliskan di kotak dibawahnya.
→ Pilih simple product, centang kotak virtual jika produk bukan berupa barang fisikal, dan klik
downloadable jika merupakan produk yang bisa di download.
→ Masukkan besaran harga di kolom regular price, dan harga obral di kolom sale price.
→ Anda bisa menjadwalkan tanggal awal obral dan tanggal akhir masa obral dengan meng-klik
schedule.
→ klik menu inventory, disarankan untuk memasukkan kode sku yang cukup unik untuk tiap
produk (misalnya spt001).
-> Klik di kotak enable stock management untuk memungkinkan woocommerce mengelola stock
produk anda, seperti laporan jumlah stok, notifikasi jika stok sudah menipis, batas minimum stok
dan lain-lain. Jika opsi ini di enable, kama akan muncul kotak stock quantity, masukkan jumlah stok
barang anda disini.
→ Opsi berikutnya adalah in stock jika barang tersedia, atau out of stock jika produk sudah habis
atau anda memutuskan untuk menghentikan penjualan produj tersebut. Opsi sold individualy
digunakan jika anda membatasi penjualan produk tersebut hanya boleh satu buah setiap kali order.
→ Menu berikutnya adalah shipping, dimana anda dapat memasukkan berat serta volume (panjang
x lebar x tinggi) per item produk anda jika dikirim. Hal ini berguna untuk menghitung ongkos
kirim.
→ Menu berikutnya linked product digunakan jika anda menawarkan produk2 lain seperti Up-sale
jika anda menawarkan produk lain yang kualitas lebih baik (tentu saja harga juga lebih mahal), atau
cross produk dimana anda bisa menawarkan produk lain yang bisa menjadi pelengkap, misalnya
jika produk yang anda tawarkan adalah kemeja, anda bisa menawarkan juga celana, jas atau produk
lain.
→ Product Short description adalah penggambaran singkat tentang produk, isikan secara singkat
informasi yang berkaitan dengan produk yang sekiranya diperlukan pengunjung agar tertarik untuk
membeli produk anda tersebut.
→ Di kotak product image, anda bisa mengunggah foto produk anda, yang perlu diperhatikan
adalah foto produk tidak harus artistik atau indah, namun harus jelas, yaitu produk ditampilkan
secara penuh, tidak terpotong, sudut pengambilan gambar yang konsisten sehingga rapi saat
ditampilkan di display produk serta sedapat mungkin hanya memuat gambar produk, jika
memungkinkan gunakan latar belakang polos.
→ Klik set product image

→ Klik unggah berkas jika ingin menambahkan gambar baru.

→ Pilih file gambar yang akan anda unggah.

→ setelah gambar terunggah, akan muncul di daftar pusraka gambar
 →

Tambahkan keterangan, diskripsi dan alt-text, kemudian klik set products image.

→ Di kotak product gallery, anda bisa menambahkan gambar produk dari sudut yang berbeda-beda
sehingga pengunjung bisa mendapatkan gambaran maksimal dari produk yang ditampilkan.
Caranya sama dengan menggunggah gambar produk.
→ Di kotak product Categories anda bisa memilih kategori untuk produk anda, satu produk bisa
saja memiliki lebih dari satu ketegori.
→ Setelah semua dirasa cukup, anda bisa meng-klik tombol terbitkan.

Menambahkan Variable Product

Untuk menambahkan variable product, anda terlebih dahulu harus mengatur atribut-atribut yang
akan digunakan dalam produk. Untuk menambah atribut anda bisa meng-klik menu product →
attributes, dan tampilannya kurang lebih sebagai berikut:

Misalkan kita ingin membuat produk sepatu dengan ukuran 29, 30 dan 31
→ Isikan nama atribut, misalnya ukuran
→ slug, isikan saja nama produk dengan huruf kecil.
→ Enable archives, jika anda ingin produk diarsipkan.
→ Type, pilih select, karena nantinya pengunjung akan memilih dari ukuran yang tersedia.
→ Default sort order untuk mengurutkan pilihan variasi, untuk ukuran pilih name numeric karena
menggunakan angka.
→ Klik add attributes
→ Dibelah kanan akan muncul daftar atribut yang anda buat, klik ikon roda/gear di ujung kanan.
→ Tampilan yang muncul:

Masukkan nama atribut, dalam hal ini nama ukuran.

→ Diskripsikan jika perlu.
→ Klik Add New Ukuran
→ Ulangi proses untuk setiap term/atau ukuran yang anda perlukan

Jika anda membutuhkan atribut lain, misalnya warna, anda bisa menambahkan atribut tersebut
dengan proses yang yang sama. Setelah semua atribut lengkap, anda bisa mulai menambahkan
produk. Kembali ke menu Product→ Add Product dan pilih variable product. Tampilan yang
muncul:

→ Untuk inventory, shipping dan linked products kurang lebih sama dengan simple products
→ Untuk Attributes, pilih atribut yang sudah anda buat dari menu drop-down dan klik add
→ Masukan value-value yang ada untuk produk anda. Jika anda ingin menambahkan semua value
yang ada (dalam hal ini value ukuran) anda bisa klik select all.
→ tandai box used for variation agar attribute tersebut bisa diproses di variasi produk
→ Jika anda memiliki atribut lain yang akan ditambahkan, misalnya warna, ulangi proses diatas
untuk atribut yang bersangkutan.
→ klik save attributes
→ klik variation, akan muncul tampilan:

→ Klik Create variation from all attributes dan klik go

→ Secara otomatis sistem akan membuat kombinasi variari berdasar attribute yang ada. Biasanya
akan muncul tanda bahwa sistem hanya bisa memproses sebanyak 50 variasi dalam sekali proses.
→ Jika variasi sudah selesai dibuat, maka akan muncul daftar, seperti pada gambar berikut:

→ Setiap item varian perlu di set data-datanya, arahkan kursor mouse ke sebelah kiri varian yang
akan di masukkan datanya dan klik, akan muncul form pengisian seperti berikut:
→ Masukkan data-data yang diperlukan, seperti pada penambahan simple products.
→ Lakukan proses yang sama untuk setiap varian.
→ Data masing-masing varian bisa berbeda-beda, misalnya jenis kue yang sama namun berbeda
ukuran tentu memiliki harga yang berbeda.
→ Jika sudah lengkap klik tombol save changes.
→ Di kolom paling kanan isikan gambar produk, galeri gambar produk, pilih kategori dan lain-lain
seperti pada simple produk.
→ Klik terbitkan jika dirasa sudah lengkap.