Tutorial & Panduan WooCommerce untuk Pengguna Tema Flatsome

Diterbitkan: 2022-09-01

Tema toko Anda adalah salah satu elemen paling penting yang membantu mempertahankan minat pengunjung. Ketika datang ke tema untuk toko WooCommerce Anda, ribuan opsi tersedia. Tapi, Anda harus memilih tema multiguna dengan kemampuan kustomisasi tinggi. Salah satu tema WordPress WooCommerce tersebut adalah Flatsome.

Lebih lanjut tentang tema Flatsome

Flatsome adalah salah satu tema WordPress WooCommerce paling populer dan berperingkat teratas di repositori tema ThemeForest. Ini dirancang dan dikembangkan oleh UX Themes. Tujuannya adalah untuk merancang tema khusus yang mudah digunakan dan sempurna untuk pemula dan non-coders.

Meskipun Flatsome adalah tema multi-tujuan yang berfokus pada WooCommerce, ini dapat digunakan untuk membangun situs web apa pun. Dengan menggunakan tema ini, Anda dapat membuat situs blog, situs portofolio pribadi, situs perusahaan, dan banyak lagi.

Statistik di BuiltWith menunjukkan lebih dari 500 ribu situs web langsung dikembangkan menggunakan Flatsome. Alasan di balik popularitas yang begitu besar tidak lain adalah kedahsyatan fitur tema dan pengalaman pengguna yang fantastis. Cepat, ringan, mudah digunakan, dan dibuat khusus untuk pengguna non-teknis.

Tema ini hadir dengan demo yang dirancang dengan indah untuk membuat situs web dengan cepat. Jadi, memilih tema Flatsome untuk toko situs web WooCommerce Anda adalah ide yang bagus.

Tim WPCred telah lama menulis tutorial yang berfokus pada Flatsome. Kami telah membahas 40+ tutorial penting tentang berbagai topik Flatsome. Beberapa dari mereka sepenuhnya menggunakan tema Flatsome, dan yang lainnya menggunakan plugin atau alat pihak ketiga. Mari masuk ke tutorial tema Flatsome WooCommerce.

Beli Tema Flatsome

1. Apakah Flatsome Tema WooCommerce Terbaik?

tema woocommerce terbaik flatosme

Flatsome adalah tema WooCommerce multiguna yang dipercaya oleh lebih dari 200.000 pemilik situs. Ini adalah tema yang sangat cepat dengan pengalaman pengguna yang luar biasa. Selain itu, ia menawarkan desain yang indah, mendukung perangkat apa pun, dan telah memperkenalkan fitur unik.

Selain itu, Flatsome telah mengurangi file JavaScript intinya menjadi 56kb, yang membuatnya sangat dioptimalkan. Anda dapat mempelajari seluk beluknya dengan membaca analisis mendalam kami tentang ulasan tema Flatsome .

2. Hosting WooCommerce Berkualitas

hosting woocommerce wordpress

Situs Anda tidak akan menjadi lebih cepat jika dihosting di server yang buruk. Kinerjanya tergantung pada kualitas hosting. Ada ratusan penyedia hosting WooCommerce untuk dipilih. Memilih platform hosting terbaik akan membuat pengaturan dan pengelolaan toko Anda menjadi lebih mudah.

3. Instalasi tema datar

Instalasi datar

Memasang tema Flatsome WooCommerce sangat mudah. Kunjungi ThemeForest dan beli Flatsome Theme (jika Anda belum membelinya). Setelah itu, unduh file dan unggah ke dashboard WordPress Anda. Kemudian instal dan aktifkan dengan menggunakan kunci lisensi. Kunjungi artikel tertaut untuk menginstal Flatsome seperti demo resmi .

4. Buat Tema Anak

Tema anak datar

Dengan tema anak, Anda dapat mengubah tampilan situs web Anda tanpa mengedit file tema Anda secara langsung. Itu berarti Anda dapat memperbarui tema tanpa kehilangan penyesuaian apa pun . Saat Anda mengaktifkan tema Flatsome untuk pertama kalinya, akan ada opsi untuk membuat tema anak, gunakan untuk membuat tema anak baru.

5. Pengaturan Penyesuai Tema Induk ke Tema Anak

penyesuai tema induk

Saat menggunakan tema anak di Flatsome, Anda mungkin perlu menyalin pengaturan penyesuai dari tema induk ke tema anak . Ini adalah proses langsung yang membutuhkan beberapa langkah. WordPress melihat tema anak Anda sebagai tema baru. Jadi, tanpa melakukannya, Anda mungkin kehilangan penyesuaian tema induk saat beralih ke tema anak.

6. Buat Website Satu Halaman Menggunakan Flatsome

pembuat ux situs web satu halaman

Seperti yang telah kita bahas, Flatsome adalah tema multiguna yang dapat Anda gunakan untuk membuat toko online di hampir semua niche. Saat ini, situs web satu halaman sedang tren karena berbagai alasan. Flatsome juga menawarkan fitur khusus bernama “Flatsome Studio” untuk membantu Anda membuat situs web satu halaman secara instan.

7. Gunakan Flatsome Studio Untuk Membuat Toko Online

Studio datar

Flatsome Studio adalah perpustakaan digital ekstensif gratis dengan gambar, bagian yang telah dirancang sebelumnya, dan tata letak. Anda cukup mengimpor dan menggunakannya hanya dalam beberapa klik. Mengimpor elemen baru, Anda dapat menggunakan studio Flatsome dan memilih lebih dari 100+ elemen.

8. Unggah Logo Anda

unggah logo ke tema flatsome

Logo adalah dasar dari identitas merek Anda. Tapi begitu tema diaktifkan, Anda akan melihat logo Flatsome di situs Anda secara default. Namun, Anda dapat dengan mudah menunjukkan branding perusahaan Anda dan mengunggah logo kustom Anda sendiri di Tema Flatsome.

9. Buat Menu Mega di Flatsome

mega menu Flatsome

Setelah memilih logo, saatnya untuk mengatur menu. Pengunjung situs Anda akan selalu ingin memiliki akses mudah ke setiap halaman di toko Anda. Anda perlu membantu mereka dengan cepat menemukan apa yang mereka inginkan, itu sebabnya Anda mungkin memerlukan menu mega. Anda dapat membuat menu mega di situs web bertenaga tema Flatsome dalam beberapa langkah.

10. Tambahkan Latar Belakang Video

tambahkan latar belakang video Flatsome

Anda hanya mendapatkan beberapa detik untuk menarik perhatian pengunjung Anda. Latar belakang yang bergerak dapat langsung menarik pengunjung Anda. Flatsome memiliki fungsi bawaan yang memungkinkan Anda menambahkan video di latar belakang .

11. Aktifkan Pengguliran Tak Terbatas di Halaman Toko

gulir tak terbatas Flatsome

Gulir tanpa batas memastikan bahwa Anda dapat menggulir selama yang Anda inginkan. Lebih mudah untuk menelusuri lebih banyak produk hanya dengan menggulir ke bawah. Jadi, menambahkan gulir tak terbatas pada halaman toko memberi Anda lebih banyak peluang untuk toko online Anda.

12. Tambahkan Lightbox ke Flatsome

kotak cahaya

Lightbox sering kali menyertakan ajakan bertindak (CTA) untuk meminta pengunjung mengambil tindakan. Ini cukup efektif untuk pemilik situs web dan pemasar karena beberapa alasan. Kode pendek lightbox memungkinkan Anda membuka konten apa pun di dalam lightbox dengan mengklik tombol atau item navigasi. Langkah-langkah menambahkan lightbox ke tema Flatsome sangatlah mudah.

13. Buat Pop-up Buletin Otomatis

buletin popup Flatsome

Pop-up adalah cara yang bagus untuk berkomunikasi dengan pengunjung. Anda dapat menggunakannya untuk terhubung dengan lebih banyak pengunjung dan menjadikan mereka pelanggan potensial Anda. Selain itu, ini dapat membantu Anda dengan kampanye pemasaran email dan meningkatkan pengguna terdaftar di situs Anda. Flatsome memiliki fitur untuk membuat popup pendaftaran lightbox buletin otomatis . Ini akan menyoroti promosi Anda dan mendapatkan lebih banyak pelanggan ke buletin Anda.

14. Tetapkan Produk Unggulan

atur produk unggulan Flatsome

Produk Fitur membantu pengunjung Anda untuk melihat produk paling menarik dari toko WooCommerce Anda. Dengan menggunakan ini, Anda dapat menampilkan produk khusus Anda kepada pelanggan Anda. Ini bisa berupa produk Anda yang sedang tren atau populer, produk baru, atau beberapa produk sponsor yang ingin Anda tampilkan. Ada beberapa cara untuk mengatur produk unggulan dalam tema Flatsome WooCommerce.

15. Terapkan Pengiriman Gratis untuk Produk Tertentu

pengiriman gratis woocommerce

Pemilik toko WooCommerce menjalankan berbagai strategi untuk meningkatkan penjualan mereka. Di antara mereka, pengiriman gratis adalah strategi umum untuk menarik pelanggan. Flatsome menawarkan untuk menetapkan pengiriman gratis untuk produk tertentu . Anda dapat menambahkan pengiriman gratis ke masing-masing produk, produk berbasis kategori tertentu, atau jenis produk lainnya.

16. Atur Daftar Keinginan dengan Benar

atur daftar keinginan

Biasanya, orang menghabiskan banyak waktu di situs web eCommerce. Saat mengunjungi situs untuk waktu yang lama, sangat umum kehilangan produk yang mereka putuskan untuk dibeli. Itulah mengapa daftar keinginan sangat penting untuk situs eCommerce Anda. Itu memastikan pelanggan Anda dapat menyimpan produk untuk dibeli nanti. Menyiapkan Daftar Keinginan di Flatsome mudah diterapkan. Anda dapat menambahkannya ke situs web Anda tanpa melakukan pengkodean apa pun.

17. Buat Halaman Kesalahan 404 Kustom

kustom 404 datar

Salah satu kesalahan paling umum di web adalah halaman kesalahan 404. Ini membuat frustrasi dan membingungkan pengunjung Anda. Halaman seperti ini tidak jelas dan tidak membantu pengguna tetap berada di situs. Anda tentu tidak ingin pengunjung mendarat di halaman kesalahan umum. Jika kebetulan pengunjung Anda menghadapi situasi seperti itu, jangan khawatir, Flatsome memiliki beberapa halaman kesalahan 404 khusus bawaan . Anda dapat memilih salah satu dari daftar dan memberi tahu pengunjung bahwa mereka masih berada di situs Anda.

18. Tambahkan Testimoni Pelanggan

testimoni pelanggan

Cara ampuh untuk membangun kepercayaan pembeli adalah dengan menambahkan testimonial pelanggan. Ini adalah ulasan positif yang paling sering ditinggalkan oleh pelanggan yang puas. Ada banyak cara berbeda untuk menambahkan testimonial pelanggan . Anda akan menemukan beberapa halaman testimonial yang telah ditentukan sebelumnya pada tema Flatsome untuk dipilih.

19. Buat Header Halaman Toko dengan UX Builder

tajuk halaman toko

Apa pun jenis produk yang Anda jual, halaman toko WooCommerce Anda adalah bagian penting dari toko Anda. Flatsome memungkinkan Anda menambahkan header toko dengan UX builder untuk membuat halaman toko Anda lebih berguna dan menarik.

20. Buat Slider Menggunakan UX Builder

Buat penggeser

Penggeser dapat membantu Anda menampilkan produk dengan cara yang didekorasi dan ramah pengguna. Akibatnya, pengunjung Anda akan memiliki kesan yang lebih baik. Flatsome telah mempermudah pembuatan slider menggunakan UX Builder .

21. Sesuaikan Halaman Produk WooCommerce

sesuaikan halaman produk

Produk fantastis Anda layak mendapatkan halaman produk WooCommerce khusus yang unik. Anda harus dapat menyesuaikan halaman produk untuk membuat toko e-niaga Anda menonjol. Pembuat UX Flatsome memberi Anda fleksibilitas desain untuk membuat dan menyesuaikan halaman produk Anda secara visual.

22. Dapatkan Google Sitelinks dengan Cepat

tautan situs google

Google Sitelinks adalah sub-daftar yang muncul di bawah hasil pencarian pertama, biasanya saat mencari merek. Tautan situs menghemat waktu dan memberikan hasil yang relevan bagi penelusur. Anda dapat mengikuti beberapa proses untuk meningkatkan peluang Anda mendapatkan tautan situs .

23. Siapkan dan Instal Google Pengelola Tag

Google Pengelola Tag

Google Pengelola Tag membantu membuat pengelolaan tag menjadi mudah, sederhana, dan andal dengan memungkinkan pemasar dan webmaster untuk menerapkan tag situs web di satu tempat. Anda dapat memeriksa tutorial kami jika Anda bertanya-tanya bagaimana cara menyiapkan dan memasang Google Pengelola Tag .

24. Tambahkan Google Search Console

konsol pencarian google

Google Search Console, sebelumnya dikenal sebagai Alat Webmaster, membantu Anda mengoptimalkan data untuk memantau kinerja situs web dalam pencarian. Manfaat Search Console membuatnya sangat diperlukan untuk meningkatkan kinerja penelusuran. Menyiapkan Google Search Console di situs Anda yang didukung Flatsome hanya membutuhkan beberapa menit tetapi memberi Anda manfaat seumur hidup.

25. Tambahkan Google Analytics untuk Melacak Lalu Lintas Toko

Google Analytics adalah alat gratis oleh Google untuk melacak dan menganalisis pengunjung situs Anda. Selain itu, ini memberikan wawasan utama tentang apa yang dapat Anda lakukan untuk memenuhi tujuan Anda dan bagaimana kinerja situs web Anda. Jika Anda sudah mengetahui pentingnya, berikut adalah ikhtisar tentang cara mengatur Google Analytics pada tema WooCommerce Flatsome Anda.

26. Tambahkan Google reCaptcha Ke Formulir Kontak 7

Google rekap

Plugin Formulir Kontak 7 sangat penting untuk situs web apa pun yang diberdayakan WordPress. Jika Anda menggunakannya di situs web Anda, Anda mungkin akan mulai mendapatkan posting spam melalui formulir Anda. Untuk mencegah kotak masuk Anda memiliki konten yang tidak perlu, Anda perlu menambahkan Google reCaptcha .

27. Tambahkan Metadata Grafik Terbuka Facebook

facebook buka metada

Metadata grafik terbuka Facebook menawarkan Anda kendali atas tampilan konten Anda saat dibagikan di Facebook. Dibutuhkan metadata dari konten dan memungkinkan Anda memilih bagaimana hal-hal akan ditampilkan. Anda dapat mengikuti metode manual atau plugin untuk menambahkan metadata grafik pena ke situs web Flatsome Anda.

28. Buat Produk Variabel

buat produk variabel woocommerce

Variabel di WooCommerce memungkinkan Anda memilih dari beberapa opsi. Ini dapat dengan mudah didefinisikan sebagai produk yang tersedia dalam beberapa warna, gaya, ukuran, dan banyak lagi. Menambahkan produk variabel dalam tema Flatsome sangatlah mudah.

29. Tambahkan Beberapa Variasi Gambar dan video

variasi gambar dan video

Beberapa gambar untuk suatu produk memudahkan pembeli untuk memilih produk. Namun, secara default, WooCommerce memungkinkan Anda untuk menambahkan hanya satu gambar per variasi produk. Namun, Galeri Gambar Variasi Tambahan untuk plugin WooCommerce memungkinkan Anda menampilkan produk dari sudut atau perspektif yang berbeda. Selain itu, Anda dapat menambahkan video ke galeri gambar produk WooCommerce Anda.

30. Tampilkan Variasi Swatch di Halaman Toko/Arsip

contoh variasi

Secara default, WooCommerce menawarkan dropdown untuk produk variasi. Tapi dibutuhkan lebih banyak klik untuk melihat dan tidak memberikan pengunjung pengalaman yang mulus. Plugin WooCommerce Variation Swatches mengubah dropdown produk default menjadi swatch yang indah.

Menambahkan variasi warna WooCommerce adalah salah satu cara terbaik untuk menghidupkan lebih banyak produk Anda. Di sisi lain, contoh variasi gambar memberikan cara yang menyenangkan untuk menampilkan variasi.

Atau, Anda mungkin ingin mengaktifkan swatch radio untuk tujuan yang berbeda. Dibandingkan dengan dropdown tertentu, tombol radio lebih ramah pelanggan.

31. Terjemahkan Flatsome dengan Plugin Terjemahan Loco

terjemahkan tema datar

Ada banyak lalu lintas situs web yang Anda kehilangan setiap hari karena situs web Anda tidak dapat diterjemahkan. Jika situs bertenaga tema Flatsome Anda perlu multibahasa, Anda dapat dengan mudah menerjemahkan dengan plugin Loco Translate .

32. Nonaktifkan Ulasan di Flatsome

nonaktifkan ulasan produk

Tidak disarankan untuk menonaktifkan ulasan produk di sebagian besar keadaan. Namun, ada beberapa alasan mengapa Anda dapat mempertimbangkan untuk menonaktifkan ulasan produk . Terkadang, sulit bagi pemilik toko untuk mengikuti spam di bagian ulasan produk.

33. Tambahkan Pengguna ke Tim Dukungan

tambahkan pengguna ke tim dukungan

WordPress memiliki sistem manajemen pengguna bawaan. Anda mungkin memiliki tim yang terdiri dari orang-orang yang bekerja sama untuk mengelola berbagai aspek situs Anda, seperti dukungan teknis, penulis konten, pakar SEO, dan banyak lagi. Platform ini memungkinkan Anda menambahkan pengguna baru di luar kotak dan memberikan berbagai peran dan izin.

34. Tambahkan Label Menu Pribadi Sendiri

Menu adalah cara umum untuk menjelajahi situs web Anda dengan mudah. Banyak tema WordPress hadir dengan lokasi dan tata letak menu yang telah ditentukan sebelumnya. Untungnya, Flatsome hadir dengan label menu siap pakai yang sangat bersih untuk menarik pengunjung. Juga, Anda membuat label menu pribadi Anda sendiri juga.

35. Tambahkan Ikon Pembayaran ke Footer

ikon pembayaran datar

Situs web maksimum yang didukung Flatsome berbasis WooCommerce. Sebelum membeli produk dari toko online, pelanggan ingin tahu bagaimana mereka dapat membelinya. Jadi, memiliki ikon pembayaran yang didukung sangat penting. Beri tahu pelanggan Anda dengan menunjukkan ikon pembayaran di footer .

36. Nonaktifkan Tampilan Cepat Produk

nonaktifkan tampilan cepat Flatsome

Tampilan cepat produk menawarkan "tampilan cepat" kepada pembeli pada produk Anda. Tema Flatsome hadir dengan fitur ini. Namun, jika Anda ingin menonaktifkan tampilan produk cepat karena alasan apa pun, Anda dapat melakukannya dengan cepat.

37. Buat Tautan 'Gulir-Ke'

gulir ke tautan

Anda dapat membantu pengunjung situs Anda pindah ke bagian halaman tertentu dengan mengaktifkan elemen scroll-to-link . Ini dapat menghemat waktu mereka yang berharga dan membantu mereka bernavigasi dengan mudah.

38. Gunakan Ikon Kustom

ikon kustom

Anda mungkin bertanya-tanya mengapa Anda ingin menambahkan ikon khusus ke situs Anda. Jawabannya cukup sederhana; untuk ' representasi visual yang lebih baik .' Meskipun Flatsome memiliki beberapa ikon yang menarik, Anda mungkin masih ingin menggunakan ikon khusus di situs web Anda.

39. Ciutkan/Perluas Daftar Kategori Produk Sidebar

perluas kategori bilah sisi

Daftar kategori produk sidebar sangat penting untuk setiap toko online. Di situs WooCommerce bertenaga Flatsome, Anda dapat menutup/memperluas daftar kategori produk bilah sisi sehingga pengunjung dapat dengan mudah menavigasi situs Anda.

40. Setup Server SMTP WordPress Menggunakan Gmail API

Gmail Api datar

WordPress menggunakan fungsi surat PHP untuk mengirimkan pemberitahuan email. Namun, fungsi ini tidak berfungsi seperti yang diharapkan karena beberapa alasan. Gmail menyediakan layanan SMTP yang dapat Anda gunakan untuk mengirim email. Untuk itu, Anda perlu menyiapkan server SMTP menggunakan Gmail .

41. Buat Popup Panduan Ukuran Sederhana

tabel ukuran datar

Jika pembeli berjuang untuk menemukan produk yang tepat untuk kebutuhan mereka kemungkinan besar akan meninggalkan toko Anda dan beralih ke pesaing. Akan lebih baik untuk menampilkan popup panduan ukuran sederhana di toko online Anda. Tanpa itu, pelanggan Anda akan bingung tentang ukuran yang tepat yang mereka butuhkan. Ini adalah suatu keharusan jika produk Anda berorientasi pada ukuran, seperti pakaian, sepatu, dll.

42. Hapus Cache Elemen Instagram

hapus elemen instagram

Cache adalah data sementara yang membantu browser Anda memuat sesuatu lebih cepat. Terkadang data cache ini bisa kedaluwarsa atau rusak dan menyebabkan masalah saat menggunakan Instagram. Praktik terbaik adalah menghapus data cache elemen Instagram .

43. Percepat Toko WooCommerce Anda
Percepat toko WooCommerce

Mudah-mudahan, pada tahap ini, Anda dapat membuat toko online Anda menggunakan tema Flatsome, tetapi Anda mungkin menghadapi masalah dengan pengoptimalan kecepatan. Semakin cepat situs web Anda dimuat, semakin baik pengalaman berbelanja. Berikut adalah beberapa tips untuk membuat situs WooCommerce Anda dimuat lebih cepat .

Membungkus

Kami harap panduan ini akan bermanfaat bagi siapa saja yang menggunakan tema Flatsome WooCommerce. Ini akan membantu Anda untuk meningkatkan situs web Anda, mendapatkan lebih banyak pengunjung situs, dan pada saat yang sama meningkatkan penjualan Anda.

Jika Anda ingin kami membahas lebih banyak topik di Flatsome, beri tahu kami di bagian komentar. Kami akan memperbarui artikel ini terus menerus untuk memberikan solusi yang lebih baik untuk toko WooCommerce Anda.