شارك المقال

كيفية تخصيص قالب صفحة منتج 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 بشكل مرئي باستخدام Elementor.

قم بإنشاء متجر WooCommerce أفضل باستخدام Elementor

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

لذا ، هل تريد تخصيص صفحات منتج WooCommerce الخاصة بك؟ حسنًا ، أنت محظوظ!

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

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

لحسن الحظ ، لقد ولت تلك الأيام – بفضل Elementor WooCommerce Builder .

الآن ، يمكنك التحكم الكامل في تصميمك وتخطيط صفحة المنتج بقوة Elementor Pro. لا حاجة لدمج الإجراءات أو الخطافات ، أو الخوض في ملفات PHP المختلفة. يتم إجراء كل تخصيص للتصميم في الواجهة الأمامية ، مباشرةً من Elementorpage builder.

قالب منتج WooCommerce الافتراضي

تبدو صفحة منتج WooCommerce الأساسية كما يلي:

صفحة منتج دورة المياه الافتراضية

باستخدام Elementor ، يمكنك اللعب مع تخطيط قالب صفحة المنتج كيفما تشاء. في هذا الدليل ، ستتعلم كيفية إنشاء تصميم صفحة المنتج هذا:

منتجات WooCommerce كأنواع منشورات مخصصة

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

كيفية تخصيص صفحة منتج WooCommerce

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

بعد الإعداد ، يجب أن يكون لديك WooCommerce مثبتًا ، وإضافة بعض المنتجات ذات الصلة إلى موقعك.

يجب أيضًا تثبيت Elementor & Elementor Pro للحصول على إمكانات التصميم المرئي.

ملحوظة! إذا لم يتم تنشيط WooCommerce ، فلن تتمكن من الوصول إلى قوالب منتجات Elementor.

الخطوة 1: قم بإنشاء نموذج منتج واحد

إنشاء قالب صفحة المنتج

لبدء تصميم قالب المنتج الفردي في Elementor ، سوف نتبع إجراءً مشابهًا لإنشاء القالب الفردي العادي .

الخطوة 2: اختر قالب صفحة منتج مُصمم مسبقًا ، أو أنشئ واحدًا من البداية

أمثلة على صفحة المنتج

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

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

باستخدام Elementor ، لديك تحكم كامل في التخصيص على تخطيط ونمط صفحة المنتج.

الخيار الآخر هو بنائه من الصفر. في لوحة التحرير ، يمكنك رؤية الحاجيات الخاصة للمنتج.

الخطوة 3: أضف Product Widgets التي ستشكل صفحتك

ملحوظة!

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

مخطط صفحة منتج WooCommerce

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

القطعة عنوان المنتج

أداة Woo Breadcrumbs

القطعة صورة المنتج

أداة تصنيف المنتج

أداة الوصف المختصر

القطعة سعر المنتج

إضافة إلى القطعة عربة التسوق

أداة تعريف المنتج

علامات تبويب بيانات المنتج

المنتجات ذات الصلة

القطعة Upsells

كما ترى في الفيديو ، لديك الحرية الكاملة للتلاعب بالتخطيط وتحريك العناصر.

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

الخطوة 4: معاينة صفحة المنتج بمنتج آخر

منتجات WooCommerce كأنواع منشورات مخصصة

للتأكد من أن قالب المنتج الخاص بك يحتوي على التصميم الصحيح ، يُنصح بمعاينته مع العديد من المنتجات المختلفة.

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

الخطوة 5: اضبط الشروط

شروط العرض

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

انقر فوق “نشر” – ويتم نشر منتجك الفردي!

كيفية استخدام WooCommerce Product Table مع Elementor

المكافأة: تخصيص صفحة متجر المنتج الخاص بك

قالب صفحة منتج WooCommerce

لإكمال المهمة ، صمم صفحة كتالوج للمنتجات التي ستؤثر على جميع المنتجات على الموقع أو حسب الفئة. لذلك أولاً ، ارجع إلى Elementor> My Templates ، وأنشئ قالب أرشيف منتج.

بعد ذلك ، حدد نموذجًا موجودًا ، أو أنشئ واحدًا.

أضف أداة منتجات الأرشيف وعنوان الأرشيف ، وخصص تصميمهما.

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

في إعدادات أرشيف المنتجات ، ضمن الاستعلام> المصادر ، اختر أحدث المنتجات. ثم ضمن فئة المنتج ، اختر الحلقات. بهذه الطريقة ، ستظهر فئة الحلقة فقط.

مرر على ترقيم الصفحات إذا كانت لديك قائمة طويلة من المنتجات للفئة.

في علامة تبويب النمط ، يمكنك تصميم المسافة بين الأعمدة والصفوف. اضبط الألوان والخطوط والمزيد.

قبل النشر ، اختر الشروط لتحديد مكان ظهور الأرشيف ، تمامًا كما فعلت مع قالب المنتج الفردي.

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

استنتاج

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

توضيح

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

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

أرسل تصحيح

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

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