Cara Menambahkan Bilah Kode Kupon Secara Dinamis ke Halaman Produk Tertentu dengan Divi

Saat Anda menjalankan toko online yang Anda buat dengan Divi dan WooCommerce, Anda terkadang ingin menunjukkan kode kupon di situs web Anda untuk meningkatkan rasa urgensi. Di seluruh web, Anda akan melihat bahwa banyak toko online membagikan kode kupon di bilah yang menempel di bagian atas halaman. Sekarang, dengan Pembuat Tema Divi, Anda dapat secara otomatis menambahkan bilah kode kupon tersebut ke produk yang memenuhi syarat untuk kode kupon.

Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana melakukannya. Ada beberapa bagian dalam tutorial ini, mulai dari menyiapkan kode kupon hingga membuat template produk terpisah untuk produk dalam kategori diskon. Anda juga dapat mengunduh file JSON template secara gratis! Gaya keseluruhan yang kami gunakan didasarkan pada tata letak halaman produk tebal yang telah kami bagikan sebelumnya.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Template Halaman Produk GRATIS

Untuk mendapatkan template halaman produk, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Ikhtisar Tutorial

• Pastikan Anda telah menginstal Divi dan plugin WooCommerce di situs web Anda
• Di bagian pertama tutorial, kita akan membuat kategori produk diskon baru
• Kami akan menetapkan produk yang memenuhi syarat ke kategori produk baru ini
• Kemudian, kami akan membuat kode kupon baru dan memastikan kode kupon hanya berlaku untuk kategori produk yang kami buat
• Di dalam pembuat tema, kami akan membuat template baru untuk kategori produk tertentu itu
• Kami akan menggunakan kembali badan halaman produk normal untuk templat ini dan menambahkan bilah kode kupon teratas menggunakan opsi bawaan Divi

1. Buat Kategori Produk Diskon Baru

Buka Kategori Produk & Tambahkan Kategori Produk Diskon Baru

Mulailah dengan menginstal plugin WooCommerce di situs WordPress Anda dan tambahkan kategori produk baru yang didedikasikan untuk semua produk yang memenuhi syarat untuk diskon baru. Jika Anda berencana menggunakan kode kupon pada kategori produk yang ada, Anda dapat menggunakannya sebagai gantinya.

2. Tetapkan Produk ke Kategori Diskon Baru

Sunting Produk

Kemudian, buka produk yang ingin Anda sertakan dalam penjualan.

Tetapkan Produk ke Kategori Diskon Baru

Dan sertakan mereka dalam kategori produk diskon baru.

3. Buat Kode Kupon WooCommerce

Buka Kupon & Tambahkan Kupon Baru

Bagian selanjutnya dari tutorial ini menangani pembuatan kode kupon baru. Buka dasbor WordPress Anda > Kupon > Dan klik 'Buat kupon pertama Anda' .

Tambahkan Kode Kupon & Data Kupon

Tambahkan kode kupon di bagian atas dan pilih pengaturan umum yang ingin Anda terapkan pada kode kupon Anda.

• Kode diskon: Tambahkan kode diskon
• Jenis diskon: Persentase diskon
• Jumlah kupon: Tambahkan persentase
• Tanggal kedaluwarsa kupon: Pilih tanggal

Tambahkan Batasan Penggunaan

Kemudian, lanjutkan ke batasan penggunaan dan pastikan kode kupon hanya berfungsi pada produk di dalam kategori produk diskon Anda.

• Kategori produk: Diskon

4. Tambahkan Template Baru untuk Kategori Diskon

Tambahkan Template Baru

Setelah Anda membuat kode kupon, saatnya untuk memasukkannya ke halaman produk yang relevan! Untuk melakukannya, buka Divi Theme Builder dan tambahkan template baru.

Digunakan pada

Gunakan template baru ini pada kategori produk diskon.

• Gunakan Pada: Produk dalam Kategori Produk Tertentu: Diskon

5. Gunakan Kembali Isi Halaman Produk Global untuk Template Baru

Seret Badan Template Produk ke Badan Template Baru

Anda dapat menggunakan kembali badan templat halaman produk biasa hanya dengan menyeretnya ke templat baru Anda. Dalam tutorial ini, kami menggunakan tata letak halaman produk tebal yang telah kami buat di tutorial lain. Anda dapat mengunduh file JSON tata letak di posting blog.

6. Tambahkan Bilah Kode Kupon Teratas ke Badan Template Baru

Masuk ke Editor Template Tubuh

Setelah Anda menambahkan badan halaman produk ke template baru Anda, Anda dapat mulai mengeditnya. Perubahan yang Anda buat pada template ini hanya akan muncul di halaman produk yang merupakan bagian dari kategori produk diskon.

Tambahkan Bagian Baru ke Atas

Di dalam editor template, hal pertama yang akan kita lakukan adalah menambahkan bagian baru ke atas.

Warna latar belakang

Buka pengaturan bagian dan ubah warna latar belakang.

• Warna Latar Belakang: #e02b20

Jarak

Hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Animasi

Selesaikan pengaturan bagian dengan menambahkan animasi.

• Gaya Animasi: Slide
• Arah Animasi: Bawah
• Durasi Animasi: 1500ms
• Penundaan Animasi: 1000ms
• Animasi Mulai Opacity: 100%
• Kurva Kecepatan Animasi: Ease-In-Out
• Pengulangan Animasi: Sekali

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Buka pengaturan baris dan biarkan baris mengambil seluruh lebar wadah bagian.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Jarak

Hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

kolom 1

Jarak

Kemudian, buka pengaturan kolom 1 dan tambahkan beberapa padding atas dan bawah.

• Padding Atas: 25px
• Padding Bawah: 25px

Kolom 2

Warna latar belakang

Buka juga pengaturan kolom 2 dan tambahkan warna latar belakang putih.

• Warna Latar Belakang: #ffffff

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus ke kolom ini juga.

• Padding Atas: 20px
• Padding Bawah: 20px

Berbatasan

Dan sertakan beberapa radius batas kiri dan kanan atas.

• Kiri Atas + Kanan Atas: 30px

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Modul pertama dan satu-satunya yang kita butuhkan di kolom 1 adalah Modul Teks. Masukkan beberapa salinan pilihan Anda.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks yang sesuai:

• Font Teks: Montserrat
• Warna Teks: #ffffff
• Ukuran Teks: 16px
• Perataan Teks: Tengah

Tambahkan Modul Teks ke Kolom 2

Tambahkan Kode Kupon ke Kotak Konten

Di kolom kedua, tambahkan Modul Teks lain dengan kode diskon yang telah Anda tambahkan di bagian pertama tutorial.

Pengaturan Teks

Ubah pengaturan teks modul sebagai berikut:

• Font Teks: Montserrat
• Berat Font Teks: Berat
• Warna Teks: #000000
• Ukuran Teks: 19px
• Perataan Teks: Tengah

Perekat

Kemudian, ubah pengaturan ukuran.

• Lebar: 50%
• Penyelarasan Modul: Pusat

Jarak

Tambahkan beberapa bantalan bawah juga.

• Padding Bawah: 10px

Berbatasan

Dan selesaikan pengaturan modul dengan menambahkan batas bawah.

• Lebar Batas Bawah: 1px
• Warna Batas Bawah: #333333

7. Simpan Perubahan Pembuat Tema & Lihat Hasil

Setelah Anda menyelesaikan halaman produk yang dimodifikasi, Anda dapat menyimpan perubahan template, keluar dari Pembuat Tema dan melihat hasilnya di halaman produk diskon!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat bilah kode kupon dan memungkinkannya muncul secara otomatis di halaman produk yang memenuhi syarat untuk kode kupon yang dimaksud. Ini adalah cara yang bagus untuk memberikan insentif ekstra kepada pengunjung untuk membeli produk Anda. Anda juga dapat mengunduh file template JSON secara gratis! Jika Anda memiliki pertanyaan, pastikan Anda meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.