نمایش پویا قیمت مجموع با تغییر تعداد محصول در صفحه محصول ووکامرس

نمایش قیمت مجموع محصول در صفحه محصول ووکامرس (محاسبه پویا بر اساس تعداد)

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

چرا نمایش قیمت مجموع در صفحه محصول اهمیت دارد؟

افزودن قابلیت نمایش قیمت مجموع به صفحه محصول، مزایای متعددی برای فروشگاه شما دارد:

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

راهکار نمایش قیمت مجموع محصول با کد اختصاصی

برای نمایش قیمت مجموع محصول در صفحه محصول، از هوک woocommerce_after_add_to_cart_button استفاده می‌کنیم. این هوک یکی از بهترین نقاط برای افزودن محتوای سفارشی در کنار دکمه “افزودن به سبد خرید” است. کد ارائه شده در این مقاله، با استفاده از تابع $product->get_price() قیمت محصول را دریافت کرده و با استفاده از جاوااسکریپت، هر زمان که کاربر تعداد را تغییر می‌دهد، قیمت نهایی را به‌روزرسانی می‌کند. همچنین با استفاده از تابع get_woocommerce_currency_symbol()، نماد ارز فروشگاه را به نمایش می‌گذارد. این روش کاملاً استاندارد، سبک و بدون نیاز به نصب افزونه است و با تمامی نسخه‌های ووکامرس سازگاری دارد.

کد کامل نمایش قیمت مجموع محصول در صفحه محصول ووکامرس

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

/*
 * Display Dynamic Total Price on WooCommerce Product Page
 * Shows the total price based on selected quantity, updating in real-time
 * Mahdi Jafarzadeh
 * https://www.wpwm.ir/
 */

add_action('woocommerce_after_add_to_cart_button', 'display_product_total_price');

function display_product_total_price() {
    global $product;
    
    // Display container for total price
    echo '<div id="subtot" style="display:inline-block; margin-left:10px;">Total: <span></span></div>';
    
    // Get product price and currency symbol
    $price = $product->get_price();
    $currency = get_woocommerce_currency_symbol();
    
    // Enqueue JavaScript for dynamic price calculation
    wc_enqueue_js("
        $('[name=quantity]').on('input change', function() {
            var qty = $(this).val();
            var price = '" . esc_js($price) . "';
            var total = (price * qty).toFixed(2);
            $('#subtot > span').html('" . esc_js($currency) . "' + total);
        }).change();
    ");
}

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

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

1. خط ۶ – افزودن هوک woocommerce_after_add_to_cart_button: با استفاده از add_action('woocommerce_after_add_to_cart_button', 'display_product_total_price')، یک عملکرد به هوک woocommerce_after_add_to_cart_button اضافه می‌کنیم. این هوک درست بعد از دکمه “افزودن به سبد خرید” در صفحه محصول اجرا می‌شود و زمان مناسبی برای نمایش قیمت مجموع است.
2. خط ۸ – تعریف تابع: تابع display_product_total_price تعریف می‌شود که حاوی منطق اصلی نمایش قیمت مجموع است.
3. خط ۹ – دسترسی به شیء محصول: با استفاده از global $product; به شیء محصول فعلی دسترسی پیدا می‌کنیم تا بتوانیم قیمت آن را دریافت کنیم.
4. خط ۱۲ – ایجاد المان نمایش قیمت: با استفاده از echo '<div id="subtot" ...>Total: <span></span></div>';، یک المان div با شناسه subtot ایجاد می‌کنیم که قیمت مجموع را نمایش خواهد داد. مقدار پیش‌فرض “Total:” به صورت ثابت نمایش داده می‌شود و مقدار عددی در تگ span قرار می‌گیرد.
5. خطوط ۱۵ و ۱۶ – دریافت قیمت و نماد ارز: با استفاده از $product->get_price()، قیمت محصول فعلی را دریافت می‌کنیم و با get_woocommerce_currency_symbol()، نماد ارز فروشگاه را به دست می‌آوریم.
6. خطوط ۱۹ تا ۲۵ – افزودن جاوااسکریپت برای محاسبه پویا: با استفاده از wc_enqueue_js()، یک تابع جاوااسکریپت به صفحه اضافه می‌کنیم که:
   • به تغییرات فیلد تعداد ([name=quantity]) گوش می‌دهد.
   • هر بار که تعداد تغییر کند، قیمت را در تعداد ضرب کرده و قیمت نهایی را محاسبه می‌کند.
   • نتیجه را با استفاده از نماد ارز در المان #subtot > span به‌روزرسانی می‌کند.
   • با فراخوانی .change() در انتها، قیمت مجموع برای تعداد پیش‌فرض (معمولاً ۱) نیز محاسبه و نمایش داده می‌شود.

نکات مهم

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

• استفاده از قالب فرزند: کد را در فایل functions.php قالب فرزند قرار دهید تا با بروزرسانی قالب اصلی، تغییرات شما از بین نرود.
• سفارشی‌سازی ظاهر: می‌توانید استایل CSS المان #subtot را در فایل استایل قالب خود تغییر دهید. به عنوان مثال، می‌توانید رنگ، اندازه فونت یا فاصله آن را تنظیم کنید.
• سازگاری با محصولات متغیر: این کد برای محصولات ساده (Simple Products) به خوبی کار می‌کند. برای محصولات متغیر (Variable Products)، از آنجا که قیمت با انتخاب تغییرات (variations) عوض می‌شود، ممکن است نیاز به کدهای تکمیلی داشته باشید تا قیمت تغییرات به‌روزرسانی شود.
• تست پس از اعمال کد: پس از افزودن کد، حتماً یک محصول ساده را در فروشگاه باز کنید و با تغییر تعداد، از به‌روزرسانی پویا قیمت مجموع اطمینان حاصل کنید.
• سفارشی‌سازی متن “Total”: می‌توانید متن “Total:” را در خط ۱۲ کد به هر متن دلخواه مانند “قیمت نهایی:” یا “مجموع:” تغییر دهید.
• سفارشی‌سازی قالب عدد: در صورت نیاز به نمایش اعداد با جداساز هزارگان، می‌توانید تابع toFixed(2) را با یک تابع سفارشی جایگزین کنید.
• تأثیر بر عملکرد: این کد بسیار سبک است و تأثیر محسوسی بر سرعت بارگذاری صفحه ندارد.

جمع‌بندی

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

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

پرامپت هوش مصنوعی برای تولید تصویر شاخص مقاله

پرامپت: “A 3D glassmorphism minimalist illustration representing a WooCommerce product page with dynamic total price calculation. Show a product card with a quantity selector and a glowing ‘Total:’ display that updates in real-time with a calculator icon. Include a shopping cart icon, a price tag with a currency symbol, and a dynamic number changing from 1 to 3 with a multiplication effect. Gradient background from #2b7fff to #00bba7, modern and clean design, abstract tech art style with transparent glass layers, subtle reflections, and soft shadows, highly detailed, 8k resolution, professional and elegant.”