هل أنت هنا لتمكين WooCommerce Product Attributes Images Swatches للمنتجات المتغيرة في سمة Flatsome؟

رائعة! انت في المكان الصحيح

إذا اتبعت برنامجنا التعليمي الأخير حول كيفية إنشاء حوامل ألوان WooCommerce ، فستجد هذا البرنامج التعليمي سهلاً.

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

كيفية تمكين صور سمات WooCommerce في نسق Flatsome

تثبيت حوامل تنوع WooCommerce Attribute والمكوِّن الإضافي للصور هو نفس تثبيت مكونات WordPress الإضافية الأخرى في سمة Flatsome. فقط قم بتحميله وتنشيطه من الإضافات >> إضافة جديد . واتبع الخطوات التالية لتكوينه.

الخطوة 01: إنشاء سمة الصورة

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

اترك حقل Slug فارغًا. يقوم النظام تلقائيًا بإنشاء ارتباط ثابت للسمة. حدد الصورة من القائمة المنسدلة " نوع السمة". اضغط على زر إضافة سمة لحفظ التغييرات.

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

الخطوة 02: إنشاء متغيرات السمات

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

لأغراض التوضيح ، سنضيف ثلاثة أشكال مختلفة. رامي والجلود والصوف .

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

عند اكتمال تحديد صورتك ، اضغط على الزر "إضافة صورة جديدة " لإنهاء العملية

مثل قائمة السمات. سيتم إنشاء قائمة متنوعة للصور على النحو التالي.

الخطوة 03: تمكين تباين السمات في المنتج المتغير

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

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

حدد سمة الصورة وانقر فوق إضافة . يمكنك رؤية الشاشات التالية تظهر بعد ذلك.

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

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

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

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

تذكر ! لا تنس إضافة السعر في كل شكل ، وإلا فلن تكون الاختلافات مرئية في الواجهة الأمامية للمنتج.

إذا كنت تستطيع إضافة الاختلاف بنجاح. يمكنك رؤية العينات التالية في الواجهة الأمامية للمنتج.

إعدادات بسيطة

تعد حوامل تنوع WooCommerce والصور مكونًا إضافيًا قويًا. يسمح لك بتمكين تلميح الأدوات وتعطيل ورقة الأنماط الافتراضية للمكون الإضافي والتبديل بين الأشكال المستديرة والمربعة.

إذا كنت ترغب في تحديد نمط الشكل من Round to Square وتمكين Tooltip ، فإن صفحة منتج الواجهة الأمامية تبدو كما يلي.

إعدادات متقدمة

لتوفير المرونة المطلقة ، يقدم المكون الإضافي WooCommerce Attribute Image Swatches عدة إعدادات متقدمة لمنحك المزيد. تسمح لك الإعدادات بالتحكم في عرض حوامل التباين والارتفاع وحجم الخط. الجزء الرائع الذي سننشره هو خيار سلوك السمة لتقديم التباين خارج المخزون بذكاء. يمكن أن يجعل سلوك السمة من تباين المخزون طمسًا وإخفاءًا وتقاطعًا.

إذا حددت خيار Blur من Attribute Behavior ، فسيبدو الاختلاف خارج المخزون مثل لقطة الشاشة التالية.

تخصيص Tooltip و Swatch في المتجر / صفحات الأرشيف

يعد تخصيص صورة تلميح الأدوات وتمكين الحوامل ميزة مميزة لهذا المكون الإضافي. لتمكين هذا ، يجب عليك تنزيل الإصدار المميز من المكون الإضافي WooCommerce Variation Swatches أولاً.

قم بتمكين تلميح الأداة

يمكنك تخصيص خلفية تلميح الأداة ولون النص من الإعدادات المتقدمة . تحقق من لقطة الشاشة التالية لتخصيص نمط تلميح الأداة.

تبدو معاينة الواجهة الأمامية لتلميح الأداة مثل لقطة الشاشة التالية.

قم بتمكين العينات على صفحات المتجر

لتمكين حوامل الصور على صفحات المتجر. انتقل إلى صفحة الأرشيف / المتجر . تحقق من إعدادات العرض في الأرشيف لإظهار عينات الصور في صفحة المتجر / الأرشيف. حتى في سمة Flatsome ، يمكنك تمكين الحوامل قبل وبعد الإضافة إلى زر عربة التسوق في المتجر من إعدادات Archive Swatches Position . علاوة على ذلك ، يمكنك التحكم بشكل حصري في حجم حامل تباين الصورة من هذه الإعدادات.

بعد تمكين الحوامل في صفحة المتجر ، يبدو الأمر كما لو كان لقطة الشاشة التالية.

استنتاج:

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