Cara Menambahkan Popup di WooCommerce

Diterbitkan: 2021-12-22

Panduan ini mencakup semua yang perlu Anda ketahui untuk membuat popup WooCommerce di toko Anda, bahkan tanpa pengalaman sebelumnya.

Selain penyiapan, Anda akan menemukan kiat terkait konversi untuk membantu Anda mendapatkan lebih banyak prospek dan penjualan dengan popup WooCommerce.

Dalam posting ini kami membahas:

  • Manfaat popup WooCommerce
  • Langkah-langkah untuk membuat popup WooCommerce

Mengapa menggunakan popup WooCommerce?

Anda telah melihat popup di banyak toko online. Pernah bertanya-tanya mengapa bisnis menggunakannya meskipun reputasi mereka mengganggu?

Alasannya sederhana: Popup mengubah lalu lintas situs web menjadi penjualan.

Mereka bisa menjadi sumber prospek baru yang stabil di daftar email Anda. Selain itu, popup dapat secara efektif mempromosikan penjualan, mengumpulkan umpan balik pelanggan, dan mengarahkan lalu lintas ke halaman tertentu di situs web Anda.

Dan jika Anda mendesainnya dengan cara yang benar, pengunjung Anda akan menyukainya .

Tapi jangan hanya mengambil kata-kata saya untuk itu –

Ben, yang kisah suksesnya dengan popup , memiliki banyak pelajaran berharga, mengatakan ini tentang mereka.

Kepala Pertumbuhan Aspal, Ben

Faguo, bisnis lain yang menyukai popup, menangkap 5.000+ email baru dengan kampanye popup.

Aku bisa terus tapi-

Mari tambahkan popup WooCommerce ke toko Anda.

Cara membuat popup WooCommerce

Siap? Cukup ikuti langkah-langkah ini untuk menambahkan popup ke situs web WooCommerce Anda.

Langkah 1: Dapatkan akun Wisepops gratis

Untuk membuat popup WooCommerce, kita membutuhkan sebuah aplikasi.

Pilihan utama kami, tentu saja, adalah Wisepops . Langkah pertama: buat akun Wisepops dan hubungkan ke toko WooCommerce Anda.

Daftar akun Wisepops gratis menggunakan Google sign-in atau opsi sign-in tradisional. Ikuti langkah-langkah sederhana dalam video singkat di bawah ini untuk mendaftar uji coba gratis.

Jangan khawatir, Anda tidak perlu menambahkan detail kartu kredit. Anda mencoba Wisepops 100% gratis tanpa pamrih – kami ingin semua orang merasakan nilai produk kami.

Lebih suka plugin untuk instalasi aplikasi?
Coba plugin Wisepops di WooCommerce.

● Mudah digunakan
● Pembaruan rutin
● Peringkat bintang 5 dari pengguna

Langkah 2: Tambahkan kode penyiapan ke toko Anda

Sekarang saatnya untuk menghubungkan toko WooCommerce Anda dan Wisepops.

Mudah.

Klik tombol Dapatkan kode pengaturan saya di bagian atas dasbor.

Proses pengaturan Wisepops

Tombol akan menampilkan kode untuk Anda salin.

Klik tombol salin dan tambahkan kode pengaturan sesuai dengan instruksi. Satu-satunya persyaratan – letakkan kode di akhir HTML halaman situs web Anda, tepat sebelum tag </body>.

Tambahkan kode pengaturan Wisepops Anda

Untuk bantuan dalam menambahkan kode, lihat artikel ini: Menyematkan Kode Pengaturan Wisepops [Pusat Bantuan Wisepops]

Setelah pendaftaran selesai, Wisepops akan membawa Anda ke dasbor Anda. Di situlah Anda akan mengelola kampanye. Pusat operasi, jika Anda mau.

Langkah 3: Buat kampanye popup

Sekarang, mari buat popup WooCommerce pertama Anda.

Saya sarankan membuat popup kupon diskon. Diskon adalah motivator utama bagi pelanggan untuk membeli, jadi kami dapat mencoba dan mencetak beberapa penjualan cepat sambil membangun audiens kami.

Untuk mulai membuat kampanye –

Klik Kampanye Baru di dasbor.

Tombol Kampanye Baru Wisepops

Dari sana, Wisepops akan meminta Anda untuk memilih cara membangun kampanye.

Ayo gunakan Asisten Kampanye – ini adalah opsi yang ramah bagi pemula.

Tombol Asisten Kampanye Wisepops

Langkah 4: Pilih tujuan Anda

Selanjutnya, Wisepops akan menanyakan untuk apa Anda ingin menggunakan popup WooCommerce ini.

Anda dapat memilih di antara beberapa opsi, tetapi mari kita lanjutkan dengan Kembangkan audiens Anda . Kami akan membuat popup dengan kupon untuk membuat daftar email dan mendorong penjualan.

Pilih tujuan popup Anda

Kemudian, pilih Kupon pada menu yang muncul.

Pilih kupon popup

Catatan:
Lihat banyak tujuan dalam menu ini: pendaftaran media sosial, hadiah, pendaftaran buletin, panggilan balik, undangan webinar ... Kami hanya memilih satu opsi, tetapi Anda harus menjelajahi banyak opsi dan template lain setelah Anda yakin.

Langkah 5: Pilih template

Sekarang, kami memilih template untuk popup WooCommerce Anda.

Dan Wisepops memiliki banyak pilihan.

Saya akan menggunakan template kedua – popup ini dirancang untuk memusatkan perhatian pengunjung pada penawaran murah hati kami. Ini dia.

Pilih template popup Wisepops

Memilih format popup WooCommerce terbaik?

Gunakan Alat Pratinjau Popup kami untuk melihat bagaimana popup akan terlihat di toko WooCommerce Anda dalam hitungan detik.

Langkah 6: Personalisasi template

Klien kami menyukai Wisepops karena memungkinkan mereka untuk mengubah setiap elemen dalam popup mereka. Dengan melakukan itu, mereka membuat sembulan luar biasa yang terlihat seperti ekstensi alami situs web mereka.

Berikut kutipan dari salah satu klien yang bahagia, Martin dari Faguo.

Martin, Kepala eCommerce di Faguo

Memang, eksperimen pembuatan prospek bisa sangat berguna (ambil dari Martin—eksperimennya menghasilkan RKPT 15% yang mengesankan ), jadi mengetahui cara mempersonalisasi popup Anda adalah suatu keharusan.

Itulah tepatnya yang akan kita pelajari sekarang.

Setelah Anda memilih template, Wisepops akan mengarahkan Anda ke Editor Kampanye. Di sana, Anda akan melihat template, siap untuk dimainkan.

Begini tampilan versi aslinya.

Templat Wisepops

Di dalam Pembuat Kampanye, Anda akan melihat menu utama dengan lima bagian: Popup, Blocks, Tab, JS, dan Display . Kami akan menyesuaikan popup WooCommerce kami dengan mengklik elemen yang ingin kami ubah – ini sangat mudah.

Pembuat kampanye Wisepops

Mari lakukan penyesuaian ini:

  • Ubah judul menjadi “Bagaimana dengan diskon $20?”
  • Teks utama untuk "Dapatkan diskon $20 untuk pesanan Anda jika Anda mendaftar sekarang."
  • Ubah warna tombol CTA dari merah menjadi hitam
  • Tingkatkan ukuran font judul menjadi 40 piksel
  • Tambahkan gambar asli

Saya akan melanjutkan dan mengklik judulnya terlebih dahulu. Kemudian, saya akan mengklik tombol Edit yang segera muncul. Teks judul secara otomatis akan dipilih seperti ini, jadi saya bisa mulai mengetik versi baru.

Edit teks dalam popup Wisepops

Jadi, saya akan melakukan hal yang sama untuk teks utama juga.

Untuk memperbesar font, saya akan pergi ke pemilih ukuran yang muncul di atas template setelah saya mengklik elemen tekstual.

Opsi font di pembuat Wisepops

Selanjutnya, untuk menambahkan gambar asli, klik gambar default. Wisepops akan secara otomatis membuka pengaturan gambar di sebelah kiri Anda.

Klik tombol Ganti dan pilih gambar dari komputer Anda (Saya menggunakan foto oleh Arno Senoner yang diunduh dari Unsplash).

Ganti gambar stok di popup WooCommerce Anda

Dan penyesuaian terakhir:

Klik tombol CTA untuk membuka pengaturan kustomisasi. Di bagian atas editor, cari pengaturan warna (tepat setelah pemilih ukuran).

Pilih hitam dalam warna Latar Belakang .

Edit warna CTA di popup WooCommerce Anda

Setelah saya selesai template akan terlihat seperti ini. Itu lebih baik, setuju?

Template Wisepops yang telah diedit

Hanya satu pertanyaan besar yang tersisa:

Apa yang akan terjadi jika pengunjung mengklik Dapatkan kupon saya ?

Dalam hal ini, Wisepops akan menampilkan jendela sembulan terima kasih dengan kode kupon. Klik TERIMA KASIH untuk melihat popup ini.

Terima kasih opsi sembulan

Kita bisa membiarkan teks apa adanya. Tapi pastikan untuk mengubah kupon itu sendiri—di situ tertulis FIVEOFF sebagai default.

Kami dapat melakukan lebih banyak penyesuaian hebat untuk popup WooCommerce Anda. Tapi mari kita tinggalkan desain untuk saat ini dan beralih ke langkah berikutnya.

Ingatlah bahwa Anda dapat mengubah apa pun – cukup klik pada elemen individual untuk melakukan penyesuaian.

Berikut beberapa inspirasi desain untuk popup WooCommerce Anda:
Contoh Popup Email
Contoh Desain Popup Cantik
Contoh Popup Exit-Intent [+Tips Desain]

Langkah 7: Pilih kapan akan menampilkan popup

Mari kita buat ini menjadi popup niat keluar .

Ini berarti kampanye akan ditampilkan saat pengunjung akan meninggalkan toko Anda. Saya telah memilih yang ini karena kinerjanya mengungguli popup "tradisional" sebesar 5%.

Untuk mengatur waktu-

Buka bagian Pemicu di opsi menu utama Tampilan .

Di sana, pilih Saat Keluar .

Pemicu tampilan popup

Kampanye hampir selesai.

Simpan kampanye Anda dengan mengklik Simpan di sudut kanan atas layar Anda.

Simpan kampanye popup WooCommerce Anda

Pelajari lebih lanjut tentang popup niat keluar:
Panduan Sederhana untuk Keluar dari Intent Popup
Saat Keluar dari Opsi Popup [Pusat Bantuan Wisepops]

Langkah 8: Aktifkan kampanye Anda

Kami hampir sampai.

Klik logo Wisepops di pojok kiri atas untuk menuju dashboard. Di sana, pastikan Anda berada di tab Kampanye .

Dasbor kampanye Wisepops

Selanjutnya, atur sakelar sakelar ke aktif untuk mengaktifkan kampanye popup WooCommerce pertama Anda.

Anda sudah siap!

Aktifkan kampanye popup WooCommerce Anda
Ingin mengumpulkan nomor telepon alih-alih email?

Lihat panduan ini: 12 Contoh Popup SMS [+ Cara Membuatnya]

Langkah selanjutnya

Memiliki popup WooCommerce di toko Anda adalah cara yang bagus untuk mengumpulkan email dan mendorong penjualan. Klien kami bahkan telah melaporkan rasio klik-tayang setinggi 17%, yang berarti beberapa ribu prospek baru ditambahkan ke daftar email setiap bulan.

Sekarang setelah kita mempelajari cara membuat popup WooCommerce, tinggal melacak dan meningkatkan kampanye Anda. Namun jangan berhenti di situ – bereksperimenlah dengan berbagai cara untuk mengonversi lalu lintas Anda (kupon, pengiriman gratis, akses awal ke penjualan, dll.).

Kami memiliki panduan untuk membantu Anda dalam setiap skenario:

  • Cara Menggunakan Popup untuk B tidak memiliki Pemasaran Jumat
  • Praktik Popup Terbaik untuk Menghasilkan Lebih Banyak Prospek dan Penjualan
  • Cara Meningkatkan Keterlibatan Pengunjung untuk Toko E-niaga

Jika Anda memerlukan bantuan dengan popup Anda, periksa Pusat Bantuan Wisepops atau kirim pesan ke tim Layanan Pelanggan menggunakan fungsi obrolan di aplikasi.