تعطيل التغييرات وإضافة suffix مخصص للمنتجات غير المتوفرة

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

تعديل المتغيرات الغير متوفرة في ووكومرس

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

لتحقيق هذا، يمكن استخدام الفلاتر في ووكومرس التي تمنع ظهور المتغيرات غير المتاحة. على سبيل المثال، يمكننا استخدام الكود التالي لتعطيل المتغيرات التي لا تحتوي على مخزون:

add_filter('woocommerce_variation_is_active', 'bbloomer_grey_out_variations_out_of_stock', 10, 2);
function bbloomer_grey_out_variations_out_of_stock($is_active, $variation) {
    if (!$variation->is_in_stock()) return false;
    return $is_active;
}

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

إضافة لاحقة “غير متوفر” للمتغيرات الغير متاحة

لتمكين ظهور اللاحقة "غير متوفر"، يُمكن استخدام Javascript أو jQuery الذي يقوم بالتحقق من حالة المخزون لكل متغير. إليك مثالاً عن كيفية تحقيق ذلك:

add_action('wp_footer', 'custom_inline_jquery_script');
function custom_inline_jquery_script() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('select.variations select').each(function() {
                var $select = $(this);
                $select.find('option').each(function() {
                    if ($(this).data('stock') == 'outofstock') {
                        $(this).text($(this).text() + ' (غير متوفر)');
                        $(this).prop('disabled', true);
                    }
                });
            });
        });
    </script>
    <?php
}

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

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

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

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

في النهاية، من المهم اتباع الطرق الفعالة لتحسين واجهة المستخدم وتقديم تجربة سلسة ومريحة، مما يسهم في زيادة مبيعات المتجر واستمراريته في السوق.