Cara Membuat Website Toko eCommerce Online Dengan WordPress

E-commerce merah panas karena membuatnya sangat mudah untuk mendapatkan 6 angka sebulan tanpa memasang batu bata dan bisnis mortir dengan biaya overhead gila-gilaan tinggi.


Tetapi masalah bagi banyak orang adalah biaya bulanan yang mahal dari sebagian besar platform e-commerce seperti Shopify. Jika Anda baru memulai, Anda menginginkan solusi yang lebih terjangkau sehingga Anda dapat menghabiskan lebih banyak untuk hal-hal seperti pemasaran dan periklanan.

Berita baiknya adalah Anda tidak perlu membayar biaya bulanan yang tinggi dengan Shopify untuk dapat menjual produk secara online. Jika Anda mencari alternatif Shopify atau alternatif eBay, tutorial langkah demi langkah ini akan memberi Anda toko online yang luar biasa secara gratis.

Yang Anda butuhkan hanyalah akun hosting web dan sedikit usaha dan Anda akan dapat membuat situs web e-commerce dalam waktu singkat.


Mari kita mulai!

Hal yang Anda Butuhkan:

  • Hosting. Saya merekomendasikan SiteGround.
  • SEBUAH nama domain.
  • Tema WordPress. Untuk tutorial ini, kami menggunakan Tema Astra gratis.
  • Pembuat Halaman WordPress. Untuk ini, kami menggunakan pembuat halaman Elementor gratis.
  • WooCommerce, plugin WordPress e-commerce terbaik.

Langkah 1. Beli hosting web dan nama domain.

Jika Anda baru mengenal seluruh bisnis pembuatan situs web ini, izinkan saya menjelaskan terlebih dahulu apa itu hosting web dan nama domain dan mengapa Anda membutuhkannya.

Apa Itu Hosting dan Nama Domain?

Web hosting adalah tempat di internet tempat situs web Anda akan hidup. Ini seperti rumah fisik tempat barang-barang Anda dapat ditemukan. Nama domain, di sisi lain, adalah alamat situs web Anda. Ini seperti alamat Anda yang Anda berikan kepada orang-orang sehingga mereka dapat mengunjungi Anda di rumah. “Facebook.com”, “Google.com”, dan “WordPress.com” adalah semua contoh nama domain.

Anda dapat membeli nama domain di hampir semua situs web yang menjual nama domain. Anda hanya perlu mencari harga terbaik. Tetapi untuk hosting situs web, sangat penting untuk hanya mendapatkan hosting dari perusahaan yang dapat diandalkan. Karena jika hosting Anda lambat atau tidak dapat diandalkan, kecepatan dan uptime situs web Anda akan terganggu, dan pada akhirnya akan merugikan bisnis e-commerce Anda.

Siteground, Layanan Web Hosting Pilihan Saya

Anda dapat menggunakan layanan hosting web berkualitas tinggi untuk membuat situs web e-commerce, tetapi dalam tutorial ini, kami akan menggunakan Siteground.

SiteGround adalah web host yang sangat direkomendasikan online karena mereka telah melayani pengguna WordPress dan masih memiliki harga yang terjangkau. Mereka paling dikenal karena kinerja yang cepat dan dukungan yang sama cepatnya.

Berikut adalah fitur utama SiteGround:

  • Sertifikat SSL gratis
  • Dukungan Pengetahuan CEPAT
  • Lingkungan Pementasan WordPress
  • Migrasi Situs Web Gratis
  • 30 Hari Cadangan

SiteGround adalah pilihan tepat untuk kebutuhan hosting web Anda. Mereka melayani situs-situs WordPress dan menawarkan sumber daya lebih sedikit daripada pesaing mereka tetapi keandalannya lebih tinggi.

Saya telah membuat kesepakatan luar biasa dengan mereka untuk memberikan diskon 70% kepada siapa saja yang mendaftar Link ini. Jadi jika Anda ingin menghemat uang di hosting Anda, klik tautan ini dan beli hosting Anda sekarang.

Setelah Anda mendarat di beranda mereka, Anda akan melihat empat jenis hosting berbeda:

pilih rencana siteground

Pilih hosting WordPress dan klik Memulai. Anda kemudian akan melihat tiga paket harga:

harga hosting wordpress siteground

Pilih satu sesuai dengan kebutuhan dan anggaran Anda. Anda juga dapat melihat perbandingan setiap paket hosting untuk mendapatkan ide yang lebih baik dari rencana mana yang paling sesuai dengan kebutuhan Anda.

Setelah Anda memutuskan rencana, klik Dapatkan Paket. Anda kemudian akan dibawa ke halaman di mana Anda harus memilih domain. Jika Anda sudah membeli nama domain, pilih “Saya sudah punya Domain”. Tetapi jika Anda tidak memilikinya, pilih “Daftarkan Domain Baru” untuk membeli domain tepat di dalam Siteground.

pilih domain

Setelah Anda memiliki nama domain yang Anda sukai dan tersedia, klik Memproses. Langkah selanjutnya adalah memberikan detail pribadi dan penagihan Anda untuk menyelesaikan pembelian. Berikan detail Anda secara akurat dan klik Bayar sekarang. Anda sekarang memiliki hosting web dan nama domain yang andal.

Langkah Dua. Instal WordPress.

WordPress adalah sumber terbuka, alat gratis yang memungkinkan Anda membangun situs web walaupun Anda tidak memiliki petunjuk tentang pengkodean. Ini sistem manajemen konten situs web yang termudah dan paling kuat hingga saat ini. Ada banyak hal yang saya sukai dari WordPress, dan jika Anda membaca lebih banyak tutorial saya atau menonton video saya, Anda akan menemukan lebih banyak tentang mengapa saya pikir WordPress adalah alat terbaik untuk membuat situs web untuk non-teknologi.

Siteground sebenarnya hadir dengan instalasi WordPress satu-klik yang melakukan semua kerja keras untuk menginstal dan mengatur WordPress untuk Anda.

Setelah Anda menyelesaikan pembelian hosting, Anda akan melihat layar dengan tautan yang mengatakan “Lanjutkan ke Area Pelanggan”. Klik itu dan Anda akan dibawa ke halaman tempat Anda dapat mengatur akun hosting baru Anda. Dibawah Siapkan Situs Web Anda, Pilih Mulai situs web baru.

Anda kemudian akan melihat daftar perangkat lunak yang dapat Anda instal. Pilih WordPress.

pasang wordpress

Anda kemudian harus memberikan detail login admin untuk situs web baru Anda seperti alamat email, nama pengguna, dan kata sandi Anda. Pastikan untuk mengamankan detail ini karena Anda akan menggunakannya untuk masuk ke situs web Anda.

Setelah selesai, klik Konfirmasi > Pengaturan Lengkap. Dan sekarang Anda memiliki situs WordPress langsung yang di-hosting-sendiri.

Untuk mulai menyesuaikan situs web Anda, Anda harus masuk ke backend WordPress. Untuk melakukannya, buka dasbor Siteground Anda dan alihkan ke Akun Saya tab. Klik tautan Instalasi tab, dan di sini Anda akan melihat nama domain yang Anda daftarkan. Di atasnya berwarna hijau Buka Portal Admin tombol. Klik tombol ini untuk pergi ke halaman login WordPress Anda.

buka dashboard admin wordpress

Halaman login WordPress biasanya memiliki format ini: yourdomain.com/wp-admin dan yourdomain.com/wp-login. Ingat URL halaman login Anda sehingga lain kali Anda dapat mengaksesnya dengan langsung mengetik URL ke bilah alamat Anda dan tanpa harus masuk ke Siteground lagi.

Halaman login WordPress terlihat seperti ini:

halaman login wordpress

Masukkan nama pengguna dan kata sandi Anda di sini untuk masuk ke situs web Anda untuk pertama kalinya.

Langkah 3. Instal Tema Astra dan Situs Astra.

Tema Astra adalah tema yang akan kami gunakan untuk membuat situs web e-commerce kami tampak hebat dan profesional secepat mungkin. Anda dapat menggunakan tema lain jika suka, tetapi untuk tutorial ini, kami akan menggunakan Tema Astra.

Astra adalah tema WordPress gratis yang memiliki kecepatan dan kesederhanaan luar biasa. Pasangkan dengan Situs Astra (plugin gratis), dan siapa pun dapat memiliki situs web yang indah dengan beberapa klik mouse. Ada juga versi Pro yang tersedia yang menjadikan Astra tema yang sempurna.

Berikut adalah fitur yang paling saya sukai dari Astra:

  • Salah Satu Tema Tercepat Yang Tersedia
  • Lebih dari 100 Situs Pemula (Sebagian Besar Gratis 100%)
  • Fitur Menu Mega Fleksibel
  • Paket Add-on yang Kuat
  • Dukungan WooCommerce yang Luas

Tema Astra adalah pilihan yang sangat baik untuk setiap proyek desain web WordPress. Sebenarnya, ini adalah tema yang saya gunakan di situs web ini dan semua proyek situs web saya.

Saya memiliki kepercayaan penuh pada pengembang dan sangat terkesan dengan seberapa baik kode tema tersebut.

Namun lebih dari itu, temanya sangat mudah digunakan karena semua perhatian dan pemikiran yang telah masuk ke dalamnya. Dalam sebagian besar situasi, itu mengonfigurasi sendiri berdasarkan alat yang Anda gunakan.

Untuk menginstal Astra, buka Penampilan > Tema > Tambah baru. Cari Astra, klik Install, dan Mengaktifkan.

menginstal tema astra

Hal lain yang saya sukai dari Astra adalah kenyataan bahwa ia memiliki sebuah plugin bernama Situs Pemula Astra dengan perpustakaan templat gratis dan premium yang sudah dibangun sebelumnya. Anda dapat menggunakan templat ini untuk situs web Anda sendiri hanya dengan beberapa klik. Kami akan menggunakan templat Situs Astra untuk memangkas waktu pembuatan situs web kami menjadi dua.

Setelah menginstal Astra, Anda akan melihat pesan ini di dasbor Anda:

Situs Astra memulai

Klik Memulai. Ini akan menginstal Situs Pemula Astra untuk Anda.

Memilih Pembuat Halaman Anda

Anda kemudian akan ditanya pembuat halaman mana yang Anda sukai, dan dalam tutorial ini, saya akan menggunakan Elementor. Elementor adalah pembangun halaman WordPress yang telah mengambil alih desain web WordPress. Itu memiliki set fitur terdalam, namun sangat mudah digunakan dan dikuasai. Elementor adalah pembuat halaman gratis berfitur lengkap. Ada juga add-on Pro untuk menambahkan fitur pengembang tambahan.

Fitur Elemen Utama:

  • Editor Halaman Depan Langsung
  • Fitur Personalisasi Situs Web
  • Templat & Blokir Perpustakaan
  • Opsi Responsif Seluler yang Luas
  • Pembuat Popup Paling Kuat
  • PRO: Buat Header / Footer Kustom
  • PRO: Buat Tata Letak Jenis Posting

Elementor adalah pembuat halaman terkuat yang saat ini tersedia. Mereka secara konsisten merilis fitur-fitur baru yang sejalan dengan tren desain saat ini. Ini berarti Anda akan dapat membuat situs web Anda tetap relevan. Jika sepanjang jalan, Anda ingin akses ke fitur-fitur canggih, Anda dapat meng-upgrade ke Elementor Pro, yang saya pikir merupakan nilai luar biasa mengingat semua modul tambahan dan fitur daya yang disertakan..

Memilih Tema Situs Astra Anda

Setelah memilih pembuat halaman, Anda akan dibawa ke perpustakaan templat Situs Astra. Ada banyak templat indah yang dapat Anda gunakan. Luangkan waktu Anda dalam memilih template yang Anda inginkan. Dan perhatikan bahwa templat ini sepenuhnya dapat diedit dengan pembuat laman yang Anda pilih, artinya Anda akan dapat menyesuaikan setiap bagian dan elemen situs web seperti tajuk, gambar, warna, logo, dll..

Untuk tutorial ini, saya akan menggunakan template Cetak Kustom karena terlihat luar biasa dan sangat berorientasi e-commerce.

Untuk menginstal tema, Anda hanya perlu mengkliknya untuk dibawa ke pratinjau. Jika Anda menyukai apa yang Anda lihat, klik Tema Impor tombol dan pastikan semua kotak dicentang.

Jika Anda akan melihat, ada kotak yang bertuliskan “Instal Plugin yang Diperlukan”. Mencentang kotak ini akan menginstal semua plugin yang diperlukan untuk tema agar terlihat persis seperti apa adanya. Untuk tema Cetak Kustom, itu akan menginstal Elementor, WooCommerce, dan WPForms. Ini menghemat banyak waktu karena saya tidak perlu menginstal plugin ini satu per satu lagi. Semuanya dilakukan untukku.

mengimpor tema situs astra

Mengimpor tema mungkin perlu waktu. Jangan tutup browser Anda atau tekan segarkan. Tunggu dulu, dan setelah selesai, Anda akan melihat warna biru Lihat Situs tombol. Klik tombol itu untuk dibawa ke situs web Anda yang sekarang memiliki tema yang baru saja Anda impor.

Langkah 4. Kustomisasi situs web Anda.

Situs web Anda sekarang terlihat menakjubkan, tetapi Anda ingin menjadikannya milik Anda. Hal pertama yang ingin Anda lakukan adalah memilih palet warna Anda. Jika Anda sudah memiliki warna merek Anda, ini akan menjadi lebih mudah.

Memilih Palet Warna

Situs web biasanya memiliki 3 warna: warna utama, aksen, dan pop. Warna primer adalah warna dominan situs web Anda dan kemungkinan besar warna merek Anda. Warna aksen digunakan secara normal pada judul atau judul posting jika Anda ingin mereka terlihat sedikit berbeda untuk menarik mata ke arah mereka. Terakhir, warna pop harus kontras dengan sisa warna untuk membuat elemen penting dari situs web menonjol seperti tombol ajakan bertindak.

Untuk memilih palet warna situs web, saya menggunakan dua alat. Yang pertama adalah Coolors.co tempat Anda dapat menelusuri berbagai palet warna dan memilih apa yang ingin Anda gunakan di situs web Anda.

beranda pendingin

Jika Anda melihat palet yang Anda suka, arahkan mouse Anda ke atasnya, klik Melihat, dan Anda akan dibawa ke jendela baru di mana Anda akan melihat kode Hex dari setiap warna.

palet warna dengan kode hex

Kode Hex ini adalah apa yang Anda butuhkan untuk menggunakan warna-warna ini di situs web Anda. Nanti saya akan menunjukkan kepada Anda bagaimana menggunakan kode Hex ini di backend WordPress.

Alat keren lainnya adalah Colorzilla, ekstensi Google Chrome yang memungkinkan Anda mendapatkan kode Hex warna apa pun yang Anda lihat di situs web apa pun sehingga Anda dapat menggunakannya sendiri. Jika Anda ingin mendapatkan ekstensi Colorzilla, klik disini. Lalu klik Tambahkan ke Chrome.

colorzilla

Mungkin perlu beberapa saat, tetapi setelah selesai, Anda akan melihat ikon ini di bilah alat:

ikon colorzilla

Jadi sekarang, jika Anda melihat warna pada situs web apa pun yang ingin Anda coba dan gunakan di situs web Anda sendiri, Anda hanya perlu mengklik ikon ini dan mengklik warna yang ingin Anda salin. Kode Hex kemudian akan disalin secara otomatis yang dapat Anda tempel di bagian belakang situs web Anda. Itu mudah. Ini adalah alat praktis yang akan memungkinkan Anda menggunakan warna-warna indah dalam satu klik.

Menyesuaikan Tipografi

Anda juga ingin menggunakan tipografi Anda sendiri untuk membuat situs web Anda menonjol. Situs web biasanya memiliki 2-3 font. Anda akan memiliki font untuk tajuk berita utama atau menu, font untuk tubuh, dan “font pop” tambahan. Seperti warna, Anda tidak dapat menggunakan sembarang font. Anda perlu memastikan bahwa mereka terlihat baik bersama dan mengirimkan pesan yang tepat tentang merek Anda.

Saya suka menggunakan Fontpair.co yang merupakan situs web yang menunjukkan kepada Anda bagaimana dua font berbeda terlihat bersama.

menggunakan fontpairs.co

Jika Anda melihat sesuatu yang Anda sukai, cukup catat apa namanya sehingga Anda dapat pergi ke WordPress dan menambahkannya langsung di sana.

Saya juga suka menggunakan WhatFont, ekstensi Google Chrome yang memberi tahu Anda font apa yang digunakan di situs web apa pun. Untuk menginstal WhatFont, klik disini lalu klik Tambahkan ke Chrome. Maka Anda akan melihat ikon ini di bilah alat:

ikon whatfont

Jika Anda ingin tahu nama font, cukup klik ikon ini dan arahkan mouse Anda ke teks. WhatFont akan memberi tahu Anda nama font ini, dan jika Anda mengkliknya, Anda juga akan melihat ukuran font, warna, keluarga, gaya, berat, dan banyak lagi..

menggunakan whatfont

Anda juga perlu logo merek untuk memisahkan situs web Anda dan menetapkan identitas merek Anda. Ada beberapa cara untuk mendapatkan logo. Anda dapat mencoba dan melakukannya sendiri menggunakan alat desain luar biasa yang disebut Canva. Ini cukup populer karena membuat mendesain sangat mudah bahkan untuk pemula.

Canva hadir dengan banyak templat logo yang dapat Anda modifikasi untuk membuatnya sendiri. Namun perlu dicatat bahwa jika Anda ingin mengekspor logo dengan latar belakang transparan, Anda harus meningkatkan ke Pro (yang memiliki uji coba gratis satu bulan). Anda selalu dapat masuk dalam Photoshop atau Photopea untuk menghapus latar belakang, tetapi itu hanya menambah satu langkah ekstra untuk proses.

logo canva

Jika Anda ingin menghemat waktu, Anda bisa menyewa desainer logo lepas untuk melakukannya untuk Anda. Anda dapat mencoba situs web seperti Fiverr.com atau 99design, tetapi Anda harus berhati-hati dalam memilih artis berdasarkan gaya, rekam jejak, ulasan, peringkat, dan lainnya.

Menyesuaikan Situs Web Anda

Sekarang saatnya menggunakan warna, font, dan logo itu di situs web Anda. Jika Anda berada di dasbor backend WordPress, buka Penampilan > Sesuaikan untuk membuka penyesuai tema.

sesuaikan tema

Jika Anda berada di ujung depan situs web Anda dan ada bilah hitam di bagian atas, Anda dapat mengklik Sesuaikan untuk membuka penyesuai.

sesuaikan tema

Beginilah tampilan tema penyesuai:

penyesuai tema

Di sini, Anda dapat mengunggah logo Anda, mengubah warna dan tipografi situs, tombol kustomisasi, dan banyak lagi. Perubahan yang Anda lakukan di sini ditampilkan secara real-time di situs web Anda sehingga Anda dapat langsung melihat seperti apa tampilannya. Selain itu, setiap tema memiliki opsi penyesuaian yang berbeda, jadi jika Anda menggunakan tema lain selain Astra, Anda dapat melihat opsi yang berbeda di sini.

Di Astra, untuk mengubah warna situs Anda, buka Warna & Latar Belakang. Anda akan memiliki opsi untuk mengubah warna dasar, remah roti, header, dan warna bar footer.

editor latar belakang warna

Warna Dasar adalah tema, tautan, teks, dan tautan yang mengarahkan warna situs web Anda. Jika Anda ingin mengubah, misalnya, Warna Tema, klik Pilih Warna. Anda akan melihat dua cara untuk memilih warna. Pertama, Anda dapat menempelkan kode Hex dalam sebuah kotak. Jadi jika Anda menemukan warna di Coolors.co atau tempat lain, Anda dapat menempelkan kode Hex di sini. Anda juga dapat memilih warna dalam alat pemilihan bawaan.

editor warna dasar

Untuk mengubah tipografi situs Anda, kembali ke menu utama penyesuai dan klik Tipografi. Anda dapat mengubah tipografi dasar, remah roti, konten, dan blog.

penyesuai tipografi

Selanjutnya adalah menambahkan logo Anda. Untuk mengunggah logo Anda, buka Tata letak > Header > Identitas Situs. Di bawah bagian Logo, klik ikon Ubah Logo tombol dan unggah logo Anda.

unggah logo

Astra juga memungkinkan Anda menyesuaikan lebar logo sehingga Anda dapat mengubah seberapa besar atau kecil yang Anda inginkan. Jika Anda menggulir ke bawah, Anda juga dapat mengubah judul situs Anda, menambahkan tagline situs, dan ikon situs atau favicon.

Anda dapat melakukan lebih banyak hal di area kustomisasi Astra seperti mengubah lebar konten situs, mengubah struktur posting blog, menyesuaikan footer dan header, dan banyak lagi. Jelajahi opsi Anda di sini untuk melihat apa yang paling Anda sukai untuk situs web Anda.

Setelah selesai mengkustomisasi, jangan lupa klik Menerbitkan untuk membuat perubahan Anda ditayangkan di situs Anda.

Langkah 5. Menyesuaikan situs web Anda dengan Elementor.

Pada titik ini, Anda telah menguasai dasar-dasar penyesuaian seperti mengubah warna situs, tipografi, menambahkan logo, dan semua itu. Sekarang saatnya untuk turun ke detail seluk-beluk dan mulai menggunakan Elementor (atau pembuat halaman mana pun yang Anda suka) untuk benar-benar mengubah penampilan situs Anda..

Seperti yang saya sebutkan sebelumnya, saya akan menggunakan Elementor dalam tutorial ini karena saya pikir itu yang terbaik, tetapi Anda dapat menggunakan pembuat halaman apa saja yang Anda sukai.

Di dalam Elementor, Anda dapat melakukan hampir semua hal dengan situs web Anda tanpa mengode atau menyewa pengembang web. Menambahkan elemen adalah proses seret dan lepas yang sederhana.

Ada dua cara untuk mengedit halaman dengan Elementor. Pertama, jika Anda berada di backend WordPress, klik Halaman dan Anda akan melihat daftar semua halaman situs web Anda termasuk yang secara otomatis dibuat dengan templat Situs Astra. Halaman yang dibuat dengan pembuat halaman tertentu (mis. Elementor) akan dilabeli seperti itu:

halaman

Untuk mengedit halaman dengan pembuat halaman Anda, arahkan mouse Anda ke atasnya dan klik Edit dengan (pembuat halaman). Dalam kasus saya, itu akan terjadi Edit dengan Elementor.

sunting dengan elemen

Setelah Anda mengklik itu, Anda akan dibawa ke dalam Elementor.

Cara lain adalah jika Anda berada di frontend situs web Anda, buka halaman yang ingin Anda edit dan klik Edit dengan elemen atau pada bilah hitam di bagian atas:

sunting dengan elemen

Salah satu dari ini akan membawa Anda ke dalam Elementor. Setelah masuk Elementor, Anda akan dapat menggunakan gambar yang berbeda untuk tajuk, mengubah teks, mengubah ikon, dan banyak lagi. Anda dapat mulai dengan mengubah teks dan gambar di tajuk yang sesuai dengan bisnis Anda. Berikut adalah beberapa hal yang dapat Anda lakukan dengan teks di dalam Elementor:

mengedit teks dalam elemen

Seperti yang Anda lihat, Anda dapat mengubah teks langsung di area pengeditan konten, mengubah ukuran, berat, warna, dan keluarga tipografi. Anda juga dapat menambahkan animasi seperti fade sederhana, zooming, dan banyak lagi. Ada banyak hal yang dapat Anda lakukan di sini untuk menambahkan bumbu ke situs web Anda.

Anda juga ingin mengubah gambar situs web Anda agar sesuai dengan sifat bisnis Anda. Mengubah gambar pada Elementor sangat mudah dilakukan. Anda hanya perlu mengklik gambar dan opsi akan muncul di sidebar kiri. Anda dapat mengunggah gambar baru, mengubah ukurannya, menambahkan batas atau bayangan, menambahkan animasi, dan banyak lagi.

mengedit gambar dalam elemen

Di dalam Elementor, Anda juga dapat mengubah teks tombol, menyesuaikan area testimonial, menambahkan lebih banyak elemen / blok seperti teks, gambar, tombol, video, dan lainnya.

Elementor Pro hadir dengan lebih banyak fitur seperti kemampuan untuk menambahkan formulir (yang biasanya membutuhkan plugin pihak ketiga), kemampuan untuk mengunggah font Anda sendiri, menambahkan slider, menambahkan tabel harga dan daftar harga, menyesuaikan header dan footer Anda (menyesuaikan yang terlarang bagi kebanyakan pembuat halaman), dan banyak lagi.

Jika Anda ingin membeli Elementor Pro dan pada saat yang sama mendapatkan akses gratis ke kursus Elementor Pro saya, klik tautan ini di sini.

Langkah 5. Siapkan WooCommerce.

Sekarang saatnya menyiapkan WooCommerce yang merupakan plugin WordPress yang mengubah situs web apa pun menjadi toko online. Ini memungkinkan Anda menambahkan produk, menerima pembayaran online, membuat kupon, mengatur pengiriman dan perpajakan, dan banyak lagi lainnya.

WooCommerce telah diinstal untuk saya dengan tema Custom Print Astra Site, jadi sekarang saya harus masuk dan mengaturnya. Jika Anda belum menginstal WooCommerce, kunjungi saja Plugin > Tambah baru dan cari WooCommerce.

Hal pertama yang harus kita lakukan adalah pergi ke WooCommerce > Pengaturan. Anda akan melihat 7 tab: Umum, Produk, Pengiriman, Pembayaran, Akun & Privasi, Email, dan Lanjutan.

Mari kita lihat dulu Umum tab. Di tab ini, Anda akan dapat menetapkan alamat toko Anda, di negara mana Anda akan menjual dan mengirimnya, dan memungkinkan tarif pajak.

pengaturan umum woocommerce

Jika Anda menggulir ke bawah, Anda juga akan melihat opsi untuk mengaktifkan kupon dan menyesuaikan bagaimana harga ditampilkan di situs web Anda termasuk mata uang, di mana itu akan ditampilkan, dll.

Berikutnya adalah Produk tab tempat Anda dapat mengatur opsi terkait produk. Anda dapat mengatur halaman mana yang akan menjadi halaman Toko Anda, apa yang terjadi ketika pengunjung menambahkan produk ke keranjang, mengatur dimensi produk, mengaktifkan dan mengonfigurasi ulasan pelanggan, dan mengaktifkan peringkat bintang.

pengaturan produk woocommerce

Di bagian atas bagian ini, Anda juga memiliki opsi untuk Inventaris dan Produk yang dapat diunduh. Di bagian Inventaris, jika Anda mencentang kotak di sebelah Aktifkan manajemen stok, Anda akan melihat daftar opsi yang akan membantu Anda mengelola inventaris Anda. Misalnya, Anda dapat menetapkan ambang batas inventaris rendah sehingga saat stok Anda mencapai angka itu, Anda akan dikirimi pemberitahuan. Anda juga dapat memilih untuk menyembunyikan item stok dari situs web Anda.

pengaturan inventaris woocommerce

Adapun Produk yang dapat diunduh bagian, ini hanya relevan jika Anda menjual konten yang dapat diunduh di situs web Anda, jadi jika Anda menjual produk yang murni fisik, Anda dapat melewati ini. Anda akan memiliki opsi untuk meminta pembeli untuk masuk sebelum dapat mengunduh produk Anda. Anda juga dapat memberikan akses ke unduhan setelah pembayaran.

opsi produk yang dapat diunduh

Tab selanjutnya adalah pengiriman. Ini hanya relevan jika Anda menjual produk fisik yang akan dikirim ke pembeli. Di dalam tab ini ada tiga sub-bagian: Zona pengiriman, opsi pengiriman, dan kelas pengiriman.

Di Zona Pengiriman, Anda harus menambahkan zona pengiriman dan menetapkan metode pengiriman yang tersedia untuk zona ini. Ini akan memakan waktu cukup lama jika Anda dikirim ke beberapa negara.

zona pengiriman

Jika Anda membutuhkan bantuan lebih lanjut tentang zona pengiriman, Anda dapat melihat zona pengiriman WooCommerce dokumentasi.

Berikutnya adalah Pilihan pengiriman bagian. Di bagian ini, Anda dapat mengontrol bagaimana tarif pengiriman ditampilkan di situs web Anda dan menetapkan default atau tujuan pengiriman yang diperlukan.

pilihan pengiriman

Bagian terakhir dalam Pengiriman adalah Kelas pengiriman. Dengan kelas pengiriman, Anda dapat menetapkan tarif pengiriman yang berbeda untuk sekelompok produk, misalnya, produk yang lebih berat yang membutuhkan lebih banyak ongkos kirim.

kelas pengiriman

Untuk menetapkan tarif pengiriman, buka Zona Pengiriman dan membuat atau mengedit metode pengiriman yang ada seperti “Tarif Rata”.

tambahkan biaya pengiriman

Setelah Anda mengklik Edit, jendela sembulan akan muncul. Di sini, Anda akan dapat menambahkan tarif pengiriman tetap dan biaya tambahan untuk kelas pengiriman yang baru saja Anda buat.

biaya pengiriman kelas pengiriman

Jika Anda memerlukan bantuan lebih lanjut untuk mengonfigurasi pengaturan pengiriman Anda, Anda dapat memeriksa WooCommerce dokumentasi untuk pengiriman.

Sekarang mari kita beralih ke Pembayaran. Di tab ini, Anda akan dapat mengaktifkan atau menonaktifkan gateway pembayaran seperti PayPal, transfer bank langsung, cash on delivery, dan banyak lagi. Setelah Anda mengaktifkan metode, klik Mendirikan untuk menautkan akun Anda dan mulai menerima pembayaran.

cara Pembayaran

Jika Anda ingin dapat menerima pembayaran Stripe, Anda dapat menginstal plugin bernama Gateway Pembayaran Stripe WooCommerce. Pergi saja ke Plugin > Tambah baru dan cari plugin. Menginstal dan mengaktifkan plugin ini akan mengaktifkan metode pembayaran Stripe di WooCommerce, tetapi Anda harus masuk ke dalamnya WooCommerce > Pengaturan > Pembayaran untuk mengaturnya.

Dalam Akun & Privasi tab, Anda akan dapat mengonfigurasi pengaturan yang terkait dengan pembuatan akun dan privasi pengguna. Anda dapat memilih untuk mengizinkan para tamu untuk membeli tanpa membuat akun, mengatur halaman privasi Anda dan halaman kebijakan, dan memilih berapa lama data pengguna akan disimpan.

akun dan privasi

Berikutnya adalah Email tab di mana Anda akan melihat daftar email yang dikirimkan secara otomatis oleh WooCommerce berdasarkan kondisi tertentu. Misalnya, email dapat dikirim ke alamat email pilihan Anda setiap kali ada pesanan baru. Anda juga dapat melihat email dengan pembaruan tentang pesanan pelanggan seperti pesanan yang dikembalikan atau diselesaikan.

notifikasi email

Akhirnya, Maju tab, yang menggantikan tab API, memungkinkan Anda mengonfigurasi lebih banyak detail teknis seperti pengaturan halaman tempat Anda dapat memberi tahu WooCommerce halaman mana yang akan bertindak sebagai halaman keranjang atau halaman checkout Anda.

pengaturan halaman woocommerce

Jika Anda menggulir ke bawah, Anda akan dapat mengubah apa yang disebut WooCommerce sebagai titik akhir yang merupakan pelengkap URL yang memungkinkan mereka untuk menampilkan konten yang berbeda tanpa perlu halaman baru.

Langkah 6. Tambahkan produk.

Setelah Anda selesai dengan pengaturan dasar WooCommerce, sekarang saatnya untuk menambahkan produk. Tema Situs Astra yang kami gunakan dalam tutorial ini sudah dilengkapi dengan produk sampel, dan seperti inilah tampilan halaman produk di frontend:

halaman produk

Sekarang mari kita lihat bagaimana kita bisa mengubahnya dan menambahkan produk kita sendiri di backend.

Untuk menambah produk baru atau mengedit produk yang sudah ada, cukup klik opsi menu Produk di bilah sisi kiri di dasbor WordPress. Anda kemudian akan melihat daftar semua produk yang Anda miliki. Atau, jika Anda berada di bagian depan halaman produk, Anda dapat mengklik Edit produk pada bilah hitam di bagian atas halaman. Ini akan membawa Anda langsung ke editor produk.

editor produk

Di sinilah Anda dapat mengubah judul produk dan deskripsi produk. Jika Anda menggulir ke bawah, Anda akan melihat bagian bernama Data produk. Di sinilah Anda akan menghabiskan sebagian besar waktu Anda. Di sini, Anda dapat memilih jenis produk, dan dari sana Anda dapat mengkonfigurasi pengaturan produk lainnya.

WooCommerce memungkinkan Anda menambahkan jenis produk ini:

  • Fisik, dapat diunduh, virtual. Produk virtual tidak perlu diunduh. Contohnya adalah janji temu atau sesi pelatihan satu lawan satu.
  • Produk sederhana. Ini adalah produk barang tunggal.
  • Produk yang dikelompokkan. Ini adalah bundel produk yang berbeda.
  • Produk eksternal. Produk yang dibeli di luar situs web Anda seperti tautan afiliasi.
  • Produk variabel. Produk variabel memiliki variasi seperti warna dan ukuran.
jenis produk

Setiap kali Anda membuat produk baru, langkah pertama adalah memilih jenisnya. Setiap jenis dilengkapi dengan serangkaian opsi yang berbeda. Misalnya, produk yang dapat diunduh akan memiliki opsi ini:

opsi produk yang dapat diunduh

Di sisi kiri bagian ini, Anda akan melihat lebih banyak opsi untuk inventaris, pengiriman, produk terkait, dan lainnya.

Di Inventaris, Anda akan dapat menambahkan SKU, memberikan sejumlah stok tertentu untuk produk khusus ini, mengatur status stok, dan banyak lagi.

Di pengiriman, Anda dapat menentukan berat dan dimensi produk serta menetapkan kelas pengiriman yang kami buat pada langkah sebelumnya.

pengiriman dalam data produk

Di Produk Tertaut, Anda dapat menetapkan item penjualan dan cross-selling ke suatu produk. Upsell adalah produk yang Anda rekomendasikan daripada produk saat ini karena memiliki harga yang lebih tinggi. Jual-silang adalah produk yang Anda rekomendasikan dalam keranjang berdasarkan produk saat ini. Jika Anda ingin menambahkan penjualan atau penjualan silang, ketikkan nama produk di kotak yang sesuai.

produk terkait

Anda juga dapat menambahkan atribut ke produk Anda di Atribut bagian. Itu bisa ukuran, warna, berat, dll. Juga, jika Anda membuat produk variabel, Anda harus menambahkan atribut di sini terlebih dahulu. Jika Anda ingin mempelajari lebih lanjut tentang cara membuat produk variabel, periksa Panduan WooCommerce di sini.

Jika Anda gulir ke bawah Data produk kotak, Anda akan melihat area di mana Anda dapat menambahkan deskripsi produk pendek. Deskripsi ini akan muncul di sebelah produk Anda dan di dekat harga. Tetap pendek dan manis. Anda dapat menambahkan gambar produk di sisi kanan. Jika Anda memiliki lebih banyak gambar produk, Anda dapat menambahkannya di Galeri produk bagian.

deskripsi singkat dan gambar produk

Penting juga untuk mengatur visibilitas Katalog yang dapat ditemukan di bagian atas halaman di bawah Menerbitkan. Dalam beberapa kasus, Anda mungkin ingin menyembunyikan produk tertentu karena mungkin Anda menawarkannya sebagai penjualan silang dengan harga diskon eksklusif. Di sinilah Anda bisa melakukan itu.

visibilitas katalog

Setelah Anda selesai dengan semuanya di sini, klik Memperbarui untuk menyimpan semua perubahan Anda.

Jika Anda ingin mempelajari lebih lanjut tentang berbagai jenis produk dan bagaimana Anda dapat membuatnya dengan benar, ini Panduan WooCommerce adalah tempat yang bagus untuk memulai. Terus tambahkan lebih banyak produk ke situs web Anda dengan langkah-langkah yang sama persis seperti yang saya tunjukkan di sini sampai Anda membuat daftar produk Anda.

Langkah 7. Kustomisasi checkout Anda.

WooCommerce adalah plugin yang bagus seperti yang Anda lihat sejauh ini, tetapi keluhan umum yang menentangnya adalah kurangnya opsi checkout. Anda tidak akan dapat mengubah tampilan halaman checkout dan Anda tidak dapat membuat corong penjualan dengannya. Corong penjualan adalah cara yang bagus untuk meningkatkan nilai pembelian pelanggan, jadi jika Anda tidak memilikinya di situs web Anda, Anda benar-benar meninggalkan uang di atas meja.

Jika Anda ingin membuat corong penjualan untuk situs web e-commerce Anda, plugin terbaik yang dapat membantu adalah CartFlows. Ini adalah plugin WordPress pembangun corong yang memungkinkan Anda membuat corong yang indah dan sangat efektif di dalam WordPress.

aliran gerobak

Jika Anda ingin mempelajari lebih lanjut tentang cara membuat corong penjualan dengan CartFlows, Anda dapat melihat tutorial ini yang saya buat.

Langkah 8. Tetap di atas pengabaian gerobak.

Sebelum saya mengakhiri tutorial ini, izinkan saya menambahkan satu hal lagi tentang pengabaian keranjang. Adalah fakta dalam e-commerce bahwa banyak pelanggan akan meninggalkan keranjang mereka tanpa menyelesaikan pembelian.

Ini bisa jadi karena banyak alasan. Mereka mungkin terganggu, kekuatan atau koneksi padam, sesuatu yang mendesak muncul. Apa pun itu, banyak gerobak terlantar ini kehilangan penjualan jika Anda tidak akan melakukan apa-apa.

Untungnya, ada sebuah plugin bernama Pemulihan Pengabaian Keranjang WooCommerce plugin yang melacak dan secara otomatis mengirim email tindak lanjut ke pelanggan dengan gerobak yang ditinggalkan – semuanya GRATIS!

Jika Anda menggunakan tema Situs Astra yang saya gunakan di sini, plugin ini sudah diinstal untuk Anda. Tetapi jika tidak, Anda dapat menginstalnya dengan masuk ke Plugin > Tambah baru dan cari plugin.

Ini akan membuat opsi baru di bawah WooCommerce disebut Pengabaian Gerobak. Jika Anda mengklik ini, Anda akan dapat melihat ikhtisar tentang berapa banyak gerobak terlantar yang Anda miliki, berapa banyak yang telah dipulihkan, dan berapa banyak yang hilang.

pesanan yang dapat dipulihkan, ditinggalkannya keranjang pesanan

Anda juga dapat menyesuaikan email tindak lanjut yang dikirim WooCommerce dengan beralih ke Email Tindak Lanjut tab, arahkan mouse Anda ke email yang ingin Anda edit, dan klik Edit.

email tindak lanjut

Anda kemudian akan dibawa ke editor email:

menyesuaikan email tindak lanjut

Membungkus

Membuat situs web WordPress e-commerce mungkin tampak rumit dan luar biasa, tetapi saya harap saya menjelaskannya dan menunjukkan bagaimana Anda dapat melakukan semuanya sendirian dengan sedikit bantuan. Saya senang mendengar kisah sukses Anda, dan jika Anda butuh bantuan, Anda dapat menghubungi saya di bagian komentar di bawah.

SiteGround

SiteGround adalah web host yang sangat direkomendasikan online karena mereka telah melayani pengguna WordPress dan masih memiliki harga yang terjangkau. Mereka paling dikenal karena kinerja yang cepat dan dukungan yang sama cepatnya.

Fitur Utama SiteGround:

  • Sertifikat SSL gratis
  • Dukungan Pengetahuan CEPAT
  • WordPress Staging Enviroment
  • Migrasi Situs Web Gratis
  • Backup Harian

SiteGround adalah pilihan tepat untuk kebutuhan hosting web Anda. Mereka melayani situs-situs WordPress dan menawarkan sumber daya lebih sedikit daripada pesaing mereka, tetapi keandalannya lebih tinggi.

Lihat SiteGround

Tema Astra

Astra adalah tema WordPress gratis yang berfokus pada kecepatan. Secara opsional, Anda dapat membeli versi Pro seharga $ 59 yang menambahkan beberapa pengaturan dan opsi tambahan.

Fitur Utama Tema Astra:

  • Bukan Tema Fastes, Tapi Bukan Bungkuk
  • Banyak Situs Demo Gratis
  • Fitur Mega Menu yang Fleksibel
  • Opsi Tata Letak Kustom
  • Dukungan WooCommerce
  • Dukungan LearnDash

Tema Astra adalah pilihan yang adil untuk setiap proyek desain web WordPress. Saya kira pertanyaan terbesar adalah apakah Anda bahkan perlu membeli tema saat ini karena pembangun halaman melakukan semua hal yang sama dengan yang Anda perlukan untuk sebuah tema. Misalnya, Elementor memiliki tema Hello gratis yang memungkinkan pembuat halaman Anda melakukan semua pekerjaan.

Masih ada beberapa alasan bagus untuk membeli tema pro, tetapi bagi kebanyakan orang, kemungkinan besar mereka akan baik-baik saja dengan tema gratis.

Bagi saya, saya pikir Tema Astra tidak mengikuti tren saat ini dan saya tidak lagi merekomendasikannya.

Ada banyak tema modern yang lebih baik tersedia yang menawarkan inbuilt header dan footer builder vs dibatasi menjadi 3 layout, ditambah lebih fleksibel halaman dan post layout.

Lihat Tema Astra

Elemen

Elementor adalah pembangun halaman WordPress yang telah mengambil alih desain web WordPress. Ini memiliki set fitur terdalam, namun sangat mudah digunakan dan dikuasai. Elementor adalah pembuat halaman gratis berfitur lengkap. Ada juga add-on Pro untuk menambahkan fitur pengembang tambahan.

Fitur Elemen Utama:

  • Editor Halaman Depan Langsung
  • Fitur Personalisasi Situs Web
  • Templat & Blokir Perpustakaan
  • Opsi Responsif Seluler yang Luas
  • Pembuat Popup Paling Kuat
  • PRO Membuat Header / Footer Kustom
  • PRO Membuat Tata Letak Jenis Posting

Elementor adalah pembuat halaman terkuat yang saat ini tersedia. Mereka secara konsisten merilis fitur-fitur baru yang sejalan dengan tren desain saat ini. Ini berarti Anda akan dapat membuat situs web Anda tetap relevan.

Elementor Pro adalah nilai yang luar biasa mengingat semua modul tambahan dan fitur daya yang disertakan.

Jika saya memulai proyek situs web baru hari ini, Elementor akan menjadi pembuat halaman yang akan saya pilih. Saya menganggap itu harus memiliki pembangun halaman WordPress yang menyenangkan untuk digunakan.

Lihat Elemen

CartFlows

CartFlows adalah pembangun corong penjualan untuk WordPress. Hal ini memungkinkan Anda untuk membuat corong penjualan dengan cepat dan mudah menggunakan pembuat halaman pilihan Anda.

Fitur CartFlows Utama:

  • Template yang Dirancang Secara Profesional
  • 5 Lokasi Pesan Benjolan
  • One Click Upsells
  • Gunakan Pembuat Halaman Pilihan Anda
  • Dapat Diperpanjang Tidak Seperti Corong Klik
  • Penghitung Waktu Mundur & Pengujian Berpisah

Jika Anda menginginkan pembuat corong penjualan untuk WordPress dan Anda sendiri yang baik dengan hosting, atau menggunakan hosting WordPress yang dikelola, maka CartFlows jika opsi yang bagus karena itu super mudah digunakan namun sangat kuat.

Lihat CartFlows

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map