Cara Membuat Website eCommerce Menggunakan WordPress dan Elementor 2020

Diterbitkan: 2022-07-10

Dalam tutorial ini, saya mengajari Anda Cara Membuat Situs Web eCommerce Menggunakan WordPress dan Elementor 2020 yang dapat Anda sesuaikan sepenuhnya.

WordPress adalah platform CMS yang paling banyak digunakan untuk membangun semua jenis situs web, termasuk situs web eCommerce. Selain itu, Anda akan belajar menggunakan pembuat halaman Elementor untuk membuat halaman web yang luar biasa, yang saat ini merupakan pembuat halaman no.1 dan paling populer untuk WordPress. WordPress mengontrol lebih dari 1/3 internet. Sebagian besar perusahaan e-niaga besar seperti Sony, Bata, eBay dan banyak lagi, menggunakan if untuk pengembangan dan pemeliharaan situs web mereka Dan bagian terbaik tentang menggunakan WordPress adalah Anda tidak perlu mempelajari semua jenis bahasa pengkodean atau lainnya jargon teknis untuk membuat website Anda. Ini adalah platform seret dan lepas sederhana yang memberikan banyak templat dan tata letak bawaan yang membantu dalam membuat situs web ramah pengguna yang menarik. Juga, saya akan menyediakan template siap pakai yang dapat Anda impor dengan mudah dan membuat situs web E-niaga Anda aktif dan berjalan dalam hitungan menit.

Hanya melalui seluruh tutorial ini akan membuat Anda siap untuk membuat situs web Anda sendiri dan berjalan tanpa bantuan eksternal. Tutorial ini telah membantu banyak orang membuat situs web mereka dan membuat bisnis mereka unggul dalam persaingan di industri e-niaga yang brutal ini. Jadi, ikuti tutorial yang mudah dan cukup jelas ini dan dapatkan keterampilan yang akan membantu sepanjang hidup Anda. Seluruh proses telah diajarkan dalam pendekatan langkah-demi-langkah dan semua infografis dan representasi bergambar diberikan untuk membuatnya semudah mungkin untuk dipahami.

Jadi mari kita mulai membuat Website eCommerce Menggunakan WordPress dan Elementor 2020

Pengantar Situs Web E-niaga

Gambar di atas adalah contoh Halaman Beranda atau Halaman Arahan dari situs web e-niaga biasa. Halaman arahan sangat penting untuk konversi dan melakukan penjualan di situs web e-niaga. Jadi halaman arahan harus menarik yang berisi spanduk dan pemberitahuan penjualan dan pengurangan harga atau pendatang baru terutama untuk situs web e-niaga. Untuk mendapatkan konversi, Anda perlu menekankan pada produk Anda yang paling laku di halaman arahan dan memberikan tautan yang mudah ke produk tersebut. Anda dapat menampilkan kategori produk Anda di halaman arahan dan memberikan tautan ke sana.

Di bagian atas, kami memiliki header yang berisi lokasi kami, nomor telepon, nomor kontak kami di kiri dan di kanan, kami memiliki ikon halaman media sosial kami Facebook, Twitter, YouTube, dll. Di bawahnya, kami memiliki toko tombol yang menautkan ke halaman belanja produk di situs web kami. Selain itu, kami memiliki tombol Akun, mengklik di mana pengguna dapat membuka dasbor pribadi mereka sendiri untuk mengakses dan mengelola informasi dan pembelian mereka. Kami juga memiliki logo bisnis kami di header itu sendiri. Di tengah, kami memiliki tautan ke halaman kami yaitu. Beranda, Tentang Kami, Belanja, Akun Saya, dan Hubungi Kami.

Setelah itu Anda memiliki semua produk dan spanduk Anda, yang akan dipelajari cara membuatnya dalam tutorial ini, ditampilkan dengan cara yang sangat menarik . Setelah itu, kami juga memiliki bagian Newsletter, di mana pengguna dapat berlangganan ke situs web Anda dan bukan pemberitahuan dan email tentang produk, penawaran, kupon, dll. Di bawah ini kami memiliki footer kami, memberikan informasi tentang kami dan tombol berlangganan Email.

Seperti yang Anda lihat pada gambar, halaman toko mencantumkan semua produk yang tersedia di situs web kami, tempat pengguna dapat memeriksa produk apa pun dengan mengkliknya. Di bilah samping, kami memiliki filter Harga, daftar kategori, ulasan, dan iklan video produk kami. Di bawah setiap produk, ada juga formulir ulasan dan produk terkait. Selanjutnya kami memiliki halaman Tentang Kami yang menampilkan deskripsi bisnis Anda dan informasi tentang tim Anda. Dan kemudian kami memiliki halaman Kontak di mana pengguna dapat menghubungi kami menggunakan formulir kontak. Selanjutnya kami memiliki dasbor Akun Saya yang akan memiliki dasbor pribadi untuk setiap pelanggan yang berisi info pribadi, pembelian, dan pembayaran mereka.

Anda dapat melihat halaman keranjang setelah Anda membeli sesuatu seperti yang Anda lihat pada gambar, di mana Anda dapat mengubah rincian pembelian Anda, memeriksa jumlah total dan melanjutkan untuk membayar. Kemudian pengunjung dapat melakukan check out dengan mengisi detail pengiriman dan membayar pembelian. Kami akan belajar membuat semua halaman ini selangkah demi selangkah dalam tutorial ini sehingga situs web Anda benar-benar siap untuk memulai bisnis.

Dapatkan Hosting dan Instal WordPress dan Elementor

  • Pembelian Domain NameHero

Hal pertama yang harus kita lakukan untuk membuat website adalah mendapatkan nama domain dan hosting untuk website Anda. Anda perlu memilih hosting yang baik karena seluruh situs web Anda akan berbasis dan didukung di situs hosting Anda, jadi Anda perlu memeriksa dan membandingkan berbagai hosting berdasarkan kriteria seperti keandalan, dukungan teknis, ruang, sekuritas, desain, peluang SEO, dll.

Ada beberapa penyedia hosting di pasar dan kebanyakan dari mereka memiliki penawaran yang berbeda. Saya sudah mencoba banyak dari mereka dan akhirnya saya memilih NameHero untuk semua situs web saya. Saya menggunakannya secara pribadi dan membandingkannya dengan 22 hosting lain dan menemukan mereka yang terbaik. Seperti yang Anda lihat pada gambar, mereka memiliki 4 opsi berbeda dan saya merekomendasikan opsi Plus Cloud untuk situs web e-niaga. Anda dapat menggunakan tautan saya untuk mendapatkan diskon. www.namehero.com/darrelwilson

Setelah Anda memesan paket Anda, Anda akan dapat memilih nama domain Anda, yaitu nama situs web Anda. Anda dapat memilih nama apa pun yang Anda inginkan. Anda dapat memilih domain sesuai kebutuhan Anda seperti .net, .biz dll. Langkah selanjutnya dan terakhir adalah mengisi informasi Anda tentang detail Akun dan Pembayaran. Sangat disarankan untuk mendapatkan Perlindungan ID di kotak centang add-on karena melindungi Anda dari spammer. Selesaikan pembelian dengan mengklik halaman berikutnya dan melalui proses pembayaran.

  • Instal WordPress

Untuk menginstal WordPress di hosting Anda, buka 'Area Klien' di halaman hosting Anda, klik 'Cloud Web Hosting'. Selanjutnya Anda memiliki Produk dan Layanan Saya, di mana Anda akan melihat paket Plus Cloud dengan nama domain Anda, klik tombol Aktif di sebelahnya seperti yang Anda lihat pada gambar. Selanjutnya di sebelah kiri, Anda akan melihat tombol 'Go to cpanel' dan klik di atasnya. Pada halaman berikutnya seperti yang Anda lihat pada gambar, gulir ke bawah ke kategori perangkat lunak dan klik 'WordPress Manager oleh Softaculous'.

Ini akan membuka penginstal WordPress, klik tombol Instal Sekarang. Halaman Setup akan terbuka yang berisi versi, nama domain dan direktori Anda seperti yang Anda lihat pada gambar. HARAP HAPUS APA SAJA YANG TERTULIS DI BAWAH DIRECTORY. JUGA PADA PROTOCOLCHOOSE 'https:/'. Dalam pengaturan situs, Anda dapat mengubah nama dan deskripsi situs Anda. Kita juga bisa melakukannya nanti. Masukkan detail admin Anda seperti Nama Pengguna, Kata Sandi, dan Email, yang akan menjadi detail login WordPress Anda. Pada halaman berikutnya, gulir ke bawah template karena kami tidak menggunakannya dan klik 'Instal'. Klik tautan URL admin yang diberikan di halaman berikutnya dan WordPress baru Anda dibuat dan ditayangkan di internet. Anda sekarang berada di dashboard WordPress Anda seperti pada gambar di mana Anda dapat mengedit situs web Anda.

  • Pengaturan Umum WordPress

Sebelum Anda mendesain situs web Anda, mari kita belajar mengubah pengaturan Anda di dasbor WordPress. Di dasbor WordPress Anda, Anda akan melihat beberapa tab di sebelah kiri halaman, seperti yang Anda lihat pada gambar. Salah satu yang paling penting adalah tab 'Pengaturan' di mana Anda akan menemukan pengaturan umum WordPress. Anda harus mengubah permalink Anda dari 'Hari dan Nama' menjadi 'Nama posting' untuk membuat alamat situs web Anda lebih mudah dipahami. Ini juga sangat penting untuk SEO Anda. Tab lain di dasbor WordPress Anda adalah 'Pengguna' tempat Anda menyesuaikan profil dan tampilan dasbor WordPress Anda. Klik 'Simpan Perubahan' untuk memperbaruinya.

Untuk login kembali ke WordPress setelah Anda logout, Anda perlu mengetikkan URL Anda di address bar diikuti dengan '/wp-admin' yang akan membawa Anda ke halaman login WordPress di mana Anda dapat memasukkan Nama Pengguna dan Kata Sandi Anda untuk login.

Membuat halaman dan Menu

Anda telah membuat situs web fungsional sekarang, itu masih belum lengkap. Sekarang Anda perlu menambahkan halaman ke situs web Anda. Di dasbor WordPress Anda, klik tab 'Halaman' dan pilih opsi 'Tambah Baru'. Anda juga dapat melakukan ini dengan mengklik tombol 'Tambah Baru' di bagian atas halaman. Saat Anda melakukan ini, dasbor akan membuka editor halaman, seperti yang ditunjukkan pada gambar di bawah, tempat Anda dapat membuat halaman baru. Di sini, Anda dapat meletakkan nama halaman dan mendesain tata letak halaman. Klik tombol 'Terbitkan' dan halaman web Anda dibuat. Di sini, di tutorial ini kita akan membuat halaman dasar seperti Beranda, Tentang Kami, dan Kontak yang diperlukan oleh setiap situs web. Untuk saat ini, kita tidak masuk ke isi halaman yang akan kita lakukan nanti. Anda dapat melihat halaman ini dengan mengklik tampilan di bawah nama halaman di dashboard WordPress.

Setelah Anda membuat halaman terpisah, Anda perlu membuat menu untuk dapat menavigasi halaman ini. Membuat menu sangat mudah menggunakan WordPress. Cukup arahkan ke dasbor Anda, temukan tab 'Tampilan' dan klik 'Menus'. Ini akan membuka editor menu, di mana Anda dapat membuat dan memberi nama menu Anda seperti yang Anda lihat pada gambar di bawah. Setelah Anda membuat menu, Anda dapat menetapkan halaman yang berbeda dari situs web Anda ke menu. Anda selalu dapat menetapkan kembali kronologi item menu dan Anda dapat membuat menu drop-down dengan meletakkan satu item di bawah item lainnya dengan drag and drop.

Sekarang yang harus Anda lakukan adalah mengklik 'Sesuaikan' di kiri atas seperti yang ditunjukkan pada gambar dan pergi ke 'Pengaturan Beranda' dan ubah beranda Anda menjadi 'Halaman Statis' dan pilih Beranda Anda sebagai halaman statis, yang harus Anda lakukan pilih dari daftar dropdown. Hal ini Anda lakukan agar setiap kali seseorang mengunjungi website Anda, selalu ada yang diarahkan ke Homepage Anda. Mendapatkan langsung di beberapa halaman lain seperti Tentang Kami, halaman Kontak atau posting terbaru Anda tidak akan masuk akal bagi pemirsa.

Unduh Elementor

Sekarang kita perlu membeli pembuat halaman Elementor pro yang akan kita gunakan untuk membangun halaman web situs web e-niaga kita. Anda dapat membelinya menggunakan link saya.www.darrelwilson.com/elementor.Dari halaman mereka, Anda dapat memeriksa berbagai paket yang tersedia. Kami tidak dapat menggunakan versi gratis karena kami memerlukan pembuat tema dan layanan pembuat Woocommerce. Setelah Anda membeli paket Anda, itu terbuka ke akun Anda seperti yang ditunjukkan pada gambar dari mana Anda harus mengklik 'Unduh Plugin' dan zip sementara akan diunduh.

Selanjutnya Anda perlu mengunggahnya ke situs WordPress Anda. Buka dasbor Anda di WordPress, klik 'Plugins' pada bilah alat di sebelah kiri, klik 'Tambah Baru' dan plugin add Anda akan terbuka seperti yang ditunjukkan pada gambar. Klik 'Unggah Plugin' dan pilih file zip Elementor Anda dan instal. Klik 'Aktifkan plugin' dan tombol 'Elementor' baru akan dibuat di toolbar WordPress Anda. Pergi ke sana dan klik 'Hubungkan dan Aktifkan'.

Instal tema WordPress

Sekarang mari kita instal tema WordPress ke situs web kita. WordPress menyediakan banyak tema pra-desain untuk dipilih, untuk tampilan situs web Anda. Di tab "Tampilan" di dasbor WordPress, Anda akan menemukan tombol 'Tema' tempat Anda dapat memasang tema. Anda dapat memilih tema apa saja dari pilihan yang tersedia. Untuk tujuan tutorial ini, kita akan menggunakan tema Astra yang dapat Anda temukan di menu populer. Klik 'Aktifkan' di bawah nama tema. 'Bagian terbaik tentang menggunakan tema ini adalah ia mencakup semua pengaturan dan fungsionalitas dasar yang diperlukan untuk menjalankan situs web dan sangat kompatibel dengan pembuat halaman Elementor.

Edit halaman dengan Elementor

Sekarang mari kita belajar bagaimana mengedit halaman kita dengan Elementor. Buka beranda situs WordPress Anda dan klik 'Edit Halaman' di baris hitam atas yang akan membuka editor halaman. Pertama mari kita ubah pengaturan halaman di sisi kanan seperti yang ditunjukkan pada gambar. Ubah tata letak konten menjadi 'Peregangan Lebar Penuh' dan pilih 'Nonaktifkan Judul' seperti yang kami inginkan untuk pengaturan beranda kami.

Sekarang klik 'Edit dengan Elementor' untuk membuka Editor Elemen seperti yang ditunjukkan pada gambar. Mari kita lihat tutorial singkat tentang editor Elementor di sini. Untuk menambahkan bagian baru ke halaman, klik tombol Plus dan pilih pola kolom yang Anda inginkan. Untuk menambahkan elemen, klik pada 9 titik pada bilah alat di sisi kiri yang akan memberi Anda daftar elemen seperti pada gambar. Anda dapat menarik dan melepas salah satu elemen yang Anda inginkan di halaman dan mengeditnya.

Setelah Anda mengklik modul apa pun di halaman, bilah alat editnya akan muncul di sebelah kiri. Di sini, di gambar, kami sedang mengedit Heading, jadi 'Edit Heading' telah muncul yang berisi 3 tab. 1 adalah Konten yang memberikan berbagai opsi untuk konten elemen. 2 nd adalah Gaya di mana Anda dapat mendesain gaya seperti warna, ukuran, font, dll. dari elemen tersebut. Dan yang ke- 3 adalah Advanced di mana Anda dapat meletakkan animasi dan hal-hal lain. Demikian pula, Anda dapat menambahkan, mengedit, dan menata kotak teks dengan cara yang sama di bawah judul Anda.

Anda dapat menambahkan tombol dan memberikan tautan ke situs web lain yang akan terbuka saat diklik. Anda dapat mengubah pengaturan menjadi 'Buka Jendela Baru', sehingga pengguna tidak meninggalkan situs kami. Anda juga dapat memilih Ikon untuk tombol Anda dari Galeri Ikon. Semua ini akan berada di bilah alat 'Tombol Edit' di sebelah kiri seperti yang ditunjukkan pada gambar.

Sekarang alih-alih mendesain setiap elemen secara terpisah, kita dapat menggunakan templat dan blok yang telah dibuat sebelumnya dengan mengklik ikon folder di Elementor. Dari perpustakaan, Anda dapat memilih seluruh halaman atau bagian atau blok tertentu. Ada semua kategori Blok yang tersedia sesuai kebutuhan Anda. Untuk halaman arahan, pilih blok mana saja dari kategori Pahlawan. Saya telah memilih Suara masa depan dalam contoh.

Membangun Beranda

Sekarang mari kita buat halaman yang mirip dengan Homepage, kita lihat di bagian intro, menggunakan blok ini. Pertama mari kita ubah latar belakang ke seluruh bagian. Untuk mengedit seluruh bagian, klik enam titik di atas bagian seperti yang ditunjukkan pada gambar. Sekarang Anda akan melihat toolbar 'Edit Bagian' dari mana Anda dapat menggunakan Style to tab untuk mengubah latar belakang. Berikut adalah LINK KE GAMBAR DEMO GRATIS yang dapat Anda gunakan di situs web E-niaga Anda. Unggah gambar-gambar ini di Elementor berikutnya dan pilih gambar untuk latar belakang. Anda dapat mengubah overlay latar belakang jika terlihat gelap.

Sekarang Anda dapat mengedit elemen blok seperti yang kita lakukan sebelumnya. Mengubah teks, warna, font, topografi, dll. Anda dapat menggunakan duplikat dengan mengklik tombol biru di kanan atas elemen. Anda dapat menambahkan pembatas antara kotak teks dan menatanya sesuai keinginan Anda menggunakan 'Edit Pembagi. Sekarang edit tombol sesuai desain kami seperti menambahkan atau mengurangi Padding untuk mengubah ruang di sekitarnya. Kami akan menautkan tombol ini ke halaman Toko kami nanti, Anda juga dapat menambahkan ikon ke dalamnya. Anda dapat mengubah gaya dan animasi saat Anda mengarahkan kursor ke semuanya di bawah bilah alat 'Tombol Edit' seperti yang ditunjukkan pada gambar.

Selanjutnya letakkan tajuk animasi dari Bagian Elemen Pro dengan menggulir ke bawah bilah alat elemen. Anda dapat mengubah gaya Judul, bentuk, warna, topografi, dll. menggunakan bilah alat 'Edit Judul Animasi' seperti yang ditunjukkan pada gambar. Anda dapat memeriksa semua elemen dan gaya dan mendesain hal-hal seperti yang Anda inginkan. Ada banyak trial and error yang terlibat dalam menemukan desain yang sempurna Anda. Klik tombol 'Perbarui' untuk menerapkan perubahan ini ke situs web Anda.

Selanjutnya di halaman arahan, kita harus membuat bagian yang terhubung ke berbagai kategori seperti bagian Wanita, bagian Pria dan Pendatang Baru. Tambahkan bagian 3 kolom baru, tambahkan heading, teks, dan tombol di dalamnya. Anda dapat membuat satu dan menggandakan dua kali untuk menghemat waktu dan tenaga. Sekali lagi Anda harus mengedit teks bagian ini, gaya, latar belakang dll seperti yang kita lakukan pada bagian di atas. Anda dapat menggunakan gambar yang diberikan oleh saya untuk latar belakang untuk semua 3 kategori. Saat menggunakan editor teks, untuk mengakhiri baris dan melanjutkan ke baris berikutnya, seperti yang kita lakukan dengan Bagian Wanita, gunakan <br> seperti yang ditunjukkan pada gambar.

Di sini kami tidak memiliki template atau blok apa pun di bagian ini, jadi Anda harus membuat dan menata setiap bagian dari awal, yang mungkin terlihat seperti tugas yang lama untuk pertama kalinya , tetapi Anda dapat menggunakan semua drag and drop dan trik seperti duplikasi. seperti salin tombol 'Belanja Sekarang' yang dibuat di bagian atas dan cukup ubah gaya tombol atau arahkan alih-alih membuat dari awal. Anda harus melihat semua opsi di toolbar Edit untuk setiap elemen guna mengetahui mana yang paling sesuai dengan selera Anda. Ini akan menjadi latihan yang bagus untuk rasa artistik Anda. Untuk mengubah jarak isi di dalam kolom, klik ikon Edit Kolom di kiri atas kolom untuk membuka toolbar 'Edit Kolom' di mana Anda dapat mengubah padding di kolom bagian lanjutan seperti yang Anda lihat pada gambar di bawah ini.

Anda dapat menduplikasi kolom baris lalu mengedit teks dan latar belakang untuk dua kategori lainnya yaitu bagian Pria dan Pendatang Baru sehingga Anda tidak perlu menatanya lagi. Anda harus menata gambar latar belakang dan warna teks setiap bagian secara berbeda sehingga setiap kategori terlihat jelas. Jika yang pertama memiliki gambar latar belakang gelap dengan warna teks terang, yang berikutnya harus sebaliknya. Semua teknik ini, Anda akan belajar ketika Anda mulai merancang dan melihat efek ini sendiri. Gunakan background forlay untuk memberi penekanan pada teks di atas gambar, juga atur posisi teks menggunakan opsi drag and drop atau Alignment agar tidak menutupi wajah pada gambar background. Anda juga dapat mengubah posisi gambar latar belakang menggunakan 'Edit Kolom' seperti sebelumnya. Klik tombol biru di atas bagian untuk membuka 'Edit Bagian' dan Anda dapat meregangkan lebar bagian hingga penuh 100%.

Selanjutnya di bawah itu, kita akan menambahkan ikon. Untuk itu lagi pertama tambahkan bagian baru dan masukkan Kotak Gambar dari toolbar Elementor. Pilih gambar icon untuk gambar yang sudah saya sediakan seperti terlihat pada gambar. Kotak ikon ini untuk mendorong pembelian untuk memberikan judul yang menarik seperti 'Gratis Pengiriman' dan menulis deskripsi dan ketentuan dalam teks di bawah ini. Gaya kotak gambar sesuai keinginan Anda dengan mengubah posisi gambar, ukuran, warna judul, deskripsi, dan teks, dll. dari bilah alat 'Edit Gambar'. Gandakan setelah mendesain sehingga Anda tidak perlu mendesain semua ikon lagi. Setelah itu Anda dapat mengedit teks setiap kotak untuk tujuan yang Anda inginkan. Dari bagian lanjutan, Anda dapat menambahkan margin menggunakan Padding agar halaman tidak terlihat terlalu padat.

Anda dapat menambahkan batas ke kolom, untuk membuatnya seperti menarik. Klik tombol 'Edit Kolom' dan di bawah kategori 'Gaya', Anda dapat menambahkan batas dan mendesain batas. Anda dapat memilih jenis perbatasan, lebar, penempatan, radius dll Anda dapat memilih perbatasan hanya pada satu atau lebih sisi tertentu seperti di sini kita telah melakukan perbatasan kanan. Periksa semua alat desain yang tersedia di bilah alat dan pilih sendiri. Semakin banyak Anda melakukannya sendiri, semakin Anda akan terbiasa dengan semua alat dan fungsi dan itu akan menjadi lebih cepat dan mudah bagi Anda.

Selanjutnya, kita akan menambahkan bagian 'New Arrival'. Namun sebelumnya kita akan menambahkan pembatas antara baris-baris tersebut agar terlihat jelas dan dapat dibedakan. Sekali lagi tambahkan bagian baru, tambahkan 'Pembagi' dari bilah alat Elementor dan rancang menggunakan bilah alat 'Edit Pembagi' seperti yang ditunjukkan pada gambar. Tambahkan teks 'New Arrival' di pembatas yang akan digunakan sebagai heading untuk bagian selanjutnya, jadi ubah ukuran, font dll seperti yang ditunjukkan pada gambar agar terlihat menarik.

Membuat Produk

Kami harus membuat produk untuk dijual di situs web e-niaga kami sekarang. Produk bisa Sederhana atau Bervariasi, Produk Sederhana tidak memiliki pilihan pilihan seperti ukuran, warna atau gaya sedangkan produk Variabel memiliki berbagai pilihan yang tersedia seperti ukuran atau warna pada pakaian. Kita akan belajar membuat keduanya.

Woocommerce

Untuk membuat produk, kita perlu menambahkan plugin baru. Jadi mari kita pergi ke dashboard WordPress Anda, klik 'Plugins' pada toolbar dan kemudian klik 'Add New' seperti yang kita lakukan sebelumnya. Dari perpustakaan plugin, cari 'Woocommerce'. Woocommerce adalah plugin e-niaga terbaik menurut pengalaman pribadi saya. Klik 'Instal' dan klik Aktifkan. Sekarang plugin Woocommerce akan terbuka seperti yang ditunjukkan pada gambar. Isi formulir dan klik 'Lanjutkan'. Selanjutnya pilih industri Anda, dalam tutorial ini kita membuat website Fashion and Apparel. Selanjutnya kita memiliki jenis produk di mana 2 opsi – Fisik dan unduhan diberikan, pilih keduanya dan klik 'lanjutkan'. Kemudian Anda akan mendapatkan beberapa pertanyaan, jawab dan klik lagi 'Lanjutkan'.

Selanjutnya Anda harus memilih tema untuk plugin Anda, pilih tema 'Astra'. Selanjutnya akan memberikan Anda pilihan untuk mengaktifkan Layanan Jetpack yang akan membantu kami, jadi pilih 'Yes Please' yang akan membawa Anda ke halaman akun Jetpack, isi data Anda dan buat akun. Anda akan diarahkan ke dasbor WordPress Anda tetapi 'Woocommerce' baru akan tersedia di bilah alat Anda seperti yang ditunjukkan pada gambar. Semua pengaturan pajak ini, akan kami lakukan nanti.

Sekarang mari kita mulai membuat produk. Pertama kita akan membuat produk sederhana Baju Hijau Wanita seperti pada gambar.

Klik pada 'Produk' pada toolbar Anda yang akan membuka halaman 'Tambah Produk baru' seperti yang ditunjukkan pada gambar di bawah ini. Isi nama dan deskripsi produk. Di bawah pada data Produk pilih 'Produk Sederhana' karena pertama kita akan membuat produk sederhana. Letakkan Harga Reguler dan Harga Jual, yang dapat Anda jadwalkan di bawah ini, seperti yang ditunjukkan pada gambar berikutnya di bawah ini. Pada tanggal tersebut, harga jual akan berlaku secara otomatis.

Selanjutnya klik pada pengaturan 'Inventaris' di bawah Umum di mana Anda dapat menempatkan Ketersediaan Stok. Anda juga dapat mengizinkan atau melarang Backorders di sini, jika Anda memasukkan 'Jangan Izinkan', tidak ada pesanan yang akan diambil jika produk kehabisan stok. Pasang 'Ambang batas stok rendah' ​​untuk mendapatkan pemberitahuan saat stok hampir habis.

Selanjutnya di kategori 'Pengiriman', masukkan detail berat dan dimensi produk untuk tujuan pengiriman. Di produk 'Linked', Anda dapat 'Upsells' yang akan menampilkan produk terkait dan Cross-sell yang akan menampilkan produk terkait di keranjang setelah pengguna membeli produk asli. Tambahkan produk terkait, yang ingin Anda tunjukkan kepada pembeli, saat mereka berbelanja untuk produk khusus ini. Dalam kategori 'Lanjutan', Anda dapat memberikan catatan kepada pembeli dan mengaktifkan ulasan.

Di bawah pengaturan ini jika Anda menggulir ke bawah, Anda memiliki 'Deskripsi singkat produk' seperti pada gambar. Di sini tulis deskripsi lengkap sesuai contoh produk kami. Anda juga dapat mendesain font dan gaya deskripsi di sini. Di sisi kanan jika Anda melihat gambar, ada opsi 'Gambar Produk'. Klik 'Set Product Image' yang akan membuka halaman 'Product image' di mana Anda dapat memilih dan mengunggah gambar produk Anda. Di bawah 'Gambar Produk', adalah 'Galeri Produk' di mana Anda dapat menempatkan gambar lain dari produk Anda dari sudut yang berbeda untuk pemahaman yang lebih baik dari pemirsa seperti yang ditunjukkan pada gambar.

Di atas Anda memiliki 'Kategori Produk' di bilah alat sisi kanan seperti yang ditunjukkan pada gambar. Di sini Anda dapat mengkategorikan produk Anda. Jadi mari kita buat kategori baru dengan mengklik 'Tambah Kategori Baru'. Ketik nama 'Wanita' dan klik Terbitkan. Sekarang Anda dapat melihat produk Anda dengan mengklik tombol 'Lihat Produk'. Ini akan menunjukkan bagaimana produk akan ditampilkan kepada pemirsa ketika mereka mengkliknya. Munculan produk baru akan terbuka di mana Anda dapat melihat produk dan bahkan memperbesar gambar untuk mendapatkan tampilan yang lebih baik. Anda dapat mengedit apa pun yang Anda inginkan lagi.

Jika Anda tidak menyukai gaya dan tema halaman tampilan, Anda dapat mengubahnya dengan 'Pengaturan Astra' di bilah alat sebelah kanan seperti yang ditunjukkan pada gambar . Misalnya, jika Anda ingin menghapus sidebar, klik 'Sidebar' dan pilih 'No side bar'. Klik 'Perbarui' untuk menyimpan perubahan dan Anda dapat kembali mengklik Lihat Produk untuk melihat perubahan. Jadi ini adalah contoh cara membuat produk sederhana. Anda dapat menambahkan produk dan kategori sebanyak yang Anda inginkan menggunakan prosedur yang sama. Jika Anda mengklik tombol Kategori pada halaman Produk, itu akan membuka Halaman Baru dari kategori di mana semua produk dari kategori ini akan ditampilkan. Pada titik ini, ini akan sangat hambar tetapi nanti kami akan mendesain halaman ini juga.

Selanjutnya mari kita pelajari cara membuat produk variabel. Sekali lagi kita harus pergi ke halaman 'Tambahkan Produk baru' seperti sebelumnya. Kali ini mari kita buat produk variabel Pria. Beri judul dan deskripsi produk seperti yang kita lakukan tadi. Ingat ini bukan deskripsi utama tetapi deskripsi kecil tambahan yang ditunjukkan di bawah ini, deskripsi utama harus ditulis dalam 'Deskripsi singkat produk'. Di sini kita akan mengubah 'Data Produk' menjadi 'Produk Variabel'. Semua pengaturan lain seperti Inventaris, Pengiriman, Produk Tertaut, dll. serupa dengan Produk Sederhana yang kami buat sebelumnya, sehingga Anda dapat menyelesaikan detail ini sendiri.

Sekarang klik 'Attributes' di mana kita akan menambahkan atribut atau karakteristik baru ke produk kita. Klik 'Tambah' untuk melakukannya. Selanjutnya seperti yang ditunjukkan pada gambar, kita akan membuat atribut baru dari produk seperti ukuran, warna, dll. Pertama, mari kita masukkan Ukuran ke dalam kotak 'Nama'. Di kotak 'Nilai', tulis, Kecil dulu, diikuti dengan simbol '|' (tanpa tanda kurung). Tekan tombol 'Shift' + tombol di atas tombol Enter untuk menulis simbol ini seperti yang ditunjukkan pada gambar, lalu tulis Sedang dan lagi simbol yang sama lalu Besar. Anda dapat menambahkan variabel sebanyak yang Anda inginkan seperti S, M, L, XL dll dengan menggunakan simbol itu. Pilih kotak centang 'Digunakan untuk semua variasi' dan klik 'Simpan Atribut'.

Selanjutnya kita akan menambahkan Atribut lain. Klik tombol 'Tambah' lagi, tulis 'Warna' di kotak Nama dan di kotak Nilai, tambahkan nama warna yang ingin Anda pisahkan dengan simbol yang kami gunakan di atribut Ukuran. Di sini kami menulis, 'Putih|Biru' sebagai dua opsi yang tersedia. Sekali lagi centang kotak Digunakan untuk variasi dan klik 'Simpan Atribut'.

Sekarang, kami akan menerapkan atribut ini ke produk kami. Klik 'Variasi' di bawah 'Atribut' dan pilih 'Buat Variasi dari semua atribut' dan klik 'Pergi'. Klik 'Ya' pada popup untuk memverifikasi opsi ini. Yang akan membuka opsi seperti yang ditunjukkan pada gambar. Anda dapat melihat bahwa 6 variasi telah ditambahkan dengan menggabungkan 3 ukuran dengan 2 warna yaitu Putih Kecil, Biru Kecil, Putih Sedang, Biru Sedang, Putih Besar, dan Biru Besar.

Klik yang pertama untuk membuka pengaturan editnya seperti yang ditunjukkan pada gambar. Pertama, kita harus mengunggah gambar variasi ini. Klik 'Unggah Gambar' dan pilih gambar dari galeri. Selanjutnya Anda harus memasang harga reguler dari variasi ini. Ini adalah bidang wajib sehingga meskipun harganya sama, Anda harus menulisnya di sini. Sekali lagi Anda dapat menambahkan Harga Jual dan menjadwalkannya seperti yang kami lakukan di Produk Sederhana. Anda dapat mengisi detail stok dan detail pengiriman seperti yang kami lakukan di Produk Sederhana.

Sekali lagi Anda harus melakukan proses yang sama untuk variasi lainnya juga. Jadi klik pada Variationname, upload gambar dan beri harga Small Blue dan seterusnya dan seterusnya. Di sini kami hanya menempatkan gambar dan harga dari semua variasi yang diperlukan, tetapi Anda dapat menempatkan semua detail lainnya di situs web Anda sesuai dengan persyaratannya sendiri. Di atas nama variasi, Anda dapat melihat opsi untuk menempatkan 'Nilai Bentuk Default' di mana Anda dapat memilih variasi mana yang akan ditampilkan sebagai default di Kotak Produk saat pengguna melihat produk.

Pengaturan lain seperti Deskripsi singkat Produk akan mirip dengan Produk Sederhana yang kami lakukan sebelumnya, jadi isi detail sesuai produk Anda. Sama untuk gambar Produk, di mana Anda harus meletakkan gambar untuk variasi default karena ini akan ditampilkan kepada pemirsa terlebih dahulu ketika melihat produk. Anda harus menempatkan variasi Anda yang paling laku sebagai produk default. Anda tidak perlu menempatkan galeri Produk untuk produk Variabel karena tampilan akan dapat melihat gambar variasi yang berbeda. Buat kategori 'Pria' baru dan pilih kotak centangnya seperti yang kita lakukan untuk Produk Sederhana. Klik Terbitkan untuk menerapkan perubahan ini di situs web.

Anda sekarang dapat mengklik Lihat Produk untuk melihat bagaimana pemirsa akan melihatnya. Seperti yang Anda lihat pada gambar, produk akan terbuka. Di sini karena ini adalah produk variabel, Anda akan memiliki daftar atribut dan nilainya di kotak drop-down. Anda dapat mengklik kotak-kotak ini untuk melihat berbagai variasi produk ini. Anda akan melihat gambar dan harga yang Anda tetapkan untuk variasi saat Anda mengkliknya. Sekali lagi Anda dapat mengubah tema halaman Produk juga jika Anda tidak suka menggunakan Pengaturan Astra. Mari kita ubah pengaturan dan hapus Sidebar dan ubah Tata Letak Konten menjadi Lebar penuh seperti yang kita lakukan dengan Produk Tunggal untuk konsistensi. Anda dapat membuat produk variabel sebanyak mungkin dengan variasi yang Anda inginkan, tetapi Anda harus mengisi detail setiap variasi seperti yang kami lakukan di sini. Jadi dengan lebih banyak atribut dan semakin banyak nilainya, Anda akan memiliki lebih banyak variasi. Satu hal yang perlu diperhatikan adalah Harga produk ditampilkan sebagai kisaran karena menunjukkan harga variasi harga terendah dan variasi paling mahal sebagai kisaran. Jadi kita telah belajar sekarang bagaimana membuat Produk Sederhana dan Variabel.

Sekarang mari kita tambahkan produk ini ke Homepage kita. Buka beranda Anda dan klik 'Edit dengan Elementor'. Gulir ke bawah hingga akhir tempat kami membuat pembagi Pendatang Baru. Pada bilah alat Elementor di sebelah kanan, klik bilah 'Cari Widget' dan ketik produk. Pilih elemen Produk dan seret dan letakkan di kotak di halaman Anda di bawah pembatas Pendatang Baru dan Anda akan melihat produk di sana.

Pada toolbar 'Edit Produk' seperti yang Anda lihat pada gambar, Anda memiliki jumlah kolom dan baris produk yang ingin Anda tampilkan di sini sehingga tidak semua produk Anda ditampilkan di halaman ini. Anda juga dapat menggunakan kategori gaya untuk mengubah celah kolom dan celah baris, perataan, batas untuk gambar. Anda dapat mengatur Judul nama produk di sini juga seperti warna, font, spasi, topografi, dll. Hal yang sama untuk peringkat bintang, baik yang diisi maupun yang kosong. Demikian pula untuk harga juga, Anda dapat mengubah font, warna, topografi, dll untuk harga reguler dan harga jual. Berikutnya adalah tombol, Anda dapat mendesain tombol sesuka Anda seperti warna latar belakang, warna teks, warna batas dan sebagainya. Menggunakan Elementor, membuat semua pengeditan ini sangat mudah. Anda hanya perlu menggunakan semua alat pengeditan yang tersedia dan bermain dengannya dan semua hasilnya akan terlihat di depan mata Anda.

Anda juga memiliki opsi 'Sales flash' yang dapat Anda desain untuk muncul saat Anda memiliki obral yang akan menampilkan spanduk flash di atas produk Anda saat ada obral produk. Gunakan ini untuk menarik pelanggan pada produk Anda ketika mereka mengunjungi beranda Anda. Semua opsi desain serupa dengan apa yang telah kami pelajari sampai sekarang sehingga Anda dapat mengembangkan semuanya dan memilih desain yang paling cocok untuk Anda.

Dalam opsi Kueri, Anda dapat memilih produk yang ingin ditampilkan di bagian ini. Misalnya, jika Anda hanya ingin Produk Wanita yang ditampilkan di bagian ini, maka di kotak Sumber, pilih 'Produk terbaru', karena ini adalah bagian pendatang baru dari kotak tarik-turun dan klik 'Sertakan'. Kemudian pada kotak 'include by', tulis term dan pilih opsi Term yang akan menjadi term box. Di kotak istilah, tulis 'Wanita' dan pilih 'Kategori Produk: Wanita' seperti yang ditunjukkan pada gambar. Klik Update untuk memberikan efek pada website Anda. Dengan cara ini, Anda dapat membuat bagian tampilan produk di bagian mana pun dari situs web Anda.

Template e-niaga elemen

Saya telah memberi Anda template situs web e-niaga yang baru saja kami siapkan tata letak yang disiapkan oleh kami di sini secara gratis di situs web saya di tautan inihttps://darrelwilson.com/product/elementor-ecommerce-template-package. Download the template zip file from there and now let us learn how to import and export templates in Elementor. First, extract all the .json flies from the zip file. These are the templates for specific pages. Go back to your Elementor editor page and click on the folder icon next to the Add section icon on the page. This will open up the Template library and go to 'My templates' as shown in the image and click on Add templates. Here you can drag and drop those template files. Select the Homepage template and click on insert and your template will be loaded. You can edit the template according your taste but using the template, you won't have to create everything from scratch. Just remove the unwanted elements or sections and add new ones you like such as countdown, form etc. and style them the way you want.

Now let us create the other pages using our template. First, create a Menu for the rest of the pages. Woocommerce automatically adds the Shop, My Account, Cart and Checkout pages. Go the Appearance in WordPress and add these to the menu. Go to the About Us page, click on 'Edit Page, first disable the title and select Full Width in content layout. Now similar to Homepage template, insert the About Us template and edit the page as you want. You can add other pages too. Complete the website design using this process.

Penyesuai Tema

Theme customizer is where we design the structure and theme of the website and not the actual webpages. For opening the theme customizer, click on the 'Customize' button next you website button and it will open the Theme Customizer dashboard. We have used the Astra theme in this tutorial. Let us create a logo for your website, go to Header, then Site Identity and select Logo and upload your Logo. You can get a logo from www.fiverr.com. In the same way you can edit your site icon. You can design your Primary Header here too as shown in the image. You can select the layout, width, colour, etc. of the Header. Also you can design and style your menu from here.

Same way, you can design the footer. You can add upto 4 footer widgets here and customize as you want as shown in the image. Select 'Widgets' on your WordPress toolbar and you will get 4 Widgets to add to your footer. When you click on it and then click on 'Add a widget', you will get a list of widgets. You will get a widget toolbar where you can edit the contents of widget such as title, description, image and also your social media links. Once you click publish, it will appear on the footer of your webpage.

From the Woocommerce option on the toolbar, we can customize the Checkout page as in the image. You can assign 'Terms and conditions' page and 'Privacy Policy' page from the toolbar for the customers but first you'll have to first create these pages and write the details as the legal requirements. Next select the page from the drop down below their respective box. You can add new fields in the Checkout form and make them 'Required' or Optional.

Next in the Woocommerce toolbar, you can customize your Product catalog as shown in the image.You can customize, how products are shown in the catalog, their design an also you can hide some of the components that you don't want show like for example Ratings by clicking on the eye icon next to its name. This will control how your products are shown on your Shop page and also on the products section anywhere on the website.

Here we are using the free version of Astra Theme customizer, but you can buy the pro version where you will get tons of different option and templates for your website. You can import entire customized websites from this service.

Plugin

Plugins are small apps for your website which helps creating and upgrading your website. You have to add plugins to your WordPress to help you create your website in way more efficient manner.To add a new plugin to your WordPress, go to your WordPress homepage and then click on plug-in from the Option list on the left side. It will open an 'Add plugin' page as shown in the image where different type of plugins are available to choose from. You can search for the type of plug-in that you need in the search box and you will find so many plugins to use for that specific purpose. It is like an app store on your mobile and just like your app store, you can check the usage, reviews and success of these plugins before installing. And all these plug-ins are available for free. And if you need any plugin later, you can always come back and install it here. You can add plugins for social media sites, translator and so many things. Just search for the plugin use you want, select the one you want, click on 'Install' and 'Activate'. For every plugin, a new option will be created on the toolbar from where you can add and edit elements.

Elementor Theme Builder

The Elementor theme builder allows you to create a custom Shop Page and Product Page using the page builder instead of the themes, so that these pages match the design of other pages of your website. Using Elementor page builder, you can edit any part of any page of your website unlike the themes which are preset and normally can't be edited. So now we are going to edit the Shop Page and Product Page that we created using the Woocommerce theme using Elementor theme builder and design it to match our demo website's design we saw in the beginning.

Go to your WordPress dashboard, click on 'Templates' and then select 'Theme Builder' from the list which will open the Theme Builder as shown in the image. Elementor allows us to build the theme of different parts of the site. So if want to have a different header, click on '+' icon on header. And you can select any header theme from the library and click 'Insert'. Your Header will be created and now you can edit anything in using the Edit Toolbar as we did earlier. You can the change the style of the Logo or the Menu or anything, just click on the part you want to edit and the edit toolbar will appear.

  • Custom Header

Now you can add other elements on this header one by one as we did earlier, or you can insert another one or more blocks which contains similar elements and delete the common ones. For example, here as you can see in the image, we inserted a Header Block which has a bar for contact no, info and social icons. We can delete the rest of the elements of the block as we don't need them. Again you may not find the exact design of each element in the block templates, so you can now edit and style as you want to instead of creating and editing each element from scratch. This way you can create different part of your website very quickly.

Remember we have just created a part of website but it's not applied on our website yet. So when you click 'Publish', it will ask you where you want to display this template on your website. Here we created a header, so we will display it on entire website by click 'Entire Site' on 'Include' box as shown in the image. You can put different conditions by adding Include or Exclude conditions as to where you show this template.

  • Custom Footer

Now you can do the same thing for footer as we did for the header and create a footer for your website using templates. You can edit the footer content to your pages by pasting the URL link of the page to its button using the editor as shown in the image. Here we have selected a footer block template with for columns and added link to various parts of our Shop, About, Contact Us and social media pages. You may design it anyway you want.

  • Custom Shop Page

Now let us design a custom Shop Page using the Theme Builder. Elementor has very less themes for shop page so we will design from scratch. So we will have to create each element like for the banner we will have 2 text boxes and animated heading over a background image. Edit the elements and style the section as we learned earlier. Use all the styling features such as font, colours, size, shadows, margins, paddings, etc. to make the banner section look eye catchy like here in the example as shown in the image below.

Now we need to design our product section with a filter column in the side. So add a new section, and use the 2 column structure. On the right, add 'Products' from the toolbar and design it as we did on the Homepage or you can save the Homepage Template and insert it here. On the left, insert 'Sidebar' from the Elementor elements bar and select 'Woocommerce sidebar'. Right now, we haven't created a sidebar so we will have to exit to WordPress dashboard. But first click 'Publish' and in the condition include 'Shop page' to apply it to the website.

Go to 'Appearance' on the dashboard where we have all our widgets are shown as shown in the image. On the right, we have our Woocommerce Sidebar where we can place the 'Filter Products by Price' by drag and drop. You can add other filters too. Below it we will add 'Product Category', then 'Products' and the 'Video' on our sidebar. You can edit the title, contents and other stuff like link the URL of the video here. You can add as many widgets that you want from here.

If you want to edit the style of this sidebar, you can't use the Elementor editor as these are prepared by WordPress theme customizer. So in order to customize it, you will need click on 'Customize' button WordPress. Click on 'Global', then 'colours' where you can change the colours as in the image. Here we are customizing the WordPress theme which is the Astra theme that we are using, and not just the sidebar.

  • Custom Category Page

Now we will design the category pages for our product. We are going to copy the template of page we created earlier and save to use it for all our Product Category pages. First, click on 'Edit with Elementor' on the top and select 'Product Archive' as shown in Image. Then, on the bottom left click on the button next to Update and select 'Save as a Template' as shown in the next Image. Give a name to the template like 'Main Shop Page Template' and click Save. Next select the given name and click on 'Export' and then 'Save File' to save this file to use this template on other pages or even other websites.

Now, go back to the Elementor theme builder and click on Add New. Here you have the Elementor templates but we will use the template we created, so click on 'My Templates' and click on 'Insert' next to the name of new template you created. Now we have to edit it using the tools which we have learned already. So change the Title text to 'Men's Product'. Next as this is Men's Category, you have to edit it to show only Men's Product. So click on the Product box and on the 'Query' button on the toolbar, write 'term' in the 'Include By' button and put 'Men' in the term box as we did earlier. Click on Publish and put the condition to put it only in 'Men's' in 'Products category' as you can see in the image below. You can go the website and on the Shop page, click on the Men's category on the sidebar and view the effect on the page. You will have to do the exact same process for Women's category page and any other category you want to put on your website too.

  • Halaman Produk yang Disesuaikan

Sekarang kita akan menyesuaikan halaman Produk kita menggunakan teknik yang sama. Jika Anda mengklik produk apa pun sekarang, halaman produk akan ditampilkan dalam tema default seperti yang kita lihat saat membuat produk. Sekali lagi, buka pembuat Elementortheme dan tambahkan tema Produk Tunggal baru dengan mengklik ikon + di sebelahnya. Anda dapat menggunakan template yang disediakan di sini tetapi kami akan membuatnya dari awal untuk tutorial ini. Jadi pertama tambahkan bagian 2 bagian dan klik pada tab elemen. Di sini Anda dapat melihat semua elemen yang dibuat khusus untuk Produk seperti yang ditunjukkan pada gambar yang tidak kami lihat saat membuat halaman.

Pertama tambahkan remah roti yang seperti kategorisasi produk. Sekarang Anda dapat mengedit gaya remah roti seperti warna, ukuran, padding dll menggunakan toolbar seperti yang Anda lihat pada gambar. Di sebelah kanan, tambahkan elemen 'Judul Produk' dari bilah sisi dan rancang gayanya juga menggunakan bilah alat seperti sebelumnya. Selanjutnya mari kita tambahkan gambar produk dengan cara yang sama. Klik pada elemen gambar Produk dan edit gayanya menggunakan bilah alat. Selanjutnya tambahkan Deskripsi Singkat dengan cara yang sama. Anda dapat menambahkan pemisah antara judul dan deskripsi. Selanjutnya kita harus menempatkan kategori produk. Untuk itu, pilih elemen 'Product Meta' dan letakkan di bawah deskripsi dan gaya juga. Selanjutnya tambahkan elemen 'Harga' di bawahnya dan Anda juga dapat mengubah gayanya lagi. Selanjutnya letakkan tombol 'Tambahkan ke troli' di bawah harga. Karena ini adalah produk variabel, maka secara otomatis akan memberikan opsi variasi. Selanjutnya Anda dapat menambahkan ikon sosial dan formulir ulasan, info tambahan, dll. elemen yang Anda inginkan. Klik 'Terbitkan' setelah Anda selesai menambahkan dan mendesain elemen yang Anda inginkan di halaman produk Anda. Pada kondisi di halaman tampilan, sertakan 'Semua Produk' untuk memberikan efek template ini ke semua produk yang Anda buat. Anda dapat membuat tema yang berbeda untuk kategori produk yang berbeda jika Anda mau, Anda hanya perlu mengubah kondisi untuk memasukkannya ke dalam kategori tertentu saja. Semua halaman produk kami akan diperbarui ke template ini saat kami menerapkannya ke semua produk.

  • Halaman Checkout dan Keranjang Kustom

Sekarang kami akan mendesain halaman Checkout dan Cart yang disesuaikan. Halaman Checkout dan Cart tidak dengan pembuat tema jadi kami akan mengeditnya dengan Elementor. Buka halaman Cart dan klik Edit with Elementor. Sama seperti halaman lainnya, Anda dapat mengedit dan menatanya sesuai keinginan Anda dengan elemen Elementor. Anda dapat mengedit teks, ikon, tombol kupon, dll. dan mengatur gaya font, warna, topografi, dll. Anda sendiri sekarang. Tetapi untuk mengedit bagian dari tema yang sebenarnya seperti judul Keranjang di sini tidak dimungkinkan dengan Elementor. Untuk mengeditnya Anda harus mengeditnya di WordPress sendiri, jadi klik 'Edit Halaman' dan di sudut kanan bawah, pilih kotak centang 'Nonaktifkan Judul' di bawah bagian nonaktifkan seperti yang ditunjukkan pada gambar seperti yang kami lakukan sebelumnya saat mendesain tema wordpress.

Anda dapat mengedit dan mendesain halaman checkout dan menggunakannya dengan cara yang sama. Dengan cara yang sama, Anda dapat mendesain halaman 'Akun Saya' dari pelanggan Anda karena tema default halaman tersebut tidak terlalu bagus. Anda dapat mengeditnya dengan Elementor. Dan saya juga telah memberikan tautan sebelumnya di mana saya juga telah meletakkan file zip untuk templat semua halaman ini untuk Anda desain dengan cepat.

Pengaturan Woocommerce

Anda sekarang telah belajar cara membuat halaman menggunakan Elementor dan Pembuat Tema dan pembuatan situs web Anda selesai. Sekarang kita harus belajar tentang pengaturan Woocommerce untuk menjalankan situs web ini. Buka dasbor WordPress, klik Woocommerce dan pilih 'Pengaturan' yang akan membuka tab pengaturan umum Woocommerce seperti yang ditunjukkan pada gambar.

  • Pengaturan Umum

Di sini Anda dapat memasukkan alamat Anda dan memilih negara tujuan penjualan, mengaktifkan pajak, mengaktifkan kode kupon. Centang semua kotak ini untuk mengaktifkannya. Di bawah ini Anda dapat mengubah mata uang Anda sesuai dengan negara Anda.

  • tab produk

Tab berikutnya adalah tab Produk di baris atas Pengaturan di mana Anda akan menemukan banyak pengaturan yang sebagian besar sangat spesifik di sini yang tidak akan kami gunakan kecuali untuk bagian ulasan di mana Anda dapat mengaktifkan ulasan dan peringkat bintang pada produk, Anda juga dapat menunjukkan tag pengguna terverifikasi kepada pembeli nyata dalam ulasan seperti yang ditunjukkan pada gambar. Anda juga dapat memasukkan detail pengiriman produk seperti berat, dimensi, dll.

  • tab pajak

Selanjutnya di tab pajak, di mana Anda dapat mengaktifkan atau menonaktifkan penghitungan pajak otomatis. Penghitungan pajak bisa sangat rumit tergantung pada negara dan bisnis Anda, jadi penghitungan otomatis mungkin tidak cocok untuk Anda. Namun Anda memiliki opsi untuk menetapkan pajak untuk alamat pengiriman yang berbeda dan berdasarkan item keranjang. Saya telah memberikan tautan ke www.taxjar.com di mana Anda bisa mendapatkan layanan gratis dan berbayar untuk membantu Anda menghitung pajak. Anda juga dapat memilih untuk menampilkan harga dengan atau tanpa pajak di berbagai titik seperti di toko, Anda harus menunjukkan harga tanpa pajak dan di troli dan checkout, itu harus termasuk pajak secara umum.

  • tab pengiriman

Tab berikutnya adalah 'Pengiriman'. Klik pertama pada 'Tambahkan zona pengiriman', tambahkan nama Zona, wilayah tertentu dari zona tersebut dan atur tarif pengiriman Anda dengan berbagai metode pengiriman seperti yang ditunjukkan pada gambar. Di sini, kami telah menggunakan metode Flat Rate di mana kami menempatkan $5 flat rate dan yang lainnya adalah metode pengiriman gratis. Klik tombol Edit di bawah ini untuk menambahkan ketentuan jumlah pesanan minimum atau persyaratan kupon. Di sini kami memiliki persyaratan pesanan minimum $50 yang dipilih. Anda dapat menambahkan beberapa zona dan beberapa metode dan tarif pengiriman untuk masing-masing zona. Anda juga memiliki default untuk lokasi yang tidak tercakup oleh zona Anda yang belum kami berikan tarif khusus. Jadi di sini kami telah menempatkan tarif default $10 untuk zona tersebut secara default.

  • Tab Akun dan Privasi

Tab 'Akun dan Privasi' di mana Anda dapat memilih opsi untuk membuat akun pelanggan sebelum membeli atau mengizinkan mereka membeli tanpa akun terlebih dahulu dan kemudian membuat akun pada saat Checkout dan juga berbagai opsi lain dalam pembuatan akun seperti nama pengguna, kata sandi, dll. yang dapat Anda periksa sendiri karena sangat jelas. Anda juga dapat menambahkan kebijakan privasi seperti yang diwajibkan oleh hukum di sini. Anda juga memiliki opsi tentang waktu di mana data pribadi pengguna akan dihapus di bawah Retensi Data Pribadi.

  • Tab Email

Kami juga memiliki tab 'Email' di mana pengaturan tentang semua email otomatis yang akan Anda terima dan kirim ke pelanggan dari situs web misalnya pada pesanan baru atau pesanan yang dibatalkan. Anda dapat mengedit format email yang akan Anda terima atau kirim ke pelanggan dalam semua situasi seperti itu di sini. Anda dapat menambahkan plugin untuk tujuan ini untuk menerima email dengan kualitas yang lebih baik. Buka Plugin dan instal 'Desainer Email Kadence Woocommerce' dan. Dengan menggunakan plugin ini, Anda dapat mendesain konten email, header, footer, teks, dll. Menggunakan gaya khusus mereka yang dapat diedit di sini dengan membuka plugin di sidebar Woocommerce seperti yang ditunjukkan pada gambar.

  • Pembayaran

Sekarang kita akan pergi ke tab 'Pembayaran' di mana kita dapat memilih metode pembayaran yang diizinkan untuk pelanggan kita. Ada banyak pilihan yang tersedia untuk dipilih tetapi kami akan mengaktifkan 'Stripes' dan 'PayPal' di sini dengan mengklik tombol aktifkan seperti yang ditunjukkan pada gambar di bawah ini.

  1. PayPal

Sekarang mari kita mengatur pengaturan pembayaran untuk PayPal terlebih dahulu, jadi klik 'Set Up' untuk membuka halaman pengaturan PayPal di mana Anda dapat memasang judul, deskripsi untuk kotak pembayaran dan akun email PayPal Anda dan klik 'Simpan perubahan ' untuk mengintegrasikan situs web Anda dengan PayPal. Jika Anda tidak memiliki PayPal, Anda dapat membuatnya dengan membuka situs web mereka dan mendaftar secara gratis. Anda hanya perlu mendaftar dengan alamat email yang akan Anda masukkan ke dalam kotak email PayPal seperti yang ditunjukkan pada gambar. Ini adalah salah satu metode pembayaran paling populer yang tersedia.

  1. Garis

Selanjutnya kita akan mengatur pembayaran dengan garis-garis. Jadi klik tombol 'Kelola' di sebelahnya. Cara setting PayPal sama, pasang judul, deskripsi kotak pembayaran terlebih dahulu. Selanjutnya Anda memiliki kunci uji yang dapat diterbitkan dan kunci rahasia uji. Anda dapat pergi ke www.stripe.com dan membuat akun gratis di sana, hanya perlu memiliki rekening bank untuk membuat akun. Anda dapat mengintegrasikan akun stripe Anda ke situs web Anda setelah membuatnya yang merupakan layanan gratis. Untuk itu, setelah masuk ke akun stripe Anda, klik 'Developers' dan pilih 'API keys' seperti yang ditunjukkan pada gambar. Salin kunci yang dapat diterbitkan yang muncul di sini di situs web Anda di kotak kunci yang dapat diterbitkan dan kunci rahasia di kotak kunci rahasia. Klik 'Simpan perubahan' dan sekarang situs web Anda siap menerima pembayaran kartu kredit dari mana saja di seluruh dunia dengan biaya transaksi yang sangat rendah. Di sini kami melakukannya sehingga kami masih mengaktifkan tombol Melihat data pengujian di akun stripe kami dan pada halaman pengaturan Woocommerce kami telah mencentang kotak 'Aktifkan mode uji' tetapi ketika Anda siap untuk ditayangkan dengan sistem pembayaran Anda, nonaktifkan itu .

Anda sekarang dapat menguji situs web Anda dengan melakukan pemesanan dan membeli sesuatu dan Anda juga dapat melakukan pembayaran untuk memeriksa apakah semuanya sudah beres. Di Halaman Akun Saya, pelanggan akan memiliki dasbor pribadi mereka sendiri di mana mereka dapat memeriksa, mengedit, atau membatalkan pesanan, edit alamat pengiriman dan penagihan mereka, atur metode pembayaran dan detail akun mereka. Semua tampilan pesanan sebelumnya juga ditampilkan dalam daftar pesanan mereka dengan statusnya.

Mengoptimalkan untuk seluler

Pengoptimalan seluler berarti membuat situs web terlihat ramah pengguna untuk perangkat seluler. Pengoptimalan seluler sangat penting dalam skenario saat ini karena a) banyak orang menggunakan perangkat seluler untuk menjelajahi internet dan b) Menurut algoritme Google yang baru, jika situs web Anda tidak dioptimalkan untuk seluler, maka mereka akan menurunkan peringkat Anda yang dapat menjadi bencana besar bagi Anda. lalu lintas situs web dan SEO.

Pengoptimalan seluler cukup sederhana menggunakan editor Elementor. Mari kita kembali ke dashboard Elementor. Di bagian bawah bilah alat, Anda akan menemukan tombol 'Mode Responsif', mengklik yang akan membuka daftar tarik-turun yang menampilkan 3 opsi yaitu. Desktop, Tablet, dan Seluler. Sampai sekarang, kami merancang situs web kami berdasarkan tampilannya untuk pemirsa desktop. Sekarang klik 'Tablet' untuk melihat pratinjau tampilannya di browser tablet. Demikian pula Anda dapat memeriksanya untuk mode 'Seluler' juga. Anda dapat mengedit halaman web jika ada sesuatu yang tampak rusak atau tidak menarik secara visual.

Di sini seperti yang Anda lihat pada gambar, judul pertama terlalu besar untuk mode tablet dan '50% OFF' terlalu kecil sehingga Anda harus menyesuaikannya. Periksa semua elemen halaman untuk melihat apakah ada yang perlu didesain ulang. Semua perubahan ini akan berlaku pada mode Tablet ketika Anda mengklik Perbarui. Hal yang sama akan berlaku untuk mode seluler. Sesuaikan ukuran teks judul, perataan tombol, spanduk, dan judul.

Anda dapat menonaktifkan beberapa bagian yang Anda perlukan pada versi seluler atau tablet, jika menurut Anda itu tidak penting bagi mereka. Untuk itu, pilih bagian yang ingin Anda sembunyikan, masuk ke kategori lanjutan pada bilah alat 'Edit Bagian', klik 'Responsif' dan di bawah Visibilitas, Anda dapat memilih untuk menyembunyikan bagian tersebut di versi desktop, tablet, atau seluler seperti yang ditunjukkan pada gambar. Hal yang sama dapat Anda lakukan dengan bagian atau elemen lain. Anda dapat mendesain semuanya berbeda untuk tablet atau mode seluler seperti gambar latar belakang, ukuran font, atau apa pun.

formulir kontak

Sekarang mari kita lanjutkan dan pelajari cara membuat halaman 'Kontak' di mana pengunjung dapat mengisi informasi kontak di sana dan itu akan langsung masuk ke email Anda. Desain dasar halaman, Anda dapat melakukannya sendiri dengan menggunakan editor Elementor atau Penyesuai Tema. Satu-satunya hal yang penting adalah formulir kontak seperti yang ditunjukkan pada gambar. Jadi Anda mencari formulir di toolbar Elementor dan drag dan drop pada bagian tersebut dan Anda dapat mengedit teks dan desain formulir menggunakan toolbar 'Edit Formulir' yang sekarang saya pikir Anda akan dapat melakukannya sendiri. Ada banyak pengaturan lanjutan di bilah alat Edit Formulir yang tidak dilakukan di sini tetapi formulir dasar yang dapat Anda buat.

kupon

Untuk menambahkan kupon ke situs Anda, klik '+ Baru' di bilah atas di sebelah tombol ubahsuaian dan pilih Kupon. Kupon di bilah alat sisi WordPress terletak di bawah bagian 'Pemasaran' seperti yang ditunjukkan pada gambar. Di sini, Anda dapat menambahkan kode kupon baru, memilih jenis diskon sebagai diskon persentase, diskon kereta tetap atau diskon produk tetap, memasukkan jumlah atau persentase diskon dan tanggal kedaluwarsa kupon. Di bawah 'Batasan Penggunaan', Anda dapat menempatkan ketentuan seperti pembelanjaan minimum, penggunaan individu, atau hubungannya dengan kupon lainnya, menyertakan atau mengecualikan produk atau kategori produk dari kupon. Di bawah Batas penggunaan, Anda dapat memilih berapa kali kupon ini dapat digunakan atau membatasinya untuk produk tertentu dan membatasi penggunaan oleh satu pelanggan. Klik Terbitkan untuk menerapkan kupon ini di situs web dan mengujinya di halaman Keranjang dengan menerapkan kode kupon saat melakukan pembelian.

Saya sangat berharap tutorial ini bermanfaat bagi pembaca dan sekarang Anda dapat membuat situs web sendiri dari awal. Jika Anda memerlukan bantuan, Anda dapat mengunjungi situs web saya dan halaman Facebook saya dan meninggalkan komentar. Saya memiliki banyak sumber daya lain tentang pembuatan situs web dan menggunakan Elementor di sana yang dapat Anda periksa. Terima kasih telah membaca tutorial ini dan umpan balik serta pertanyaan Anda selalu diterima.