Script hitung mundur pada halaman produk ini memiliki berbagai kegunaan penting yang dapat meningkatkan efektivitas toko online serta pengalaman pelanggan. Dengan menciptakan rasa urgensi melalui diskon yang diberikan dalam waktu terbatas, script ini mendorong pelanggan untuk segera melakukan pembelian.
Selain itu, strategi diskon berjenjang yang ditawarkan oleh script ini membantu memaksimalkan pendapatan toko dengan menarik pelanggan untuk berbelanja lebih cepat demi mendapatkan diskon terbaik. Script ini juga berperan dalam mengurangi keraguan pelanggan, meningkatkan interaksi pengguna, serta mengoptimalkan strategi pemasaran.
Dengan semua manfaat ini, script hitung mundur menjadi alat yang sangat berguna dalam meningkatkan kepuasan dan loyalitas pelanggan.
Script Countdown Diskon
add_action('woocommerce_single_product_summary', 'custom_countdown_script', 20);
function custom_countdown_script() {
global $product;
if (!$product) {
$product = wc_get_product(get_the_ID());
}
if ($product) {
?>
<script>
document.addEventListener('DOMContentLoaded', function () {
console.log("Script loaded on product page");
var countdownElement = document.createElement('div');
countdownElement.id = 'countdown-timer';
countdownElement.style.display = 'none'; // Menyembunyikan elemen saat halaman dimuat
function insertCountdown() {
var variationDescription = document.querySelector('.woocommerce-variation-description');
var variationPrice = document.querySelector('.woocommerce-variation-price');
if (variationDescription && variationPrice) {
variationDescription.insertAdjacentElement('afterend', countdownElement);
} else {
console.error('Variation description or price element not found');
}
}
insertCountdown();
// Mengambil harga asli dari PHP
function getPrice() {
var priceElement = document.querySelector('.woocommerce-variation-price .price .amount') ||
document.querySelector('.price .amount');
if (priceElement) {
var priceText = priceElement.innerText;
var price = parseFloat(priceText.replace(/[^0-9,-]+/g, "").replace(",", "."));
return price;
}
return NaN;
}
var originalPrice = getPrice();
console.log('Original price:', originalPrice);
// Fungsi untuk memformat harga
function formatPrice(price) {
return 'Rp' + price.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
// Fungsi untuk memformat waktu menjadi HH:MM:ss
function formatTime(seconds) {
var h = Math.floor(seconds / 3600);
var m = Math.floor((seconds % 3600) / 60);
var s = Math.floor(seconds % 60);
return h + ':' + (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s;
}
var countdownSessions = [
{time: 20, text: 'Diskon 40% berakhir dalam:', discount: 0.4},
{time: 30, text: 'Kesempatan Diskon terakhir sebesar 15% akan berakhir dalam:', discount: 0.15},
{time: 40, text: 'Anda telah melewatkan kode diskon', discount: 0}
];
// Mengambil sesi dan waktu tersisa dari local storage
var savedSession = localStorage.getItem('currentSession');
var savedTimeLeft = localStorage.getItem('timeLeft');
var currentSession = savedSession ? parseInt(savedSession) : 0;
var timeLeft = savedTimeLeft ? parseInt(savedTimeLeft) : countdownSessions[currentSession].time;
function startCountdown() {
var session = countdownSessions[currentSession];
var interval = setInterval(function () {
if (timeLeft <= 0) {
clearInterval(interval);
currentSession = (currentSession + 1) % countdownSessions.length;
localStorage.setItem('currentSession', currentSession);
timeLeft = countdownSessions[currentSession].time;
startCountdown();
} else {
var currentPrice = getPrice();
if (isNaN(currentPrice)) {
countdownElement.style.display = 'none';
} else {
countdownElement.style.display = 'block';
var priceHTML = '';
if (currentSession < 2) {
priceHTML = `
<div>
${'Harga Asli: <span style="text-decoration: line-through; color: #737373;">' + formatPrice(currentPrice * (1 + session.discount)) + '</span>'}
</div>
`;
}
countdownElement.innerHTML = `
<div>
<span>${session.text} <span id="time" style="color: #ff9c12;">${currentSession < 2 ? formatTime(timeLeft) : ''}</span></span>
</div>
${priceHTML}
`;
}
timeLeft--;
localStorage.setItem('timeLeft', timeLeft);
}
}, 1000);
}
startCountdown();
// Update price when variation changes
jQuery('form.variations_form').on('show_variation', function(event, variation) {
originalPrice = getPrice();
console.log('Updated price:', originalPrice);
if (isNaN(originalPrice)) {
countdownElement.style.display = 'none';
} else {
countdownElement.style.display = 'block';
}
insertCountdown(); // Ensure the countdown is in the right place after variation change
});
jQuery('form.variations_form').on('reset_data', function() {
countdownElement.style.display = 'none';
});
});
</script>
<style>
#countdown-timer {
font-size: 12px;
margin-bottom: 10px;
color: #000000;
}
#countdown-timer span {
font-weight: bold;
}
#countdown-timer #time {
color: #ff9c12;
}
</style>
<?php
} else {
error_log('Product not found.');
}
}
Cara Kerja Script Hitung Mundur pada Halaman Produk
Script ini dirancang untuk menampilkan hitung mundur (countdown timer) yang memberikan diskon pada produk dalam beberapa sesi. Setiap sesi memiliki persentase diskon dan teks yang berbeda. Berikut adalah penjelasan mengenai masing-masing sesi:
Sesi 1: Diskon 40%
- Persentase Diskon: Pada sesi pertama, pelanggan akan mendapatkan tampilan diskon sebesar 40% dari harga asli produk.
- Teks yang Ditampilkan: Teks yang akan ditampilkan pada elemen hitung mundur adalah: “Dapatkan diskon 40% yang berakhir dalam:”
- Waktu Hitung Mundur: Sesi ini berlangsung selama 20 detik.
CONTOH TAMPILAN:
Sesi 2: Diskon 15%
- Persentase Diskon: Pada sesi kedua, pelanggan akan mendapatkan diskon sebesar 15% dari harga asli produk.
- Teks yang Ditampilkan: Teks yang akan ditampilkan pada elemen hitung mundur adalah: “Kesempatan diskon terakhir sebesar 15% akan berakhir dalam:”
- Waktu Hitung Mundur: Sesi ini berlangsung selama 30 detik.
CONTOH TAMPILAN:
Sesi 3: Tidak Ada Diskon
- Persentase Diskon: Pada sesi ketiga, tidak ada diskon yang diberikan kepada pelanggan.
- Teks yang Ditampilkan: Teks yang akan ditampilkan pada elemen hitung mundur adalah: “Anda telah melewatkan kode diskon.”
- Waktu Hitung Mundur: Sesi ini berlangsung selama 40 detik.
CONTOH TAMPILAN:
Kegunaan Script Hitung Mundur pada Halaman Produk
Script hitung mundur pada halaman produk ini memiliki beberapa kegunaan penting yang dapat meningkatkan efektivitas toko online dan pengalaman pelanggan:
Meningkatkan Urgensi Pembelian
Dengan menampilkan hitung mundur yang menawarkan diskon dalam waktu terbatas, script ini menciptakan rasa urgensi bagi pelanggan. Ketika pelanggan melihat bahwa diskon akan segera berakhir, mereka lebih cenderung untuk segera melakukan pembelian daripada menundanya. Urgensi ini sering kali efektif dalam meningkatkan konversi penjualan.
Memaksimalkan Pendapatan
Dengan menyediakan diskon dalam beberapa sesi yang menurun seiring berjalannya waktu, script ini membantu toko online memaksimalkan pendapatan. Pelanggan yang ingin mendapatkan diskon terbaik akan segera membeli, sementara mereka yang menunggu akan tetap melakukan pembelian meskipun dengan diskon yang lebih kecil. Hal ini memastikan bahwa diskon yang diberikan tidak terlalu besar sehingga merugikan keuntungan toko.
Mengurangi Keraguan Pelanggan
Script ini juga berfungsi untuk mengurangi keraguan atau kebimbangan pelanggan saat hendak melakukan pembelian. Dengan informasi yang jelas mengenai diskon yang tersedia dan waktu yang tersisa, pelanggan merasa lebih yakin dan termotivasi untuk membuat keputusan pembelian yang cepat.
Meningkatkan Interaksi Pengguna
Dengan adanya elemen dinamis seperti hitung mundur dan perubahan harga secara langsung di halaman produk, pelanggan menjadi lebih terlibat dan tertarik untuk tetap berada di halaman tersebut. Interaksi yang meningkat ini dapat memperpanjang waktu kunjungan di situs web dan meningkatkan peluang konversi.
Mengoptimalkan Strategi Pemasaran
Script ini dapat digunakan sebagai bagian dari strategi pemasaran yang lebih luas. Dengan memberikan diskon terarah dalam waktu tertentu, toko dapat merencanakan kampanye pemasaran yang lebih efektif, seperti promosi kilat atau penjualan akhir pekan. Hal ini memungkinkan toko untuk menarik lebih banyak pelanggan dalam periode yang singkat.
Meningkatkan Kepuasan Pelanggan
Dengan menawarkan diskon yang menarik dan memberikan pengalaman berbelanja yang dinamis, toko online dapat meningkatkan kepuasan pelanggan. Pelanggan merasa mendapatkan nilai lebih dari pembelian mereka, yang dapat meningkatkan loyalitas dan kemungkinan pembelian ulang di masa mendatang.
Secara keseluruhan, script hitung mundur ini adalah alat yang sangat berguna bagi toko online untuk meningkatkan penjualan, memperkuat strategi pemasaran, dan menciptakan pengalaman belanja yang lebih menarik dan memuaskan bagi pelanggan.
Script Alternatif: Countdown Diskon- Versi 2
Script versi alternatif kedua ini, menggunakan teks yang berbeda. Dan juga untuk tampilan diskon pada sesi countdown kedua dalam script ini adalah 25%. Berbeda dari script pertama yang diskon kedua nya adalah 15%.
add_action('woocommerce_single_product_summary', 'custom_countdown_script', 20);
function custom_countdown_script() {
global $product;
if (!$product) {
$product = wc_get_product(get_the_ID());
}
if ($product) {
?>
<script>
document.addEventListener('DOMContentLoaded', function () {
console.log("Script loaded on product page");
var countdownElement = document.createElement('div');
countdownElement.id = 'countdown-timer';
countdownElement.style.display = 'none'; // Menyembunyikan elemen saat halaman dimuat
function insertCountdown() {
var variationDescription = document.querySelector('.woocommerce-variation-description');
var variationPrice = document.querySelector('.woocommerce-variation-price');
if (variationDescription && variationPrice) {
variationDescription.insertAdjacentElement('afterend', countdownElement);
} else {
console.error('Variation description or price element not found');
}
}
insertCountdown();
// Mengambil harga asli dari PHP
function getPrice() {
var priceElement = document.querySelector('.woocommerce-variation-price .price .amount') ||
document.querySelector('.price .amount');
if (priceElement) {
var priceText = priceElement.innerText;
var price = parseFloat(priceText.replace(/[^0-9,-]+/g, "").replace(",", "."));
return price;
}
return NaN;
}
var originalPrice = getPrice();
console.log('Original price:', originalPrice);
// Fungsi untuk memformat harga
function formatPrice(price) {
return 'Rp' + price.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
// Fungsi untuk memformat waktu menjadi HH:MM:ss
function formatTime(seconds) {
var h = Math.floor(seconds / 3600);
var m = Math.floor((seconds % 3600) / 60);
var s = Math.floor(seconds % 60);
return h + ':' + (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s;
}
var countdownSessions = [
{time: 20, text: 'Diskon 40% akan berakhir dalam:', discount: 0.4},
{time: 30, text: 'Kesempatan Diskon terakhir sebesar 25% akan berakhir dalam:', discount: 0.25}, // Mengubah diskon sesi 2 menjadi 25%
{time: 40, text: 'Anda telah melewatkan dua sesi diskon. Namun, kami memberikan penawaran harga terbaik berikut:', discount: 0}
];
// Mengambil sesi dan waktu tersisa dari local storage
var savedSession = localStorage.getItem('currentSession');
var savedTimeLeft = localStorage.getItem('timeLeft');
var currentSession = savedSession ? parseInt(savedSession) : 0;
var timeLeft = savedTimeLeft ? parseInt(savedTimeLeft) : countdownSessions[currentSession].time;
function startCountdown() {
var session = countdownSessions[currentSession];
var interval = setInterval(function () {
if (timeLeft <= 0) {
clearInterval(interval);
currentSession = (currentSession + 1) % countdownSessions.length;
localStorage.setItem('currentSession', currentSession);
timeLeft = countdownSessions[currentSession].time;
startCountdown();
} else {
var currentPrice = getPrice();
if (isNaN(currentPrice)) {
countdownElement.style.display = 'none';
} else {
countdownElement.style.display = 'block';
var priceHTML = '';
if (currentSession < 2) {
priceHTML = `
<div>
${'Harga Asli: <span style="text-decoration: line-through; color: #737373;">' + formatPrice(currentPrice * (1 + session.discount)) + '</span>'}
</div>
`;
}
countdownElement.innerHTML = `
<div>
<span>${session.text} <span id="time" style="color: #ff9c12;">${currentSession < 2 ? formatTime(timeLeft) : ''}</span></span>
</div>
${priceHTML}
`;
}
timeLeft--;
localStorage.setItem('timeLeft', timeLeft);
}
}, 1000);
}
startCountdown();
// Update price when variation changes
jQuery('form.variations_form').on('show_variation', function(event, variation) {
originalPrice = getPrice();
console.log('Updated price:', originalPrice);
if (isNaN(originalPrice)) {
countdownElement.style.display = 'none';
} else {
countdownElement.style.display = 'block';
}
insertCountdown(); // Ensure the countdown is in the right place after variation change
});
jQuery('form.variations_form').on('reset_data', function() {
countdownElement.style.display = 'none';
});
});
</script>
<style>
#countdown-timer {
font-size: 12px;
margin-bottom: 10px;
color: #000000;
}
#countdown-timer span {
font-weight: bold;
}
#countdown-timer #time {
color: #ff9c12;
}
</style>
<?php
}
}
Script Countdown Diskon- Versi 3 (Paling Sempurna)
Dalam versi 3 di script alternatif ini, cara kerja nya sama persis seperti versi 2. Namun, waktu tunggu nya berbeda. Sesi 1 berakhir dalam 4 jam, sesi 2 berakhir dalam 24 jam, sedangkan sesi 3 berakhir dalam 72 jam. Berikut adalah script nya:
add_action('woocommerce_single_product_summary', 'custom_countdown_script', 20);
function custom_countdown_script() {
global $product;
if (!$product) {
$product = wc_get_product(get_the_ID());
}
if ($product) {
?>
<script>
document.addEventListener('DOMContentLoaded', function () {
console.log("Script loaded on product page");
var countdownElement = document.createElement('div');
countdownElement.id = 'countdown-timer';
countdownElement.style.display = 'none'; // Menyembunyikan elemen saat halaman dimuat
function insertCountdown() {
var variationDescription = document.querySelector('.woocommerce-variation-description');
var variationPrice = document.querySelector('.woocommerce-variation-price');
if (variationDescription && variationPrice) {
variationDescription.insertAdjacentElement('afterend', countdownElement);
} else {
console.error('Variation description or price element not found');
}
}
insertCountdown();
// Mengambil harga asli dari PHP
function getPrice() {
var priceElement = document.querySelector('.woocommerce-variation-price .price .amount') ||
document.querySelector('.price .amount');
if (priceElement) {
var priceText = priceElement.innerText;
var price = parseFloat(priceText.replace(/[^0-9,-]+/g, "").replace(",", "."));
return price;
}
return NaN;
}
var originalPrice = getPrice();
console.log('Original price:', originalPrice);
// Fungsi untuk memformat harga
function formatPrice(price) {
return 'Rp' + price.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
// Fungsi untuk memformat waktu menjadi HH:MM:ss
function formatTime(seconds) {
var h = Math.floor(seconds / 3600);
var m = Math.floor((seconds % 3600) / 60);
var s = Math.floor(seconds % 60);
return h + ':' + (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s;
}
var countdownSessions = [
{time: 4 * 3600, text: 'Diskon 40% akan berakhir dalam:', discount: 0.4}, // Sesi 1 berakhir dalam 4 jam
{time: 24 * 3600, text: 'Kesempatan Diskon terakhir sebesar 25% akan berakhir dalam:', discount: 0.25}, // Sesi 2 berakhir dalam 24 jam
{time: 72 * 3600, text: 'Anda telah melewatkan dua sesi diskon. Namun, kami memberikan penawaran harga terbaik berikut:', discount: 0} // Sesi 3 berakhir dalam 72 jam
];
// Mengambil sesi dan waktu tersisa dari local storage
var savedSession = localStorage.getItem('currentSession');
var savedTimeLeft = localStorage.getItem('timeLeft');
var currentSession = savedSession ? parseInt(savedSession) : 0;
var timeLeft = savedTimeLeft ? parseInt(savedTimeLeft) : countdownSessions[currentSession].time;
function startCountdown() {
var session = countdownSessions[currentSession];
var interval = setInterval(function () {
if (timeLeft <= 0) {
clearInterval(interval);
currentSession = (currentSession + 1) % countdownSessions.length;
localStorage.setItem('currentSession', currentSession);
timeLeft = countdownSessions[currentSession].time;
startCountdown();
} else {
var currentPrice = getPrice();
if (isNaN(currentPrice)) {
countdownElement.style.display = 'none';
} else {
countdownElement.style.display = 'block';
var priceHTML = '';
if (currentSession < 2) {
priceHTML = `
<div>
${'Harga Asli: <span style="text-decoration: line-through; color: #737373;">' + formatPrice(currentPrice * (1 + session.discount)) + '</span>'}
</div>
`;
}
countdownElement.innerHTML = `
<div>
<span>${session.text} <span id="time" style="color: #ff9c12;">${currentSession < 2 ? formatTime(timeLeft) : ''}</span></span>
</div>
${priceHTML}
`;
}
timeLeft--;
localStorage.setItem('timeLeft', timeLeft);
}
}, 1000);
}
startCountdown();
// Update price when variation changes
jQuery('form.variations_form').on('show_variation', function(event, variation) {
originalPrice = getPrice();
console.log('Updated price:', originalPrice);
if (isNaN(originalPrice)) {
countdownElement.style.display = 'none';
} else {
countdownElement.style.display = 'block';
}
insertCountdown(); // Ensure the countdown is in the right place after variation change
});
jQuery('form.variations_form').on('reset_data', function() {
countdownElement.style.display = 'none';
});
});
</script>
<style>
#countdown-timer {
font-size: 12px;
margin-bottom: 10px;
color: #000000;
}
#countdown-timer span {
font-weight: bold;
}
#countdown-timer #time {
color: #ff9c12;
}
</style>
<?php
}
}
Penutup
Setiap sesi dirancang untuk memberikan urgensi kepada pelanggan dengan menawarkan diskon yang semakin menurun. Hal ini bertujuan untuk mendorong pelanggan melakukan pembelian segera sebelum diskon berakhir. Setelah semua sesi selesai, pesan akan memberitahu pelanggan bahwa mereka telah melewatkan kesempatan untuk mendapatkan diskon.
