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


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

محتواهای رایگان آموزش سفارشی سازی سایت

آنچه در این مقاله می خوانید:

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

فرض کنید که کاربر شما از یک محصول دو یا سه عدد به سبد خود می افزاید، حال برای اینکه متوجه شود که این تعداد چه قیمتی هست باید به سبد خرید مراجعه کند. حال ما به کمک یک تکه کد این تعداد را در برگه تک محصول می افزاییم تا کار یوزر شما راحت تر شود و واسط کاربری سایت شما بهبود یابد.
بعد از استفاده از تکه کد تغییرات بدین شکل می باشد. 

 

لازم به ذکر است که قبلا درستی این تکه کد در قالب وودمارت تست شده است و برای محصولات ساده قابل استفاده است.

حال برای اینکه چنین امکاناتی را به سایت خود بیافزایید حتما باید مراحل زیر را طی کنید.

  1. وارد پیشخوان وردپرس خود شوید.
  2. از سمت چپ نمایش را انتخاب کنید.
  3. به بخش سفارشی سازی بروید.
  4. در سمت چپ توابع پوسته را مشاهده می کنید.

جایگذاری تکه کد در پوسته

در انتهای این بخش تکه کد را بارگذاری نمایید.

add_action( 'woocommerce_after_add_to_cart_button', 'woocommerceir_product_price_recalculate' );
 
function woocommerceir_product_price_recalculate() {
   global $product;
   echo '<div id="subtot" style="display:inline-block;">Total: <span></span></div>';
   $price = $product->get_price();
   $currency = get_woocommerce_currency_symbol();
   wc_enqueue_js( "      
      $('[name=quantity]').on('input change', function() { 
         var qty = $(this).val();
         var price = '" . esc_js( $price ) . "';
         var price_string = (price*qty).toFixed(2);
         $('#subtot > span').html('" . esc_js( $currency ) . "'+price_string);
      }).change();
   " );
}

این تکه کد یکی از چندین تکه کدی است که ما تصمیم گرفتیم با شما به اشتراک بگذارید تا بتوانید از طریق آموزش ووکامرس به زبان ساده و کاملا حرفه ای یک سایت طراحی کنید یا سفارش سایت فروشگاهی بپذیرید و سایت طراحی کنید و به در آمد برسید.

5/5 - (1 امتیاز)

بدون دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *