حل مشكلة إضافة زر “أضف إلى السلة” في منتجات ووكوممارس

في عالم التجارة الإلكترونية، يعتبر WooCommerce واحدًا من أكثر المنصات شعبية لإنشاء متاجر إلكترونية. يوفر WooCommerce مجموعة من الميزات والخيارات لكيفية عرض المنتجات وكيفية التفاعل معها. لكن في بعض الأحيان، يمكن أن تواجه بعض التحديات، مثل تغيير زر "إضافة إلى السلة" على صفحة المنتج المفرد. في هذا المقال، سنستعرض كيف يمكنك حل مشكلة استخدام Hooks في WooCommerce لتغيير زر "إضافة إلى السلة" إلى زر يعرض "سعر حسب الطلب".

التحديات الشائعة في WooCommerce

تظهر التحديات غالبًا عند محاولة تخصيص وظائف WooCommerce لتلبية احتياجات محددة. على سبيل المثال، قد يحتاج بعض المتاجر إلى عرض أسعار المنتجات بشكل مختلف عندما لا تتوفر تكاليف الشحن. مثلًا، في حالة عدم وجود تكلفة شحن محددة، يفضل بعض بائعي التجزئة أن يظهر زر "سعر حسب الطلب" بدلاً من زر "إضافة إلى السلة".

حل المشكلة باستخدام Hooks

لحل المشكلة المذكورة، يمكنك استخدام مجموعة من الدوال المخصصة في WooCommerce. أولاً، يجب عليك التحقق مما إذا كانت تكلفة الشحن فارغة. إذا كان الأمر كذلك، يمكنك إزالة زر "إضافة إلى السلة" وإضافة زر جديد يعرض "سعر حسب الطلب". إليك الخطوات الأساسية لحل هذه المشكلة:

function custom_add_price_on_request_button() {
    global $product;
    $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true);
    if ($shipping_cost === '') {
        echo '<button class="button">سعر حسب الطلب</button>';
    }
}
add_action('woocommerce_after_shop_loop_item', 'custom_add_price_on_request_button', 11);

إزالة زر “إضافة إلى السلة” وإضافة زر جديد

الخطوة التالية هي إزالة زر "إضافة إلى السلة" من الصفحة الفردية للمنتج. لإجراء ذلك، يجب استخدام Hook مناسب. إليك مثالًا عمليًا:

function custom_remove_and_add_cart_button_single() {
    global $product;
    $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true);
    if ($shipping_cost === '') {
        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
        add_action('woocommerce_single_product_summary', 'custom_add_price_on_request_button', 35);
    }
}
add_action('woocommerce_before_single_product_summary', 'custom_remove_and_add_cart_button_single', 1);

تحسين تجربة المستخدم

من خلال تنفيذ هذا التخصيص على موقع WooCommerce الخاص بك، يمكنك تحسين تجربة المستخدم بشكل ملحوظ. الزوار سيكون لديهم فكرة واضحة عن المنتجات التي يمكنهم طلب أسعار لها، وهذا يمكن أن يعزز من فرص البيع والتفاعل.

تطبيق الفلاتر والتخصيصات الأخرى

بالإضافة إلى إزالة زر "إضافة إلى السلة"، يمكنك أيضًا استخدام فلاتر لتخصيص النص المعروض للتسعير. إذا كنت ترغب في تغيير السعر إلى "سعر حسب الطلب" عندما تكون تكلفة الشحن فارغة، استخدم الكود التالي:

add_filter('woocommerce_get_price_html', 'custom_price_on_request', 10, 2);
function custom_price_on_request($price, $product) {
    $shipping_cost = get_post_meta($product->get_id(), '_shipping_cost', true);
    if ($shipping_cost === '') {
        return 'سعر حسب الطلب';
    }
    return $price;
}

نصيحة أخيرة

تأكد دائمًا من اختبار أي تغييرات تقوم بها على موقع WooCommerce الخاص بك. يُفضل إجراء التجارب على بيئة اختبارية (Staging) لضمان عدم تأثير التغييرات على تجربة المستخدم الفعلية.

في الختام، يُعتبر التعامل مع مشاكل Hooks في WooCommerce، مثل "مسألة تغيير زر إضافة إلى السلة" أو "تخصيص زر السعر" مهارة مهمة يمكن أن تحسن بشكل كبير من أداء متجرك الإلكتروني وتوفر تجربة مستخدم أفضل. إذا كنت تواجه أي مشكلات أو تحتاج إلى مزيد من التخصيصات، ففكر في استشارة مطور مختص لتحسين موقعك.