Cara membuat toko online menggunakan
WooCommerce (Tahap Satu)
1. Install template Mytile dari WooThemes
Silahkan anda down...
2. Setting template Mytile ( Logo Dan Favicon )
Untuk melakukan setting dasar template ini kita tidak perlu kemana – mana ...


Setelah itu anda akan melihat halaman seperti dibawah. Klik Select Files



Cari lokasi logo anda kemudian pilih logo ...


Setelah proses ipload logo selesai maka anda akan melihat halaman seperti pada gambar . Pilih
Full Size dan kemudian kl...
Logo anda akan terlihat seperti gambar berikut , kemudian hilangkan tanda centang pada baris



Text line

Lanjutkan deng...


Lihat toko online anda maka disana sudah terpasang logo beserta faviconnya.
Untuk settingan yang lain akan kita bahas pada pembahasan selanjutnya
3. Install plugin WooCommerce dan YITH magnifier

...
Agar lebih lebih mengerti maksud dari efek Zoom tersebut maka sebaiknya anda lihat demonya disini
Gimana ? lumayan keren b...


Pada posisi General settings nya, centanglah Enable YITH Magnifier danForcing Zoom Image
Sizes



Kemudian lihat pada ...
Jika kita lihat dari awal maka pekerjaan kita diatas langkahnya seperti gambar dibawah ini . Untuk
memperbesarnya klik kan...
Cukup sekian dulu tutorial yang kedua ini, pada kesempatan mendatang kita akan melanjutkan dengan
tutorial yang ketiga dan...
Cara membuat toko online menggunakan
WooCommerce (Tahap Tiga)

Cara Mensetting WooCommerce
Untuk melakukan setting dasar W...
nantinya bisa juga anda pakai untuk memberikan pesan cepat ke customer anda apabila ada
promo diskon, penawaran khusus ata...
- Force Secure Checkout = Centang ini jika anda mempunyai atau membeli atau menggunakan
fasilitas SSL untuk toko online an...
Setti
ng pada Style And Scripts


Centang saja semuanya
Setting pada Downloadable Products


Untuk yang ini tidak perlu ada setting . Namun jika anda berjualan produk digital se...
Jika kita lihat secara keseluruhan maka urut – urutannya adalah seperti gambar berikut ini.
Sampai disini dulu penjelasan cara membuat toko online menggunakan WooCommerce tahap tiga.
Cara membuat toko online menggunakan
WooCommerce (Tahap Empat)
Cara Mensetting Catalog
Berikut cara mensetting bagian kata...
Cara Mensetting Pages
Pada tab pages ini anda tidak perlu melakukan apa -apa, cukup anda ketahui
bahwasanya ketika anda su...
Cara Mensetting Inventory
Pada tabs Inventory ini kita akan setting agar customer tau ketersediaan stock barang
yang kita ...
3.

Notifications = Centang kedua opsi yang ada

4.

Notification Recipient = Masukkan / ketik email anda disana , gunanya...
Cara membuat toko online menggunakan
WooCommerce (Tahap Lima)
Cara mensetting tab Tax
Opsi Tax atau pajak ini sebetulnya t...
Untuk mengaktifkan fitur ongkos kirim ini silahkan anda melakukan hal berikut :
1.

Klik tab Shipping

2.

Pastikan anda b...
Selanjutnya kita akan menonaktifkan metode pengiriman gratis ini, caranya sebagai
berikut :
1.

Klik Free Shipping

2.

En...
4.

Pilih Indonesia

5.

Tax status = Pilih None

6.

Cost per Order = Masukkan tarif ongkos kirimnya disitu ( contoh : 20...
Nantinya jika dilihat pada halaman Checkout akan terlihat seperti pada gambar berikut

Semoga anda tidak mengalami kesulit...
Cara membuat toko online menggunakan
WooCommerce (Tahap Enam)
Pada tahap ke enam ini cara membuat toko online dengan WooCo...
Ada 2 sistem pembayaran yang aktif saat ini yakni :


Direct Bank Transfer



Cheque Payment

Karena kita hanya akan mem...
Setelah kita hilangkan sistem pembayaran melalui cheque maka kita akan
melanjutkannya mengedit sistem pembayaran via trans...
Kira – kira setelah anda edit akan terlihat seperti pada gambar dibawah
Jika sudah diganti maka ketika customer anda akan melakukan order, mereka akan
melihat pesan yang sudah kita buat diatas s...
Setelah customer anda mengklik Tombol Place Order mereka selanjutnya akan melihat
informasi rek BCA yang sudah kita masukk...
Proses setting tab Payment Gateways ini sudah selesai. Semoga tutorial ini bisa
bermanfaat bagi anda.
Cara membuat toko online menggunakan
WooCommerce (Tahap Tujuh)
Cara membuat toko online pada tahap tujuh ini akan membahas...
Jika anda tidak melakukan edit pada langkah no 5 dan no 7 maka yang terjadi jika
misalnya ada customer anda melakukan orde...
Customer :
Dan customer anda akan menerima email seperti dibawah ini
Setting pada New Order

•

Ini untuk email pemberitahuan ke Pemilik Toko jika ada orderan dari customer. Untuk
mendapatkan...
Set
elah anda klik tombol save changes maka jika ada orderan dari orang atau customer toko
online anda maka anda akan di b...
Setelah anda klik tombol save changes maka jika ada customer yang melakukan order di
toko online kita, secara otomatis set...
•

Setting pada Customer Invoice,Costumer Note,Reset Password dan juga New Account
Lakukan hal yang sama untuk Customer In...
Cara membuat toko online menggunakan
WooCommerce (Tahap Delapan)
Pada tahap delapan ini kita akan belajar atau mensetting ...
Cara setting pada Share This
1.

Klik Tab Integration

2.

Pilih Share This

3.

Masukkan ID Share This Publisher Anda ( D...
Akhi
rnya setting pada plugin WooCommerce ini sudah selesai semua, pada tahapan
mendatang kami akan melanjutkan dengan lan...
Cara membuat toko online menggunakan
WooCommerce (Tahap Sembilan)
Cara membuat toko online menggunakan WooCommerce tahap s...
Sekarang perhatikan baik- baik bagian yang kami tandai kotak merah diatas… untuk lebih
jelas lihat gambar dibawah.

Perhat...
Supaya anda lebih mengerti maksud dan tujuan penggunaan dari Product Type – Simple
Products lihat contoh riil yang kami am...
Mari kita mulai memposting produk untuk toko online kita.
1.

Tulis Judul Produk Anda

2.

Tulis Deskripsi full produk and...
Pada contoh ini , SKU kami tulis CAM123456 dan Harga kami tulis 4500000

Jika kita lihat ( Klik Preview ) maka anda kan me...
Jika anda ingin membuat promo dengan memberikan diskon pada harga produk tersebut
maka anda bisa langsung mengisi harga se...
Jika anda ingin membuat periode diskon produk anda tersebut maka yang perlu anda
lakukan adalah :


Klik Schedule



Pil...
Pada contoh ini kami membuat masa diskon dari tanggal 13 Agustus 2013 s/d 30 Agustus
2013

Setelah masa diskon berakhir ma...
Cara membuat toko online menggunakan
WooCommerce (Tahap Sepuluh)
Pada langkah ke sepuluh ini kita akan melanjutkan tutoria...
Keuntungan bagi pemilik toko online dan calon pembeli :


Pemilik toko online : Jika kebetulan produk yang anda jual ters...
SHIPPING


Klik Shipping

Pada bagian shipping ini berguna untuk mensetting atau memasukkan informasi
mengenai :
1.

Bera...
5.

Klik tombol Add New Shipping Class

Setelah itu Shipping Class baru untuk Kamera Digital akan muncul disebelah kanan
Buka di Tab baru web browser anda halaman WooCommerce Settings
1.

Klik WooCommerce

2.

Klik Settings

3.

Pilih Shipping...
Sekarang kembali lagi ke halaman Posting Product tadi .


Klik Save Draft terlebih dahulu pada produk Nikon D5200 DSLR Ca...


Lihat lagi ke bagian Shipping , sekarang Shipping Class yang kita buat tersebut akan berada
disana

Untuk melihat bagai...
Lihat Halaman Preview Produk tersebut
1.

Klik tombol Add to Chart ( tombol warna abu-abu gelap )

2.

Sesaat kemudian aka...
Lihat pada Shipping > Flat Rate … disana langsung tertera ongkos kirim untuk kamera
digital dengan menggunakan Shipping Cl...
Cara membuat toko online menggunakan
WooCommerce (Tahap Sebelas)
Cara membuat toko online : Pada tahap sepuluh kemarin kit...
Jika pada toko online yang kita buat sekarang ini, nantinya akan terlihat seperti berikut
ini :
Mungkin saat ini Linked Products belum bisa langsung anda praktekkan karena anda
belum memposting produk – produk di toko ...
Jika dilihat dari halaman posting produk tersebut maka akan terlihat seperti gambar
berikut
Cara memasukkan produk kedalam Up-Sells


Klik pada text area Up-Sells



Ketik nama produk yang ingin ditampilkan ( Seb...
Cross-Sells
Cross Sells ini mempunyai fungsi yang sama dengan Up-Sells, namun Cross Sells akan
tampil pada halaman Cart. K...
Cara memasukkan produk kedalam Cross-Sells


Klik pada Text area Cross-Sells



Ketik nama produk yang ingin ditampilkan...


Pilih Produknya ( salah satu )

Grouping
Grouping ini akan kami jelaskan pada posting produk dengan Products Data – Gro...
Cara membuat toko online menggunakan
WooCommerce (Tahap Duabelas)
Cara membuat toko online dengan WooCommerce tahap duabel...


Anda akan melihat tampilan seperti gambar dibawah ini

Karena pada contoh ini kami akan memposting sebuah produk kamera...
Untuk langkah berikutnya akan kami sampaikan pada kesempatan mendatang, Mohon
untuk dipahami tehnik memposting produk deng...
Cara membuat toko online menggunakan
WooCommerce (Tahap Tigabelas)
Tidak terasa tutorial cara membuat toko online dengan m...
PRODUCT SHORT DESCRIPTION
Tulis deskripsi singkat mengenai produk anda tersebut disini. Sebisa mungkin jangan
terlalu panj...
Sekarang lihat ke bagian panel sebelah kanan. Lihat pada bagian
berikut :
1.

Product Categories

2.

Product Tags

3.

Pr...
Untuk Product Categories dan Product Tags ( Point 1 dan 2 ) tentunya anda sudah paham
maksud dan cara penggunaannya. Sedan...
Mari kita mulai dengan mengupload image atau gambar untuk Product
Gallery terlebih dahulu


Klik Add product gallery imag...


Setelah proses upload gambar sudah selesai maka lanjutkan dengan mengklik tombol Add
to gallery



Setelah itu anda ak...
Jika anda mengupload 4 buah gambar maka anda akan melihat 4 buah gambar juga
disana.

Mari kita lanjutkan dengan menguploa...
Proses memposting product dengan menggunakan product data – simple product sudah
selesai. Silahkan klik tombol publish unt...
Cara membuat toko online menggunakan
WooCommerce (Tahap Empatbelas)
Pada tahap empat belas : cara membuat toko online deng...
Kemudian pada halaman Homepage tersebut lanjutkan dengan langkah berikut :
1.

Centang display recent products

2.

Masukk...
Pada gambar diatas masih terlihat postingan blog dibawah produk toko online kita . Nah
untuk menghilangkan postingan terse...
Sekarang tampilan halaman depan toko online kita sudah menampilkan produk saja .
Lihat pada gambar berikut ini.
Live Demo

Pada contoh diatas hanya nampak 4 buah produk , karena sampai saat ini kami hanya
membuat atau memposting produ...
Cara membuat toko online menggunakan
WooCommerce (Tahap Limabelas)
Setelah kita kemarin membahas mengenai menempatkan prod...
Setelah kita persiapkan sebuah gambar untuk banner kita maka yang perlu anda lakukan
adalah :
1.

Klik Mystile

2.

Klik T...
Cari image banner tersebut diPC atau laptop anda dan mulailah proses upload image
tersebut. Setelah imagenya sudah teruplo...
Setelah itu banner yang ingin kita pasang di toko online kita sudah terlihat seperti gambar
dibawah.
1.

Hapus tulisan pad...
Sekarang lihat toko online anda maka di toko online anda tersebut sudah terpasang
sebuah banner yang besar disana. Selamat...
Sampai jumpa lagi pada tutorial selanjutnya.

Cara membuat toko online menggunakan
woocommerce ( tahap enam belas )
Cara m...
Kita akan merubah warna themes Mystyle tersebut dari warna orange ( default.css ) ke
warna hijau ( green.css ). Mari kita ...
Setelah anda pilih warna kesukaan anda maka lanjutkan dengan mengklik tombol Save
All Changes

Tunggu beberapa saat sampai...
Ooops… kita ada sedikit masalah pada big banner, lihat gambar dibawah.

Pada banner tersebut ada tulisan ( warna putih ) d...
Untuk menghapusnya secara sementara anda bisa mengulangi langkah yang ada pada
tahap lima belas kemarin
Namun jika nanti a...
Lihat ke halaman bawah / scoll mouse anda ke bawah, cari theme-options.php kemudian
setelah ketemu klik langsung untuk men...
Apa langkah selanjutnya ? Sebelum kami lanjutkan ada baiknya anda mengerti halaman
apa yang sebenarnya yang akan kita edit...
Lihat pada area yang sudah kami tandai dengan warna merah diatas. Tulisan itulah yang
akan kita hilangkan secara permanen ...
1. Klik Ctrl + F maka akan muncul pencarian cepat. Lihat pada gambar sebelah pojok kiri
bawah ( ada tanda panah merah )

2...
Hapus kedua tulisan tersebut , Hanya tulisan tersebut saja jangan dihapus juga tanda
petik diatas ( ‘ ) yang berdempetan d...
Setelah itu anda akan melihat notifikasi update file theme-options.php anda sudah sukses.

Coba anda lihat toko online and...
Mulai saat ini anda tidak perlu kawatir lagi tulisan itu akan muncul diatas banner toko
online anda jika anda mengedit ata...
Cara membuat toko online menggunakan
woocommerce (tahap tujuh belas)
Hari ini mari kita lanjutkan lagi proses mengkustomis...
Pada Display Options ini yang akan kita lakukan adalah sebagai berikut :
1.

Post / Page comments : Pilih Post only

2.

P...
Styling Options
Pada styling option ini anda bisa mengkustomisasi background toko online kita dan juga
mungkostomisasi war...
Silahkan anda bereksperimen sendiri dengan kedua menu diatas. Jika ada kesulitan
silahkan bertanya pada kolom komentar. Sa...
Cara membuat toko online menggunakan
WooCommerce (Tahap Delapan Belas)
Pada tahapan ke delapan belas ini kita akan mempela...
Layout Options
Pada bagian layout ini kita bisa merubah tampilan kerangka toko online kita dari yang full
page menjadi di ...
Maka setelah anda simpan , tampilan toko online anda terlihat lebih rapi didalam box.
Cara membuat toko online menggunakan
WooCommerce (Tahap Sembilan Belas)
Pada tahap sembilan belas ini, cara membuat toko o...
1.
2.

Pilih Add New

3.

Pastikan anda pada posisi Search

4.

Ketik Chat

5.

•

Klik Plugins

Klik tombol Search Plugin...
•

3. Aktifkan Plugins
Register ClickDesk Account
Setelah anda mengaktifkan plugin ClickDesk diatas maka selanjutnya kita akan mendaftar
sebuah a...
•

3. Buatlah sebuah akun ClickDesk
Untuk membuat atau mendaftar akun ClickDesk caranya sangat mudah sekali. Anda bisa
men...
•

4. Login dengan Akun Gmail anda
Bukalah tab baru di webbrowser anda dan bukalah sign in ke akun gmail anda. Setelah
ber...
•

5. Buatlah nama Agent untuk operator Customer Support toko online anda
Lihat gambar berikut dan isilah sama persis sepe...
•

6. Selanjutnya setelah sukses membuat agent toko online anda maka anda akan
melihat halaman seperti gambar berikut
Kustomisasi Profile Agent
Pada gambar diatas terlihat bahwasanya Agent toko online kita belum terdapat photo, jadi
selanju...
IM Network : Untuk network pilih Google Talk or Google Appa/Mail. Kemudian masukkan
username anda, jika email anda beralam...
Phone : Untuk IM/ Country pilih saja Skype ( jika anda punya akun Skype) jika belum
maka isi saja kolom ID/ Number dengan ...
Menambahkan Photo Agent untuk homepage
Untuk mempercantik tampilan ClickDesk di toko online kita maka kita perlu untuk
men...
•

9. Klik Tab Live Chat
10. Setelah terbuka anda akan melihat tampilan seperti gambar berikut

•

1.
2.

Theme = Pilih Social ( Medium )

3.

Posi...
•

12. Menambahkan akun Twitter dan Facebook anda
Anda bisa menambahkan akun Twitter dan Facebook anda dengan mengklik tab...
Jika dilihat di Toko online kita maka anda akan melihatnya seperti berikut ini.
Twitter
Klik Icon Twitter dan Upppss………. !...
Mari kita bereskan permasalahan diatas, lihat kembali ke clickdesk dashboard anda. Klik
Link Grand Access .
Maka akan muncul Pop up untuk meng – Authorize APP. Klik tombol Authorize APP
tersebut

Setelah Proses Authorize APP Twitt...
Namun yang perlu anda lakukan adalah Klik Tombol Save Changes sekali lagi untuk
menyimpan apa yang sudah kita lakukan diat...
Facebook
Setelah kita lihat Twitternya mari kita lihat juga Facebooknya.
Akhirnya proses Install dan mengkustomisasi ClickDesk sudah selesai dan siap untuk kita
pergunakan, Semoga penjelasan kami...
Cara membuat toko online menggunakan
WooCommerce (Tahap Dua Puluh)
Cara membuat toko online tahap dua puluh ini akan memba...
Lihat Live Demo

Ada 3 buah Sticky bar yang bisa anda pakai untuk keperluan ini:
Silahkan anda pilih dari tiga Sticky Bar ...
Dalam tutorial ini kami akan memakai yang Sticky Bar yang pertama yakni WordPress
Notification Bar. Berikut langkah yang b...
•

3. Setelah selesai diinstall lanjutkan dengan mengaktifkannya

•

4. Setelah anda aktifkan maka lanjutkan dengan mengkl...
5. Pada halaman settings ini kita akan melakukan beberapa hal berikut

•

1.

Centang untuk menampilkan Sticky Bar tersebu...
6.

Background color. Dalam contoh ini kami ingin warna hijau yang sama dengan warna hijau
dari ClickDesk yang sudah kita ...
Cara membuat toko online menggunakan
WooCommerce (Tahap Dua Puluh Satu)
Hari ini kita akan melanjutkan tutorial cara membu...
Kategori Produk
Kami akan membuat 4 buah kategori produk sebagai contoh saja supaya custom menu
kita kali ini bisa sedikit...
Silahkan menuju Theme Options Mystile anda. kemudian lanjutkan dengan hal berikut ini
1.

Klik Contact Page

2.

Pilih Con...
Jika anda tidak melakukan langkah ini terlebih dahulu dan anda langsung melakukan Add
New Page untuk halaman Contact maka ...
Mari kita lihat terlebih dahulu bagaimana penampilan toko online kita setelah kita
menambahkan 3 buah halaman static page ...
1. Mari kita menuju menu products

•

1.

Klik Products

2.

Pilih Categories
2. Kemudian mulailah membuat kategori produk toko online anda

•

1.

Name = Tulis nama kategori produk anda , misal : Baj...
•

3. Ulangi langkah diatas untuk membuat kategori produk yang lainnya, setelah selesai
maka akan terlihat seperti pada ga...
•

5. Setelah posisi kursor anda sudah berada dibawah nama kategori produk , pastikan
anda melihat tampilan seperti gambar...
•

7. Pastekan Link url produk kategori anda tersebut di Notepad. Ulagi langkah
tersebut untuk mendapatkan link url katego...
Link diatas akan berguna pada saat kita akan membuat custom menu. Setelah selesai
semua maka selanjutnya kita akan menempa...
2. Setelah terbuka lanjutkan dengan langkah berikut

•

1.

Tulis nama menu anda , Misal : Menu Utama

2.

Klik tombol Cre...
2.

•

Klik tombol Add To Menu

4. Selanjutnya anda akan melihat calon menu utama anda tersebut terlihat seperti
gambar be...
5. Sekarang kita akan memasukkan Link URL produk kategori ke menu utama kita

•

1.

Klik Links

2.

Masukan satu per satu...
Coba anda perhatikan bagian bawah gambar berikut , disana anda akan melihat
bahwasanya 4 buah kategori produk sudah berada...
•

7. Sekarang susunlah menu-menu tersebut seperti gambar dibawah ini
Untuk bisa menyusun menunya seperti dibawah ini, and...
8. Setelah selesai lanjutkan dengan langkah dibawah

•

1.

Centang Primary Menu

2.

Klik tombol Save Menu
•

9. Sekarang lihat Menu di toko online anda maka anda akan melihat seperti gambar
berikut

•

10. Proses custom menu tok...
Cara membuat toko online menggunakan
WooCommerce (Tahap Dua Puluh Dua)
Hari ini kita akan melanjutkan tutorial mengenai ca...
Let’s Start ..
1. Silahkan anda menuju Halaman Add New product

•

1.

Klik Products

2.

Pilih Add Product

2. Setelah ha...
Sampai disini pastikan sudah benar langkah anda terlebih dahulu, jika sudah benar
silahkan lanjut lagi ke langkah no 3 dib...
Jika kita preview saat ini maka anda akan melihat tampilan produk anda tersebut serupa
dengan gambar berikut ini
Pastikan anda melihat hal serupa dengan contoh tersebut diatas. Seperti yang sudah
kami terangkan diatas bahwa featured im...
•

5. Sekarang kita beralih ke Inventory
Pada bagian Inventory ini anda cukup mencentang pilihan manage stocks saja

•

6....
7. Setelah itu lanjutkan ke Linked Products

•

Pada tutorial ini kami tidak mensetting linked products karena kami tidak ...


Setelah itu anda akan melihat tampilan seperti pada gambar berikut ini

Kemudian lanjutkan dengan langkah berikut ini
1...
Setelah anda klik tombol Save attributes dan proses penyimpanannya selesai maka anda
tidak akan melihat ada perubahan sama...
9. Pada bagian Advanced ini anda tidak usah mengisi apapun jadi silahkan lewati

•

saja
Pastikan satu hal saja disana bah...
Setelah itu anda akan melihat tampilan anda seperti berikut ini

Sekarang kita isi produk dengan Warna yang pertama yakni ...
Mari kita mulai dengan yang pertama ( Warna Kaos Ungu )
1.

Pilih Warna Ungu

2.

Upload atau pasang gambar kaos warna ung...
Mari kita lanjutkan dengan yang kedua ( Warna Kaos Putih )
1.

Pilih Warna Putih

2.

Upload atau pasang gambar kaos warna...
Mari kita lanjutkan dengan yang ketiga ( Warna Kaos Merah )
1.

Pilih Warna Merah

2.

Upload atau pasang gambar kaos warn...
Mari kita lanjutkan dengan yang keempat / terakhir ( Warna Kaos
Hitam )
1.

Pilih Warna Hitam

2.

Upload atau pasang gamb...
4.

Tulis Harga untuk Kaos Ungu tersebut Misal : 130000 ( seratus tiga puluh ribu ) ingat
penulisan angkanya tidak usah pa...
Setelah anda klik tombol Preview maka anda akan melihat tampilan produk anda seperti
pada gambar berikut ini. Silahkan cob...
Cara membuat toko online menggunakan
WooCommerce (Tahap Dua Puluh Tiga)
Pada tahap ke dua puluh tiga ini , cara membuat to...
Warna iPhone 5 : Putih

Harga iPhone 5 ada tiga :


iPhone 5 16GB

Rp. 7.500.000,-



iPhone 5 32GB

Rp. 8.500.000,-


...
Ada 4 langkah atau 4 kali proses memposting produk jika kita memakai Grouped Product
untuk iPhone 5 diatas
1.

Memposting ...
•

3. Upload Gambar untuk Featured Image dan Product Gallery
Silahkan upload gambar untuk product gallery dan juga gambar ...
•

4. Pada Product Data pilihlah Grouped Products
Disini anda harus memilih Product datanya ” Grouped Product ” dan jangan...
Proses memposting produk induknya sudah selesai , lantas bagaimana dengan harga dan
lainnya ? Kenapa produk induknya hanya...
Yang berbeda nantinya adalah :


Judul Produknya : Kalau yang pertama adalah iPhone 5 16 GB , yang kedua iPhone 5 32
GB d...
•

3. Product gallery dan featured image biarkan kosong

•

4. Pada area Product data lakukan hal berikut ini [ General ]
...
4. Lanjutkan ke bagian Inventory

•

Jika anda ingin menampilkan jumlah stok produk anda tersebut maka lakukan
1.
2.

•

C...
•

5. Lanjut ke Linked Products
Pada bagian Linked Products ini peranan Parent Product atau Produk Induk mulai
muncul, And...
7. Alihkan pandangan anda ke pojok kanan atas

•

Lihat pada area Preview dan tombol Pusblish. Disana anda akan melihat Ca...
•

9. Langkah berikutnya adalah mempublish produk turunan pertama kita

•

10. Ulangi langkah diatas untuk memposting prod...
Proses memposting produk dengan menggunakan Produk Data ” Grouped Product”
sudah selesai , semoga anda bisa memahaminya de...
Cara membuat toko online menggunakan
WooCommerce (Tahap Dua Puluh Empat)
Salah satu permasalahan yang sangat penting dalam...
Opsi pengiriman pada produk yang tidak menggunakan Shipping Class

Pada gambar diatas merupakan penerapan opsi pengiriman ...
Opsi pengiriman pada produk yang menggunakan Shipping Class

Pada tutorial sebelumnya kita sering membahas mengenai biaya ...
1. Silahkan anda login terlebih dahulu ke dashboard toko online anda dan kemudian

•

lakukan langkah dibawah ini
1.
2.

P...
Nantinya dihalaman Cart toko online anda Menthod Title itu akan terlihat seperti pada
gambar berikut

•

3. Menambahkan bi...
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Upcoming SlideShare
Loading in...5
×

Cara membuat toko online menggunakan woo commerce

18,976

Published on

3 Comments
7 Likes
Statistics
Notes
  • ini kenapa ya gan?? Lewat ke baris perkakas baju-online 0 Baru Apa kabar, admin Log Keluar Memasang Plugin: WooCommerce - excelling eCommerce 2.2.10 Mengunduh paket instalasi dari http://downloads.wordpress.org/plugin/woocommerce.2.2.10.zip… Fatal error: Maximum execution time of 60 seconds exceeded in E:\xampp\htdocs\toko-online\wp-includes\class-http.php on line 1088 Fatal error: Maximum execution time of 60 seconds exceeded in E:\xampp\htdocs\toko-online\wp-includes\wp-db.php on line 623
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Ini Kenapa ya gan
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Artikel yg sangat bermanfaat, sy pelajari untuk menyempurnakan toko online sy http://www.tokodiscount.net/ ada yg siap dropship bisa kirim data barang ke tokodiscount@yahoo.co.id
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
18,976
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2,117
Comments
3
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "Cara membuat toko online menggunakan woo commerce"

  1. 1. Cara membuat toko online menggunakan WooCommerce (Tahap Satu) 1. Install template Mytile dari WooThemes Silahkan anda download terlebih dahulu templatenya di sini . Kemudian install template tersebut dan aktifkan segera.  Cara install template wordpress Setelah anda aktifkan template tersebut maka anda akan melihat halaman seperti gambar dibawah ini. Dan jika anda lihat toko online anda sekarang ini maka akan terlihat seperti berikut ini.
  2. 2. 2. Setting template Mytile ( Logo Dan Favicon ) Untuk melakukan setting dasar template ini kita tidak perlu kemana – mana dan jangan klik ke halaman lainnya, fokus saja terlebih dahulu di halaman ini. Lakukan setting dasar berikut :  Theme Stylesheet ini untuk merubah skin dari template Mystile tersebut, ada banyak pilihan disana ada bisa mencoba – coba skin apa yang kira -kira anda sukai.  Custom logo adalah untuk mengganti logo untuk toko online kita. ( uk. 200 x 100 px )  Custom Favicon ( uk. 16 x 16 px ) Cara mengganti logonya dengan logo kita sendiri adalah sbb :  Klik tombol Upload pada Custom Logo
  3. 3.  Setelah itu anda akan melihat halaman seperti dibawah. Klik Select Files  Cari lokasi logo anda kemudian pilih logo anda dan dan klik open
  4. 4.  Setelah proses ipload logo selesai maka anda akan melihat halaman seperti pada gambar . Pilih Full Size dan kemudian klik tombol Use this image
  5. 5. Logo anda akan terlihat seperti gambar berikut , kemudian hilangkan tanda centang pada baris  Text line Lanjutkan dengan mengupload Favicon ( uk. 16 x 16 px ) dalam bentuk png file.   Lakukan hal yang sama seperti mengupload logo diatas. Setelah selesai maka selanjutnya kita simpan pekerjaan kita diatas dengan mengeklik tombol Save All Changes
  6. 6.  Lihat toko online anda maka disana sudah terpasang logo beserta faviconnya.
  7. 7. Untuk settingan yang lain akan kita bahas pada pembahasan selanjutnya 3. Install plugin WooCommerce dan YITH magnifier   Download WooCommerce Plugins di sini  Setelah anda download, install plugin tersebut kemudian aktifkan. Lihat artikelCara install plugin di WordPress jika anda belum tau caranya. Setelah itu langsung aktifkan plugin tersebut. Setelah anda aktifkan maka anda akan melihat halaman seperti pada gambar berikut. Kemudian klik tombol Install WooCommerce Pages.  Setelah anda aktifkan maka selanjutnya kita akan menginstall sebuah plugins lagi kemudian langsung anda aktifkan plugin tersebut, nama pluginnya YITH WooCommerce Zoom Magnifier Kegunaan dari plugin ini adalah memberikan efek Zoom pada image produk toko online kita, jadi ketika kursor mouse diarahkan diatas image produk yang kita jual maka plugin tersebut akan segera bekerja sebagaimana fungsinya. Anda bisa mendownload plugin tersebut di sini
  8. 8. Agar lebih lebih mengerti maksud dari efek Zoom tersebut maka sebaiknya anda lihat demonya disini Gimana ? lumayan keren bukan ? untuk ukuran sebuah plugin gratisan maka YITH merupakan solusi yang terbaik untuk kita pakai guna mempercantik toko online kita dan terlihat lebih profesional. Sementara sampai disini dulu tutorial mengenai cara membuat toko online menggunakan WooCommerce tahap pertama ini. Nanti kita akan melanjutkannya lagi dengan tahapan kedua dan seterusnya. Semoga anda bisa memahami tutorial mudah diatas tanpa ada kendala yang berarti. Cara membuat toko online menggunakan WooCommerce (Tahap Dua) Cara mensetting YITH Magnifier  Klik Plugins  Klik Installed Plugins  Klik Settings pada YITH Magnifier
  9. 9.  Pada posisi General settings nya, centanglah Enable YITH Magnifier danForcing Zoom Image Sizes  Kemudian lihat pada bagian Magnifier Settings. Lakukan persis seperti gambar berikut Lihat lagi kebawahnya pada bagian Slider Settings, lakukan lagi persis seperti gambar dibawah in dan diakhiri dengan menyimpan pekerjaan kita dengan mengklik tombol
  10. 10. Jika kita lihat dari awal maka pekerjaan kita diatas langkahnya seperti gambar dibawah ini . Untuk memperbesarnya klik kanan pada gambar kemudian klik View image
  11. 11. Cukup sekian dulu tutorial yang kedua ini, pada kesempatan mendatang kita akan melanjutkan dengan tutorial yang ketiga dan seterusnya. Tetap semangat dalam proses belajar ini dan yakinlah kepada diri anda bahwasanya anda mampu dan bisa membuat toko online anda dengan baik dan benar.
  12. 12. Cara membuat toko online menggunakan WooCommerce (Tahap Tiga) Cara Mensetting WooCommerce Untuk melakukan setting dasar WooCommerce ini maka anda bisa langsung menuju WooCommerce > Settings . Setelah terbuka halaman settings tersebut maka anda akan melihat 10 Tabs yang harus kita setting disana : 1. General 2. Catalog 3. Pages 4. Inventory 5. Tax 6. Shipping 7. Payment Gateway 8. Emails 9. Integration 10. Magnifier ( Sudah kita Setting Pada Tahap Dua ) Cara mensetting General Ada 4 bagian pada tab General ini yang harus kita pahami cara mensettingnya. Setting pada General Options  Base Location = Pilih lokasi anda saat ini atau lokasi toko online anda. Dalam contoh ini karena lokasi saya berada di Riau maka saya pilih Indonesia – Riau  Currency = Jika target anda adalah customer dari Indonesia maka pilih Indonesia Rupiah (Rp) namun jika targetnya adalah International maka pilih Dollar  Allowed Countries = Secara default anda akan melihat All Countries disana. Karena target yang kita bidik disini adalah orang Indonesia maka kita pilih Specific Countries dan kemudian akan muncul pilihan dibawahnya  Specific Countries = Cari negara Indonesia  Store Notice = Jika ini anda centang maka akan keluar Sticky Bar diatas toko online anda. Gunanya untuk memberitahu kepada orang bahwasanya toko ini hanya untuk Demo atau
  13. 13. nantinya bisa juga anda pakai untuk memberikan pesan cepat ke customer anda apabila ada promo diskon, penawaran khusus atau Kupon Code Agar lebih jelas silahkan perhatikan gambar dibawah ini Setting Pada Cart, Checkout dan Accounts  Coupons = Centang ini jika anda ingin menggunakan fasilitas kupon belanja untuk toko online anda jika tidak ingin memakai kupon maka tidak perlu anda centang.  Checkout = ada 3 opsi di sini, berikut penjelasannya - Enable Guest Checkout = Centang ini jika anda mengijinkan orang berbelanja di toko online anda tanpa melakukan registrasi terlebih dahulu. Misalnya saya berkunjung ke toko online anda dan saya ingin membeli produk yang anda jual tapi saya males untuk mendaftar, karena anda mencentang opsi ini maka saya masih bisa berbelanja di toko online anda tanpa harus registrasi terlebih dahulu. - Enable customer note field on Checkout = Jika anda centang ini maka ketika customer anda akan melakukan Checkout mereka bisa menambahkan pesan singkat kepada anda sebagai pemilik toko online. Misalnya isi pesannya : ” tolong sms kalau barang sudah dikirim ya “. Posisi note field tersebut akan terlihat di halaman Checkout seperti gambar dibawah ini.
  14. 14. - Force Secure Checkout = Centang ini jika anda mempunyai atau membeli atau menggunakan fasilitas SSL untuk toko online anda (https) namun karena kita akan menggunakan direct transfer maka anda tidak perlu mencentang ini dan tidak perlu membeli SSL  Registration = Centang saja semua pilihan disitu  Customer Account = Centang pilihan pertama dan ke tiga, untuk yang kedua jangan dicentang. Gunanya tidak dicentang adalah jika customer anda membuat akun ditoko online anda dan dia sudah mengumpulkan barang yang akan dibeli ditoko online anda namun belum akan membeli pada saat itu juga maka ketika mereka kembali login ke toko online anda barang yang sudah mereka rencana beli tidak hilang dan tidak perlu mencari lagi.
  15. 15. Setti ng pada Style And Scripts  Centang saja semuanya
  16. 16. Setting pada Downloadable Products  Untuk yang ini tidak perlu ada setting . Namun jika anda berjualan produk digital seperti ebook, software, template dll maka anda perlu mensetting ini
  17. 17. Jika kita lihat secara keseluruhan maka urut – urutannya adalah seperti gambar berikut ini.
  18. 18. Sampai disini dulu penjelasan cara membuat toko online menggunakan WooCommerce tahap tiga.
  19. 19. Cara membuat toko online menggunakan WooCommerce (Tahap Empat) Cara Mensetting Catalog Berikut cara mensetting bagian katalognya, perhatikan gambar berikut dan lakukan hal yang sama seperti yang kami lakukan. 1. Pastikan anda memilih tab Catalog 2. Default Product Sorting = Pilih Default sorting 3. Shop Page Display = Pilih Show Both 4. Default Category Display = Pilih Show products 5. Add to Cart = Centang pada enable AJAX add to cart buttons on archives 6. Product Fields = Centang semuanya 7. Weight unit = Pilih Kg 8. Dimention unit = Pilih Cm 9. Product ratings = Centang semuanya 10. Currency Position = Left 11. Thousand separator = Ganti dengan . ( Titik ) 12. Decimal separator = Gantin dengan , ( Koma ) 13. Trailling Zeros = Pastikan anda mencentang Remove zeros 14. Image Options = Centang semua 15. Klik tombol Save Changes
  20. 20. Cara Mensetting Pages Pada tab pages ini anda tidak perlu melakukan apa -apa, cukup anda ketahui bahwasanya ketika anda sudah membuat static page yang berisikan Peraturan berbelanja di toko online anda mana nantinya anda bisa menaruh pada Term Page ID. Saat ini kami belum membuat static page mengenai peraturan berbelanja maka kami akan mengkosongkan ini terlebih dahulu. Namun jika anda ingin membuatnya sekarang maka setelah static page anda ter-publish anda bisa memilihnya disitu dan kemudian klik tombol Save Changes. Untuk membuat Static page anda bisa memilih Pages > Add New . Beri judul Peraturan Belanja / Tata Cara Berbelanja / apa saja terserah anda. Nantinya judul tersebut akan muncul di pilihan Term Page ID.
  21. 21. Cara Mensetting Inventory Pada tabs Inventory ini kita akan setting agar customer tau ketersediaan stock barang yang kita jual kepada customer kita. Tujuannya jelas agar customer yakin produk yang akan mereka beli stoknya ada, tinggal sedikit atau sedang kosong. 1. Pastikan anda berada pada tab Inventory 2. Manage Stock = Centang enable Stock Management. Berguna untuk menampilkan opsi ketersediaan stok barang yang kita jual pada customer
  22. 22. 3. Notifications = Centang kedua opsi yang ada 4. Notification Recipient = Masukkan / ketik email anda disana , gunanya untuk menerima pemberitahuan jika ada order 5. Low Stock Threshold = 2 6. Out Off Stock Threshold = 0 7. Stock Display Format = Always Show Stock 8. Klik Save Changes Untuk tahap keempat ini cukup sekian dulu, pada kesempatan mendatang kita akan melanjutkan dengan tahapan berikutnya.
  23. 23. Cara membuat toko online menggunakan WooCommerce (Tahap Lima) Cara mensetting tab Tax Opsi Tax atau pajak ini sebetulnya tidak begitu perlu untuk pemilik online yang masih pemula dan belum beromset besar. Jadi untuk bagian Tax ini silahkan anda lewati saja tidak perlu anda setting apapun. Cara mensetting tab Shipping Pada tab shipping merupakan tempat untuk mengaktifkan biaya pengiriman atau ongkos kirim pada produk yang kita jual di toko online kita.
  24. 24. Untuk mengaktifkan fitur ongkos kirim ini silahkan anda melakukan hal berikut : 1. Klik tab Shipping 2. Pastikan anda berada pada Shipping options 3. Shipping Calculations = Centang Enable shipping dan 4. Centang juga Enable the shipping calculator 5. Shipping method display = Radio buttons 6. Shipping Destination = Ship to billing address by default 7. Pada shipping methods biarkan saja terlebih dahulu apa adanya 8. Klik tombol Save Changes Setelah anda save maka sekarang kita fokus ke bagian Shipping Methods, secara default maka Free Shipping /Ongkos kirim gratis akan aktif di toko online anda. Lihat gambar dibawah agar anda mengerti maksu kami tersebut
  25. 25. Selanjutnya kita akan menonaktifkan metode pengiriman gratis ini, caranya sebagai berikut : 1. Klik Free Shipping 2. Enable/Disable = Hilangkan tanda centang yang ada disana 3. Klik tombol Save Changes Selanjutnya kita akan mengaktifkan salah satu metode pengiriman yakni Flat Rate, jadi pengiriman dengan tujuan kemana saja tarifnya sama. Ini contoh saja, jika anda ingin mengaktifkan tarif yang lain ( misalnya untuk pengiriman keluar negeri atau keluar pulau ) disana masih ada pilihan yang bisa anda aktifkan juga. 1. Klik Flat Rate 2. Enable/Disable = Centang Enable this shipping method 3. Availability = Specific Countries
  26. 26. 4. Pilih Indonesia 5. Tax status = Pilih None 6. Cost per Order = Masukkan tarif ongkos kirimnya disitu ( contoh : 20000 ) penulisan angka tidak usah pakai titik. 7. Klik tombol Save Changes
  27. 27. Nantinya jika dilihat pada halaman Checkout akan terlihat seperti pada gambar berikut Semoga anda tidak mengalami kesulitan dalam menerapkan langkah kelima ini.
  28. 28. Cara membuat toko online menggunakan WooCommerce (Tahap Enam) Pada tahap ke enam ini cara membuat toko online dengan WooCommerce akan menjelaskan tentang bagaimana langkah selanjutnya dalam mensetting plugin WooCommerce melalui dashboard toko online wordpress anda. Harap diperhatikan dengan seksama dan juga dipahami agar anda tidak kebingungan di kemudian hari. Ada 3 tab lagi yang belum kita setting pada tahap sebelumnya : 1. Payment Gateways 2. Email 3. Integration Untuk tahap ke enam ini kita akan melakukan setting pada Payment Gateways saja terlebih dahulu. Untuk Email dan Integration akan kami bahas pada tahap selanjutnya. Cara Mensetting Payment Gateways Untuk payment gateways ini karena kita fokus untuk membuat toko online dengan target cutomer dari Indonesia maka kita hanya akan menggunakan sistem pembayaran Direct Bank Transfer saja atau pembayaran via transfer bank. Ketika kita buka tab Payment Gateways maka secara default anda akan melihat halaman seperti dibawah ini
  29. 29. Ada 2 sistem pembayaran yang aktif saat ini yakni :  Direct Bank Transfer  Cheque Payment Karena kita hanya akan memakai sistem Direct Bank Transfer maka kita akan menonaktifkan sistem pembayaran melalui Cheque. Untuk menonaktifkan Cheque Payment silahkan ikuti langkah berikut ini : 1. Klik Cheque 2. Hilangkan tanda centang 3. Klik Save Changes
  30. 30. Setelah kita hilangkan sistem pembayaran melalui cheque maka kita akan melanjutkannya mengedit sistem pembayaran via transfer yang kita akan pergunakan. Kita akan memasukkan informasi Rekening Utama yang akan kita jadikan tempat tujuan transfer uang dari customer kita. Jika anda mempunyai banyak Rekening Bank maka anda tidak melakukan hal ini juga tidak masalah. Dengan kata lain anda bisa melakukan hal ini namun anda juga tidak perlu melakukannya ( tidak wajib ) 1. Klik BACS 2. Title = Ganti tulisan Direct Bank Transfer dengan Pembayaran Via Transfer 3. Cutomer Message = Ganti dengan pesan dalam bahasa Indonesia. Contoh :Mohon lakukan pembayaran melalui transfer ke rekening BCA kami segera setelah anda melakukan order. Pengiriman barang yang anda pesan akan kami lakukan setelah uang yang anda transfer telah kami terima dan kami verifikasi. Jika anda tidak mempunyai rekening bank selain bank BCA maka ada bisa mentransfer uang pembayaran tersebut ke rekening bank kami yang lainnya ( Lihat halaman Cara Berbelanja ) 4. Account Name = Isi dengan nama pemilik rek yang akan anda pergunakan 5. Account Number = Isi dengan no rekening anda 6. Bank Name = Isi nama bank anda , dalam contoh ini kami menggunakan BCA 7. Klik Save Changes
  31. 31. Kira – kira setelah anda edit akan terlihat seperti pada gambar dibawah
  32. 32. Jika sudah diganti maka ketika customer anda akan melakukan order, mereka akan melihat pesan yang sudah kita buat diatas seperti gambar berikut pada saat melakukan proses checkout.
  33. 33. Setelah customer anda mengklik Tombol Place Order mereka selanjutnya akan melihat informasi rek BCA yang sudah kita masukkan diatas.
  34. 34. Proses setting tab Payment Gateways ini sudah selesai. Semoga tutorial ini bisa bermanfaat bagi anda.
  35. 35. Cara membuat toko online menggunakan WooCommerce (Tahap Tujuh) Cara membuat toko online pada tahap tujuh ini akan membahas mengenai cara mensetting plugin woocommerce pada Tabs Email. Tidak terlalu sulit namun yang terpenting disini anda mengerti dan memahami cara mengeditnya dan memahami alur kerjanya. Langsung saja kita mulai dengan mensetting dari yang paling awal yakni pada halaman Email Options. Lebih lengkapnya silahkan simak tutorial berikut ini Cara Mensetting Tab Emails Setting pada Email options • 1. Klik Emails 2. Pastikan anda pada posisi Email Options ( Secara Default akan langsung berada pada posisi ini ) 3. “From” Name = Tulis Nama Toko Online Anda ( Misal : Woo Store ) 4. “From” Email Address = Tulis Alamat Email anda yang nantinya akan berguna untuk : Menerima email pemberitahuan kalau ada orderan dari customer, Sebagai email Sender pemberitahuan ke customer ketika mereka melakukan order. Untuk email ini sebaiknya anda menggunakan email dari domain anda ( Contoh : no-reply@domain-anda.com / customerservice@domain-anda.com ) 5. Header Image = Anda bisa memasukkan link logo toko online anda disini. Nantinya semua email baik itu pemberitahuan ke anda sendiri dan customer anda logo tersebut akan menjadi logo template email tersebut. 6. Email Footer Text = tulis sesuai dengan apa yang anda inginkan. ( Contohnya anda bisa menulis Nama Toko Online anda beserta slogan dari toko online anda disana ) 7. Pada bagian ini anda bisa merubah warna tampilan template email toko online anda 8. Klik Tombol Save Changes
  36. 36. Jika anda tidak melakukan edit pada langkah no 5 dan no 7 maka yang terjadi jika misalnya ada customer anda melakukan order di Toko Online anda yang terjadi adalah sebagai berikut : Seller : Sebagai pemilik Toko Online tersebut anda akan mendapatkan email seperti berikut ini
  37. 37. Customer : Dan customer anda akan menerima email seperti dibawah ini
  38. 38. Setting pada New Order • Ini untuk email pemberitahuan ke Pemilik Toko jika ada orderan dari customer. Untuk mendapatkan email pemberitahuan tersebut maka yang perlu anda lakukan adalah sebagai berikut : 1. Pastikan anda berada pada posisi Tabs Emails 2. Klik New Order 3. Enable/Disable = Centang Enable this email notification 4. Klik tombol Save Changes
  39. 39. Set elah anda klik tombol save changes maka jika ada orderan dari orang atau customer toko online anda maka anda akan di beritahu melalui email yang sudah anda isi pada Email Options no.4 diatas Setting pada Processing Order • Ini untuk email pemberitahuan ke Customer setelah mereka sukses melakukan order di Toko Online kita namun belum melakukan transfer pembayaran. Untuk bisa mengirimkan email pemberitahuan tersebut maka yang perlu anda lakukan adalah sebagai berikut : 1. Pastikan anda masih pada halaman Tab Emails 2. Klik Processing Order 3. Enable/Disable = Centang Enable this email notification 4. Klik tombol Save Changes
  40. 40. Setelah anda klik tombol save changes maka jika ada customer yang melakukan order di toko online kita, secara otomatis setelah proses order mereka sukses maka email pemberitahuan akan terkirim ke alamat email customer yang melakukan order. Setting pada Completed Order • Pada bagian Complete Order ini berguna untuk mengirimkan email pemberitahuan ke pembeli bahwa pembayaran mereka sudah di terima / diverifikasi oleh kita bahwa transfer yang mereka lakukan sudah di terima dan barang siap di kirim. ( anda juga harus menjelaskan hal ini kepada customer anda di halaman cara berbelanja di toko online anda ) Untuk bisa mengirimkan email pemberitahuan tersebut maka yang perlu anda lakukan adalah sebagai berikut : 1. Pastikan anda masih di halaman Tab Emails 2. Klik Completed Order 3. Enable / Disable = Centang Enable this email notificaton 4. Klik Tombol Save Changes
  41. 41. • Setting pada Customer Invoice,Costumer Note,Reset Password dan juga New Account Lakukan hal yang sama untuk Customer Invoice, Customer Note, Reset Password dan juga New Account yakni centang pada Enable this email notification dan jangan lupa klik tombol Save Changes. Proses mensetting tab Emails sudah selesai. Untuk langkah berikutkan akan kami sampaikan pada kesempatan mendatang. Selalu selalu kunjungi blog ini secara reguler untuk mengetahui tutorial selanjutnya.
  42. 42. Cara membuat toko online menggunakan WooCommerce (Tahap Delapan) Pada tahap delapan ini kita akan belajar atau mensetting plugin WooCommerce pada tab Integration. Pada bagian ini ada tiga bagian yang perlu kita kerjakan disini yakni :  Google Analytics  Share This  dan Share Your Cart Sebenarnya ketiga hal diatas bisa anda lakukan setelah semua product sudah terposting di toko online anda atau dengan kata lain ketiga hal tersebut merupakan langkah terakhir yang dilakukan sebelum anda melaunching toko online anda. Cara setting pada Google Analytics 1. Klik Tabs Integration 2. Pilih Google Analytics ( secara default akan langsung terbuka ) 3. Masukkan ID Google Analytics Anda ( anda harus mendaftar atau membuat akun GA untuk Toko Online Anda ) 4. Centang ketiga opsi tersebut ( Tracking Code ) 5. Klik Tombol Save Changes
  43. 43. Cara setting pada Share This 1. Klik Tab Integration 2. Pilih Share This 3. Masukkan ID Share This Publisher Anda ( Daftar Akun Share This Di Sini ) 4. Klik Tombol Save Changes Ca ra setting pada Share Your Cart 1. Klik Tab Integration 2. Pilih Share Your Cart 3. Buat Akun Share Your Cart Untuk Toko Online Anda 4. Klik Tombol Enable pada bagian API Status ( Secara default belum diaktifkan atau masih dalam kondisi disable ) 5. Masukkan ID Share Your Cart Anda 6. Masukkan App Key Akun Share Your Cart Anda 7. Klik Tombol Save Changes
  44. 44. Akhi rnya setting pada plugin WooCommerce ini sudah selesai semua, pada tahapan mendatang kami akan melanjutkan dengan langkah – langkah lainnya. Selalu kunjungi blog kami secara reguler untuk mendapatkan upadate terbaru mengenai cara membuat toko online menggunakan WooCommerce maupun artikel menarik kami lainnya.
  45. 45. Cara membuat toko online menggunakan WooCommerce (Tahap Sembilan) Cara membuat toko online menggunakan WooCommerce tahap sembilan ini akan membahas mengenai cara memposting produk di toko online kita. Pada penjelasan posting produk ini kami akan mencoba menjelaskan sedetail mungkin agar anda mengerti dan paham maksud dan tujuan dari masing – masing langkah yang kami berikan. Ada beberapa teknik atau metode yang bisa kita pakai dalam WooCommerce ini. Mari kita mulai dari yang paling mudah terlebih dahulu. Nanti anda bisa menyesuaikan dengan kebutuhan toko online anda dan juga selera anda. Cara Posting Product WooCommerce Silahkan anda buka halaman Posting Product dengan langkah sebagai berikut : 1. Klik Products 2. Pilih Add Products Secara default anda akan langsung melihat halaman seperti pada gambar dibawah ini.
  46. 46. Sekarang perhatikan baik- baik bagian yang kami tandai kotak merah diatas… untuk lebih jelas lihat gambar dibawah. Perhatikan pada Product Data, secara otomatis akan terpilih Simple product ( Product Type / Tipe Produk ) . Jika anda klik pada area Product Type tersebut anda akan melihat 4 pilihan tipe produk yakni : 1. Simple product 2. Grouped product 3. External/Affiliate product 4. Variabel product Mari kita mulai dari yang paling mudah terlebih dahulu yakni memposting produk dengan product type = Simple product . Silahkan persiapkan sebuah gambar / photo sebuah produk dengan ukuran :  Minimal 500 x 500 pixel dan  Maksimal 2.000 x 2.000 pixel Simple product bisa anda pergunakan jika produk yang anda jual tersebut hanya mempunya 1 model dan 1 warna. Dalam contoh ini kami memiliki 2 buah photoproduk modelnya sama dan warnanya sama dengan ukuran 1024 x 576 px namun di photo dari sudut yang berbeda.
  47. 47. Supaya anda lebih mengerti maksud dan tujuan penggunaan dari Product Type – Simple Products lihat contoh riil yang kami ambil dari Zalora. Jika anda mempunyai photo lebih banyak maka akan terlihat lebih baik. Calon customer anda lebih leluasa melihat apakah produk yang anda jual tersebut cocok bagi mereka. Usahakan kualitas gambarnya seperti pada contoh dibawah ini ( klik pada gambar dibawah untuk melihat kualitas gambar ) Note : Semakin bagus kualitas gambar maka semakin bagus pula ketika di Zoom dengan YITH Magnifier plugin.
  48. 48. Mari kita mulai memposting produk untuk toko online kita. 1. Tulis Judul Produk Anda 2. Tulis Deskripsi full produk anda tersebut Setelah selesai proses diatas maka lanjutkan dengan melihat ke bawah ( Pada Product Data ) 1. Pastikan anda memilih atau berada pada Simple Product 2. Virtual dan Downloadable jangan anda Centang ( Hanya untuk produk digital seperti : eBook, Software dll ) 3. Buat SKU produk anda tersebut ( Misal : CAM123456 ) 4. Tulis Harga produk anda pada Regular Price ( Penulisan angka tidak perlu pakai titik , misal : jika anda menulis harga Seratus Ribu maka tulislah 100000 jangan 100.000 )
  49. 49. Pada contoh ini , SKU kami tulis CAM123456 dan Harga kami tulis 4500000 Jika kita lihat ( Klik Preview ) maka anda kan melihat halaman produk anda seperti gambar dibawah ini.
  50. 50. Jika anda ingin membuat promo dengan memberikan diskon pada harga produk tersebut maka anda bisa langsung mengisi harga sesudah diskonnya pada area / kolom Sale Price. Contoh : misalnya harga barang tersebut menjadi 4 juta maka anda tulis disana 4000000 Maka jika di lihat lagi ( preview lagi ) anda akan melihat halaman produk anda seperti berikut
  51. 51. Jika anda ingin membuat periode diskon produk anda tersebut maka yang perlu anda lakukan adalah :  Klik Schedule  Pilih tanggal mulai berlaku diskon sampai masa berakhir diskon ( Klik pada icon Kalender )
  52. 52. Pada contoh ini kami membuat masa diskon dari tanggal 13 Agustus 2013 s/d 30 Agustus 2013 Setelah masa diskon berakhir maka secara otomatis harga akan kembali normal jadi anda tidak perlu kawatir diskon tersebut akan berlanjut. Sementara ini cukup sekian dahulu penjelasan mengenai cara posting produk dengan memakai produk data – simple product. Nanti kami lanjutkan lagi dalam tutorial berikutnya masih pada produk data ini. Semoga anda tidak mengalami kesulitan dalam mempelajari hal diatas.
  53. 53. Cara membuat toko online menggunakan WooCommerce (Tahap Sepuluh) Pada langkah ke sepuluh ini kita akan melanjutkan tutorial sebelumnya yakni memposting produk dengan product type – simple product. ( Tahap Sembilan ) Jika anda sampai pada artikel ke sepuluh ini langsung dari Google Search maka anda perlu untuk membaca keseluruhan artikel dari yang pertama supaya tau jalan ceritanya. Sekedar mengingatkan kembali bahwasanya kita kemarin sudah sampai pada bagian Product Data – Simple product dan masih pada area General. Lihat gambar dibawah. Mohon diperhatikan dengan seksama agar anda mengerti dan memahami penjelasan dari kami. Tidak perlu terburu – buru dalam membaca artikel ini. Karena tutorial tahap kesepuluh ini sedikit agak rumit terutama bagi anda yang belum mengerti betul langkah – langkah sebelumnya. Mari kita langsung melanjutkan belajar ke langkah selanjutnya INVENTORY  Klik Inventory Inventory ini berguna apabila anda ingin menunjukkan jumlah stok barang atau produk yang anda jual. Misalnya anda menjual Kamera Nikon D5200 DSLR Camera 24.1MP ( seperti dalam contoh ini ) Stok anda misalnya cuman ada 5 unit, jika anda ingin menampilkan informasi stok kamera tersebut ke calon pembeli anda maka anda bisa melakukannya dari sini.
  54. 54. Keuntungan bagi pemilik toko online dan calon pembeli :  Pemilik toko online : Jika kebetulan produk yang anda jual tersebut fast moving ( produk yang laku keras ) maka informasi ketersediaan stok terhadap calon pembeli bisa mempengaruhi calon customer anda untuk sesegera mungkin mengambil keputusan untuk sesegera mungkin melakukan order agar tidak kehabisan. Sangat berguna ketika toko online anda sedang ada promo diskon.  Calon pembeli : Mengetahui ketersediaan stok bisa meyakinkan mereka bahwasanya apabila mereka membeli produk tersebut mereka yakin barang yang mereka pesan bisa mereka dapatkan. Untuk mengaktifkan fitur ini 1. Centang pada ” Enable stock management at product level “ 2. Isi Jumlah stok produk anda Mari kita coba lihat ( preview ) tampilan halaman produk tersebut, anda akan melihat jumlah stok produk anda disana.
  55. 55. SHIPPING  Klik Shipping Pada bagian shipping ini berguna untuk mensetting atau memasukkan informasi mengenai : 1. Berat Produk tersebut 2. Dimensi atau ukuran panjang, lebar dan tinggi produk tersebut 3. Shipping class berguna untuk menerapkan ongkos kirim dari sebuah produk yang sejenis ( Flat Rate ) Penjelasan Shipping Class : Agar lebih mudah memahami Shipping Class ini , kami akan menerangkan dengan membuat contoh penerapannya. Misalnya anda akan menerapkan ongkos yang sama untuk semua produk kamera digital yang anda jual di toko online anda . Andai kata / anggap saat ini anda menjual Kamera digital berbagai merk ditoko online anda, kemudian anda ingin menerapkan ongkos kirim yang sama untuk semua kamera digital yang ada di toko online anda tersebut ( contoh : ongkos kirimnya Rp.100.000 ) Kita harus membuat sebuah shipping class yang khusus agar semua ongkos kirim untuk kamera digital yang ada di toko online anda tersebut sama. Dengan begitu anda akan lebih mudah me-manage ongkos kirim untuk produk kamera digital yang lain di kemudian hari. Buka di Tab baru web browser anda halaman Shipping Classes 1. Klik Products 2. Pilih Shipping Classes 3. Tulis Shipping Class yang kita inginkan ( dalam contoh ini kami membuat shipping class baru untuk semua kamera digital maka kami tulis Kamera Digital ) 4. Slug = Tulis saja kamera-digital ( cara penulisan memakai huruf kecil semua dan pakai tanda minus )
  56. 56. 5. Klik tombol Add New Shipping Class Setelah itu Shipping Class baru untuk Kamera Digital akan muncul disebelah kanan
  57. 57. Buka di Tab baru web browser anda halaman WooCommerce Settings 1. Klik WooCommerce 2. Klik Settings 3. Pilih Shipping 4. Pilih Flat Rate 5. Cost Per Order. Pada tutorial kemarin pada langkah kelima kita telah menuliskan biaya per ordernya Rp. 20.000 karena kita akan menggunakan Shipping Class maka kita hapus saja biaya tersebut. ( jika tidak dihapus maka biaya pengirimannya menjadi Rp.100.000 + Rp. 20.000 = Rp. 120.000 ) 6. Anda akan melihat Shipping Class baru yang sudah kita buat pada langkah diatas ( Kamera Digital ) 7. Masukkan ongkos kirimnya pada kolom tersebut sebesar seratus ribu rupiah ( penulisannya jangan pakai titik : 100000 ) 8. Klik tombol Save Changes
  58. 58. Sekarang kembali lagi ke halaman Posting Product tadi .  Klik Save Draft terlebih dahulu pada produk Nikon D5200 DSLR Camera 24.1MP tersebut gunanya agar shipping class yang tadi kita buat muncul disana.
  59. 59.  Lihat lagi ke bagian Shipping , sekarang Shipping Class yang kita buat tersebut akan berada disana Untuk melihat bagaimana sesungguhnya Shipping Class diatas bekerja mari kita lihat bersama -sama :  Klik Preview Product ( halaman preview produk akan terbuka di tab baru web browser anda )
  60. 60. Lihat Halaman Preview Produk tersebut 1. Klik tombol Add to Chart ( tombol warna abu-abu gelap ) 2. Sesaat kemudian akan muncul Notifikasi atau pemberitahun Nikon D5200 …. sudah masuk ke Cart . Lanjutkan dengan meng Klik tombol View Cart Pada halaman View Cart inilah Shipping Class tadi bekerja , lihat gambar berikut
  61. 61. Lihat pada Shipping > Flat Rate … disana langsung tertera ongkos kirim untuk kamera digital dengan menggunakan Shipping Class Kamera Digital sebesar Rp. 100.000 . Jika nantinya anda memposting kamera kedua, ketiga dan seterusnya anda tinggal memakai Shipping Class Kamera Digital tersebut. Untuk produk lainnya misalnya Baju, Sepatu, Tas anda juga bisa membuat Shipping Class yang sama dengan Kamera Digital yang sudah kami contohkan diatas. Untuk sementara ini, cukup sekian dulu tutorial cara membuat toko online menggunakan WooCommerce ini. Semoga penjelasan kami bisa anda mengerti dengan baik dan benar.
  62. 62. Cara membuat toko online menggunakan WooCommerce (Tahap Sebelas) Cara membuat toko online : Pada tahap sepuluh kemarin kita sudah belajar membuat shipping class untuk ongkos kirim dari salah satu produk yang dalam hal ini atau pada contoh yang kami berikan disana adalah untuk produk kamera digital. Kali ini kita akan melanjutkannya dengan langkah berikutnya yang tentunya masih berkaitan dengan memposting produk menggunakan Product Type – Simple Product. LINKED PRODUCT  Klik Linked Product Ada 3 bagian yang akan kami terangkan disini : 1. Up-Sells 2. Cross-Sells 3. Grouping Pada dasarnya ketiga hal diatas berguna untuk menawarkan produk alternatif lainnya ke pelanggan agar mereka membeli produk lain yang masih ada kaitannya dengan produk yang memang mereka inginkan atau mereka cari saat ini. Jika di ibaratkan pada sebuah blog maka linked products ini seperti seperti artikel terkait. Contohnya seperti berikut ini :
  63. 63. Jika pada toko online yang kita buat sekarang ini, nantinya akan terlihat seperti berikut ini :
  64. 64. Mungkin saat ini Linked Products belum bisa langsung anda praktekkan karena anda belum memposting produk – produk di toko online anda. Namun nanti setelah produk anda sudah banyak maka anda bisa memakai fitur ini. Berikut penjelasan mengenai Linked produtcs diatas… Up-Sells Up-Sells ini berguna untuk memberikan / menampilkan pilihan produk yang berkaitan dengan produk yang ditawarkan pada saat customer melihat halaman produk. Lihat demonya disini Related produk yang tampil pada halaman tersebut ( You may also like .. ) merupakan penawaran produk yang dibuat dari Up-Sells Produk yang ditampilkan pada Up-Sells ini sebaiknya produk yang : 1. Mempunyai kualitas lebih baik 2. Aksesoris yang berkaitan dengan produk tersebut 3. dll Namun anda juga bisa menampilkan produk lainnya yang sesuai dengan keinginan anda.
  65. 65. Jika dilihat dari halaman posting produk tersebut maka akan terlihat seperti gambar berikut
  66. 66. Cara memasukkan produk kedalam Up-Sells  Klik pada text area Up-Sells  Ketik nama produk yang ingin ditampilkan ( Sebaiknya ketik SKU produk yang ingin kita tampilkan disini agar lebih mudah )  Pilih Produk yang akan anda tampilkan, pada contoh ini saya sudah memposting 3 buah produk dengan SKU CAM jadi kami memilih ketiga produk tersebut.
  67. 67. Cross-Sells Cross Sells ini mempunyai fungsi yang sama dengan Up-Sells, namun Cross Sells akan tampil pada halaman Cart. Ketika customer meng-klik add to cart dan kemudian meng-klik view cart maka produk yang kita pilih untuk ditampilkan akan muncul disana. Produk yang ditampilkan pada Cross Sell ini sebaiknya : 1. Produk yang lagi diskon 2. Aksesoris yang berkaitan dengan produk tersebut 3. dll Sama halnya dengan Up-Sells diatas anda juga bisa menampilkan produk lainnya yang sesuai dengan keinginan anda.
  68. 68. Cara memasukkan produk kedalam Cross-Sells  Klik pada Text area Cross-Sells  Ketik nama produk yang ingin ditampilkan ( Sebaiknya ketik SKU produk yang ingin kita tampilkan disini agar lebih mudah )
  69. 69.  Pilih Produknya ( salah satu ) Grouping Grouping ini akan kami jelaskan pada posting produk dengan Products Data – Grouped Product. Secara garis besar Grouping ini akan sangat berguna jika anda mempunyai produk yang banyak dan berencana membuat toko online yang besar dan komplek.
  70. 70. Cara membuat toko online menggunakan WooCommerce (Tahap Duabelas) Cara membuat toko online dengan WooCommerce tahap duabelas ini masih melanjutkan langkah sebelumnya pada tahap sebelas. Kemarin kita sudah sampai pada Linked Products yang berfungsi seperti layaknya related artikel. Mari kita lanjutkan dengan langkah berikutnnya dengan membuat attributes dari sebuah produk. Attributes ini mempunyai fungsi seperti :  Membuat pilihan ukuran : XL, L, M, S  Membuat pilihan warna : Biru, Kuning, Merah, Hijau dan lain sebagainya Selain kedua fungsi diatas anda juga bisa memakai attributes ini untuk berbagai keperluan, tergantung dari jenis produk yang jual pada toko online anda. Namun untuk Simple Product fungsi atribut ini belum bisa di pergunakan secara maksimal. Disini kita hanya bisa membuat satu pilihan saja. Setelah anda memahami fungsi dari atribut ini maka berikut langkah cara membuatnya :  Klik Attributes  Klik tombol Add
  71. 71.  Anda akan melihat tampilan seperti gambar dibawah ini Karena pada contoh ini kami akan memposting sebuah produk kamera Nikon dengan warna merah maka kami akan membuat Attributes untuk kamera ini hanya dengan warna saja yakni warna merah 1. Name : Ketik Warna 2. Value : Ketik Merah 3. Centang Visible on the product page 4. Klik Save Attributes Maka jika kita preview akan terlihat seperti gambar dibawah:  Klik tab Additional Information
  72. 72. Untuk langkah berikutnya akan kami sampaikan pada kesempatan mendatang, Mohon untuk dipahami tehnik memposting produk dengan Product Data – Simple product ini terlebih dahulu karena ini yang paling mudah untuk diterapkan dan dimengerti.
  73. 73. Cara membuat toko online menggunakan WooCommerce (Tahap Tigabelas) Tidak terasa tutorial cara membuat toko online dengan menggunakan WooCommerce ini sudah sangat panjang sekali. Dan kami sangat terkejut mengetahui bahwa begitu banyak para sahabat yang begitu antusias mempelajari secara tekun mengenai proses pembuatan sebuah toko online. Pada kesempatan kali ini kita akan mempelajari lebih lanjut mengenai cara memposting produk dengan menggunakan simple product sampai selesai. Pada tahap ke tigabelas ini kita akan langsung ke bagian Advanced . Tidak banyak yang perlu dijelaskan pada bagian ini karena sangat mudah sekali. Mari kita lanjutkan dengan mempelajari bagian selanjutnya. ADVANCED  Purchase Note : Anda boleh mengisi kolom ini jika anda ingin memberikan pesan tambahan untuk pembeli anda.  Menu Order : Biarkan terisi angka 0 saja agar tidak membingungkan anda.  Enable reviews : Secara default themes ini otomatis mencentang pilihan enable reviews ini. Namun jika anda tidak menginginkan pengunjung toko online anda mereview produk anda maka hilangkan tanda centang yang ada disana. CUSTOM FIELDS Pada bagian Custom Fields ini tidak perlu anda isi apapun karena memang tidak begitu penting. Lanjutkan dengan langkah berikutnya.
  74. 74. PRODUCT SHORT DESCRIPTION Tulis deskripsi singkat mengenai produk anda tersebut disini. Sebisa mungkin jangan terlalu panjang, tulis saja yang penting – penting saja mengenai produk tersebut. MYSTILE CUSTOM SETTINGS Tidak ada yang perlu anda lakukan pada bagian custom settings ini.
  75. 75. Sekarang lihat ke bagian panel sebelah kanan. Lihat pada bagian berikut : 1. Product Categories 2. Product Tags 3. Product Gallery 4. Features Image Untuk lebih jelasnya perhatikan gambar berikut ini.
  76. 76. Untuk Product Categories dan Product Tags ( Point 1 dan 2 ) tentunya anda sudah paham maksud dan cara penggunaannya. Sedangkan untuk point 3 dan 4 berikut penjelasannya :  Product Gallery Adalah tempat untuk meletakkan image atau gambar pendukung produk kita ( tampak belakang, tampak dari atas , tampak samping , dll )  Featured Image Adalah image atau gambar yang paling utama dan yang akan terlihat besar. Featured image ini juga secara otomatis akan tampil juga pada product gallery ( tampak depan ) Featured image ini akan menjadi image yang terlihat terlebih dahulu oleh calon pembeli kita. Lihat contoh pada gambar dibawah ini. Cukup jelas bukan maksud dan tujuan dari Product Gallery dan Featured Image ini ??
  77. 77. Mari kita mulai dengan mengupload image atau gambar untuk Product Gallery terlebih dahulu  Klik Add product gallery image  Klik tombol Select Files  Kemudian carilah image yang sudah anda persiapkan ( anda boleh mengupload 4 – 6 gambar untuk Product Gallery ini ). Pada contoh ini kami hanya mengupload 1 gambar saja. Setelah ketemu gambar yang sudah anda persiapkan maka pilih gambar tersebut kemudian klik open untuk memulai proses upload gambar.
  78. 78.  Setelah proses upload gambar sudah selesai maka lanjutkan dengan mengklik tombol Add to gallery  Setelah itu anda akan melihat image gallery tersebut sudah berada disana
  79. 79. Jika anda mengupload 4 buah gambar maka anda akan melihat 4 buah gambar juga disana. Mari kita lanjutkan dengan mengupload Featured Image  Klik Set featured image Pada featured image ini kita hanya perlu untuk menupload 1 buah gambar ( biasanya gambar produk tampak depan ). Lakukan hal yang sama seperti pada langkah mengupload image atau gambar untuk Product Gallery diatas. Jika sudah selesai maka anda akan melihatnya seperti pada gambar berikut.
  80. 80. Proses memposting product dengan menggunakan product data – simple product sudah selesai. Silahkan klik tombol publish untuk melihat hasil kerja anda. Demo secara live nya bisa dilihat disini Untuk hasil yang lebih baik usahakan image yang anda pergunakan berukuran lebar dan tinggi yang sama. Dari hasil uji coba kami maka yang terbaik adalah menggunakan image berukuran 1000 x 1000 px. Semoga tutorial ini bisa bermanfaat bagi anda semuanya. Tutorial ini akan kami lanjutkan pada kesempatan mendatang.
  81. 81. Cara membuat toko online menggunakan WooCommerce (Tahap Empatbelas) Pada tahap empat belas : cara membuat toko online dengan woocommerce ini kita akan membahas mengenai cara mengkustomisasi tampilan toko online kita. Seperti yang kita ketahui bersama , saat ini kita hanya bisa melihat tampilan toko online yang kita buat tersebut masih seperti sebuah blog dan tidak terlihat selayaknya sebuah toko online. Secara khusus pada tahap ke empat belas ini kita hanya akan membahas mengenai hal tersebut diatas. Setidaknya untuk lebih memberi semangat kepada kita bahwasanya proses pembuatan toko online ini sudah mendekati tahap finishing. Target kita adalah merubah tampilan toko online kita dari yang awalnya hanya menampilkan postingan artikel ( blog ) pada halaman homepage menjadi menampilkan produk saja Untuk menampilkan produk yang kita jual pada halaman depan maka langkah yang perlu kita lakukan adalah sebagai berikut : 1. Klik Mystile 2. Klik Theme Options 3. Klik Homepage
  82. 82. Kemudian pada halaman Homepage tersebut lanjutkan dengan langkah berikut : 1. Centang display recent products 2. Masukkan angka berapa jumlah produk yang ingin anda tampilkan pada halaman homepage. Misalnya pada contoh kami ini, kami tulis 8 jadi nantinya pada halaman homapage toko online kita hanya akan muncul 8 buah produk saja. 3. Klik tombol Save All Changes Maka jika kita lihat toko online kita sekarang ini , akan terlihat seperti gambar berikut.
  83. 83. Pada gambar diatas masih terlihat postingan blog dibawah produk toko online kita . Nah untuk menghilangkan postingan tersebut maka kita perlu melakukan langkah berikutnya. 1. Klik Blog 2. Hilangkan tanda centang untuk menampilkan postingan artikel yang berasal dari blog kita 3. Klik tombol Save All Changes
  84. 84. Sekarang tampilan halaman depan toko online kita sudah menampilkan produk saja . Lihat pada gambar berikut ini.
  85. 85. Live Demo Pada contoh diatas hanya nampak 4 buah produk , karena sampai saat ini kami hanya membuat atau memposting produknya hanya 4 buah saja hanya sebagai gambaran saja. Untuk tahap selanjutnya akan kami jelaskan pada kesempatan mendatang. Semoga tutorial kali ini bisa bermanfaat bagi anda.
  86. 86. Cara membuat toko online menggunakan WooCommerce (Tahap Limabelas) Setelah kita kemarin membahas mengenai menempatkan produk yang ada di toko online kita berada pada halaman Homepage maka kali ini kita akan melanjutkannya dengan meMake Over tampilannya agar menjadi lebih menarik lagi. Template Mystile ini mempunyai banyak kelebihan yang memungkinkan kita untuk memodifikasi template tersebut menjadi lebih baik dan tampil beda dengan toko online yang lain meskipun sama- sama menggunakan template tersebut. Semua tergantung dari kreatifitas anda, namun disini tentu kami akan mencoba menjelaskan tentang bagaimana cara mengkustomisasi template Mystile ini pada taraf yang mudah saja. Memasang Banner pada Homepage Mari kita mulai dengan memasang sebuah welcome banner yang besar pada halaman Homepage toko online kita. Untuk itu persiapkanlah sebuah image dengan spesifikasi sbb: Ukuran Gambar untuk Banner  Lebar : 1247  Tinggi : 405 Jika anda belum mempunyai image untuk banner tersebut anda boleh memakai gambar diatas sekedar untuk keperluan latihan agar anda bisa langsung praktek di toko online anda.
  87. 87. Setelah kita persiapkan sebuah gambar untuk banner kita maka yang perlu anda lakukan adalah : 1. Klik Mystile 2. Klik Theme Options 3. Klik Homepage 4. Klik Featured Image 5. Centang Display a Banner Setelah anda centang display a banner anda akan melihat tampilan seperti gambar berikut. Kemudian lakukan dengan langkah berikut ini 1. Klik tombol upload
  88. 88. Cari image banner tersebut diPC atau laptop anda dan mulailah proses upload image tersebut. Setelah imagenya sudah terupload maka akan terlihat tampilan seperti pada gambar seperti berikut Scroll kebawah sampai anda melihat tampilan seperti dibah ini kemudian pastikan anda : 1. Centang Size : Full Size 2. Klik tombol Use this image
  89. 89. Setelah itu banner yang ingin kita pasang di toko online kita sudah terlihat seperti gambar dibawah. 1. Hapus tulisan pada banner Headlines 2. Hapus tulisan pada banner stand first 3. Klik tombol Save All Changes
  90. 90. Sekarang lihat toko online anda maka di toko online anda tersebut sudah terpasang sebuah banner yang besar disana. Selamat mencobanya dan semoga anda tidak mengalami masalah yang berarti.
  91. 91. Sampai jumpa lagi pada tutorial selanjutnya. Cara membuat toko online menggunakan woocommerce ( tahap enam belas ) Cara membuat toko online menggunakan WooCommerce tahap enam belas kali ini kita akan melanjutkan memoles tampilan toko online yang masih terlihat sangat sederhana sekali. Jika anda belum melakukan banyak sentuhan yang berarti maka tampilan toko online anda kurang lebih akan terlihat mirip dengan yang ada padatutorial ke lima belas kemarin. Jadi dalam tutorial ini kami akan membuat atau mengkustomisasi tampilan toko online kami berdasarkan selera kami. Namun kami harap anda bisa mengambil pengetahuannya dan anda bisa berkreasi sesuai dengan selera anda sendiri. Untuk mengkustomisasi tampilan toko online kita maka kita akan bermain-main dengan template Mystile itu sendiri. Mari kita mulai dari atas pada menu Mystile – Theme Options. Kustomisasi CSS 1. Klik Mystile 2. Pilih Theme Options 3. Pilih General Settings 4. Pilih Quick Start
  92. 92. Kita akan merubah warna themes Mystyle tersebut dari warna orange ( default.css ) ke warna hijau ( green.css ). Mari kita lihat terlebih dahulu tampilan menu pada toko online kita . Dari halaman theme options-nya anda akan melihatnya seperti berikut ini. Klik pada tulisan default.css diatas kemudian pilih warna yang sesuai dengan pilihan anda. Dalam contoh dibawah ini kami akan menggantinya dengan warna hijau maka kami memilih green.css
  93. 93. Setelah anda pilih warna kesukaan anda maka lanjutkan dengan mengklik tombol Save All Changes Tunggu beberapa saat sampai anda melihat notifikasi seperti pada gambar dibawah ini ( Option Updated ). Setelah anda melihat notifikasi seperti diatas silahkan anda lihat menu pada toko online anda. Setiap nantinya anda akan melakukan perubahan dan menyimpannya maka notifikasi tersebut akan muncul, itu pertanda proses penyimpanan atau update pada themes options template tersebut sudah berhasil. Pada tahapan selanjutnya gambar tentang notifikasi tersebut tidak akan kami tampilkan dan kami anggap anda sudah mengerti dan paham jadi tidak perlu dijelaskan dua kali.
  94. 94. Ooops… kita ada sedikit masalah pada big banner, lihat gambar dibawah. Pada banner tersebut ada tulisan ( warna putih ) dengan tulisan sbb.  Welcome to our store  We hand make the most awesomest products in the world Ada 2 cara untuk menghapus atau menghilangkan tulisan tersebut : 1. Menghapus sementara ( not recommended ) 2. Menghapus secara permanen tulisan tersebut ( recommended ) Menghapus Sementara
  95. 95. Untuk menghapusnya secara sementara anda bisa mengulangi langkah yang ada pada tahap lima belas kemarin Namun jika nanti anda melakukan perubahan lagi, secara otomatis tulisan tersebut akan muncul lagi di atas banner tersebut. Jadi menurut kami itu sia-2 saja dan buang tenaga makanya tidak kami rekomendasikan cara tersebut. Menghapus secara permanen Dengan menghapusnya secara permanen anda tidak perlu kawatir lagi tulisannya akan muncul lagi di kemudian hari. Agak sedikit rumit namun tidak sulit, berikut cara menghapus tulisan tersebut secara permanen. 1. Klik Appearance 2. Pilih Editor 3. Anda akan langsung melihat kode style.css Sekarang fokus ke panel sebelah kanan anda.
  96. 96. Lihat ke halaman bawah / scoll mouse anda ke bawah, cari theme-options.php kemudian setelah ketemu klik langsung untuk menampilkan kode php pada file tersebut.. Anda akan melihat halaman theme-options.php tersebut seperti pada gambar berikut.
  97. 97. Apa langkah selanjutnya ? Sebelum kami lanjutkan ada baiknya anda mengerti halaman apa yang sebenarnya yang akan kita edit ini. Kode php diatas merupakan kode dari option panelnya template Mystile berikut ini ( mohon jangan ikut buka , sekedar memberi informasi saja ).
  98. 98. Lihat pada area yang sudah kami tandai dengan warna merah diatas. Tulisan itulah yang akan kita hilangkan secara permanen melalui halaman theme-options.php ini. Sudah mengerti maksud dan tujuannya, mari kita memulainya, lihat kembali kode themeoptions.php tersebut.
  99. 99. 1. Klik Ctrl + F maka akan muncul pencarian cepat. Lihat pada gambar sebelah pojok kiri bawah ( ada tanda panah merah ) 2. Ketikkan : Welcome to our store > kemudian tekan enter > anda akan melihat tulisan tersebut Welcome to our store tersebut disana dan dibawahnya anda juga akan melihat tulisan We hand make the most awesomest products in the world
  100. 100. Hapus kedua tulisan tersebut , Hanya tulisan tersebut saja jangan dihapus juga tanda petik diatas ( ‘ ) yang berdempetan dengan tulisan tersebut, ada 2 tanda petik yakni sebelum tulisan dan sesudah tulisan itu. Mohon berhati hati ketika menghapusnya. Dan pastikan setelah anda hapus kondisi kode tersebut seperti pada gambar dibawah ( tanda petik masih ada ) Klik Tombol update file.
  101. 101. Setelah itu anda akan melihat notifikasi update file theme-options.php anda sudah sukses. Coba anda lihat toko online anda sekarang , Ooppsss… kok masih ada tulisannya ya ??? itu karena kita tadi belum menghapusnya dari Theme Options template ini. Mari kita tuntaskan dengan langkah berikut ini. 1. Klik Mystile 2. Klik Theme Options 3. Klik Homepage 4. Klik Featured Image 5. Pastikan tulisan pada banner headline dan banner stand first anda hapus semuanya 6. Klik tombol Save All Changes
  102. 102. Mulai saat ini anda tidak perlu kawatir lagi tulisan itu akan muncul diatas banner toko online anda jika anda mengedit atau merubah settingan template Mystile ini di kemudian hari. Cukup sekian dulu tutorial kali ini, semoga anda mengerti dan bisa bermanfaat bagi anda semua.
  103. 103. Cara membuat toko online menggunakan woocommerce (tahap tujuh belas) Hari ini mari kita lanjutkan lagi proses mengkustomisasi template toko online kita agar lebih menarik lagi dari hari kemarin. Kami harap anda tidak bosan dalam mengikuti tutorial yang SUPER PANJANG ini . Harapan kami adalah anda bisa benar-benar mengerti dan paham betul cara membuat toko online dengan memakai WooCommerce ini. Meskipun pada suatu hari nanti anda tidak memakai theme mystile yang gratis ini, katakanlah anda sudah mempunyai uang cukup untuk membeli template toko online yang premium namun yang memakai WooCommerce juga maka pengetahuan yang anda dapatkan dari kami masih bisa anda pergunakan. Apa yang akan kita pelajari hari ini tidaklah terlalu sulit dan masih sangat mudah untuk dipahami. Silahkan anda bukan Theme Options template Mystile dari halaman dashboard toko online anda.  Klik Mystile  Theme Options Ada beberapa bagian disana, sebagian kecil sudah kami jelaskan pada tutorial sebelumnya dan sekarang akan kami tambahkan lagi dengan menjelaskan menu-menu selain yang sudah pernah kami jelaskan dan sudah kita lakukan bersama-sama. Penjelasan pada tutorial ini persis seperti apa yang kami lakukan juga ketika membuat tulisan ini. General Settings  Klik General Settings  Klik Display Options
  104. 104. Pada Display Options ini yang akan kita lakukan adalah sebagai berikut : 1. Post / Page comments : Pilih Post only 2. Post Content : Pilih The Excerpt 3. Display Breadcrumb : Anda bisa memakainya atau tidak namun dalam contoh ini kami akan memakai Breadcrumb 4. Display Pagination : Centang ini 5. Pagination Style : Pilih Numbers 6. Klik Tombol Save All Changes untuk menyimpan konfigurasi ini
  105. 105. Styling Options Pada styling option ini anda bisa mengkustomisasi background toko online kita dan juga mungkostomisasi warna links, hover dan juga warna button. Silahkan anda coba ganti background dan mencoba mengganti warna links ataupun tombol pada toko online anda.. Jangan kawatir jika anda salah pada bagian ini tidak akan berakibat fatal atau merusak toko online anda..
  106. 106. Silahkan anda bereksperimen sendiri dengan kedua menu diatas. Jika ada kesulitan silahkan bertanya pada kolom komentar. Sampai disini dulu tutorial kami kali ini dan sampai jumpa pada tutorial selanjutnya.
  107. 107. Cara membuat toko online menggunakan WooCommerce (Tahap Delapan Belas) Pada tahapan ke delapan belas ini kita akan mempelajari langkah selanjutanya dalam tutorial cara membuat toko online dengan woocommerce yang masih dalam area theme options seperti halnya kemarin. Jika kemarin kita telah membahas mengenai Display Option dan juga Background maka kali ini kita akan membahas mengenai Typography dan Layout Options. Typography ini berfungsi untuk mengatur jenis huruf yang akan kita pakai dalam toko online kita. Jika kita lihat sekarang ini , toko online kita memakai huruf Arial yang terlihat tidak begitu bagus. Untuk itu pada kesempatan ini kita akan mencoba merubah huruf Arial tersebut melalui menu Typography ini. Dalam contoh ini kami akan memakai font atau huruf Oswald namun anda bisa mencobanya dengan menggunakan font lainnya apabila anda kurang menyukainya. Typography 1. Mari kita mulai belajar mengkustomisasi Font toko online kita • 1. Klik Typography 2. Centang Enable Custom Typography 2. Ganti Font Arial tersebut dengan Oswald • 1. Klik pada Arial dan kemudian cari Oswald ganti semua dengan Oswald 2. Klik Tombol Save All Changes
  108. 108. Layout Options Pada bagian layout ini kita bisa merubah tampilan kerangka toko online kita dari yang full page menjadi di dalam BOX 1. Klik Layout Options 2. Centang Enable boxed Layout 3. Pilih posisi Sidebar disebelah kanan atau disebelah kiri 4. Klik tombol Save All Changes
  109. 109. Maka setelah anda simpan , tampilan toko online anda terlihat lebih rapi didalam box.
  110. 110. Cara membuat toko online menggunakan WooCommerce (Tahap Sembilan Belas) Pada tahap sembilan belas ini, cara membuat toko online dengan WooCommerce akan membahas tentang bagaimana mengkustomisasi toko online kita dengan menambahkan fitur chatting untuk customer support yang berguna untuk memaksimalkan penjualan toko online anda tersebut. Untuk melakukan hal diatas kita akan memasang atau menginstall 1 buah plugin gratis yang bisa anda pakai selamanya. Proses penginstallan plugin ini secara detail bisa anda lihat pada artikel kami yang berjudul : Cara install plugin di wordpress. ClickDesk nama plugin yang akan kita pergunakan . Apa kelebihan plugins tersebut dan kenapa kami memilihnya ? Plugins tersebut selain mudah digunakan oleh newbie seperti kita ini, plugins tersebut memungkinkan kita untuk merubah warna tampilannya sehingga bisa kita sesuaikan dengan warna yang ada pada toko online kita tersebut. Memasang fitur Chatting Untuk kebutuhan customer support ini kita akan memakai ClickDesk yang mempunyai penampilan menarik dan nyaman untuk dilihat. Versi gratis dari ClickDesk hanya membolehkan kita untuk mendaftarkan 1 agent saja atau kita hanya bisa membuat akun untuk 1 orang customer service. Cara install ClickDesk • 1. Login ke Dashboard WordPress anda
  111. 111. 1. 2. Pilih Add New 3. Pastikan anda pada posisi Search 4. Ketik Chat 5. • Klik Plugins Klik tombol Search Plugins 2. Install ClickDesk
  112. 112. • 3. Aktifkan Plugins
  113. 113. Register ClickDesk Account Setelah anda mengaktifkan plugin ClickDesk diatas maka selanjutnya kita akan mendaftar sebuah akun baru untuk agent toko online kita yang nantinya akan menjadi akun customer support yang bisa kita pakai. 1. Silahkan menuju ClickDesk Dashboard • 1. Klik atau pilih ClickDesk, posisinya dibawah Tools 2. Anda akan melihat halaman seperti gambar berikut • 1. Klik tombol Go to ClickDesk Dashboard
  114. 114. • 3. Buatlah sebuah akun ClickDesk Untuk membuat atau mendaftar akun ClickDesk caranya sangat mudah sekali. Anda bisa menggunakan akun Gmail anda ataupun akun Yahoo anda dan login lah dengan akun anda tersebut. Jika anda belum mempunyai salah satu akun tersebut maka anda bisa membuatnya terlebih dahulu. Kami sarankan anda membuat akun Gmail saja : baca cara membuat akun Gmail
  115. 115. • 4. Login dengan Akun Gmail anda Bukalah tab baru di webbrowser anda dan bukalah sign in ke akun gmail anda. Setelah berhasil Sign ini maka kembali ke
  116. 116. • 5. Buatlah nama Agent untuk operator Customer Support toko online anda Lihat gambar berikut dan isilah sama persis seperti yang tertera disitu. Setelah selesai Klik tombol Tes, Create an Agents
  117. 117. • 6. Selanjutnya setelah sukses membuat agent toko online anda maka anda akan melihat halaman seperti gambar berikut
  118. 118. Kustomisasi Profile Agent Pada gambar diatas terlihat bahwasanya Agent toko online kita belum terdapat photo, jadi selanjutnya kita akan menambahkan photo dan yang lainnya. • 7. Klik nama agent untuk mulai mengkustomisasi profile – nya • 8. Klik nama agent untuk mulai mengkustomisasi profile – nya Upload Photo : Klik tombol Upload dibawah photo yang kosong tersebut, setelah anda upload mohon jangan klik tombol Save Changes. Lanjutkan ke tahap/ tab berikutnya IM Network
  119. 119. IM Network : Untuk network pilih Google Talk or Google Appa/Mail. Kemudian masukkan username anda, jika email anda beralamat nama-anda@gmail.commaka username anda adalah nama-anda@gmail.com
  120. 120. Phone : Untuk IM/ Country pilih saja Skype ( jika anda punya akun Skype) jika belum maka isi saja kolom ID/ Number dengan no telpon anda dan akhiri dengan mengklik tombol Save Changes
  121. 121. Menambahkan Photo Agent untuk homepage Untuk mempercantik tampilan ClickDesk di toko online kita maka kita perlu untuk menambahkan Photo Agent kita agar ketika customer kita ingin bertanya mereka bisa membayangkan wajah orang yang sedang mereka ajak Chatting. Sekedar saran sebaiknya anda memasang Photo asli dan jangan photo orang lain karena secara psikologis Photo asli lebih meyakinkan dari pada photo orang lain atau bahkan photo orang luar negeri.
  122. 122. • 9. Klik Tab Live Chat
  123. 123. 10. Setelah terbuka anda akan melihat tampilan seperti gambar berikut • 1. 2. Theme = Pilih Social ( Medium ) 3. Position = Bottom Right 4. Klik Tombol Upload untuk memulai upload Photo agent anda 5. Color = Pilihlah warna yang sesuai dengan yang anda inginkan 6. • Pastikan anda berada pada posisi UI & Themes Klik Tombol Save Changes 11. Mengganti yang ada pada Widget Chatting Tersebut dengan keterangan bahasa Indonesia Untuk merubah tulisan bahasa inggris pada Widget Chatting ClickDesk maka anda bisa merubahnya dengan mengklik tab Form & Localization. Ada lima link disana, silahkan anda lihat sendiri karena sudah jelas dan mudah untuk dilakukan. Jangan lupa untuk Klik Tombol Update setelah anda mengedit tulisan yang ada disana.
  124. 124. • 12. Menambahkan akun Twitter dan Facebook anda Anda bisa menambahkan akun Twitter dan Facebook anda dengan mengklik tab Social Setelah ditambahkan akan terlihat seperti berikut ini.
  125. 125. Jika dilihat di Toko online kita maka anda akan melihatnya seperti berikut ini. Twitter Klik Icon Twitter dan Upppss………. !! Error
  126. 126. Mari kita bereskan permasalahan diatas, lihat kembali ke clickdesk dashboard anda. Klik Link Grand Access .
  127. 127. Maka akan muncul Pop up untuk meng – Authorize APP. Klik tombol Authorize APP tersebut Setelah Proses Authorize APP Twitter tersebut selesai maka anda akan melihat halaman Social itu lagi tanpa ada pertanda khusus lainnya jadi tidak ada perubahan sama sekali.
  128. 128. Namun yang perlu anda lakukan adalah Klik Tombol Save Changes sekali lagi untuk menyimpan apa yang sudah kita lakukan diatas. Setelah anda Save / Simpan mari kita lihat lagi toko online kita . Refresh terlebih dahulu kemudian klik icon Twitter lagi. Hemmm…. permasalahan tadi sudah hilang. Congratulation !!
  129. 129. Facebook Setelah kita lihat Twitternya mari kita lihat juga Facebooknya.
  130. 130. Akhirnya proses Install dan mengkustomisasi ClickDesk sudah selesai dan siap untuk kita pergunakan, Semoga penjelasan kami diatas bisa anda mengerti dan pahami dengan baik serta anda tidak mengalami masalah dalam mengikuti tutorial ini. Pada kesempatan mendatang kita akan melanjutkan tutorial ini dengan tema yang berbeda.
  131. 131. Cara membuat toko online menggunakan WooCommerce (Tahap Dua Puluh) Cara membuat toko online tahap dua puluh ini akan membahas mengenai kelanjutan tahapan sebelumnya. Jika kemarin kita telah menambahkan fasilitas chatting untuk customer support kita maka selanjutnya kita akan memasang sebuah Sticky Bar untuk memperkuat promosi toko online anda. Idenya begini : Ketika toko online anda jadi dan sudah online nanti terus misalnya anda mempunyai sebuah produk baru , katakanlah nama produk baru anda tersebut ” Baju Batik Jogja ” dan anda berkeinginan untuk fokus mempromosikan produk tersebut agar setiap calon customer anda yang datang bisa dengan mudah mengetahui bahwasanya anda menjual ” Baju Batik Jogja “. Loh kan sudah ada Banner yang besar ? Banner yang besar pada halaman Homepage tersebut hanya akan terlihat oleh cutomer anda jika mereka membuka homepage anda , sementara lebih dari 70 % pengunjung biasanya tidak pernah melihat halaman Homepage sebuah website, blog ataupun toko online. Jadi peranan Stiky bar disini cukup berpengaruh sekali terhadap promosi toko online anda tersebut. Namun jika anda kurang setuju dengan pendapat kami juga tidak masalah karena ini cuman sekedar pemikiran kami berdasarkan hasil analisa pengunjung yang datang ke blog ini. Selain dari fungsi Sticky Bar diatas sebagai penunjang sarana promosi maka Sticky Bar juga sangat berfungsi untuk menupi ruangan yang kosong pada halaman toko online kita sebelah atas. Lihat gambar berikut ini : Jadi ada 2 fungsi disini : 1. Sticky Bar berfungsi untuk sarana promosi ( Call To Action ) 2. Sticky Bar juga berguna untuk menutupi space kosong pada bagian atas toko online kita.
  132. 132. Lihat Live Demo Ada 3 buah Sticky bar yang bisa anda pakai untuk keperluan ini: Silahkan anda pilih dari tiga Sticky Bar dibawah dan tentunya yang sesuai dengan keinginan anda. 1. WordPress Notification Bar 2. Notification Bar 3. Fluid Notification Bar
  133. 133. Dalam tutorial ini kami akan memakai yang Sticky Bar yang pertama yakni WordPress Notification Bar. Berikut langkah yang bisa anda lakukan untuk memasang Sticky Bar tersebut. 1. Login ke dashboard Toko online anda dan silahkan menuju ke Add New Plugin • 1. Klik Plugins 2. Klik Add New 3. Ketik WordPress Notification Bar 4. Klik tombol Search plugins 2. Setelah hasil pencariannya muncul, anda akan melihat halaman seperti berikut • 1. Klik Install Now
  134. 134. • 3. Setelah selesai diinstall lanjutkan dengan mengaktifkannya • 4. Setelah anda aktifkan maka lanjutkan dengan mengklik Settings
  135. 135. 5. Pada halaman settings ini kita akan melakukan beberapa hal berikut • 1. Centang untuk menampilkan Sticky Bar tersebut 2. Ketiklah pesan promosi produk anda tersebut 3. Ketik tulisan yang akan tampil pada tombol Call to action di Sticky Bar anda 4. Masukkan link atau url produk anda disini. Jika customer anda mengklik tombol call to action pada point no 3 diatas maka akan menuju kehalaman produk yang anda ketik urlnya disini. 5. Centang Button Target dan Sekaligus centang juga Position Sticky Bar anda
  136. 136. 6. Background color. Dalam contoh ini kami ingin warna hijau yang sama dengan warna hijau dari ClickDesk yang sudah kita install kemarin ( #7EA333 ) 7. Klik tombol Save Changes Sekarang lihat toko online anda , maka saat ini Sticky Bar sudah berada diatas header toko online anda dan mengisi space yang kosong tersebut.
  137. 137. Cara membuat toko online menggunakan WooCommerce (Tahap Dua Puluh Satu) Hari ini kita akan melanjutkan tutorial cara membuat toko online dengan WooCommerce ini dengan pokok pembahasan cara membuat custom menu atau merubah menu bawaan Mystile yang kita pakai sebagai template atau themes toko online kita tersebut. Seperti yang kita ketahui bersama, saat ini toko online yang kita buat sudah mempunyai menu yang muncul secara otomatis tanpa kita buat sendiri. Secara default susunan menu toko online kita akan terlihat seperti gambar berikut : Anda bisa merubah menu tersebut dengan mudah dan bisa anda sesuaikan dengan kondisi toko online anda. Misalnya anda ingin menambahkan menu untuk halaman about us, tata cara belanja, kategori produk anda, contact page dan lain sebagai. Untuk keperluan tutorial ini kami akan membuat beberapa halaman statik / static page dan juga beberapa kategori produk yang bertujuan untuk memudahkan calon pembeli anda dalam memilih dan mencari produk di toko online tersebut. Halaman Static Page Kami akan membuat halaman static page sebanyak 3 buah dengan perincian sbb : 1. Halaman tata cara belanja 2. Halaman about us 3. Halaman contact page Anda boleh membuat halaman static apa saja , silahkan disesuaikan dengan keperluan anda.
  138. 138. Kategori Produk Kami akan membuat 4 buah kategori produk sebagai contoh saja supaya custom menu kita kali ini bisa sedikit menggambarkan situasi yang sebenarnya dalam proses pembuatan toko online anda nantinya. Kami akan membuat kategori produknya sbb : 1. Baju anak 2. Baju Wanita 3. Baju Pria 4. Kamera digital Mohon disesuaikan dengan produk anda terlebih dahulu, kira – kira kategori produk anda yang cocok dengan produk anda tersebut Cara membuat Halaman Static Page Berikut kami berikan contoh cara membuat sebuah halaman static page : • 1. 2. Klik Add New 3. Tulis Judul Halaman Static yang akan anda buat, mis. Tata cara belanja 4. Tulis isi static page anda 5. • Klik Pages Klik Tombol Publish Khusus untuk pembuatan halaman contact page maka sebelum anda membuatnya seperti diatas , anda terlebih dahulu harus melakukan setting Contact Information pada Theme Options
  139. 139. Silahkan menuju Theme Options Mystile anda. kemudian lanjutkan dengan hal berikut ini 1. Klik Contact Page 2. Pilih Contact Information 3. Centang Enable Contact Information Panel 4. Tulis Judul Lokasi Toko Online anda , mis. Our Store Location atau dalam contoh ini kami buat Woo Store Location 5. Tulis alamat lengkap anda 6. Tulis juga no Telp rumah anda / No telp Toko anda 7. No Fax Anda 8. Tulis email anda . Email yang ditulis disini akan berfungsi sebagai email penerima apabila ada customer toko online anda menghubungi anda melalui halaman contact tersebut 9. Twitter Username dikosongi saja . [ tidak berfungsi ] 10. Centang Enable Subscribe 11. Klik Tombol Save All Changes
  140. 140. Jika anda tidak melakukan langkah ini terlebih dahulu dan anda langsung melakukan Add New Page untuk halaman Contact maka anda akan melihat pesan error seperti gambar berikut Sekarang kembali ke halaman Add New Page tadi diatas untuk membuat static page halaman contact
  141. 141. Mari kita lihat terlebih dahulu bagaimana penampilan toko online kita setelah kita menambahkan 3 buah halaman static page yang baru tersebut. Lihat bagian Menu Jika kita perhatikan pada gambar diatas maka menu toko online kita menjadi jelek dan kurang sedap dipandang mata. Kenapa terjadi demikian ? hal ini disebabkan karena Mystile atau themes yang kita pakai dalam tutorial ini secara otomatis akan menambahkan semua static page baru menjadi sebuah menu. Lantas bagaimana cara memperbaiki hal tersebut. Caranya sangat mudah kok , nanti akan kami jelaskan cara memperbaiki susunan menu tersebut. Sekarang mari kita lanjutkan dengan membuat kategori produk terlebih dahulu baru kemudian kita susun secara bersamaan agar tidak 2 kali kerja. Cara membuat Kategori Produk Seperti yang sudah kami jelaskan diatas, kategori produk bisa memudahkan customer kita dalam memilih barang yang ada di toko online kita terlebih jika kategori produk tersebut kita pasang atau kita tempatkan pada menu utama toko online kita. Sebagai gambarannya Silahkan lihat >> Contoh Kategori Produk << Klik. Begitulah kira – kira maksud dari kategori produk tersebut. Jadi misalnya anda menjual berbagai macam jenis produk maka calon customer toko online anda akan mudah mencari produk yang sejenis. Untuk membuat kategori produk silahkan ikuti langkah demi langkah berikut ini :
  142. 142. 1. Mari kita menuju menu products • 1. Klik Products 2. Pilih Categories
  143. 143. 2. Kemudian mulailah membuat kategori produk toko online anda • 1. Name = Tulis nama kategori produk anda , misal : Baju Anak 2. Slug = Tulis slug nya dengan huruf kecil semua dan spasinya di ganti dengan tanda – ( minus ) , misal : baju-anak 3. Display Types = Pilih Products 4. Upload sebuah gambar untuk kategori produk tersebut. Usahakan ukurannya ukuran tinggi dan lebarnya sama, misal : 300 x 300 px 5. Klik tombol Add New Product Category
  144. 144. • 3. Ulangi langkah diatas untuk membuat kategori produk yang lainnya, setelah selesai maka akan terlihat seperti pada gambar berikut Nah sekarang yang perlu kita lakukan selanjutnya adalah mendapatkan link masingkategori produk yang sudah kita buat diatas . Cara mendapat link kategori produk anda adalah sbb : • 4. Letakkan / arahkan kursor mouse anda tepat dibawah salah satu nama kategori produk anda yang akan kita cari link url- nya
  145. 145. • 5. Setelah posisi kursor anda sudah berada dibawah nama kategori produk , pastikan anda melihat tampilan seperti gambar dibawah ini. • 6. Klik kanan View dan Klik copy link location
  146. 146. • 7. Pastekan Link url produk kategori anda tersebut di Notepad. Ulagi langkah tersebut untuk mendapatkan link url kategori produk anda lainnya
  147. 147. Link diatas akan berguna pada saat kita akan membuat custom menu. Setelah selesai semua maka selanjutnya kita akan menempatkan kategori produk tersebut pada menu utama toko online kita. Cara mengatur ulang susunan Menus Mari kita gabungkan antara static page yang telah kita buat diatas dan juga kategori produk toko online kita. 1. Silahkan menuju Menu options • 1. Klik Appearance 2. Pilih Menus
  148. 148. 2. Setelah terbuka lanjutkan dengan langkah berikut • 1. Tulis nama menu anda , Misal : Menu Utama 2. Klik tombol Create Menu 3. Selanjutnya Anda akan melihat halaman seperti berikut • 1. Klik Select All . Kemudian Scroll kebawah sampai anda melihat Sample page yang juga ikut tercentang karena kita mengklik Select All tersebut. Hilangkan centangan Sample page tersebut karena kita tidak akan mengikutkan lagi Sample page tersebut di Menu Utama toko online kita.
  149. 149. 2. • Klik tombol Add To Menu 4. Selanjutnya anda akan melihat calon menu utama anda tersebut terlihat seperti gambar berikut ini. Tanpa ada Sample Page lagi disana Jangan anda simpan terlebih dahulu, lanjutkan dengan langkah berikutnya.
  150. 150. 5. Sekarang kita akan memasukkan Link URL produk kategori ke menu utama kita • 1. Klik Links 2. Masukan satu per satu link produk kategori yang sudah kita buat dan sudah kita paste di Notepad tadi 3. Beri Judul untuk menu produk kategori tersebut 4. Klik tombol Add to Menu Contoh : 1. URL = http://www.toko-online-anda.com/product-category/baju-pria/ 2. Link Text = Baju Pria 3. Kemudian Klik tombol Add to Menu • 6. Ulangi langkah tersebut untuk kategori produk anda yang lainnya. Setelah selesai lama akan terlihat seperti berikut
  151. 151. Coba anda perhatikan bagian bawah gambar berikut , disana anda akan melihat bahwasanya 4 buah kategori produk sudah berada disana.
  152. 152. • 7. Sekarang susunlah menu-menu tersebut seperti gambar dibawah ini Untuk bisa menyusun menunya seperti dibawah ini, anda tinggal Klik kiri salah satu menu tersebut kemudian Tahan dan Geserlah keatas atau kekanan. Jika posisinya digeser kekanan maka akan menjadi sub menu.
  153. 153. 8. Setelah selesai lanjutkan dengan langkah dibawah • 1. Centang Primary Menu 2. Klik tombol Save Menu
  154. 154. • 9. Sekarang lihat Menu di toko online anda maka anda akan melihat seperti gambar berikut • 10. Proses custom menu toko online kita sudah selesai sekarang Untuk lebih memberikan gambaran secara live silahkan lihat LIVE DEMO nya . Sekian dulu tutorial cara membuat toko online dengan WooCommerce tahap ke dua puluh satu ini. Sampai jumpa lagi pada tutorial selanjutnya. Jika anda mendapat masalah , silahkan ajukan pertanyaan di kolom komentar. Sebisa mungkin akan kami bantu mengatasi permasalahan yang anda alami.
  155. 155. Cara membuat toko online menggunakan WooCommerce (Tahap Dua Puluh Dua) Hari ini kita akan melanjutkan tutorial mengenai cara membuat toko online menggunakan WooCommerce tahap dua puluh dua, setelah kita kustomisasi toko online kita dan saat ini sudah cukup baik maka kali ini kita akan belajar bagaimana cara memposting produk yang mempunyai warna berbeda misalnya produk kaos. Sebagai gambarannya begini, Anda mempunyai barang atau produk kaos Polo misalnya. Nah kaos tersebut (model sama dan ukuran sama / all size) namun mempunyai 4 macam warna yang berbeda dan mungkin setiap warna baju tersebut mempunyai harga jual yang berbeda terus anda ingin menjadikan 4 macam warna kaos Polo tersebut di posting dalam satu kesatuan produk. Pada tutorial terdahulu kita pernah belajar cara memposting produk dengan Product Data ” Simple Product ” , nah untuk membuat atau memposting produk dengan menggunakan pilihan warna maka Product Data yang akan kita pakai adalah Variable Product. Untuk mengetahui hasil akhir dalam tutorial ini silahkan anda lihat secara langsung demonya dengan meng-klik tombol dibawah ini, kemudian coba pilih warna baju tersebut, kami yakin anda pasti menyukainya View Live Demo Persiapan Silahkan anda persiapkan 4 buah image produk dengan warna yang berbeda. Dalam contoh ini kami akan memakai produk yang memiliki 4 buah warna yang berbeda. Kami telah mempersiapkan 4 buah kaos berwarna Ungu, Putih, Merah Dan Hitam sebagai gambaran dalam tutorial ini. Mohon untuk diperhatikan dengan seksama langkah demi langkah yang kami jelaskan nantinya supaya anda tidak mengalami masalah yang berarti.
  156. 156. Let’s Start .. 1. Silahkan anda menuju Halaman Add New product • 1. Klik Products 2. Pilih Add Product 2. Setelah halaman Add New product sudah terbuka maka lakukan hal berikut • 1. Tulis Judul Produk anda yang mempunyai pilihan warna tersebut dalam contoh ini kami menulis judulnya : Produk dengan 4 Buah Warna Pilihan 2. Tulis Deskripsi Lengkap produk anda tersebut 3. Pilih Kategori untuk Produk anda tersebut
  157. 157. Sampai disini pastikan sudah benar langkah anda terlebih dahulu, jika sudah benar silahkan lanjut lagi ke langkah no 3 dibawah ini 3. Upload gambar untuk Gallery dan Featured Image anda • Ini masih langkah mudah terlebih dahulu, silahkan upload gambar produk anda sekarang. Caranya masih sama dengan cara memposting produk dengan Product Data ” Simple Product ” yang kemarin sudah kami jelaskan. Note : Featured image cukup 1 dan image yang sudah dipakai untuk featured image tersebut tidak perlu anda pasang lagi pada product gallery karena secara otomatis akan terlihat juga pada product gallery tersebut. Dalam contoh ini yang kami pasang untuk Featured Image adalah kaos warna Ungu ( gambar urutan pertama dari kiri ) dan untuk yang di Product Gallerynya adalah warna Putih, Merah dan Hitam. Lihat gambar berikut ini.
  158. 158. Jika kita preview saat ini maka anda akan melihat tampilan produk anda tersebut serupa dengan gambar berikut ini
  159. 159. Pastikan anda melihat hal serupa dengan contoh tersebut diatas. Seperti yang sudah kami terangkan diatas bahwa featured image akan secara otomatis masuk kedalam Product Gallery ( gambar paling kiri sebelum kaos yang berwarna putih ). Sampai disini masih sangat mudah sekali, silahkan anda lanjutkan dengan dengan langkah yang ke 4 dibawah ini. 4. Sekarang mari kita beralih ke Produk Data [ General ] • 1. Pilih Product Data , Pastikan anda memilih Variable Product 2. Kemudian isilah SKU produk anda ( dalam tutorial ini kami menuliskan SKU-nya : SKU 123456 )
  160. 160. • 5. Sekarang kita beralih ke Inventory Pada bagian Inventory ini anda cukup mencentang pilihan manage stocks saja • 6. Lanjutkan ke bagian Shipping Nah pada bagian shipping ini kami akan memilih atau memakai Shipping Class yang kami beri nama “Kaos”. Silahkan anda buat 1 buah Shipping Class baru untuk produk anda tersebut jika anda memutuskan untuk memakai shipping class yang kemarin sudah pernah kita buat juga tidak ada masalah yang penting ongkos kirim pada Shipping Class yang sudah anda buat kemarin sudah sesuai dan tidak akan merugikan anda. Refresh : Pada tutorial tahap ke sepuluh kemarin kami telah menerangkan cara membuat Shipping Class [ Lihat artikelnya disini ]
  161. 161. 7. Setelah itu lanjutkan ke Linked Products • Pada tutorial ini kami tidak mensetting linked products karena kami tidak mempunyai postingan products untuk Upp Sells maupun Cross Sells- nya. Jadi jika anda akan memasang Linked Product anda tersebut saat ini maka silahkan lihat panduannya pada tutorial kami yang ke sebelas [ Lihat artikelnya disini ] Kami yakin anda sudah memahami caranya dengan baik. 8. Mari kita lanjut ke bagian Attibutes • Ini merupakan Bagian inti dari pokok pembahasan dalam tutorial ini, mohon untuk dipahami maksud dan tujuannya.  Klik tombol Add
  162. 162.  Setelah itu anda akan melihat tampilan seperti pada gambar berikut ini Kemudian lanjutkan dengan langkah berikut ini 1. Name adalah nama untuk attributes produk kita ini. Dalam contoh ini kami buah namanya ” Warna Baju ” anda bisa memberi nama apa saja tergantung dari keinginan anda. 2. Centang Visible on the product page 3. Centang Used for variations 4. Value (s) isi dengan pilihan warna baju yang sesuai dengan variasi warna pada produk anda tersebut. Dalam contoh ini karena kami cuma punya 4 buah warna yakni : ungu, putih, merah dan hitam maka kami tulis seperti berikut :Ungu | Putih | Merah | Hitam . Perhatikan format penulisan diatas, formatnya adalah : Warna [spasi] [tekan Shift + Back Slash ()] [spasi] Warna . Atau cara gampangnya copy paste saja variasi warna kami diatas dan kemudian ganti tulisan warnanya dengan warna yang sesuai dengan kondisi bawah anda saat ini. 5. Klik Tombol Save attributes
  163. 163. Setelah anda klik tombol Save attributes dan proses penyimpanannya selesai maka anda tidak akan melihat ada perubahan sama sekali dengan gambar diatas , anda masih akan melihat tampilan yang sama. Mohon dipastikan saja anda telah meng-klik tombol Save attributes tersebut. Sampai disini pastinya anda akan sangat mudah memahaminya. Jika belum mohon jangan lanjutkan ke langkah berikutnya agar anda tidak salah langkah. Silahkan pahami terlebih dahulu. Jika sudah paham betul dan langkah anda sudah sesuai dengan yang ada di gambar maka mari kita lanjut lagi ke langkah berikutnya
  164. 164. 9. Pada bagian Advanced ini anda tidak usah mengisi apapun jadi silahkan lewati • saja Pastikan satu hal saja disana bahwa untuk pilihan Enable reviews sudah tercentang ( secara default ini sudah tercentang dengan sendirinya ) 10. Final Step. Mari kita lihat bagian selanjutnya yakni Variations • Ini merupakan langkah terakhir sekaligus penentu untuk membuat pilihan warna produk yang kita posting tersebut. Silahkan anda klik Variations dan anda akan melihat tampilan seperti pada gambar berikut ini Selanjutnya secara berurutan yang anda lakukan adalah sbb : 1. Klik tombol Add Variation
  165. 165. Setelah itu anda akan melihat tampilan anda seperti berikut ini Sekarang kita isi produk dengan Warna yang pertama yakni yang ada pada features image terlebih dahulu. Pada contoh diatas warna kaos pada featured image adalah warna ungu. Note : Agar terlihat rapi dan berurutan maka mulailah dengan urutan sebagai berikut : 1. Warna Kaos yang ada dalam Featured Image ( Ungu ) 2. Warna kaos no 1 pada product gallery ( Putih ) 3. Warna kaos no 2 pada produk gallery ( Merah ) 4. Warna Kaos no 3 pada product gallery ( Hitam )
  166. 166. Mari kita mulai dengan yang pertama ( Warna Kaos Ungu ) 1. Pilih Warna Ungu 2. Upload atau pasang gambar kaos warna ungu anda 3. Tulis Jumlah stok baju warna ungu anda disana Misal : 10 4. Tulis Harga untuk Kaos Ungu tersebut Misal : 100000 ( seratus ribu ) ingat penulisan angkanya tidak usah pakai titik 5. Shipping Class = Pilih Kaos atau Pilih saja shipping class yang anda punya dan sudah anda buat pada langkah sebelumnya 6. Klik Tombol Add Variation Setelah anda Klik tombol add variation tersebut maka anda akan melihat tampilan seperti pada gambar berikut
  167. 167. Mari kita lanjutkan dengan yang kedua ( Warna Kaos Putih ) 1. Pilih Warna Putih 2. Upload atau pasang gambar kaos warna putih anda 3. Tulis Jumlah stok baju warna ungu anda disana Misal : 15 4. Tulis Harga untuk Kaos Ungu tersebut Misal : 110000 ( seratus sepuluh ribu ) ingat penulisan angkanya tidak usah pakai titik 5. Shipping Class = Pilih Kaos atau Pilih saja shipping class yang anda punya dan sudah anda buat pada langkah sebelumnya 6. Klik Tombol Add Variation
  168. 168. Mari kita lanjutkan dengan yang ketiga ( Warna Kaos Merah ) 1. Pilih Warna Merah 2. Upload atau pasang gambar kaos warna merah anda 3. Tulis Jumlah stok baju warna ungu anda disana Misal : 20 4. Tulis Harga untuk Kaos Ungu tersebut Misal : 120000 ( seratus dua puluh ribu ) ingat penulisan angkanya tidak usah pakai titik 5. Shipping Class = Pilih Kaos atau Pilih saja shipping class yang anda punya dan sudah anda buat pada langkah sebelumnya 6. Klik Tombol Add Variation
  169. 169. Mari kita lanjutkan dengan yang keempat / terakhir ( Warna Kaos Hitam ) 1. Pilih Warna Hitam 2. Upload atau pasang gambar kaos warna hitam anda 3. Tulis Jumlah stok baju warna ungu anda disana Misal : 25
  170. 170. 4. Tulis Harga untuk Kaos Ungu tersebut Misal : 130000 ( seratus tiga puluh ribu ) ingat penulisan angkanya tidak usah pakai titik 5. Shipping Class = Pilih Kaos atau Pilih saja shipping class yang anda punya dan sudah anda buat pada langkah sebelumnya 6. Klik Tombol Preview (jangan klik tombol Add Variation lagi) untuk melihat hasil kerja kita sebelum kita publish
  171. 171. Setelah anda klik tombol Preview maka anda akan melihat tampilan produk anda seperti pada gambar berikut ini. Silahkan coba pilih warna kaos dari halaman tersebut, maka secara otomatis akan menampilkan gambar , harga dan stock dari produk tersebut. Cukup lumayan bagus bukan ?? Jika sudah OK maka silahkan Klik tombol Publish agar product anda bisa dilihat oleh customer anda. Semoga tutorial ini bisa bermanfaat bagi anda semuanya dan sekaligus anda bisa menguasai metode posting produk menggunakan Product data = Variable Product.
  172. 172. Cara membuat toko online menggunakan WooCommerce (Tahap Dua Puluh Tiga) Pada tahap ke dua puluh tiga ini , cara membuat toko online dengan WooCommerce akan membahas mengenai bagaimana cara memposting produk dengan menggunakan produk data ” Grouped Product ” . Kemarin kita telah membahas mengenai produk data ” Variable Product ” yang saat ini pasti anda sudah paham betul bagaimana cara membuatnya. Grouped product ini digunakan untuk memposting produk yang mempunyai spesifikasi tertentu namun masih satu jenis. Biasanya grouped product ini sering digunakan untuk barang – barang elektronik seperti HP, Tablet, Playstation dan lain sebagainya. Agar lebih jelas lagi mari kita ambil sebuah contoh supaya anda lebih gampang dan cepat mengerti maksud dan tujuan pemakaian produk data “Grouped Product” ini. Misalnya anda akan menjual iPhone 5 di toko online anda tersebut, ternyata iPhone tersebut mempunyai harga yang berbeda – beda tergantung dari besarnya memory internalnya. Untuk memposting iPhone tersebut dalam satu kesatuan yang utuh maka kita memerlukan Grouped Product tersebut. Mari kita perjelas lagi dengan mempraktekkannya secara langsung dengan produk iPhone yang sudah kami persiapkan dibawah ini. Live Demo
  173. 173. Warna iPhone 5 : Putih Harga iPhone 5 ada tiga :  iPhone 5 16GB Rp. 7.500.000,-  iPhone 5 32GB Rp. 8.500.000,-  iPhone 5 64GB Rp. 9.500.000,- Kami harap anda mengerti terlebih dahulu ilustrasi diatas sebelum memulai mengikuti tutorial ini agar nantinya jika anda mempunyai produk dengan kondisi seperti dalam contoh ini anda tidak akan kebingungan.
  174. 174. Ada 4 langkah atau 4 kali proses memposting produk jika kita memakai Grouped Product untuk iPhone 5 diatas 1. Memposting Produk Induknya / Parent Product 2. Memposting Produk Turunannya / Child Product 1 ( iPhone 5 16 GB ) 3. Memposting Produk Turunannya / Child Product 2 ( iPhone 5 32 GB ) 4. Memposting Produk Turunannya / Child Product 3 ( iPhone 5 64 GB ) Memposting Produk Induk Yang pertama kali kita buat adalah Produk induknya terlebih dahulu yang berisi spesifikasi lengkap iPhone 5 warna putih, kategori, featured image, product gallery dll. Pada dasarnya ini membuat postingan produk induk ini sama dengan produk lainnya. 1. Login ke dashboard toko online anda dan lakukan dibawah ini • 1. 2. Klik Add New Product 3. Tulis Judul Produknya = Misalnya New iPhone 5 4. • Klik Products Tulis diskripsi dari product anda secara lengkap 2. Pilih atau buat kategori produk tersebut Dalam contoh ini kami membuat sebuah kategori produk yakni Smart phone
  175. 175. • 3. Upload Gambar untuk Featured Image dan Product Gallery Silahkan upload gambar untuk product gallery dan juga gambar untuk featured imagenya. Caranya sama seperti yang sudah kami jelaskan pada tutorial – tutorial kami terdahulu.
  176. 176. • 4. Pada Product Data pilihlah Grouped Products Disini anda harus memilih Product datanya ” Grouped Product ” dan jangan yang lainnya. Untuk Linked Products , Attributes dan advanced tidak perlu anda isi apa – apa ketika memposting product indul ini. • 5. Klik tombol publish Setelah anda selesai dengan langkah no 4 diatas, silahkan anda langsung klik tombol Publish Jika dilihat produk tersebut maka anda akan melihatnya persis seperti pada gambar dibawah ini ( tidak ada Harganya )
  177. 177. Proses memposting produk induknya sudah selesai , lantas bagaimana dengan harga dan lainnya ? Kenapa produk induknya hanya seperti itu saja ? Tenang… kita akan akan melengkapi kekurangan data produknya seperti SKU , Harga dan yang lainnya melalui Produk turunannya. Silahkan lanjutkan dengan langkah dibawah ini .. Memposting Produk Turunan Disinilah kita akan melengkapi kekurangan pada Produk induk yakni dengan memposting produk turunan yang dalam contoh ini ada 3 yakni :  iPhone 5 16GB Rp. 7.500.000,-  iPhone 5 32GB Rp. 8.500.000,-  iPhone 5 64GB Rp. 9.500.000,- Langkah dalam memposting produk turunan ini pada prinsipnya sama semua, jadi disini kami hanya akan memberikan contoh cara memposting 1 buah produk turunan saja yakni : iPhone 5 16 GB Penting !!
  178. 178. Yang berbeda nantinya adalah :  Judul Produknya : Kalau yang pertama adalah iPhone 5 16 GB , yang kedua iPhone 5 32 GB dan yang ketiga iPhone 5 64 GB  SKU nya : Buatlah SKU yang berbeda contoh jika format SKU yang pertama adalah ” SP 001 ” maka yang kedua ” SP 002 ” dan yang ketiga ” SP 003 “  Harga produknya : Jika Produk yang pertama mempunyai harga Rp. 7.500.000,- maka yang kedua di tulis Rp. 8.500.000,- dan yang ke tiga Rp. 9.500.000,- ( lihat list harga diatas ) Jadi nanti anda tinggal memposting produk turunan ini 3 kali dengan cara yang sama. Product Turunan Pertama 1. Masih dari dalam dashboard toko online anda • 1. 2. Klik Add New Product 3. Tulis Judul Produk turunan yang pertama = Misalnya iPhone 5 16GB 4. • Klik Products Biarkan Kosong Deskripsi lengkapnya 2. Kategori produk tidak perlu dicentang / biarkan kosong
  179. 179. • 3. Product gallery dan featured image biarkan kosong • 4. Pada area Product data lakukan hal berikut ini [ General ] 1. Pilih Product Data = Simple Products 2. Tulis SKU produk turunan pertamanya , contoh SP 001 3. Tulis Harganya , contoh 7500000 ( tanpa tanda titik )
  180. 180. 4. Lanjutkan ke bagian Inventory • Jika anda ingin menampilkan jumlah stok produk anda tersebut maka lakukan 1. 2. • Centang Manage Stock Tulis jumlah stok barang anda , misal : 10 5. Pilih Shipping Class untuk meng-handle biaya pengiriman product tersebut Pada contoh dibawah ini kami menggunakan Shipping Class yang pernah kami buat sebelumnya yakni Kamera Digital . anda bisa juga membuat Shipping Class yang lain. Ini sebagai gambaran saja.
  181. 181. • 5. Lanjut ke Linked Products Pada bagian Linked Products ini peranan Parent Product atau Produk Induk mulai muncul, Anda akan melihat menu baru yang bernama Grouping . Posisinya tepat dibawah Upp Sells dan Cross Sells ( pada contoh ini Upp Sells dan Cross Sellsnya tidak kami isi karena kami tidak atau belum memposting product Smart phone lainnya ) Silahkan anda pilih New iPhone 5 Nama Grouping tersebut terbentuk secara otomatis menggunakan Judul produk ketika kita memposting Parent Productnya / Produk induknya. Pada postingan produk induk yang kami contohkan diatas kami menulis New iPhone 5 makanya muncul di Grouping tersebut nama New iPhone 5 . Jika anda membuatnya dengan nama lain maka yang muncul juga beda. Jadi nama grouping ini akan sama dengan judul produk induk yang telah kita buat sebelumnya. Untuk attributes dan Advanced kita lewati saja, tidak ada yang perlu kita isi, lanjutkan dengan langkah dibawah ini.
  182. 182. 7. Alihkan pandangan anda ke pojok kanan atas • Lihat pada area Preview dan tombol Pusblish. Disana anda akan melihat Catalog visibility: Catalog/search Klik link Edit disamping sebelah kanan tulisan tersebut. 8. Setelah terbuka maka lakukan hal berikut • 1. Pilih Hidden 2. Klik tombol OK
  183. 183. • 9. Langkah berikutnya adalah mempublish produk turunan pertama kita • 10. Ulangi langkah diatas untuk memposting produk turunan yang lainnya jika semuanya telah selesai maka anda akan melihat hasil kerja anda tersebut persis seperti gambar dibawah ini
  184. 184. Proses memposting produk dengan menggunakan Produk Data ” Grouped Product” sudah selesai , semoga anda bisa memahaminya dengan baik dan juga anda tidak mengalami permasalahan apapun ketika mempraktekkan tutorial diatas. Jika anda mengalami masalah, silahkan anda tulis pada kolom komentar dibawah ini.
  185. 185. Cara membuat toko online menggunakan WooCommerce (Tahap Dua Puluh Empat) Salah satu permasalahan yang sangat penting dalam mengelola sebuah toko online adalah permasalahan biaya pengiriman barang dan juga jasa pengiriman apa yang kita pakai untuk meng-handle semua pengiriman barang yang sudah dibeli oleh customer kita. Mengingat toko online kita akan diakses oleh masyarakat luas dari berbagai daerah diseluruh indonesia maka ada satu hal lagi yang menjadi kendala terutama jika anda mendapatkan customer dari luar pulau jawa dan terutama jika si pembeli tersebut bertempat tinggal di sebuah perumahan yang tergolong baru. Sebagai contoh riil begini, kami tinggal di perumahan yang tergolong baru. Jika ada sanak famili kami mengirimkan paket dan memakai jasa pengiriman tertentu ( sebut saja namanya Jasa Pengiriman A )itu kiriman paket tersebut bisa sampai ke rumah kami. Namun jika memakai jasa pengiriman yang lainnya maka kiriman tersebut tidak akan pernah sampai kerumah kami jadi untuk mengambilnya kami harus menjemput langsung ke kantor jasa pengiriman paket tersebut. Melihat contoh permasalahan diatas jika misalnya kami sedang berkunjung ke toko online dan ternyata anda tidak menyediakan pilihan pengiriman barang menggunakan jasa pengiriman A maka kami tentu akan sedikit ragu barang yang kami beli dari toko online anda tersebut akan sampai kerumah kami atau tidak. Kemungkinan terbesar keputusan yang kami ambil adalah kami akan mencari toko online lainnya yang menyediakan barang yang kami butuhkan namun juga memakai Jasa pengiriman A yang bisa menjamin barang kami yang dibeli dari toko online anda tersebut bisa sampai kerumah kami tanpa harus repot lagi. Inilah mengapa kita harus menyediakan beberapa opsi pilihan mengenai jasa pengiriman apa yang kita pakai di toko online kita agar calon customer kita tetap bisa berbelanja di toko online yang kita kelola tersebut. Setidaknya langkah ini bisa meminimalisir kemungkinan batal transaksi yang akan terjadi karena tentunya akan berdampak turunnya penjualan produk toko online anda. Untuk mengatasi permasalahan tersebut diatas maka kali ini kita akan belajar membuat beberapa opsi pilihan jasa pengiriman tersebut di toko online kesayangan kita tersebut. Cara menambahkan Opsi Jasa Pengiriman Barang Sebelumnya mari kita lihat terlebih dahulu contoh penggunaan opsi pilihan jasa pengiriman tersebut dengan melihat contoh gambar dibawah ini.
  186. 186. Opsi pengiriman pada produk yang tidak menggunakan Shipping Class Pada gambar diatas merupakan penerapan opsi pengiriman pada produk yang tidak menggunakan Shipping Class. Jika produk tersebut tidak menggunakan Shipping Class apapun maka ongkos kirim yang akan kita jelaskan pada tutorial ini akan berdampak langsung pada produk tersebut.
  187. 187. Opsi pengiriman pada produk yang menggunakan Shipping Class Pada tutorial sebelumnya kita sering membahas mengenai biaya pengiriman dengan menggunakan Shipping Class. Jika customer kita akan membeli produk yang sudah kita setting dengan biaya pengiriman melalui shipping Class maka secara otomatis tarif shipping class produk tersebut akan mereplace atau menggantikan ongkos kirim dasar pada area Cart toko online kita. Let’s Start .. Untuk membuat pilihan opsi pengiriman diatas maka kita akan memodifikasi Shipping Flat Rate .
  188. 188. 1. Silahkan anda login terlebih dahulu ke dashboard toko online anda dan kemudian • lakukan langkah dibawah ini 1. 2. Pilih Settings 3. Pilih Shipping 4. • Klik WooCommerce Pilih Flat Rate 2. Gantilah Method Title dari Flat Rate menjadi nama jasa pengiriman default toko online anda Jika toko online anda menggunakan PT Pos Indonesia sebagai pilihan awal jasa pengiriman yang anda pakai dan menggunakan pengiriman reguler maka tulislah pada method title PT POS Indonesia Reguler atau dalam contoh ini kami menuliskanPOS Reg ( 4 hari ) yang secara tidak langsung akan menjelaskan kepada pembeli toko online kita bahwasanya barang yang mereka beli itu akan dikirim Via Pos reguler dan akan sampai dalam kurun waktu 4 hari .
  189. 189. Nantinya dihalaman Cart toko online anda Menthod Title itu akan terlihat seperti pada gambar berikut • 3. Menambahkan biaya pengiriman dasar jika menggunakan PT POS Indonesia

×