من وجهة نظر UX ، قد يتمتع عملاء التجارة الإلكترونية ببعض التحسينات على صفحة منتج واحد لـ WooCommerce. بمجرد زيادة كمية الإضافة إلى سلة التسوق ، سيكون من الجيد إعادة حساب سعر المنتج أو ربما ظهور سطر “إجمالي” بحيث يعرف المستخدمون دائمًا المبلغ الذي هم على وشك إضافته إلى سلة التسوق.
بصراحة ، من الصعب شرح ذلك بهذه الطريقة ، لذا فإن الأفضل هو إلقاء نظرة على لقطة الشاشة. يتمتع!
سعر المنتج 34 دولارًا والكمية 10 ، لذلك أصبح “الإجمالي” الآن 340 دولارًا. كلما تغيرت الكمية ، يقوم “الإجمالي” بتحديث قيمته.
/**
* @snippet Calculate Subtotal Based on Quantity - WooCommerce Single Product
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 4.1
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_action( 'woocommerce_after_add_to_cart_button', 'bbloomer_product_price_recalculate' );
function bbloomer_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();
" );
}WooCommerce: تعيين الحد الأدنى لمبلغ الشراء لمنتج معين
WooCommerce: تعطيل نطاق سعر المنتج المتغير $$$ – $$$
WooCommerce: إخفاء السعر وإضافته إلى عربة التسوق للمستخدمين الذين قاموا بتسجيل الخروج
WooCommerce: أضف حقول منتج مخصصة (مثل RRP) بدون مكون إضافي
WooCommerce: POA / Call for Price @ Single Product
WooCommerce: تعطيل نطاق أسعار المنتجات المجمعة $$$ – $$$
WooCommerce: قم بتغيير كمية إضافة إلى عربة التسوق في قائمة اختيار المنسدلة
WooCommerce: التسعير الديناميكي المجمع بدون مكون إضافي
WooCommerce: تعيين / تجاوز سعر المنتج برمجيًا
WooCommerce: أضف رمزًا إلى أزرار إضافة إلى عربة التسوق
يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”
يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.
إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂
تحقق من دروس الفيديو المجانية هذه. يمكنك تعلم كيفية تخصيص WooCommerce بدون مكونات إضافية غير ضرورية ، وكيفية تكوين إعدادات البرنامج المساعد WooCommerce بشكل صحيح وحتى كيفية إتقان استكشاف أخطاء WooCommerce في حالة حدوث خطأ!
