شارك المقال

WooCommerce: كيفية عرض الاختلافات بأزرار اللون / الحجم؟

A VPN is an essential component of IT security, whether you’re just starting a business or are already up and running. Most business interactions and transactions happen online and VPN

عرض صفحات المنتج بشكل جيد هو حلم رائد الأعمال.

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

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

اليوم ، نلقي نظرة على المكونات الإضافية المفيدة التي يمكنك استخدامها لعرض خيارات المنتج (الاختلافات) بطريقة سهلة الاستخدام. لقد استخدمت هذه على العديد من المواقع وهي موثوقة للغاية. كالعادة ، إنها مجرد نقرة على زر!

1. YITH WooCommerce Color and Label Variations Plugin (FREE & PREMIUM)

يأتي المكون الإضافي YITH في إصدار مجاني (متوفر في مستودع WP) وإصدار متميز.

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

يمكنك عرض وصف لكل سمة في صفحة المنتج الفردية

يمكنك إظهار تلميح أداة لكل سمة

يمكنك تخصيص اللون والرسوم المتحركة لمدخل تلميح الأداة

يمكنك تغيير صورة المنتج ديناميكيًا عند تحريك الماوس فوق السمة

يمكنك إظهار جميع السمات في علامة التبويب “معلومات إضافية”

فيما يلي بعض لقطات الشاشة (انقر فوق أي صورة لفتح Lightbox):

2. WooCommerce Attribute Swatches Plugin (PREMIUM)

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

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

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

3. حوامل التنوع لبرنامج WooCommerce الإضافي (مجانًا)

هذا البرنامج المساعد المجاني قابل للتنزيل من مستودع وورد بريس ويحتوي على أكثر من 80000 تثبيت نشط. ومع ذلك ، لم يتم تحديثه منذ يونيو 2020 ويبدو أن الدعم لا يستجيب . بالنسبة لي ، هذا علم أحمر كبير.

حوامل التنوع لبرنامج WooCommerce الإضافي

أ) تحرير السمات الموجودة مثل “اللون”

بمجرد تثبيت المكون الإضافي ، انتقل إلى وورد بريس Dashboard> المنتجات> السمات وافتح إحدى السمات الحالية ، على سبيل المثال “اللون” إذا كان لديك بالفعل.

ستحتوي صفحة تحرير السمة الآن على حقل اختيار جديد يسمى “النوع”. يمكنك الآن اختيار “اللون” من القائمة المنسدلة للإشارة إلى أنك تريد أن تظهر هذه السمة كمنتقي ألوان.

تحرير السمة – Variation Swatches لـ WooCommerce

ب) تحرير شروط السمات الحالية

الآن وقد تم تعيين السمة لحامل التباين (اللون) ، فقد حان الوقت لتعيين اللون المناسب لكل مصطلح سمة.

إذا كان لديك اللون الأحمر والأزرق والأصفر ، فستفتح كل مصطلح وتختار لونًا لكل منها (# ff0000 و # 0000ff و # ffff00 على التوالي).

تعيين الألوان لشروط سمة اللون – حوامل التباين لـ WooCommerce

ج) تحقق من صفحة منتج واحد

هذا كل شيء حقًا! بمجرد حفظ الألوان ، ستعرض صفحة المنتج الفردية الألوان تلقائيًا كحوامل.

النتيجة النهائية مع حوامل الألوان – Variation Swatches لـ WooCommerce

المنشورات ذات الصلة:

WooCommerce: كيفية إضافة أشكال متعددة إلى عربة التسوق مرة واحدة؟

عناوين URL المخصصة لـ WooCommerce “إضافة إلى عربة التسوق” – الدليل النهائي

WooCommerce: احصل على معلومات المنتج (المعرف ، SKU ، $) من $ product Object

WooCommerce: كيفية بيع تخصيصات المنتج والإضافات

WooCommerce: كيفية إضافة خيارات منتج إضافية (الوظائف الإضافية)

توضيح

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

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

أرسل تصحيح

شاركنا رايك وتقييمك للموضوع

{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}