Cara Menambahkan Badge Countdown Timer pada Produk Diskon di WooCommerce

Jika Anda memiliki toko online berbasis WooCommerce dan ingin memberikan sentuhan khusus pada produk yang sedang diskon, countdown timer bisa menjadi cara efektif untuk menarik perhatian pelanggan. Dengan script ini, Anda dapat menampilkan timer yang menghitung mundur waktu berakhirnya diskon secara otomatis.

Fungsi Script

Script ini menambahkan countdown timer pada produk diskon di halaman toko (shop) dan halaman detail produk (single product). Timer otomatis berhenti ketika diskon berakhir berdasarkan tanggal yang sudah diatur di WooCommerce. Dengan styling yang rapi, timer ini akan muncul di pojok kanan atas gambar produk di halaman shop, dan di bawah harga pada halaman single product.

Result :

Cara Menggunakan dan Mengimplementasikan Script di WordPress

1. Salin Script: Salin seluruh kode script yang sudah disediakan di atas.
2. Masukkan ke dalam File Tema: Tempelkan script ke dalam file functions.php di tema WordPress Anda atau gunakan plugin Code Snippets jika ingin menambahkan kode khusus tanpa mengedit tema secara langsung.
3. Sesuaikan CSS: Jika diperlukan, sesuaikan tampilan timer dengan CSS yang ada di dalam script agar sesuai dengan desain toko Anda.

Penjelasan Bagian Penting Script

• Penambahan Timer: Timer akan otomatis ditambahkan pada produk diskon di halaman toko dan halaman single product. Hal ini dilakukan melalui dua fungsi utama:
  • 
    code
    : Menampilkan timer di halaman toko.
  • 
    code
    : Menampilkan timer di halaman single product.
• JavaScript Timer: Script JavaScript bertugas menghitung mundur waktu diskon dan memperbarui tampilan setiap detik. Jika diskon telah habis, timer akan berhenti dan menampilkan teks “Expired”.
• CSS Styling: Bagian CSS memberikan tampilan menarik pada timer, seperti posisi, warna, dan ukuran font. Timer akan muncul dengan warna oranye semi-transparan yang informatif di halaman produk.

Langkah Implementasi

1. Tambahkan Countdown di Halaman Shop dan Produk: Dengan menggunakan
   code
   , countdown timer akan ditambahkan pada lokasi yang diinginkan di halaman produk dan single product WooCommerce.
2. Gunakan CSS untuk Penyesuaian Tampilan: Script ini menyediakan styling default yang sudah siap digunakan. Anda bisa menyesuaikan warna dan posisi sesuai kebutuhan.

Keuntungan

• Meningkatkan Urgensi: Dengan countdown timer, pelanggan merasa terdorong untuk segera membeli sebelum diskon berakhir.
• Otomatisasi Penuh: Timer ini bekerja otomatis, mengambil tanggal akhir diskon dari pengaturan WooCommerce tanpa perlu intervensi manual.

Dengan mengikuti panduan ini, Anda bisa dengan mudah menambahkan countdown timer pada produk diskon di WooCommerce. Ini adalah cara efektif untuk meningkatkan konversi dan mendorong pelanggan mengambil keputusan lebih cepat.

...