Hallo teman2 jika kalian mencari tutorial cara membuat website toko online atau Ecommerce tanpa perlu tau coding ataupun programming ini adalah tutorial yg tepat buat kalian. Di video ini saya jelaskan langkah demi langkahnya secara lengkap, cara bikin website sendiri untuk jualan online, menggunaakan WordPress dan Woocommerce sebagai platformnya.
Setelah mengitkuti tutorial ini kalian bisa membuat website toko online, yg memiliki list produk, detail produknya dengan popoup add to cart button seperti ini, juga terhubung dengan whatsapp jadi pelanggan bisa langsung chat menanyakan produknya dll, serta pembayaran yg langsung terintegrasi dengan kurir lokal untuk menentukan biaya kirim, Jangan khawatir tutorial ini saya buat sangat simple agar semua orang bisa mengikutinya. Pastikan ikuti step by stepnya dari awal OK.
Pada tutorial kali ini saya akan bagi menjadi 4 tahap.
- Langkah 1 Mencari Hosting & Domain
Di tahap pertama terdapat 3 langkah yang pertama mencari Hosting & domain, Hosting adalah server atau storage untuk menyimpan files2 yg dibutuhkan utk membuat website agar bisa diakses secara online selama 24 jam oleh semua orang pemilihan hosting sangat penting teman2 karena ini akan berpengaruh pada kecepatan loading website kita untuk mendapatkan hosting dan domain.com gratis caranya klik link ini : Link Hosting & Domain : http://bit.ly/53O-Y0u7ub3
Nah sekarang kita akan dibawa ke page dari niagahoster, yg saya rekomendasikan sebagai penyedia hosting terbaik di indonesia, klik pilih hosting, tersedia pilihan paket hosting dari bayi, pelajar, personal dan bisnis untuk mendapatkan domain gratis saran saya ambil dari paket pelajar, personal atau bisnis
contoh kali ini saya akan mengambil paket personal diskonnya itu upto 75 persen dengan fitur unlimited disk space, bandwith, email, dll di paket ini kita juga dapat gratsi domain serta Gratis SSL srtificate selamanya, dari pengalaman saya selama 4 th mengunakan niaghoster support chat sangtlah baik & aktif dan yg paling penting uptime dari server itu 99 persen hampir 100 persen jadi saya sangat merekomendasikan hosting ini. OK
Pilih hosting, pilihan pembayaran ada per 6 bulan, 1 thn, 2 thn atau 3 thn untuk dapat diskon 75% ambil 3 thn maka perbulan hanya menjadi 26 ribuan saja untuk 3 tahun ya contoh kali ini saya akan ambil yg satu tahun saja.
Di paket personal itu kita akan mendapatkan domain dengan TLD .com gratis saya sudah menyiapkan nama domainya: mywebstutorial.com lalu chek availablelitinya, Jika tersedia harga menjadi 0 rupiah alias gratis tanpa biaya domain klik tambahkan ke cart total menjadi tujuh ratus ribuan, ow ya tenang saja saya memiliki kode kupon diskon sebesar 10 % yg bisa kalian gunakan. sekarang klik lanjutkan.
Rekomendasi fitur tambahan ini ada biaya lagi ya teman2 : ada auto instal wordpress sementara ini saya tidak perlukan, SSL sertifikat juga sudah dapat gratis, perlindungan privasi juga tidak saya perlukan jika kalian menambahkan salah satu fitur ini itu optional saja.
Klik lanjutkan, disini silahkan pilih pembayaran yg sudah disediakan bisa gunakan pembayaran otomatis atau manual, saya akan pilih pembayaran otomatis dengan BCA virtual Account untuk mendapatkan diskon 10 % masukan kode diskon nya “EASYWEBSI” klik gunakan dari 700.000 diskon 10 % persen menjadi 631.000 saja, sebelum melakukan pembayaran kita akan membuat akun terlebih dahulu pilih tab “belum punya akun” sekarang masukan detail yg diminta masukan email, Password harap dicatat baik-baik email dan password yang digunakan kita akan perlukan nanti untuk masuk ke c panel setelah formnya lengkap – Klik chekout sekarang saya akan bayar dulu dan konfirmasi
Setelah ini kita akan diarahkan ke member area dari Niagahoster… disini ada survey dari Niagahoster ikuti saja seperti ini nah sekarang di member area ada 2 layanan yg kita punya yaitu hosting dan domain pada tab hosting dibawah ini klik kelola hosting… lalu klik tab cpanel dan klik all feature – nya
- Langkah 2
Menginstall SSL sertifikat, untuk keamanan website agar datanya terenkripsi ketika di akses gambaranya kira2 seperti ini jadi website kita lebih aman selain itu website dengan SSL (secure socket layer) lebih dipilih google untuk ditampilkan pada list halaman satu google istilahnya lebih SEO friendly cirinya ada icon padlock seperti ini keuntungan hosting di niagahoster kita bisa issued SSL certificat gratis
Dari Cpanel kita bisa scroll kebawah atau ketik saja di search box : SSL ini dia klik let’s encrypted ssl lalu pada nama domain nya klik issued lalu centang dns 01 setelah itu include wild card nya itu dicentang semua begitu juga dengan add cpanel subdomain. lalu klik Issued Jika berhasil akan seperti ini lalu klik go back, ini artinya domain kita sudah terinstal ssl sertifikat, sekarang dari sini kembali ke home cpanel hover ke sini klik.
- Langkah 3
Menginstal WordPress, wordpress adalah CMS atau content management system yg sudah sangat familiar digunakan oleh para proffesional untuk membuat website, jadi platform WordPress ini sangat bisa diandalkan untuk membuat web blog, perusahaan dan juga ecommerce atau toko online.
Dari Cpnel di search box ketik Apps di kolom softacoulus installer itu ada wordpress nah ini dia – klik – instal Now di choose protokol kita bisa pilih https dengan www atau tanpa wwww lalu pilih nama domainya in directory dikosongkan saja site name sesuai dengan nama website di site description beri deskripsi singkat lalu tambahkan username masukan Password atau gunakan password generator ini, sekali lagi agar di save ya username dan pasword wordpressnya
Email masukan alamat email yg kita punya dulu, teman teman juga bisa membuat email bisnis dengan nama domain kita sendiri dicpanel link yg dibutuhkan sudah saya lampirkan di deskripsi masukan emailnya lagi dsini lalu klik instal, jika tejadi errors seperti ini jangan khawatir centang saja ini untuk mengoverwrite file yg ada lalu kembali klik instal. Ya kita sudah berhasil menginstal wordpress, sekarang klik link administratif url nya maka kita akan dibawa masuk ke dashboard wordpress, untuk membuat website dengan wordrpress itu ada banyak piihan tema gratis hover ke appearance – themes – add new
Tahap kedua ada 4 langkah
- Di langkah pertama kita akan mencari theme toko online yang sesuai dengan market lokal
Disini kita bisa memilih tema yg sesuai misal untuk blog, ecommerce education company profile dll, khusus tutorial toko online ini saya sudah mencari theme yg sesuai dengan market lokal seperti ada whatsapp button, popup cart, terintegrasi dengan kurir lokal serta cara setting yg simple.
Pada umumnya kita akan membeli plugin agar website berfungsi sesuai yg kita inginkan, untuk newbie atau yg masih awam itu biasanya agak sedikit ribet membeli plugin lagi untuk kurir, popup cart, whatsup dll akan lebih repot lagi dan memakan waktu untuk baca dokumentasinya karena itu saya merekomendasikan satu theme buatan indonesia yg saya rasa sangat cocok untuk market lokal keuntungnya sekali beli kita dapat semua plugin yg dibutuhkan – klik link dibawah ini, Theme Toko Online : https://bit.ly/304963M
Maka kita akan dibawa ke tokopress.id
Disini kita juga akan mendapatkan bonus template elementor ini yg bisa kita gunakan, keunggulan lainya sudah menggunakan mobile first teknologi artinya loading web akan lebih maksimal pada smartphone ini sangat penting apalagi sudah didukung hosting yg baik. serta fitur komplit untuk woocommerce tanpa perlu mengeluarkan biaya tambahan lagi. Sekarang hover ke wp themes kita lihat dulu seperti apa theme nya klik. Scroll ke bawah kalian bisa pilih theme yg cocok sebagai basic, tentu nanti kita bisa rubah desain & product apa yg dijual, misalnya saya akan memilih template ini klik selengkapnya
Ok ini dia templatenya sudah responsive desain artinya akan tampak serasi di berbagai ukuran gadget mobile first teknologi dengan loading sangat cepat hanya 1,9 detik, fitur woocommerce yg super komplit ada WA button yg terintegrasi dengan produknya langsung, ada order status label ada indo ongkir meliputi kecamatan di indonesia yg terintegrasi langsung saat pembayaran support sebagian besar perusahaan ekspedisi di Indonesia dan masih banyak lagi lainya.
Harga dari 799.000 gunakan kode kupon : (EW2020 ) untuk mendapat potongan diskon 50 % klik miliki sekarang masukan kode kuponya EW 2020 lalu aktifkan dan sudah menjadi 399.000, ok sekarang buat username, password, lalu lengkapi data pribadi lalu centang persetujuanya lalu klik beli sekarang, baiklah saya akan melakukan transfer pembayaran dlu.
Ok saya sudah transfer, di refresh dulu page nya, nah sekarang payment statusnya sudah aktif lalu hover ke member area klik pada download produk ini dia template adora, yg lainya itu bonus template elementor teman2, pertama kali download dulu template adoranya setelah selsai mendownload sekarang balik ke dashboard wordpress yg tadi di appearance – theme – add new theme lalu sekarang upload file theme tadi choose file ini dia filenya adora open lalu klik instal.
- Langkah ke dua Install themenya & Langkah ke tiga setup theme wizard
Tunggu beberapa saat setelah itu aktifkan. sekarang kita akan setting wizardnya klik start tinggal ikuti saja teman2 klik instal child theme untuk aktifasi copy license key di member area lalu paste disini klik aktifkan iktui lagi instal pluginya klik instal setelah setup toko onlinenya klik run setup tunggu sampai 100% baiklah proses set up sudah selesai, sekarang klik lihat website nah ini dia websitenya teman2 balik ke setting sebelum memasukan produk, ikuti panduan setting awal dibawahnya,
Ganti no whatsapp – masukan disini no WA nya lalu klik publish balik ke setting ikuti panduannya lagi klik ganti no rekening bank – ganti no rekeningnya kita juga bisa menambahkan rekening lain ya klik add account seperti ini misal nya Bank BNI no rekeningnya setelah klik save changes ikuti lagi setup selanjutnya klik ganti asal pengiriman klik go to shipping zone default nya Indonesia kurir yg tersedia JNE dan Pos nti kita bisa edit juga sesuai yg kita mau.
kita juga bisa menambahkan zona tertentu untuk shipping caranya klik add shipping zone pada region ketik provinsinya misal bali dan nusa tenggara barat beri nama misal Bali Nusa lalu klik shipping method kita bisa atur khusus untuk wilayah bali nusa kurirnya menggunakan misalnya J&T ya lalu klik add shipping method seprti ini balik ke shipping zone ini artinya khusus wilaya bali nusa menggunakan kurir dari J & T dan wilayah indonesia lainya menggunakan JNe & POs.
Baiklah kita lanjut lagi ke setting berikutnya – Ganti metode pengiriman untuk ongkir, sama seperti tadi kta juga bisa mengganti atau menambahkan layanan ekspedisi yg lain contoh saya akan edit zona Indonesia klik add shipping method tambahkan misalnya Tiki ya lalu add shipping method kalian juga bisa drag ke atas urutan yg pertama akan otomatis tercentang saat pembayaran.
Lanjut ke setting klik – ganti format form chekout nah ini saya biarkan default saja, ini form isian saat customer melakukan chekout atau pembayaran saya sudah suka tampilan form chekout nya yg simple jadi saya tdak rubah lagi. Misalnya kalian ingin menampilkan address 2 di form di show pilih yes, required kalau wajib di isi pilih yes jadi seperti itu kira saya tidak save karena saya menggunakan mode defaultnya saja
Lanjut ke setting – nah itu ada facebook pixel untuk tracking iklan di fb ads kta skip dlu ini theme setting di skip saja nti kta bisa akses dari dashbord ow ya jangan semua settingnya itu bisa di aksess lagi nah sekarang di shop atau dihalaman web refresh untuk melihat apa saja yg kita setting tadi, klik salah satu produk contoh produk 2, ini detail produknya teman2,
Pada setting wizard tadi kita sudah ganti no wa nya – dan ketka customer ingin menayakan produk 2 ini melalui Whatsapp – chat seller akan menuju ke whatsapp tersebut yg otomatis berisi chat menanyakan produk ini sehingga memudahkan admin untuk memfollowup pertanyaan dari customer tersebut. Ok sekarnag balik ke detail produk misal customer klik mau beli produk ini klik tambah keranjang lalu klik view cart di halaman chekout customer hanya mengisi nama misalnya Agus, alamat nah pada kecamatan contoh denpasar timur lalu no HP /whatsapp karena pengiriman ke Balinusa tadi kita sudah set hanya menggunakan kurir J&T regular saja OK, tapi jika pengiriman ke daerah lain di Indonesia misal ke suranenggala cirebon maka kurir akan otomatis ke Tiki, JNE regular dan pos seperti ini, lalu customer bisa klik buat pesanan dan melakukan transfer pembayaran. seperti ini, sampai disini saya rasa tidak ada yg susah tiggal diikuti saja, ini saya tutup dulu jendela tabnya, setting wizard ini itu kita bisa akses lagi nanti.
Sekarang hover kesini lalu klik dashboard – sebelum mulai memasukan produk kita download 1 plugin lagi hover keplugin saya akan delete 2 plugin ini akismet dan hello dolli ini tidak saya perlukan centang lalu pada bulk action pilih delete apply. Sekarang klik add new plugin lalu pada search box ketik elementor… nah ini dia plugin nya elementor page builder klik install lalu aktifkan ok setelah selesai sekarang kita lanjut ke product hover ke produk lalu klik all produk nah disini ada contoh2 produk yg ada di shop page kita tadi.
- Langkah ke empat menambahkan produk
Untuk menambah produk bisa klik add new – tulis nama produknya contoh kaos pria lengan panjang masukan deskripsi lengkapnya disini, saya udh siapakn untuk contoh kopi paste disini, setelah itu scroll ke bawah pada product data pilih variable produk jika ada variasi warna ukuran dll.. pada tab inventory SKU itu artinya stock keeping unit ini agar mudah memantau stok produk apa yg sisa bisa diisi kode seperti ini misalnya KPL001, lalu manage stok nya bisa dicentang dan sesuaikan jumlah stok yg ada, allow backdoor order pilih do not allowed, sisa stok minimalnya sisa 2, centang ini jika produk hanya bisa diorder sekali saja, saya akan unchek saja.
lanjut ke tab shipping isi berat nya misal 300 gram, dimensinya bisa diisi untuk produk seperti lukisan, meja dll… kota asal pengiriman misal dari Denpasar lanjut ke tab link produk jika ada produk upsel atau crossle misal aksesoris atau sepatu, atau produk yg bisa di rekomendasikan lagi. lanjut ke atribut, untuk menambah variasi produk seperti ukuran atau warna itu harus ditambahkan dulu di atribut caranya add custom produk atribut isi nama atributenya misal SIZE lalu pada value tulis size nya misal M | L | centang used for variation lalu save atribut.
Untuk menambah variasi lainya add custom atribut misal variasi ke 2 untuk color. lalu di value misalnya blue and white jangan lupa centang used for variation dan save atribut, nah sekarang sudah ada size dan color. Ok lanjut ke tab variation sekarang tambahkan atribut yg sudah kita buat tadi ada 2 cara add variation biasa tanpa detail stok dan variasinya saya contohkan saja ya pilih create variation from all atribut klik Go lalu Ok
Maka otomatis akan terisi 2 size M color blue and white dan 2 size L warna blue dan white bisa disesuaikan dengan stok yg kita punya misal hanya ada color white untuk size L saja jadi lebih detail ya. Lalu untuk mengisi detail nya klik saja ini – sekrang bisa diisi SKU, harga, dan detail lainya, begitu juga yg lain sesuaikan dengan produk masing2 sekarang contoh yg pertama… ini bisa di delete juga ya pilih Add variation klik go maka ada any size & any color yg bisa kita tentukan tentukan tanpa deatail stok warna dan lain2 color klik disini muncul drop down lalu lengkapi detailnya SKU misal kaos lengan panjang 001.
Isi regular price nya misal harga 150 k dan jika ada sale tulis juga di price nya jadi 100 k misalnya kita juga bisa atur jadwal salenya klik schedule seperti ini lalu pilih tgl start nya juga tgl berakhirnya, schedule saya cancel stok status pastikan instock berat misal 300 gram diskripsi saya kosongkan saja lalu klik save changes. Pada tab advance ini kalo mau dikasi catatan tambahan bisa di isi disini Ok ini saya pake defaultnya saja lalu sekarang scroll ke bawah, product short diskripsion sebaiknya di isi saya udh siapkan untuk contoh kopi paste biar rapi saya kasi bullet untuk fiturnya sekarang masukin product image nya set product image kalian bisa upload seperti ini sebagi contoh saya gunakan gambar yg sudah ada d library select lalu open, masukan gambar lainya di produk gallery bisa lebih dari satu image seperti ini lalu add to gallery pada produk tags bisa ditambahkan ini optional ya boleh di isi misalnya kaos pria, lengan panjang sesuaikan saja dengan produknya, lalu membuat kategori add new kategori misal ini untuk koleksi pria saya buat kategori men’s lalu klik add new kategori lalu centang
Ok jika semua sudah lengkap klik publish…
nah klik view product pada produknya sekarang dari atas judul kaos pria lengan panjang harga ada harga diskon lalu ada short diskripsinya, juga ada plihan variasi size dan color ada add to cart dan Whatsapp button lengkap dengan SKU kategori dan tag serta tombol sharing untuk social media, dibawahnya ada deskripsi lengkap, informasi tambahan dan ulasan, balik ke dashboard lalu klik produk sekarang produk kaos lengan panjang sudah ada di list produk,
Tambahkan produk lainya kita juga bisa mengganti dari sample produk klik – ganti title produknya isi deskripsi, lalu scroll ke bawah nah misal kita buat simple produk pilih jadi tanpa ada variasi ukuran dan warna harganya misal 200k tanpa sale, lalu ke tab inventori sama seperti tadi kalian bisa isi lengakapi ini saya hanya buat contoh saja untuk simple produk tab atribut ini saya delete saja pada short diskripsi silahkan di isi, lalu masukan image dan image gallery isi produk tagnya dan jika ini termasuk kategori baru bisa dibuat lagi kategorinya misal aksesoris add kategori centang lalu klik publish sekarang klik view produk.
Ok sekrang akan jadi seperti ini simple produk tanpa isi variasi ukuran dan warna, tidak susah kan teman2 untk menambahkan produk. ow ya jika kalian tidak ingin ada title produk disini, kita bisa sembunyikan caranya scroll ke bawah pada page layout centang use custom page layout lalu centang hide site header tittle & deskripsi. nah sekrang saya akan buat titel nya di short deskripsi saya gunakan heading 5, ok Update
ow ya satu lagi karena edit dari sample produk url diganti dulu ya agar sesuai dengan produk yg baru klik edit permalink kopi title yg baru lalu paste disini klik dan update, nah sekrang saya rakan efresh dulu page nya, Ok ini dia title yg diatas sudah diganti pada title shor deskripsi ini saya kurang suka dengan background abu2 utuk website toko online saya mau ganti background nya dengan warna putih, caranya dari dashboard hover ke appearence lalu klik background maka otomatis ke background saya ganti menjadi warna putih, lalu klik publish sudah, Ok sekarang saya refresh dulu… nah background sudah berganti menjadi putih sesuai yg saya inginkan,
Sekarang balik ke shop klik saja logo ini.. di page shop otomatis produk yg baru kita buat tadi akan ditambahkan disini. Silahkan dilanjutkan ya teman2 untuk menambah produk lainya, sekarang saya akan mengisi dulu dengan produk yg lain agar kita bisa lihat tampilan websitenya secara utuh. Baik kita lanjut lagi setelah memasukan semua produk sekarang akan terlihat pada list produk seperti ini, sebelum lanjut kita rubah dulu setting permalink nya hover ke setting klik permalink lalu centang post name agar nama post sesuai dengan url nya teman2 setelah itu klik save changes
Ok sekarang hover kesini lalu klik visit site, nah ini dia tampilan produk di halaman belanja atau shop page jadi saya sudah isi beberapa produk dumie, agar kita bisa lihat tampilan websitenya sekarang saya ingin menambahkan home page untuk membuat desain websitenya lebih baik menggunakna layout desain dari tokopress ikuti saja teman2, pertama ke tokopress.id untuk melihat desain templatenya saya gunakan klik kanan, ketika kita membeli theme di toko press itu kita akan mendapat bonus layout elementor template ini
Tahap Ke tiga menambahkan page & menu
- Menambahkan Home page
klik lihat semua, inilah template yg bisa kita gunakan sebagai homepage cara membuat website toko online contoh saya ingin menggunakna template ini nama templatenya pakaian pria klik preview ini dia desain nya simple dengan 3 kategori, lalu ada highlights produk, promo banner dan keterangan lainya. Ok Saya akan import template ini carannya di member area tokopress – download produk lalu download file ini elementor templetes 10 homepages klik, cara upload ke website hover ke template lalu klik, ow ya sebelum di upload file tadi agar dibuka dulu zip atau di unzip seperti ini karena ada beberapa file template ini dia template nya homepage pakaian pria kalau masih ragu kita bisa lihat file png nya ini dia template saya ingin import.
Sekarang yg di upload adalah json filenya yg ini teman2 ok tutup dulu, lalu klik import template – choose file lalu pilih filenya ingat yg json file ya teman2 lalu klik open – import now nah sekrang sudah berada di my template untuk menggunakannya kita akan buat new page dulu hover ke page lalu klik add new – berikan judul misal home 1 lalu di sebelah kanan – template pilih elementor full width lalu klik publish dan edit with elementor,
ow ya ini masih ada judulnya teman2 kita akan sembunyikan judulnya bali ke edit page – scroll ke bawah centang customize page layout lalu centang hide site header titel dan deskripsi setelah itu klik publish dan edit lagi dengan elementor, sekarang kita akan import templatenya klik ikon file ini lalu klik tab my template nah ini dia template nya klik insert, Ok maka sekarang desain sudah ditambahkan di page ini, sembunyikan ini dulu klik,
kalian bisa lihat disini ada hero image call to action ada button beli sekarang scroll ke bawah saya akan ganti dengan 3 kategori.
lalu produk saya akan tampilkan disni caranya tampilkan elementor widgetnya sekarang hover ke tengah lalu klik icon pensil untuk edit disebelah kiri kita filter produk yg ditampilkan misal all produk, feature produk saya belum buat ya, on sale, best sellling produk, atau kita bisa panggil by kategori lalu pilih category misal men’s
maka akan tampil produk kategori tersebut. untuk mengedit textnya hover ke text lalu klik icon pencil biru, lalu pada box editor silahkan ganti texnya misal Pakaian priakita juga bisa mengatur berapa row utk produk yg ingin ditampilkan ini ada 5 row misal saya ingin buat jadi 4 tinggal ganti di product per row nya jadi 4 lalu number of produk kita bisa sesuaikan jadi 4 atau pun 8. scroll ke bawah text ini semuanya bisa kita ganti seprti yg saya contohkan tadi, kita juga bisa menambah section caranya klik tanda plus ini misal saya mau buat highlights produk lagi widget nya juga bisa di kopi paste
Untuk widget textnya ini k klik kanan di icon pensil ini lalu copy setelah itu paste disini pada kotak section yg baru klik kanan lalu paste. Untuk mengeditnya sama seperti tadi misal disini saya akan isi dengan kategori pakaian wanita, setelah itu saya akan kopi widget produk nya klik kanan copy lalu paste saja di kotak section ini klik kanan paste, sekarang saya akan panggil kategori womans, nah maka akan jadi seprti ini saya rasa tidak ada yg susah ya teman2 jika kalian bingung itu bisa dicari lagi.
Saya suka tampilan ini simple dan clean… kita bisa mengganti gambar background ini caranya, klik section ini lalu di editor klik tab style pada image bisa diganti upload – pilih file saya sudah siapkan gambarnya ini dia – insert media maka jadi seperti ini jika mau lebarnya full widht bisa di edit layoutnya klik section paling atas – layout lalu pilih content fullwidth maka sekarang akan full widht seperti ini Ok, saya akan tetap gunakan Box, sekarang kita edit textnya sama seperti tadi klik ini, heading bisa diganti disini begitu juga dengan sub heading nya, sekarang lanjut ke widget button klik icon pensilnya pada editor itu ada primary button dan secondary button, disini kita bisa ganti textnya misal beli product, ok ini contoh saja, begitu juga dengan secondary buttonya.
klik tab style untuk merubah tampilan button dari model kotak pada border radius kita bisa tambahkan nilainya agar menjadi bulat seprti ini, lalu pada tab hover kita bisa ganti warna backgroundya contoh saya gunakan warna nah sekarang ketika kita hover akan berubah warna seprti ini, selain background text dan border juga bisa diganti warnanya sesuai dengan desain yg kalian suka, kalian juga bisa manambahkan animasi misal shrink nah nti ketika di hover akan mengecil atau shrink seperti ini,
lalu pada tab advance klik, kita bisa menambahkan animasi entrance ketika website loading misal saya pilih slide in up maka akan slide up seperti ini, Ow ya satu lagi untuk menambah link pada tab content primary button link yg dituju bisa di paste disini atau juga menggunakan option yg ada seprti link whatsapp, atau web page yg lain misalnya shop page ini, atau ke link woocommerce produk kita
selain itu kita bisa menambahkan icon pada button klik icon library lalu cari icon yg cocok misal shop insert bisa kita taruh sebelum atau sesudah text misalnya before text akan jadi seperti ini.
Ok sekarang lanjut ke sini, saya akan jelaskan sedikit ini pada elementor page builder ini namanya section, nah di dalam section kita bisa menambahkan kolom, ini kolom satu, kolom 2 dan kolokm 3, untuk menambahkan kolom klik kanan pada kolom bisa duplicate seprti ini atau klik add new kolom untuk menyesuaikan jaraknya klik tab advance di editor lalu klik icon link ini
sesuaikan marginnya misal 10 px kiri dan kanan maka akan ada jarak disini Ok ini contoh saja, saya akan delete karena saya butuh 3 kolom saja, untuk delete klik kanan pada kolom, lalu delete. Untuk mengganti gambar klik kolom – style – image – chose – lalu insert
judulnya saya akan rubah menjadi pakaian pria, sesuaikan juga subheadingnya, aksesoris saya biarkan dulu, kolom diskon ini saya ganti gambarnya – style – image – chose – insert lalu ganti titelnya saya buat 3 kategori satu lagi pakaian wanita – di read more kita bisa tambahkan link page nya nanti.
dibawah read more itu ada widget spacer gunanya memberikan jarak agar textnya bisa berada di atas, spacer nya bisa diatur juga seperti ini… jangan lupa untuk klik update. Scroll ke bawah saya akan edit deskripsinya klik icon ini lalu di box editor misalnya seperti ini layanan gratis antar, minimal 250.000 ini contoh aja ya teman2 kita bisa juga menambahkan section dibawah klik tanda plus ini lalu pilih layout dengan dengan satu kolom, dua atau tiga kolom, misal dua kolom klik, sekarang kita bisa menambahkan widget disebelah kiri misal image tinggal di drag saja seperi ini lalu tambahkan imagenya. nah disini kalian bisa tambahkan widget seperti text, map, icon dll.
cara ke dua bisa menggunakan pre template desain klik icon file ini misal ingin menambahkan section pilih block ada versi fress insert hijau ini ada juga yg pro berbayar, emmm misal saya ingin insert desain block ini klik insert – get started saya kebetulan sudah ada akun untuk pertama kali kalian harus signup create akun – setelah itu login lalu klik connect nah maka desain blok akan otomatis masuk disini. Ok Ini sebagai contoh saja artinya kalian bisa berkreasi sendiri dengan fitur yg ada, saya delete dlu.
- Cara Menambahkan page lainya
ok balik ke atas pada 3 kategori ini pakaian pria , aksesoris, dan pakaian wanita saya akan buat page khusus, misal pakaian pria ketika di klik maka akan masuk ke page khusus kategori pakaian pria saja, Sebelumnya jangan lupa update – klik ini lalu exit to dashboard, di dashboard hover ke page lalu add new
Berikan judul contoh pakaian pria pada template pilih elementor full widht – klik publish – dan edit with elementor, pada search widget ketik TP singkatan dari tokopress – ini dia widget TP woocommerce – lalu drag ke section saya akan filter by category pilih kategori men’s Saya buat tiga row dengan enam produk jadi tiga diatas tiga dibawah seperti ini,
ini saya rasa header dengan content terlalu mepet saya akan kasi jarak dulu, klik ini lalu drag spacer disni, beri jarak ok cukup. nah ini lah contoh untuk menambahkan page produk khusus satu kategori – lalu klik update. Sekarang kita akan menambahkan page lainya kembali ke dashboard ke page lalu add new contoh saya akan buat page contact us pada template pilih elementor full width lalu saya akan hide site title nya centang custom page layout lalu centang hide site title publish dan edit dengan elementor,
Sebagai contoh saya akan gunakan pre template desain kllik icon file kalian bisa gunakan page atau block pilih yg free saja, pada kategori pilih contact contoh saya akan insert desain ini… ok ini dia desainya, tinggal kita edit sesuaikan map nya klik map lalu pada editor sesuaikan lokasinya misal saya gunakan alamat ini, begitu juga dengan emailnya bisa diganti disini,
Sesuaikan juga Icon media sosial yg dimiliki, misalnya saya tidak punya google plus, driblle dan twitter, delete saja seperti ini untk linknya misal FB fanpage link itu bisa di paste disini Ok, begitu dengan juga instagram dan youtube setelah itu klik update. Satu lagi saya akan menambahkan page About us cara menambahkan page saya rasa kalian sudah paham ya teman2
ini sebagai contoh saja ok saya publish pagenya dan edit dengan elementor agar lebih cepat saya akan gunakan pre template desain – kategori – about – saya akan pilih desain ini – insert tinggal edit text nya saya ganti jadi about us – pada style kita bisa merubah warna fontnya contoh seprti ini, pada typographi kita bisa mencari font yg sesuai – saya akan cari monsterat ini dia, lalu ini saya edit juga misal namanya toko baju online
style warna font saya ganti hitam,
Lanjut ke photo hover kesini klik lalu sekarang pada image ganti misal dengan gambar ini ya klik lalu insert media,
gambar ini juga kita ganti – choose mage select – insert
Untuk text lainya tinggal disesuaikan dengan deskripsi website masing2, warna font saya ganti yg lebih gelap agar gampang di baca saya rasa ini bagus, sekali lagi ini saya memberikan contoh kalau kita bisa buat page dengan mudah menggunakan elementor page builder & tokopress, Ok sudah jadi – sekrang klik update
- Membuat Menu Website
Setelah membuat page kita akan menambahkan menu di website carannya dari dashboard hover ke appearance lalu klik menu, buat nama menu contoh main menu lalu klik create menu
lalu disebelah kiri centang pagenya saya pilih home, about dan contact us lalu tambahkan menu, urutan menu bisa di drag saja seperti ini – navigation label bisa kita ganti misal menjadi home saja
lalu saya akan buat menu kategori tambahkan kustom link pada url berikan tanda tagar agar tk terhubung ke link lain link textnya category lalu add menu drag ke atas dibawah home nah sekarnag saya kan tambahkan page kategori pakaian pria, centang add to menu drag kesini agar menjadi sub menu dari category lalu save menu.
Sekarang untuk menampilkan menu ini di website klik tab manage location lalu pada site navigation menu pilih menu yg kita buat tadi yaitu main menu lalu klik save, sekarang lihat websitenya hover kesini lalu klik visit site
nah menu sudah ditambahkan di header seperti ini, home, category, about dan contact us
Ow ya satu lagi saya ingin menampilkan page home ini pada halaman depan website jadi ketika domain di akses yg tampil ini masih halaman shop pagenya sekarang kita rubah setitingya, di dashboard hover ke setting lalu klik reading – centang static page nya lalu pada home page pilih pagenya ini dia home 1
lalu save, sekarang saya refresh dulu pagenya….
nah sesuai yg saya inginkan page home 1 menjadi halaman depan website..
Sampai sini sebenernya secara keseluruhan website kita sudah ready cara membuat website toko online lengkap dengan kategori dan page lainya. Ow ya sebelum lanjut saya akan masukan dulu link page pakaian pria di sini, buka page nya – kopi url – lalu edit dengan elementor di read more saya akan masukan linkya disini link option open in new window lalu update bisa klik preview changes, ketika di klik akan seperti ini masuk ke page kategori pakaian pria.
Ok kembali kesini sekarang kita chek dulu responsive designya teman2 – hover kesini klik nah akan terlihat seperti ini jika di tablet saya rasa sudah cukup bagus yalanjut di mobile phone nah ini juga sudah sangat mobile friendly jadi ketika di akses pada perangkat mobile desainya akan mengikuti seperti ini teman2, Ok sudah cukup bagus ya sekrang saya tutup dulu jendela browser
Ok lanjut kita tinggal menyesuaikan saja seperti logo, pavicon, warna, font, dan lainya agar website menjadi lebih serasi di setiap page
Tahap ke Empat : customize
- Dilangkah pertama customize theme general
caranya dari dashboard hover ke appearance lalu klik customize – yg pertama site identity dan pavicon – site title dan tag line jika ingin dirubah bisa juga di update disni – mobile browser tab color – itu misal kita piih warna biru, nanti ketika diakses pada mobile browser tab diatasnya akan menjadi biru seperti ini teman2 seakan jadi satu dengan browsernya
Scroll ke pavicon, site pavicon itu yg ini logo kecil biasanya juga ada pada tab browser, OK sekrang saya tambahkan gambarnya – saya sudah siapakan – tinggal open lalu select – crop image jika perlu – nanti kira2 jadi seperti ini – lalu klik publish, Balik ke customize awal – lanjut ke homepage setting – nah disini sudah benar saya menngunakna page home 1 sebagai halaman depan website.
lanjut ke theme setting general – pada typographi klik – di body text saya mau seragamkan font untuk body textnya, kita lhat dulu font apa yg dipakai, caranya lihat disini pada tab style typographi – familiy – open sans, ini juga body text, balik ke customize – body font family – ketik open sans, nah ini dia fontnya.
pada link text kita juga bisa kita custom warna sesuai desain misalnya seperti ini… link text ketika di hover contoh warna ini, Lanjut ke heading text- di heading text saya akan mengunakan font ini kita lihat namanya – monesterat – Ok balik ke customize – ketik mosterat – yap ini dia fontnya pilih – sekarang font pada title produk sudah berubah – nah disini juga ada option merubah warna fontnya – yg lain saya biarkan ikut defaultnya saja
sekarang balik lanjut ke site top bar – top bar itu yang paling atas.. ini dia, ada juga pilihan hide top bar agar tidak terlihat, bisa ganti warna klik lalu warna yg di inginkan, pada layout text kita bisa atur mau di kanan, kiri atau di tengah, warna text juga bisa disesuaikan.
Untuk mengganti text bisa disni tinggal langsung dirubah saja, jarak barnya juga bisa diatur seperti ini, gunakan top padding untuk atas juga botttom padding untuk bawah – klik publish – back – lalu lanjut ke site header navigation menu – scroll ke color scheme – disini kita bisa ganti warna untuk header menunya,
Stiky mksdnya ini ketika di scroll menu nya akan tetap ada seprti ini, nah warna sticky menu ketika di scroll juga bisa kita ganti… misal saya pilih warna ini nah sekarang ketika di scroll dia akan berubah seperti ini, saya clear dlu ke warna awal.. custom paddding default lanjut ke brand – brand type saya pilih logo dgn gambar – select image – bisa juga di drag seperti ini lalu insert resize misal 55 px
Scrool ke bawah sekarang untuk alaemen menu kita bisa taruh tengah seperti ini atau di kanan ya, nah untuk font dan size bisa dirubah juga disini, Ok yg lain saya pakai default saja – Ok klik publish Balik – lalu lanjut ke site header title dan deskripsi – header title deskripsi yg dimaksud itu, tunngu sebentar nah yg ini teman kita bisa ganti warna backgroundnya, agar serasi saya pilih warna ini ya – biru – dan publish
balik kesini refresh – nah akan jadi seprti ini solid background dengan warna biru – balik lagi kesini lanjut ke header background image ini untuk mengganti warna solid tadi dengan background gambar, jadi bisa menggunakan image sebagai backgroundnya, kalian upload image disini Ok, yang lainnya saya guanakan mode defaultnya.
balik – untuk breadcrumb, sidebar, comment dan lainya saya biarkan ke mode default, langsung ke site footer – klik -pada background color di footer saya ganti dengan warna biru agar serasi lalu text layout nya bisa diatur misal dikiri jadi seperti ini – atau tengah – text color saya sesuaikan juga warnanyam – lalu – text bisa diisi disini sesuaikan ya dengan websitenya ini contoh saja.
Custom padding kalian bisa atur juga seprti ini untuk jarak top dan buttom paddingya – terakhir klik publish yg lain site back to top – image size dan optimisation saya biarkan mode default saja. jika sudah di publish sekarang tutup dulu.
Jangan takut untuk merubah setting, customize dan lainya itu tidak mungkin error teman2, tapi kalau kalian bingung bisa reset ke setting awal caranya dari dashboard ke appearance lalu klik theme setup. dan start dari awal lagi OK. saya tutup browser dulu – ini saya cancel ya.
- Langkah dua Customize Woocommerce
Nah Sekarang kita lanjut untuk setting – customize woocommerce. Dari dashboard hover ke appearance – klik customize – lalu klik theme setting woocommerce – mulai dari atas klik wc general – lihat dikanan page otomatis ke shop page – nah disini kita bisa ganti text sale yg ini menjadi diskon misalnya, lalu background biar gampang dinotice ganti warna merah saja, text color sudah pas, sold out kalian juga bisa sesuaikan ya warnanya saya tetap default, rating juga default saja
Woocommerce button yg ini ya – nanti saja saya ganti agar – ini default saja dulu – ok publish – back dulu
lanjut ke woocommerce shop page – untuk gridnya menggunakna 12 / 12 artinya disini ada 4 row satu dua tiga empat, number of produk 12 – kalian bisa atur jadi 10, 15 itu terserah ya karena 12 maka akan ada 3 kolom x 4 row jadi 12 produk per page nya. Pada shop page element saya akan centang truncate agar title produk tida ada spasi cukup satu line saja centang, skrg terlihat rapi seperti ini.
lanjut ke produk box background – box pada produk yg ini ya ini kita bisa ganti warnanya misal ini.. bisa diatur sesuai desain teman2 Ok border, title, produk price color itu juga bisa disesuaikan warnanya, scroll lagi ke bawah untuk button text bisa diganti juga misal shop now – ini contoh saja ya saya akan ganti warna backgroundnya agar serasi misal warna biru ini – text color jadi putih – border nya juga saya sesuaikan saja background color hover ketika di hover saya ingin warnanya hijau seperti ini.
lanjut ke whatsapp button yg ini ya – text misal kita ganti jadi chat now – ok background color saya pakai warna… warna ini saja lalu border putih misalnya, text color hitam saja ketika di hover saya pakai warna hijau saja ya seprti ini lalu text warna putih maka jadinya seperti ini ok sudah semua sekarang klik publish. Back sekarang lanjut ke single produk klik – nah untuk ke single produk klik detail salah satu produk – disini pada single produk layout bisa diatur juga image mau ada di kiri atau dikanan seperti ini. Produk title color kita bisa ganti misal warna ini agar serasi ya – scroll ke bawah ada social share yg bisa kita drag urutanya misal twitter saya taruh disini, kalian juga bisa pilih yg mana mau diaktifkan klik saja icon mata biru ini.
Lalu lanjut button text – silahkan rubah text nya disini – font size saya pakai 0.8 lalu background saya pilih warna ini lagi – nah ini warnanya akan aktif ketika customer sudah memilih opsi size dan juga color OK, button hover nya juga bisa diatur, lanjut ke whatsaap button – ganti text disini agar sama font size nya 0,8 border sesuaikan dan text warna putih
jadi disini sebenarnya hanya customize warna agar sesuai dengan desain yg kita inginkan
Scroll ke produk tabs – produk tabs itu yg ini ya di produk tabs kalian bisa disable semuanya atau salah satu – caranya centang saja contoh seperti ini – untuk deskirpsi juga bisa diganti sesuai yg kalian inginkan – begitu juga dengan tab warna title – lanjut ke paling bawah related produk yg ini dia – kita bisa sesuaikan warna title nya juga jumlah list produknya misal 5 produk maka jadi seperti ini, OK sekarang sudah semua dan tampilan single page juga sudah serasi ya teman2 baik warna dan fontnya terakhir jangan lupa klik publish, balik
Lanjut ke cart page, sebelumnya saya jelaskan dulu dari single produk ketika consumer sudah memilih size dan color lalu klik beli sekarang nah disini akan muncul pop up button – untuk customize setting itu yg ini ya add to cart popup kik nah kalian bisa setting disini ok, ketika konsumen malanjutkan klik view cart nah inilah halaman cart page settingya ada disini , kalian bisa atur sesuai desain masing2, ini adalah desain bawaan dari theme toko press ok, seperti ini, balik
Customize untuk chekcout dan lainya itu kalian bisa atur sendiri sesuai dengan desain yg diinginkan ini semuanya saya biarkan mengikuti versi default nya saja. jika kita lihat ke home klik logo – sekarang website toko online kita sudah jadi seperti ini ketika di klik ke halaman single page desainya sudah serasi, tampilanya pun simple dan clean sesuai yg saya inginkan, jangan lupa untuk publish setelah selesai mengedit, OK ini saya tutup dulu.
- Cara menambahkan Kode Kupon Diskon
Pertama dari dashboard hover kewoocommerce lalu klik coupon untuk pertama kali bisa klik create first kupon atau add kupon yg mana saja boleh, klik lalu buat kode kupon misalnya kupon 001 isi deskripsi agar kita ingat misalnya kupon diskon 10 persen pada tab general ada 3 tipe diskon mulai dari yg pertama by percentage diskon artinya potongan harga berdasarkan persen misal saya beli 2 baju masing2 harga 100.000 total menjadi 200.000 dengan kode potongan 10 % maka akan dikurangi 20.000 menjadi: 180.000
Yang ke dua Fixed cart diskon artinya diskon potongan tetap atau fixed untuk semua produk misal nilai potonganya 50.000, ketika ada yg membeli 2 baju dengan total harga 200.000 dengan menggunakan fixed diskon 50.000 maka total bayar menjadi 150.000 yg ketiga fixed product diskon – artinya diskon produk untuk produk pilihan tertentu yg sudah kita set potonganya misal 20.000/produk – contoh konsumen membeli 3 produk masing2 harganya 100.000 total menjadi 300.000 dengan kode kupon ini maka potongan menjadi 60.000 berarti 20.000 per produknya, OK paham ya.
untuk contoh saya coba yg paling umum degan diskon percentage diskon pilih amont nya misal 10 persen persenya tidak usah ditulis cukup 10 itu saja allow free shipping bisa di centang artinya kita yg menanggung biaya kirimnya, untuk expiry datenya itu bisa di set disini contoh kupon berlaku sampai 31 agustusLanjut ke usage restriction – disni bisa buat untuk minimum atau maximum spend saya kosongkan saja individual use only saya chek agar tidak bisa digabung dengan kode kupon lainya exclude sale item juga saya centang jadi kode kupon tidak berlaku pada produk yg sedang sale,
kode kupon juga bisa dibuat khusus untuk produk atau kategori tertentu tinnggal search saja seperti ini produk atau kategorinya maka kode kupon hanya berlaku untuk produk dan kategori tersebut. OK Lanjut ke usage limit – usage limit per kopun bisa dibatasi misal untuk satu kali, limit usage to x item – ini untuk fixed product diskon, kita bisa set juga limit per user nya misal untuk 2 kali per user, ow ya kode kupon juga bisa dibuat otomatis gunakan saja generator coupon code ini OK, sekrang klik publish.
Sekarang jika klik kupon maka ada list kode kupon yg kita buat tadi nah kalian juga bisa menambahkan kode kupon lainya disini OK, Kita test website nya dengan belanja melalui mobile phone misalnya saya tertarik dengan jaket kulit keren ini klik detail setelah yakin saya pilih size L klik beli sekarang lalu view cart saya masukan kode kupon nya disini klik terapkan maka saya akan mendapat potongan 10 % 25.000 ya dari harga 250.000
Ok saya lengkapi pesananya, bagusnya form bawaan dari tokopress itu simple seprti ini tinggal masukan kecamatan maka biaya ongkir nya otomatis terisi total tagihan menjadi 253.000. OK tinggal klik buat pesanan, sekarang saya tinggal bayar ke rek. tersebut. Pada dashboard toko online jika ada pemesanan itu akan tercatat di woocommerce – klik order – nah ini dia order by Agus – status belum bayar – bagusnya tokopress itu sudah ada follow up whatsupp button seperti ini tinggal klik lalu kirim pesannya ke agus.
Di mobile phone saran saya gunakan saja browser karena diaplikasi wordpress dan woocommerce itu kurang lengkap, ok sekarang saya login di browser – login tampilan dashboard juga sudah mobile friendly dan sama dengan di desktop klik menu – hover ke woocommerce – order – nah kalau di smartphone tinggal klik follow up button nya langsung send message ke customer setelah customer selsai membayar, pada dashboard klik ada rincianya seperti ini, pada status bisa diupdate sedang di proses – misal pesanannya sudah selesai pilih – terakhir tinggal di save teman2 ok ya…
Di dashboard desktop kita bisa lihat woocommerce – order – status pesanan sudah selesai pada woocommerce report klik disini tercatat semua report penjualan selama seminggu, lalu pada customer report disini ada statistiknya juga nah jika kalian hover ke analytic – revenue – disini tercatat pembukuan penjualan yg otomatis akan ditambahkan disini report nya ini juga bisa di download file csvnya klik aja link download ini,