ساخت پاپ‌آپ خرید ووکامرس بدون افزونه + کد آماده و استایل RTL

در دنیای بازاریابی دیجیتال، مفهومی به نام اثبات اجتماعی (Social Proof) وجود دارد. وقتی کاربران وارد یک فروشگاه اینترنتی می‌شوند و می‌بینند که افراد دیگر در همان لحظه در حال خرید از سایت هستند، اعتمادشان به برند شما چندین برابر می‌شود. یکی از بهترین روش‌ها برای ایجاد این حس، نمایش پاپ‌آپ‌های کوچک اعلان خرید (Sales Popups) در گوشه صفحه است.

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

چرا نباید برای نمایش پاپ‌آپ خرید از افزونه استفاده کنیم؟

بسیاری از مدیران سایت‌های وردپرسی برای هر قابلیت کوچکی یک پلاگین جدید نصب می‌کنند. نصب بی‌رویه افزونه‌ها معایب بزرگی دارد:

• کاهش سرعت لود سایت: هر افزونه فایل‌های CSS و JS خود را به لود صفحه اضافه می‌کند.
• تداخل‌های کدنویسی: احتمال ناسازگاری افزونه‌ها با قالب یا سایر پلاگین‌ها وجود دارد.
• خطرات امنیتی: عدم به‌روزرسانی مداوم افزونه‌ها راه را برای نفوذ هکرها باز می‌کند.

با استفاده از قطعه کدی که در ادامه معرفی می‌کنیم، این قابلیت جذاب را به سبک‌ترین شکل ممکن و با امنیت کامل به قالب خود اضافه خواهید کرد.

ویژگی‌های کد پاپ‌آپ خرید ووکامرس سفارشی

کدی که در این مقاله برای شما آماده کرده‌ایم دارای قابلیت‌های کلیدی زیر است:

1. نمایش کاملاً پویا: اطلاعات محصولات واقعی را از دیتابیس ووکامرس می‌کشد.
2. شبیه‌سازی خرید طبیعی: نام خریدار (مرد یا زن) و شهر او را به صورت کاملاً تصادفی و بر اساس لیست شهرهای ایران ترکیب می‌کند.
3. جلوگیری از تکرار فامیلی: از تکرار نام خانوادگی‌های مشابه به صورت پشت‌سرهم در پاپ‌آپ جلوگیری می‌کند.
4. عدم نمایش در صفحات حساس: در صفحات سبد خرید و تسویه حساب که نیاز به تمرکز کاربر دارد، اجرا نمی‌شود.
5. استایل کاملاً RTL و ریسپانسیو: پاپ‌آپ در تمام دستگاه‌ها (موبایل، تبلت و دسکتاپ) به صورت راست‌چین و شکیل نمایش داده می‌شود.

کد کامل پاپ‌آپ خرید ووکامرس (PHP, JS, CSS)

این کد را می‌توانید در انتهای فایل functions.php قالب فرزند (Child Theme) خود یا از طریق افزونه‌های مدیریت کدهای سفارشی (مثل Code Snippets) قرار دهید.

(توصیه می‌شود حتما پیش از اعمال تغییرات، از سایت خود بکاپ تهیه کنید.)

add_action('wp_footer', function(){

if(is_cart() || is_checkout()) return;
if(!class_exists('WooCommerce')) return;

$wc_products = wc_get_products([
    'limit'=>40,
    'status'=>'publish',
]);

$products_arr = [];

foreach($wc_products as $p){
    $img = wp_get_attachment_url($p->get_image_id());
    if(!$img) continue;

    $products_arr[] = [
        'name'=>$p->get_name(),
        'img'=>$img,
        'url'=>get_permalink($p->get_id())
    ];
}

$cities = [
"تهران","اصفهان","مشهد","شیراز","تبریز","اهواز","کرج","قم","یزد","کرمان","ارومیه",
"ساری","گرگان","بوشهر","خرم آباد","سنندج","اردبیل","قزوین","نیشابور","مراغه","بندرعباس"
];

// فامیلی‌ها بدون «ی» در پایان + زیاد و متنوع
$lastnames = [
"صدر", "کاظم‌پور", "حکمت", "فرهمند", "صالح", "فرخ", "نعمتی", "خداداد", "باقرپور",
"شریعت", "توفیق", "نامور", "مرادیان", "هاشمی‌نژاد", "افخمی", "آقابابا", "باباپور",
"حاجیان", "قربان‌پور", "فیروز", "شیرزاد", "پاکدل", "رفیع", "شادمهر", "فرزین"
];

?>

<script>
const products = <?php echo json_encode($products_arr); ?>;

const maleNames = [
"علی","محمد","حسین","رضا","مهدی","امیر","مانی","سام","سینا","کیوان","نوید","آرین"
];

const femaleNames = [
"زهرا","فاطمه","مریم","نگار","سارا","مهسا","آیدا","هانیه","نیلوفر","پریسا","رعنا","یلدا"
];

const lastNames = <?php echo json_encode($lastnames); ?>;
const cities = <?php echo json_encode($cities); ?>;

// جلوگیری از تکرار فامیلی پشت سر هم
let last_used_lastname = "";

function randomItem(arr){
    return arr[Math.floor(Math.random()*arr.length)];
}

function randomPerson(){
    let gender = Math.random()>0.5 ? "male" : "female";
    let prefix = gender==="male" ? "آقای" : "خانم";

    let first = gender==="male" ? randomItem(maleNames) : randomItem(femaleNames);

    let last;
    do {
        last = randomItem(lastNames);
    } while(last === last_used_lastname);

    last_used_lastname = last;

    let city = randomItem(cities);

    return {
        prefix,
        name: first + " " + last,
        city
    };
}

function showPopup(){

    if(!products.length) return;

    const product = randomItem(products);
    const person = randomPerson();

    let popup = document.createElement("div");
    popup.className = "popup-sale";

    popup.innerHTML = `
        <div class="ps-img"><a href="${product.url}"><img src="${product.img}"></a></div>

        <div class="ps-body">
            <div class="ps-name">${person.prefix} ${person.name} <span>از ${person.city}</span></div>
            <div class="ps-msg">محصول <b>${product.name}</b> را خریداری کرد</div>
        </div>

        <div class="ps-close">×</div>
    `;

    document.body.appendChild(popup);

    popup.querySelector(".ps-close").onclick = ()=> popup.remove();

    setTimeout(()=> popup.remove(), 10000);
}

function startPopups(){
    setInterval(showPopup, 60000); // هر ۱ دقیقه
    setTimeout(showPopup, 6000);
}

document.addEventListener("DOMContentLoaded", startPopups);
</script>


<style>

.popup-sale{
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: linear-gradient(135deg,#ffffff,#f9f6ff);
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(100,50,180,.2);
    padding: 12px;
    display: flex;
    align-items: center;
    min-width: 310px;
    max-width: 370px;
    direction: rtl;
    z-index: 999999;
    animation: ps-show .55s ease;
    border: 1px solid #e9d8ff;
}

@keyframes ps-show{
    from{opacity:0; transform: translateX(60px);}
    to{opacity:1; transform: translateX(0);}
}

.ps-img img{
    width: 60px;
    height: 60px;
    border-radius: 14px;
    object-fit: cover;
    margin-left: 10px;
    border: 2px solid #f2e8ff;
}

.ps-body{
    flex:1;
    padding-right: 5px;
}

.ps-name{
    color:#6d3bd1;
    font-weight:700;
    font-size:15px;
    margin-bottom:4px;
}

.ps-name span{
    color:#777;
    font-size:12px;
    margin-right:5px;
}

.ps-msg{
    color:#333;
    font-size:14px;
}

.ps-close{
    cursor:pointer;
    font-size:24px;
    color:#888;
    margin-right:8px;
}

.ps-close:hover{
    color:#000;
}

/* ریسپانسیو موبایل */
@media(max-width:600px){

    .popup-sale{
        right: 10px;
        left: 10px;
        bottom: 15px;
        min-width: auto;
        max-width: none;
    }

    .ps-img img{
        width:50px;
        height:50px;
    }
}

</style>

<?php
});

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

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

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

گاهی اوقات ممکن است دسترسی به ویرایشگر وردپرس (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 را بزنید.

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