12 Фев
Стандартный бейдж «Распродажа!» в WooCommerce выглядит слишком статично? Хотите добавить динамики и создать эффект срочности для ваших покупателей? В этом руководстве мы рассмотрим, как заменить стандартный бейдж на странице товара WooCommerce на анимированный таймер обратного отсчёта до окончания скидки. Давайте создавать таймер обратного отсчёта до конца акции!
Этот подход не только привлечёт внимание к скидкам, но и повысит конверсию, побуждая пользователей совершать покупку до истечения срока акции.
Как работает таймер скидки в WooCommerce
Таймер будет отображаться только на странице отдельного товара и только в том случае, если для него установлен срок окончания скидки. Сценарий работы следующий:
- PHP-код получает дату окончания скидки и вычисляет разницу во времени между текущим моментом и заданной датой.
- JavaScript-код динамически обновляет таймер каждую секунду.
- Готовый таймер отображается вместо стандартного бейджа «Sale!».
Код для добавления таймера скидки в WooCommerce
Ниже приведён PHP и JavaScript-код, который заменяет стандартный бейдж «Распродажа!» на таймер.
1. Добавляем PHP-код в файл functions.php
add_filter( 'woocommerce_sale_flash', 'custom_sale_end_countdown', 9999, 3 );
function custom_sale_end_countdown( $html, $post, $product ) {
if ( is_product() && $product->get_date_on_sale_to() ) {
$now = time();
$sale_end_timestamp = $product->get_date_on_sale_to()->getTimestamp();
$time_diff = $sale_end_timestamp - $now;
$days = floor( $time_diff / 86400 );
$hours = floor( ( $time_diff - $days * 86400 ) / 3600 );
$mins = floor( ( $time_diff - $days * 86400 - $hours * 3600 ) / 60 );
$secs = $time_diff % 60;
wc_enqueue_js( "
var end = new Date( " . $sale_end_timestamp * 1000 . " );
setInterval( function() { updateCountdown( end ); }, 1000 );
function updateCountdown( endTime ) {
var now = Date.now();
var timeLeft = ( endTime - now ) / 1000;
var days = Math.floor( timeLeft / 86400 );
var hours = Math.floor( ( timeLeft - ( days * 86400 ) ) / 3600 );
var mins = Math.floor( ( timeLeft - ( days * 86400 ) - ( hours * 3600 ) ) / 60 );
var secs = Math.floor( ( timeLeft - ( days * 86400 ) - ( hours * 3600 ) - ( mins * 60 ) ) );
jQuery('.countdown .days').text( days );
jQuery('.countdown .hours').text( hours );
jQuery('.countdown .mins').text( mins );
jQuery('.countdown .secs').text( secs );
}
" );
return '<span class="onsale countdown">Скидка закончится через: <span class="days">' . $days . '</span>д <span class="hours">' . $hours . '</span>ч <span class="mins">' . $mins . '</span>м <span class="secs">' . $secs . '</span>с</span>';
}
return $html;
}2. Добавляем стили для таймера в style.css
.onsale.countdown {
background-color: #ff4747;
color: #fff;
padding: 10px;
font-size: 14px;
border-radius: 5px;
display: inline-block;
}
.countdown span {
font-weight: bold;
}Куда добавлять код?
- PHP-код добавляется в файл
functions.phpвашей дочерней темы. - CSS-код следует разместить в файле
style.cssвашей темы или добавить через раздел «Дополнительные стили» в настройках WordPress.
Что делать, если таймер не работает?
Если код не срабатывает, попробуйте:
- Переключиться на стандартную тему (Storefront или Twenty Twenty-five) и проверить работу таймера.
- Отключить все плагины, кроме WooCommerce, и протестировать функционал.
- Очистить кеш сайта и браузера.
Заключение
Добавление таймера обратного отсчёта на страницу товара WooCommerce создаёт дополнительную мотивацию для покупателей. Этот метод отлично подходит для временных акций, сезонных распродаж и других маркетинговых активностей.
Теперь ваш интернет-магазин станет более интерактивным, а клиенты получат визуальное напоминание о том, что скидка скоро закончится. Успехов в продажах!
