You are currently viewing Menambahkan Fitur Hitung Mundur Pembayaran di WooCommerce

Menambahkan Fitur Hitung Mundur Pembayaran di WooCommerce

Pada artikel ini, kita akan membahas cara menambahkan fitur hitung mundur pembayaran menggunakan HTML, CSS, dan JavaScript. Fitur ini berguna untuk memberi tahu pelanggan tentang batas waktu pembayaran yang tersisa sebelum mereka harus menyelesaikan transaksi. Jika waktu habis, pelanggan akan secara otomatis diarahkan ke halaman tertentu, seperti halaman beranda atau halaman informasi lainnya.

 

Script Countdown Timer

Cara Kerja Fitur Hitung Mundur Pembayaran

  1. Inisialisasi Waktu Hitung Mundur: Fitur ini dimulai dengan inisialisasi waktu hitung mundur yang ditampilkan dalam satuan detik. Dalam contoh ini, hitung mundur dimulai dari 60 detik.
  2. Menampilkan Waktu yang Tersisa: Waktu yang tersisa ditampilkan secara real-time pada halaman web, memperbarui setiap detik untuk menunjukkan waktu yang tersisa sebelum pelanggan harus menyelesaikan pembayaran.
  3. Mengurangi Waktu Secara Berkala: Setiap detik, waktu hitung mundur akan berkurang satu detik hingga mencapai nol.
  4. Pengalihan Halaman Otomatis: Ketika waktu mencapai nol, pelanggan akan secara otomatis diarahkan ke halaman lain yang telah ditentukan. Ini memastikan pelanggan mendapatkan informasi lebih lanjut atau diarahkan ke langkah berikutnya jika mereka tidak menyelesaikan pembayaran dalam batas waktu yang ditentukan.

Script (HTML)

<div style="text-align: center; font-size: 20px;">
    <p>Bayar sebelum</p>
    <p id="countdown">60</p>
</div>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var countdownElement = document.getElementById('countdown');
        var timeLeft = 60;

        function updateCountdown() {
            if (timeLeft <= 0) {
                window.location.href = "https://google.com";
            } else {
                countdownElement.innerHTML = timeLeft;
                timeLeft--;
            }
        }

        setInterval(updateCountdown, 1000);
    });
</script>

Menampilkan Script dalam Shortcode

Untuk menampilkan script ini secara efektif di halaman WooCommerce, disarankan untuk menggunakan shortcode. Shortcode ini memungkinkan admin toko untuk menempatkan fitur hitung mundur di mana saja pada halaman situs dengan mudah. Penggunaan plugin seperti WPCode atau plugin snippet lainnya sangat dianjurkan untuk menciptakan shortcode ini.

Script hitung mundur halaman terimakasih WooCOmmerce menggunakan Shortcode
Shortcode yang dibuat menggunakan plugin WPCode

 

Penggunaan Shortcode dengan OceanWP Library

Penempatan di OceanWP Library

Menampilkan shortcode melalui OceanWP Library adalah solusi yang lebih baik untuk mengelola dan menampilkan fitur hitung mundur pembayaran. OceanWP Library memungkinkan Anda untuk membuat dan menempatkan konten khusus, termasuk shortcode, pada halaman web dengan mudah.

Fungsi Ganda OceanWP Library

Penggunaan OceanWP Library memiliki beberapa keuntungan tambahan, di antaranya:

  1. Instruksi Pembayaran yang Spesifik: Dengan OceanWP Library, Anda dapat memberikan instruksi pembayaran yang lebih detail dan spesifik. Hal ini sangat membantu bagi pelanggan yang kurang familiar dengan teknologi informasi (IT), khususnya di Indonesia. Instruksi yang jelas dan mudah dipahami akan memudahkan pelanggan dalam menyelesaikan pembayaran.
  2. Menampilkan Formulir Konfirmasi Pembayaran: Selain fitur hitung mundur, Anda juga dapat menampilkan formulir konfirmasi pembayaran dalam OceanWP Library. Ini memungkinkan pelanggan untuk mengunggah bukti pembayaran langsung setelah melihat hitung mundur, menggabungkan dua fitur penting dalam satu tempat yang mudah diakses.

Langkah-langkah Implementasi

  1. Membuat OceanWP Library:
    • Masuk ke dasbor WordPress Anda.
    • Navigasikan ke OceanWP > Library.
    • Buat konten baru dan tambahkan shortcode hitung mundur ke dalamnya.
  2. Menambahkan Instruksi Pembayaran:
    • Pada konten yang sama, tambahkan teks instruksi yang spesifik tentang cara melakukan pembayaran.
    • Gunakan bahasa yang mudah dimengerti untuk membantu pelanggan yang tidak terbiasa dengan teknologi.
  3. Mengintegrasikan Formulir Konfirmasi Pembayaran:
    • Tambahkan shortcode untuk formulir konfirmasi pembayaran di bawah instruksi pembayaran.
    • Pastikan formulir mudah diakses dan diisi oleh pelanggan.

Dengan menggunakan OceanWP Library, Anda tidak hanya menampilkan hitung mundur pembayaran tetapi juga memberikan panduan yang jelas dan memungkinkan pelanggan untuk langsung mengonfirmasi pembayaran mereka. Ini meningkatkan pengalaman pengguna dan membantu memastikan transaksi selesai dengan lancar dan tepat waktu.

Leave a Reply