اجعل زر “عرض السلة” مرئيًا لمنتجات السلة في ووكومرس

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

لماذا يجب الحفاظ على زر “عرض السلة” مرئيًا؟

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

طريقة إضافة زر “عرض السلة” باستخدام شيفرة بسيطة

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

تنفيذ الشيفرة اللازمة

يمكنك استخدام الفلتر التالي في ملف functions.php للقالب الفرعي الخاص بك:

add_filter( 'woocommerce_loop_add_to_cart_link', 'replace_loop_add_to_cart_button', 10, 3 );
function replace_loop_add_to_cart_button( $html, $product, $args  ) {
    $view_cart_text = esc_html__('عرض السلة', 'woocommerce'); // تحديد نص الشاشة
    foreach ( WC()->cart->get_cart() as $item ) {
        if ( $item['data']->supports( 'ajax_add_to_cart' ) && $product->get_id() == $item['product_id'] ) {
            $class = esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' );
            $html  = str_replace($class, $class . ' added', $html); 
            $html .= sprintf( 
                '%s', 
                wc_get_cart_url(), $class, $view_cart_text 
            );
        }
    }
    return $html;
}

تعمل هذه الشيفرة على تغيير صيغة زر “إضافة إلى السلة” ليظهر زر “عرض السلة” للمنتجات الموجودة في السلة بشكل تلقائي.

تعديل لون زر “عرض السلة”

لتحسين تجربة المستخدم حتى أكثر، يمكنك تغيير ألوان الأزرار لتكون مميزة وواضحة. بدلاً من استخدام JavaScript للقيام بذلك، يمكنك ببساطة استخدام CSS.

إضافة تعديلات CSS

يمكنك إضافة القوانين التالية في ملف style.css للقالب الفرعي:

a.ajax_add_to_cart, a.added_to_cart{background-color: green !important;}
a.ajax_add_to_cart.added{background-color: grey !important;}

باستخدام هذه القوانين، ستكون أزرار الإضافة إلى السلة واضحة وجذابة.

استنتاج

إن الحفاظ على زر “عرض السلة” مرئيًا للمنتجات الموجودة في السلة يعد خطوة بسيطة لكنها فعّالة لتحسين تجربة المستخدم في متاجر WooCommerce. من خلال استخدام الفلاتر المناسبة وإجراء تعديلات CSS، يمكنك توفير وصول سريع وسهل للعميل إلى سلتهم. وبالتالي، يمكنك تعزيز معدل التحويل وتقليل معدل التخلي عن السلة. إذا كنت تسعى لتحسين أداء متاجرك الإلكترونية، فعليك التفكير في هذه الطريقة كحل. حافظ على زر “عرض السلة” مرئيًا، واستمتع بالتجربة التسويقية المعززة!