افزودن دکمه پاکسازی سبد خرید در ووکامرس

آموزش افزودن دکمه پاکسازی سبد خرید در ووکامرس (حذف یکباره همه محصولات)

آیا تا به حال برای شما پیش آمده که کاربران در سبد خرید ووکامرس، برای حذف تمام محصولات، مجبور شوند هر آیتم را به صورت جداگانه حذف کنند؟ این کار به ویژه زمانی که سبد خرید پر از محصولات مختلف است، بسیار زمان‌بر و خسته‌کننده خواهد بود. ووکامرس به طور پیش‌فرض، دکمه‌ای برای پاکسازی یکباره سبد خرید ارائه نمی‌دهد و کاربران باید تک‌تک محصولات را حذف کنند یا تعداد آن‌ها را به صفر برسانند. این موضوع می‌تواند تجربه کاربری را به شدت کاهش دهد و باعث شود کاربران از فرآیند خرید منصرف شوند. در این مقاله از مجموعه مقالات آموزشی وردپرس، یک کد کاربردی و استاندارد برای افزودن دکمه پاکسازی سبد خرید در ووکامرس ارائه می‌دهیم که با استفاده از آن، کاربران می‌توانند با یک کلیک، تمام محصولات موجود در سبد خرید را به طور کامل حذف کنند. این دکمه با امنیت بالا (با استفاده از nonce) و پیام‌های اطلاع‌رسانی مناسب، تجربه کاربری را بهبود می‌بخشد و مدیریت سبد خرید را آسان‌تر می‌کند.

چالش نبود دکمه پاکسازی یکباره سبد خرید

نبود دکمه پاکسازی سبد خرید در ووکامرس، می‌تواند مشکلات زیر را برای کاربران و فروشگاه شما ایجاد کند:

• کاهش تجربه کاربری: کاربران مجبور می‌شوند برای حذف هر محصول، کلیک‌های متعدد انجام دهند و این موضوع به خصوص در دستگاه‌های موبایل بسیار آزاردهنده است.
• افزایش زمان تکمیل خرید: فرآیند حذف محصولات به صورت تکی، زمان بیشتری از کاربر می‌گیرد و ممکن است باعث شود کاربر از تکمیل خرید منصرف شود.
• سردرگمی کاربران: برخی کاربران ممکن است راه حذف تکی محصولات را پیدا نکنند و تصور کنند که امکان خالی کردن سبد خرید وجود ندارد.
• کاهش نرخ تبدیل: هرچه فرآیند خرید ساده‌تر باشد، نرخ تبدیل بالاتر می‌رود. نبود این دکمه می‌تواند تأثیر منفی بر فروش شما داشته باشد.

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

راهکار افزودن دکمه پاکسازی سبد خرید با کد اختصاصی

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

1. افزودن دکمه به فرم سبد خرید: با استفاده از هوک woocommerce_cart_actions، یک دکمه جدید با عنوان پاکسازی سبد خرید به فرم سبد خرید اضافه می‌شود. این دکمه با استفاده از wp_create_nonce، یک توکن امنیتی تولید می‌کند تا از حملات CSRF جلوگیری شود.
2. پردازش درخواست پاکسازی: با استفاده از هوک wp_loaded، درخواست ارسال شده توسط دکمه را دریافت کرده و پس از تأیید nonce، سبد خرید را با استفاده از WC()->cart->empty_cart() خالی می‌کنیم. همچنین با استفاده از wc_add_notice، پیام موفقیت یا خطا به کاربر نمایش داده می‌شود.

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

کد کامل افزودن دکمه پاکسازی سبد خرید در ووکامرس

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

/*
 * Add Clear Cart Button to WooCommerce Cart Page
 * Adds a "Clear Cart" button that removes all items from the cart with one click
 * Mahdi Jafarzadeh
 * https://www.wpwm.ir/
 */

// ============================================================
// 1. ADD CLEAR CART BUTTON TO CART FORM
// ============================================================
add_action('woocommerce_cart_actions', 'add_clear_cart_button');

function add_clear_cart_button() {
    // Generate a security nonce
    $nonce = wp_create_nonce('clear_cart_action');
    
    // Display the clear cart button
    printf(
        '<button id="clear-cart" class="button clear-cart-button" type="submit" name="clear_cart" value="%s">%s</button>',
        esc_attr($nonce),
        esc_html__('پاکسازی سبد خرید', 'woocommerce')
    );
}

// ============================================================
// 2. PROCESS CLEAR CART REQUEST
// ============================================================
add_action('wp_loaded', 'process_clear_cart_request', 20);

function process_clear_cart_request() {
    // Check if our clear cart button was clicked
    if (!isset($_POST['clear_cart'])) {
        return;
    }
    
    // Verify the nonce for security
    if (!wp_verify_nonce($_POST['clear_cart'], 'clear_cart_action')) {
        wc_add_notice(__('خطا: درخواست نامعتبر است.', 'woocommerce'), 'error');
        return;
    }
    
    // Check if WooCommerce cart is available
    if (function_exists('WC') && isset(WC()->cart)) {
        // Empty the cart
        WC()->cart->empty_cart();
        
        // Show success message
        wc_add_notice(__('سبد خرید با موفقیت پاک شد.', 'woocommerce'), 'success');
    } else {
        // Show error message if cart is not available
        wc_add_notice(__('خطا: سبد خرید در دسترس نیست.', 'woocommerce'), 'error');
    }
}

نحوه عملکرد کد به صورت گام به گام

در این بخش، هر بخش از کد را به صورت دقیق بررسی می‌کنیم و نحوه عملکرد آن را توضیح می‌دهیم:

1. خطوط ۱۰ تا ۱۴ – افزودن دکمه به فرم سبد خرید: با استفاده از add_action('woocommerce_cart_actions', 'add_clear_cart_button')، یک عملکرد به هوک woocommerce_cart_actions اضافه می‌کنیم. این هوک در بخش پایینی فرم سبد خرید قرار دارد و مکانی مناسب برای افزودن دکمه‌های سفارشی است. در تابع add_clear_cart_button:
   • خط ۱۳: با استفاده از wp_create_nonce('clear_cart_action')، یک توکن امنیتی (nonce) تولید می‌کنیم تا از حملات CSRF جلوگیری کنیم.
   • خطوط ۱۶ تا ۱۸: با استفاده از printf، یک دکمه button با شناسه clear-cart، کلاس button clear-cart-button و عنوان پاکسازی سبد خرید تولید می‌کنیم. مقدار value دکمه، همان توکن nonce است که در پردازش درخواست بررسی می‌شود.
2. خطوط ۲۳ تا ۴۳ – پردازش درخواست پاکسازی: با استفاده از add_action('wp_loaded', 'process_clear_cart_request', 20)، یک عملکرد به هوک wp_loaded اضافه می‌کنیم. این هوک پس از بارگذاری کامل وردپرس و قبل از ارسال هدرها اجرا می‌شود و زمان مناسبی برای پردازش درخواست‌های فرم است. در تابع process_clear_cart_request:
   • خطوط ۲۶ تا ۲۸: با استفاده از !isset($_POST['clear_cart']) بررسی می‌کنیم که آیا دکمه پاکسازی سبد خرید کلیک شده است یا خیر. اگر کلیک نشده باشد، تابع با return خاتمه می‌یابد.
   • خطوط ۳۱ تا ۳۴: با استفاده از wp_verify_nonce($_POST['clear_cart'], 'clear_cart_action')، توکن امنیتی ارسال شده را بررسی می‌کنیم. اگر توکن معتبر نباشد، یک پیام خطا به کاربر نمایش داده می‌شود و تابع با return خاتمه می‌یابد.
   • خطوط ۳۷ تا ۳۸: با استفاده از function_exists('WC') && isset(WC()->cart)، اطمینان حاصل می‌کنیم که شیء سبد خرید ووکامرس در دسترس است.
   • خط ۴۰: با استفاده از WC()->cart->empty_cart()، تمام محصولات موجود در سبد خرید را حذف می‌کنیم.
   • خط ۴۳: با استفاده از wc_add_notice، یک پیام موفقیت به کاربر نمایش می‌دهیم که سبد خرید با موفقیت پاک شده است.
   • خطوط ۴۶ تا ۴۸: در صورت عدم دسترسی به سبد خرید، یک پیام خطا به کاربر نمایش داده می‌شود.

نکات مهم

در این بخش به نکات کلیدی برای استفاده صحیح از این کد اشاره می‌کنیم که باید به آن‌ها توجه ویژه‌ای داشته باشید:

• استفاده از قالب فرزند: کد را در فایل functions.php قالب فرزند قرار دهید تا با بروزرسانی قالب اصلی، تغییرات شما از بین نرود.
• امنیت با nonce: استفاده از توکن nonce یکی از اصول اساسی امنیت در وردپرس است. این توکن از حملات CSRF (Cross-Site Request Forgery) جلوگیری می‌کند و اطمینان حاصل می‌کند که درخواست پاکسازی سبد خرید از سوی کاربر واقعی و در همان جلسه ارسال شده است.
• سفارشی‌سازی استایل دکمه: می‌توانید با افزودن CSS سفارشی به فایل استایل قالب خود، ظاهر دکمه را تغییر دهید. به عنوان مثال، می‌توانید رنگ، اندازه یا فاصله آن را تنظیم کنید. شناسه #clear-cart و کلاس .clear-cart-button برای این کار در نظر گرفته شده‌اند.
• جلوگیری از پاکسازی تصادفی: برای افزایش تجربه کاربری، می‌توانید با استفاده از جاوااسکریپت یک پیام تأیید (Confirm Dialog) قبل از پاکسازی سبد خرید به کاربر نمایش دهید. این کار از حذف تصادفی سبد خرید جلوگیری می‌کند.
• تست پس از اعمال کد: پس از افزودن کد، حتماً چند محصول به سبد خرید اضافه کرده و با کلیک روی دکمه پاکسازی سبد خرید، از عملکرد صحیح آن اطمینان حاصل کنید.
• سازگاری با افزونه‌های چندزبانه: از آنجایی که از توابع ترجمه __() و esc_html__() استفاده شده است، این کد با افزونه‌های چندزبانه مانند WPML و Polylang سازگار است.
• هشدار برگشت‌ناپذیری: بهتر است در پیام‌های اطلاع‌رسانی یا دکمه، به کاربر هشدار دهید که این عمل برگشت‌ناپذیر است و تمام محصولات از سبد خرید حذف خواهند شد.

جمع‌بندی

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

امیدواریم این آموزش برای شما مفید بوده باشد. اگر سوالی درباره افزودن دکمه پاکسازی سبد خرید، نحوه استفاده از کد یا هر بخش دیگری از این آموزش دارید، لطفاً در بخش نظرات مطرح کنید. همچنین اگر تجربه‌ای در سفارشی‌سازی سبد خرید ووکامرس دارید، خوشحال می‌شویم آن را با ما و سایر کاربران به اشتراک بگذارید.