Membuat Toko Online Lengkap dengan Fitur Ongkir dan Pembayaran
- Cara Akses Elementor Lewat Handphone - November 17, 2022
- Syarat Migrasi Email Google (Gmail) Ke Email Bisnis/Profesional - Oktober 31, 2022
- Cara Pembayaran Melalui Alfamart Di Jagoan Hosting - Oktober 24, 2022
Opening
Hai sob, bagi kamu yang sudah membeli paket unlimited hosting, kamu bisa membuat website toko online yang kamu inginkan dengan cepat dan mudah loh, karena paket unlimited hosting sudah dilengkapi dengan ribuan tema dari Premium Divi Builder. Untuk melihat pilihan tema toko online, kamu bisa akses https://www.elegantthemes.com/layouts/ dan memilih kategori Online Store.
Persiapan membuat website
Sebelum membuat website ada beberapa hal yang perlu kamu siapkan sob, panduan dibawah ini akan membantumu untuk menyiapkan apa saja yang kamu perlukan.
Mengubah Username & Password Login WordPress
Saat pertama kali membeli paket unlimited hosting, username dan password login mu akan di generate secara otomatis oleh sistem. Oleh karena itu kamu perlu mengganti username dan password. Ikuti langkah-langkah berikut
- Buka https://member.jagoanhosting.com/, masukkan Email address dan Password untuk login ke halaman member area jagoanhosting.
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/11.-member-area.png)
Login member area
- Pada menu Hosting, klik icon di tabel Kelola
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/12.-kelola.png)
Kelola hosting
- Di halaman Manage Product, scroll ke bawah dan temukan menu Hosting Information, klik Login to DirectAdmin
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/13.-login-to-directAdmin.png)
Login to Directadmin
- Ketik WordPress pada kolom 1, setelah itu klik Icon WordPress
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/14.-Wordpress.png)
Login wordpress
- Saat berada di halaman dashboard Softaculous, scroll ke bawah temukan Current Installations, lalu klik icon Orang pada tabel admin
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/15.-Login-as-admin.png)
Login as admin
- Setelah masuk ke dashboard wordpress, klik menu Users setelah itu pilih All users
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/15.-all-users.png)
Users
- Klik Add New
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/16.-add-new.png)
Menambahkan user baru
- Isi kolom User name, email, first name, last name sesuai yang kamu inginkan. Klik Generate password untuk memilih password yang Strong, setelah itu centang opsi Confirm Password. Setelah semua langkah-langkah dilakukan, jangan lupa klik Add New User untuk menyimpan user yang baru kamu buat.
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/18.-new-user.png)
Mengisi form user
Mengubah Site Title & Tagline
Saat pertama kali membeli paket unlimited hosting, site title dan tagline mu masih menggunakan pengaturan default dari unlimited hosting.. Oleh karena itu kamu perlu mengganti site title dan tagline. Ikuti langkah-langkah berikut untuk merubah site title dan tagline mu
- Pada dashboard wordpress klik Settings lalu pilih General
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/19-general-300x239.png)
Pengaturan general
- Pada halaman General Settings, ganti Site Title dan Tagline sesuai dengan yang kamu inginkan. Jangan lupa klik Save changes untuk menyimpan perubahan yang kamu lakukan.
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/51.-isi-form.png)
Form pembelian
Mengubah Permalink WordPress
Permalink adalah keseluruhan URL yang dilihat di sebuah website pada setiap konten hingga alamat yang diakses oleh pengguna, selain itu permalinks juga berfungsi untuk memudahkan pengguna mengingat alamat dari sebuah halaman. Merubah permalinks dapat dilakukan dengan cara dibawah ini:
- Di dashboard wordpress klik Settings lalu pilih Permalinks
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/21.-permalinks.png)
Permalinks
- Pada halaman permalinks settings akan muncul beberapa pengaturan permalinks yang disediakan oleh wordpress, sebagai rekomendasi centang opsi Post Name untuk memudahkan pengguna website untuk mengingat sebuah alamat. Jangan lupa klik Save changes untuk menyimpan perubahan.
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/22.post_.png)
Post name
Jika semua langkah-langkah diatas sudah kamu lakukan dengan benar, sekarang saatnya membuat toko online yang kamu inginkan.
Menggunakan Tema Toko Online dari Divi
Cara menggunakan template toko online dari Tema Divi
Saat membeli paket unlimited hosting kamu akan mendapatkan website dengan tema default, didalam Divi yang kamu dapatkan sudah termasuk template website siap pakai, kamu hanya perlu menyesuaikan template dengan tema website yang akan kamu buat.
- Pada halaman dashboard klik Pages lalu pilih Add New
- Jika muncul pop-up berikut, klik Close dialog
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/24.-close-dialog.png)
Close dialog
- Tulis judul halaman mu pada Add title misalnya halaman beranda, setelah itu klik Publish
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/28.-publish.png)
Publish
- Jika kamu ingin melihat halaman yang sudah dibuat klik View Page
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/25.-view-age.png)
View page
- Jika kamu ingin melakukan editing lagi klik Enable Visual Builder
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/26.-enable.png)
Enable visual builder
- Pilih Choose a premade layout untuk mengganti tema dari halaman website yang akan dibuat
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/27.-choose-a-premade-layout.png)
Choose a permade layout
- Centang opsi Online store untuk melihat tema-tema yang disediakan bagi pengguna yang akan membuat toko online, lalu pilih satu tema misalnya Fashion
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/29.-online-store.png)
Centang opsi online store
- Klik halaman yang akan dibuat, misalnya Shop lalu klik Use this layout.
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/30.-use-this-layout.png)
Use this layout
- Akan muncul beberapa pilihan layout yang bisa kamu pilih sesuai dengan halaman yang ingin dibuat. Jika kamu ingin membuat halaman yang menampilkan produk, kamu bisa memilih Layout “Shop”
Menginstall Plugin WooCommerce
- Penjelasan langkah langkah install plugin WooCommerce hingga pengaturan dasar WooCommerce-nya
- Pada dashboard wordpress klik Plugins, lalu pilih Add new
- Pada kolom Keyword ketik WooCommerce, lalu Install Now. Tunggu beberapa saat hingga proses instalasi selesai.
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/31.-install.png)
Install lugin WooCommerce
- Klik Activate untuk mengaktifkan plugin
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/32.-activate.png)
Aktivasi Plugin
- Setelah itu kamu akan diminta untuk mengisi form alamat toko
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/33.-welcome-to-woo.png)
Melengkapi alamat toko
- Address Line 1. Alamat utama toko online mu.
- Address Line 2. Alamat alternatif toko online mu.
- Country/Region. Pilih negara Indonesia.
- City. Pilih kota lokasi toko online mu.
- Postcode. Isikan nomor kode pos alamat toko online mu
- Setelah melengkapi form, klik Continue.
- Pilih dengan cara centang jenis industri toko onlinemu, lalu klik Continue.
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/34.-centang.png)
Memilih industri toko online
- Tentukan jenis produk apa yang akan dijual di toko online mu. Ada banyak pilihan tipe produk yang bisa kamu pilih. Dua diantaranya bisa kamu gunakan secara gratis, yaitu Physical products (produk yang membutuhkan pengiriman) dan Downloads (produk digital yang bisa langsung di download).
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/35.-type-product-297x300.png)
Memilih jenis produk
- Isi dua informasi terkait bisnis yang kamu jalankan.
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/36.-Business-details-300x269.png)
Menceritakan tentang bisnis mu
Kolom pertama, berapa banyak produk yang akan kamu pajang di toko online mu. Kolom kedua, apakah kamu menjual produk tersebut di tempat lain atau hanya di toko online tersebut. Setelah memilih jawaban, klik Continue.
- Langkah terakhir dalam setup wizard WooCommerce adalah memilih tema untuk toko online mu. Terdapat beberapa tema yang bisa kamu gunakan secara gratis. Gunakan mode Live Preview untuk lebih memastikan tema yang digunakan sesuai kebutuhan mu.
Nah, setup WooCommerce sudah selesai! Selanjutnya, kamu bisa masuk ke menu dashboard WooCommerce dan melakukan langkah berikutnya yaitu menambahkan produk ke toko online tersebut.
Menambahkan Produk Baru di WooCommerce
Setelah kamu berhasil membuat toko online, sekarang kamu perlu menambahkan produk ke website mu sebelum siap dikunjungi konsumen. Ikuti langkah-langkah dibawah ini untuk melakukannya
- Pada dashboard WordPress, pilih menu WooCommerce, lalu klik Add my products.
- Klik Add manually untuk menambahkan produk satu per satu.
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/38.-add-manually.png)
Menambah produk
- Kamu akan diarahkan secara otomatis ke halaman posting untuk mengisi informasi lengkap produk tersebut.
Pada halaman posting untuk mengisikan informasi produk, kamu akan diminta memberikan informasi sebagai berikut:
- Product name. Nama produk mu.
- Product description. Penjelasan lengkap produk tersebut.
- Product types. Jenis produk mu (simple, grouped, affiliate, variable). Pada umumnya, simple product yang biasa digunakan.
- Short description. Penjelasan sederhana produk yang akan tampil di halaman produk.
- Product images/gallery. Gambar produk yang akan digunakan.
- Product tags. Label untuk produk.
- Product categories. Kategori produk.
Pastikan kamu mengisi informasi di atas dengan jelas. Khusus untuk bagian Product Data, kamu akan diminta untuk mengisikan informasi yang lebih lengkap sebagai berikut:
- General. Informasi seputar harga umum dan harga diskon produk.
- Inventory. Kode barang dan status barang yang dimiliki (tersedia atau habis)
- Shipping. Jenis pengiriman barang dan penentuan berat dan dimensi barang.
- Linked product. Memilih produk serupa untuk melakukan up selling (menjual produk dengan kelas harga di atasnya)
- Attributes. Atribut pada produk barang, misalnya warna.
- Variations. Variasi pada produk yang dijual, misalnya ukuran yang berbeda (S,M,L,XL).
- Advanced. Pengaturan tingkat lanjut yang bisa digunakan untuk mengelola urutan order, dan lainnya.
- Get More Options. Pilihan untuk menambahkan fungsi lain menggunakan ekstensi WooCommerce.
Setelah menambahkan semua informasi penting produk, kamu bisa merilis produk tersebut dengan klik Publish. Inilah contoh tampilan produk yang berhasil ditambahkan ke halaman produk toko online Anda.
- Semua produk yang sudah kamu tambahkan akan tercatat di halaman produk WooCommerce. Untuk mengelolanya, Anda bisa masuk ke halaman produk dengan cara klik WooCommerce lalu pilih All Products.
Di halaman produk, Anda bisa mengedit, menghapus, dan menduplikat produk. Caranya, arahkan kursor di salah satu produk yang akan diubah. Anda akan melihat beberapa menu: Edit, Quick edit, Trash, View dan Duplicate.
Memasang Fitur Pengiriman (plugin ongkir)
- Pada dashboard wordpress klik Plugins lalu pilih Add New
- Ketik ongkoskirim.id pada kolom Keyword. Lalu klik Install Now. Tunggu hingga proses instalasi selesai, klik Activate untuk mengaktifkan plugin.
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/42.-ongkos-kirim.id_.png)
Install plugin ongkoskirim.id
- Pada dashboard klik WooCommerce lalu pilih Settings, setelah itu klik Shipping
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/43.-woocommerce-settings.png)
Melakukan pengaturan shipping
- Klik OngkosKirim.id
- Centang Enable, agar shipping plugin dapat digunakan. Selanjutnya pada Choose Expedition, pilih ekspedisi yang tersedia di kota mu atau sesuai dengan keinginan mu.
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/45.-enable.png)
Memilih jenis pengiriman
- Pada halaman yang sama pilih lokasi pengiriman atau alamat toko mu pada Store Location. Setelah semua selesai dipilih, jangan lupa klik Save Changes.
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/45.-store-location.png)
Memilih lokasi toko
Memasang Fitur Pembayaran (plugin payment)
- Pada dashboard klik Plugins lalu Add New
- Ketik RAPay pada kolom Keyword, lalu klik Install Now. Tunggu hingga proses instalasi selesai, klik Activate
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/46.-RAPay.png)
Install plugin pembayaran RAPay
- Klik WooCOmmerce lalu pilih Settings lalu klik Payments untuk mengaktifkan metode pembayaran yang diinginkan
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/47.-payments.png)
Melakukan pengaturan payments
- Aktifkan metode pembayaran yang kamu inginkan dengan cara geser button Enable sehingga berubah warna.
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/48.-payments-enable.png)
Mengaktifkan cara pembayaran
- Setelah itu klik Setup pada metode pembayaran yang dipilih untuk mengatur nomor rekening dll. Jangan lupa klik Save changes.
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/69.-setup-bni.png)
Mengatur cara pembayaran
Kustom Website
Langkah terakhir adalah melakukan pengaturan pada website seperti mengatur logo, menu, dll. Berikut caranya
Mengganti Logo Website
- Klik menu Divi di dashboard, lalu pilih Theme Options
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/52.-theme-option.png)
Memilih theme
- Klik upload untuk mengupload gambar logo store
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/53.-upload.png)
Upload logo
- Klik Select Files untuk memilih file yang akan diupload
- Jika file sudah diupload, klik Save Changes. Sekarang logo website mu sudah berubah.
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/logo-sudah-berubah.png)
Logo sudah dipasang
Mengganti Front Page
- Klik Appearance, lalu pilih Customize
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/55.-customize.png)
Mengganti font page
- Pilih Homepage Settings
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/56.-homepage.png)
Pengaturan Homepage
- Centang pada opsi A static page, setelah itu pilih halaman yang akan dijadikan halaman utama pada kolom Homepage, misanya halaman shop.
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/57.-staticpage.png)
A static page
Mengatur Menu
- Pilih Appearance, lalu klik Menus
- Tulis Nama Menu pada kolom Menu Name, setelah itu centang Primary Menu pada bagian Menu structure
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/59.-primary-menu.png)
Membuat nama menu
- Pada halaman Pages, centang halaman yang ingin ditampilkan, lalu klik Add Menu
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/60.-add-to-menu.png)
Memilih halaman
- Tampilan menu pada halaman website telah berubah sesuai dengan pilihan
Mengubah Footer
Untuk menghilangkan footer credit, kamu bisa mengikuti panduan dibawah ini
- Klik Appearance, lalu Customize
- Klik Footer
- Lalu Bottom Bar
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/63.-buttom-bar-271x300.png)
Bottom bar
- Centang pada opsi Disable Footer Credits
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/64.-disable.png)
Mengilangkan footer
- Jika kamu ingin Mengatur atau menghilangkan footer, klik icon Pencil pada bagian kiri footer
- Klik icon titik tiga, lalu pilih Remove Group
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/67.-remove.png)
Menghapus grup footer
Lakukan hal yang sama pada setiap footer yang ingin dihapus
- JIka ingin menambah tulisan pada footer, klik icon +, lalu pilih Paragraph
Setelah mengikuti semua langkah-langkah diatas, sekarang toko online sudah siap digunakan.
Website Toko Online Siap
Sekarang kita akan mencoba melakukan order produk pada website toko online yang sudah kita buat.
- Klik Add Chart
![](https://www.jagoanhosting.com/tutorial/wp-content/uploads/2022/03/49.-add-chart.png)
Menambahkan barang ke keranjang
- Pilih Checkout
- Lengkapi form pembelian, seperti nama, alamat, negara, shipping, dan metode pembayaran.
Penutup
Nah itu tadi langkah-langkah yang perlu kamu lakukan untuk membuat website toko online dengan wordpress, tapi bukan hanya untuk toko online sob, kamu juga bisa membuat website untuk sekolah, pribadi, perusahaan dan masih banyak lagi dengan menggunakan wordpress. Jangan lupa baca tutorial Jagoanhosting lainnya