نمایش تعداد بازدیدکنندگان آنلاین محصول در ووکامرس

مقدمه

یکی از روش‌های افزایش جذابیت صفحه محصول و ایجاد حس پویایی در فروشگاه اینترنتی، نمایش اطلاعاتی مانند تعداد کاربران در حال مشاهده محصول است. وقتی کاربر مشاهده می‌کند افراد دیگری نیز در همان لحظه یک محصول را بررسی می‌کنند، ممکن است با اعتماد و توجه بیشتری صفحه را دنبال کند.

در این مقاله قصد داریم یک باکس زیبا و واکنش‌گرا برای نمایش تعداد بازدیدکنندگان محصول در ووکامرس ایجاد کنیم. این قابلیت با استفاده از هوک‌های ووکامرس، زبان PHP، کدنویسی CSS و JavaScript پیاده‌سازی می‌شود و برای استفاده از آن نیازی به نصب افزونه جداگانه نخواهید داشت.

نکته مهم: کدی که در این آموزش ارائه می‌شود، تعداد نمایشی و شبیه‌سازی‌شده‌ای را نشان می‌دهد و آمار واقعی کاربران آنلاین سایت را محاسبه نمی‌کند. اگر قصد نمایش آمار واقعی را دارید، باید سیستم ثبت نشست کاربران و ذخیره‌سازی اطلاعات در دیتابیس پیاده‌سازی شود.

چرا نمایش بازدیدکنندگان محصول اهمیت دارد؟

در فروشگاه‌های اینترنتی، اعتمادسازی نقش بسیار مهمی در تصمیم‌گیری مشتری دارد. کاربر پیش از خرید معمولاً به دنبال نشانه‌هایی است که نشان دهد محصول موردنظر ارزش بررسی یا خرید دارد.

نمایش تعداد بازدیدکنندگان می‌تواند به دلایل زیر مفید باشد:

• افزایش حس پویایی در صفحه محصول
• ایجاد توجه بیشتر نسبت به محصول
• کمک به بهبود تجربه کاربری
• افزایش احتمال ادامه بررسی محصول
• ایجاد حس محبوبیت و پرتقاضا بودن کالا
• کمک به طراحی صفحات فروشگاهی حرفه‌ای‌تر

البته این قابلیت باید با دقت و صداقت استفاده شود. بهتر است متن و عدد نمایش‌داده‌شده با واقعیت کسب‌وکار شما تناسب داشته باشد و از ایجاد ادعاهای غیرواقعی خودداری شود.

پیش‌نیازهای اجرای این کد

برای استفاده از این قابلیت به موارد زیر نیاز دارید:

1. یک سایت وردپرسی فعال
2. نصب و فعال‌سازی افزونه WooCommerce
3. دسترسی به فایل functions.php یا افزونه اختصاصی سایت
4. آشنایی مقدماتی با PHP و CSS
5. تهیه نسخه پشتیبان پیش از اعمال تغییرات

پیشنهاد می‌شود کدهای سفارشی را مستقیماً در فایل قالب اصلی قرار ندهید؛ زیرا با به‌روزرسانی قالب ممکن است تغییرات شما از بین برود. بهترین روش، استفاده از افزونه اختصاصی یا چایلدتم است.

اگر به‌تازگی وارد دنیای طراحی سایت شده‌اید، می‌توانید از مسیر آموزش رایگان وردپرس برای یادگیری مفاهیم پایه وردپرس استفاده کنید.

کد کامل نمایش بازدیدکنندگان محصول

کد زیر را می‌توانید در افزونه اختصاصی یا فایل مناسب قالب خود قرار دهید:

/* افزونه ی نمایش تعداد بازدید کنندگان از صفحه */
add_action('woocommerce_after_add_to_cart_button', 'custom_live_viewers_box_compact');

function custom_live_viewers_box_compact() {
    if (!is_product()) {
        return;
    }

    global $product;

    if (!$product) {
        return;
    }

    $product_id = $product->get_id();
    $hour_seed = (int) gmdate('G');
    $base = 8 + (($product_id * 5 + $hour_seed) % 20);
    $initial_count = max(6, $base + rand(-2, 3));
    ?>
    <div class="custom-live-viewers-pro compact" id="custom-live-viewers-pro" data-min="6" data-max="36" data-count="<?php echo esc_attr($initial_count); ?>">
        <div class="clvp-content">
            <div class="clvp-top-row">
                <span class="clvp-live-inline">
                    <span class="clvp-dot"></span>
                    <span>زنده</span>
                </span>
                <span class="clvp-topline">وضعیت بازدید این محصول</span>
            </div>

            <div class="clvp-title">
                همین حالا
                <span class="clvp-count"><?php echo esc_html($initial_count); ?></span>
                نفر در حال مشاهده این محصول هستند
            </div>

            <div class="clvp-subtitle">
                این محصول در حال حاضر توجه زیادی جلب کرده و جزو گزینه‌های پربازدید فروشگاه است.
            </div>
        </div>
    </div>

    <style>
        .custom-live-viewers-pro.compact {
            position: relative;
            margin-top: 18px;
            padding: 16px 18px;
            border-radius: 18px;
            overflow: hidden;
            direction: rtl;
            text-align: right;
            background:
                radial-gradient(circle at top right, rgba(255, 166, 77, 0.16), transparent 34%),
                linear-gradient(135deg, #fffdfb 0%, #fff7f1 55%, #ffffff 100%);
            border: 1px solid rgba(255, 153, 72, 0.16);
            box-shadow:
                0 12px 30px rgba(17, 24, 39, 0.06),
                0 2px 8px rgba(255, 145, 77, 0.06);
        }

        .custom-live-viewers-pro.compact::before {
            content: "";
            position: absolute;
            right: 0;
            top: 14px;
            bottom: 14px;
            width: 4px;
            border-radius: 999px;
            background: linear-gradient(180deg, #ff8a3d 0%, #ffb36b 100%);
            box-shadow: 0 0 14px rgba(255, 138, 61, 0.30);
        }

        .clvp-content {
            min-width: 0;
        }

        .clvp-top-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 6px;
            flex-wrap: wrap;
        }

        .clvp-live-inline {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 9px;
            border-radius: 999px;
            background: rgba(34, 197, 94, 0.10);
            color: #15803d;
            font-size: 11px;
            font-weight: 700;
            line-height: 1;
            border: 1px solid rgba(34, 197, 94, 0.14);
            white-space: nowrap;
        }

        .clvp-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #22c55e;
            box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
            animation: clvpLivePulse 1.8s infinite;
        }

        .clvp-topline {
            font-size: 12px;
            font-weight: 700;
            color: #f97316;
        }

        .clvp-title {
            font-size: 16px;
            line-height: 2;
            color: #1f2937;
            font-weight: 800;
        }

        .clvp-count {
            display: inline-block;
            margin: 0 4px;
            padding: 1px 10px 2px;
            border-radius: 12px;
            background: linear-gradient(135deg, #fff1e7 0%, #ffe0c7 100%);
            color: #ea580c;
            font-size: 20px;
            font-weight: 900;
            box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.10);
            transition: all 0.25s ease;
        }

        .clvp-subtitle {
            margin-top: 4px;
            font-size: 13px;
            line-height: 1.9;
            color: #6b7280;
        }

        @keyframes clvpLivePulse {
            0% {
                box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
            }
        }

        @media (max-width: 767px) {
            .custom-live-viewers-pro.compact {
                padding: 14px 14px;
                border-radius: 15px;
            }

            .custom-live-viewers-pro.compact::before {
                top: 12px;
                bottom: 12px;
            }

            .clvp-top-row {
                gap: 8px;
                margin-bottom: 5px;
            }

            .clvp-live-inline {
                font-size: 10px;
                padding: 4px 8px;
            }

            .clvp-topline {
                font-size: 11px;
            }

            .clvp-title {
                font-size: 14px;
                line-height: 1.9;
            }

            .clvp-count {
                font-size: 17px;
                padding: 1px 8px 2px;
                border-radius: 10px;
            }

            .clvp-subtitle {
                font-size: 12px;
                line-height: 1.8;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var box = document.getElementById('custom-live-viewers-pro');
            if (!box) return;

            var countEl = box.querySelector('.clvp-count');
            var current = parseInt(box.getAttribute('data-count'), 10) || 10;
            var min = parseInt(box.getAttribute('data-min'), 10) || 6;
            var max = parseInt(box.getAttribute('data-max'), 10) || 36;

            function animateCount(nextValue) {
                countEl.style.transform = 'scale(1.08)';
                countEl.style.background = 'linear-gradient(135deg, #ffe7d1 0%, #ffd2ae 100%)';

                setTimeout(function () {
                    countEl.textContent = nextValue;
                    countEl.style.transform = 'scale(1)';
                    countEl.style.background = 'linear-gradient(135deg, #fff1e7 0%, #ffe0c7 100%)';
                }, 140);
            }

            function updateCount() {
                var change = Math.floor(Math.random() * 3) - 1;

                if (Math.random() > 0.65) {
                    change = Math.floor(Math.random() * 4);
                }

                current += change;

                if (current < min) current = min + 1;
                if (current > max) current = max - 1;

                animateCount(current);
            }

            setInterval(updateCount, 6000);
        });
    </script>
    <?php
}

بررسی بخش PHP کد

بررسی صفحه محصول

در ابتدای تابع، با کد زیر اطمینان پیدا می‌کنیم که باکس فقط در صفحه محصولات ووکامرس نمایش داده شود:

if ( ! is_product() ) {
    return;
}

راهنمای گام‌به‌گام: چگونه این کد را به سایت وردپرسی خود اضافه کنیم؟

برای اضافه کردن این کد به وردپرس، چندین روش وجود دارد. در ادامه ایمن‌ترین و استانداردترین روش‌ها را با هم بررسی می‌کنیم:

روش اول: ویرایش از طریق مدیریت فایل هاست (روش حرفه‌ای)

گاهی اوقات ممکن است دسترسی به ویرایشگر وردپرس (Theme File Editor) به دلایل امنیتی توسط توسعه‌دهنده قالب بسته شده باشد، یا شاید ترجیح می‌دهید به جای محیط وردپرس، مستقیماً با فایل‌های سرور کار کنید. در این صورت، استفاده از File Manager هاست بهترین راهکار است.

گام‌های اجرای کار در هاست (cPanel یا DirectAdmin):

1. ورود به هاست: ابتدا وارد پنل مدیریت هاست خود (cPanel یا DirectAdmin) شوید.
2. باز کردن فایل منیجر: روی گزینه File Manager کلیک کنید.
3. مسیریابی: به پوشه ریشه سایت خود (معمولاً public_html) بروید. سپس مسیر زیر را دنبال کنید:wp-content > themes > your-theme-name(نکته: به‌جای your-theme-name نام پوسته فعال سایت خود را انتخاب کنید. اگر از Child Theme استفاده می‌کنید، حتماً وارد پوشه فرزند شوید).
4. ویرایش فایل: فایل functions.php را پیدا کنید. روی آن راست‌کلیک کرده و گزینه Edit را انتخاب کنید.
5. جای‌گذاری کد: کد مورد نظر خود را به انتهای فایل اضافه کنید.
6. ذخیره: دکمه Save Changes را در بالای صفحه ویرایشگر بزنید.

روش دوم : اضافه کردن کد به فایل functions.php (روش سریع)

فایل functions.php قلب تپنده قالب شماست و کدهای شخصی‌سازی در آن قرار می‌گیرند.

1. وارد پیشخوان وردپرس شوید: از منوی سمت راست به مسیر نمایش > ویرایشگر پرونده پوسته (Theme File Editor) بروید.
2. فایل مناسب را انتخاب کنید: از ستون سمت چپ (بخش پرونده‌های پوسته)، فایل توابع پوسته (functions.php) را پیدا کرده و روی آن کلیک کنید.
3. قرار دادن کد: به انتهای فایل بروید، یک خط جدید ایجاد کنید و کدهای بالا را دقیقاً در انتهای فایل پیست (Paste) کنید.
4. ذخیره تغییرات: روی دکمه به‌روزرسانی پرونده کلیک کنید.

⚠️ یک هشدار امنیتی بسیار مهم:

پیش از ویرایش فایل‌های قالب، حتماً یک نسخه پشتیبان (Backup) از فایل تهیه کنید. همچنین اگر قالب خود را آپدیت کنید، تغییراتی که در فایل functions.php قالب اصلی اعمال کرده‌اید پاک خواهند شد. برای جلوگیری از این مشکل، پیشنهاد می‌کنیم از پوسته فرزند (Child Theme) استفاده کنید یا به سراغ روش دوم بروید.

روش سوم: استفاده از افزونه‌های مدیریت کدهای سفارشی (روش ایمن و بدون خطر)

اگر نمی‌خواهید فایل‌های قالب را به صورت دستی ویرایش کنید و نگران به هم ریختن سایت یا پاک شدن کدها در آپدیت‌های بعدی قالب هستید، این روش بهترین گزینه است.

1. افزونه رایگان WPcode (Insert Headers and Footers) یا Code Snippets را از مخزن وردپرس نصب و فعال کنید.
2. از منوی جدیدی که در پیشخوان اضافه شده، روی Add Snippet (افزودن کد جدید) کلیک کنید.
3. یک عنوان دلخواه برای آن انتخاب کنید (مثلاً: نوار اعلان بالای هدر).
4. نوع کد (Code Type) را روی حالت PHP Snippet قرار دهید.
5. کدهای بالا را در باکس مربوطه کپی کنید.
6. وضعیت را روی Active (فعال) قرار داده و دکمه Save را بزنید.

اگر قصد دارید به‌صورت تخصصی طراحی سایت و وردپرس را یاد بگیرید، آشنایی با کدنویسی قالب، افزونه‌نویسی، ووکامرس، امنیت و سئو اهمیت زیادی دارد. برای افرادی که به دنبال یادگیری ساختاریافته و ورود جدی‌تر به این حوزه هستند، صفحه آموزش وردپرس در تبریز می‌تواند نقطه شروع مناسبی باشد.ی