طريقتان فعالتان لتخصيص صفحات منتج WooCommerce (باستخدام CSS والمكوِّن الإضافي)

2 طرق لتخصيص صفحة منتج WooCommerce

يتم استخدام صفحة المنتج الافتراضية لـ WooCommerce من قبل معظم اللاعبين الجدد في صناعة التجارة الإلكترونية. لأن معظمهم مبتدئين ولا يعرفون كيفية تخصيص صفحات منتجات WooCommerce .

لا بأس إذا كنت لا تعرف ذلك أيضًا. إذا كنت مطورًا أو لديك بعض المعرفة الأساسية ، فيمكنك بسهولة إجراء بعض التغييرات الأساسية باستخدام CSS إضافية. ومع ذلك ، يمكنك أيضًا استخدام مكون إضافي مثل كتل ProductX Gutenberg WooCommerce في حالة عدم رغبتك في كتابة الرموز.

دعنا نتعرف على كلتا الطريقتين ويمكنك اتباع الطريقة التي تناسبك بشكل أفضل.

تخصيص صفحة منتج WooCommerce باستخدام CSS إضافية

وفقًا لمنشور المدونة المنشور على الموقع الرسمي لـ WooCommerce ، يمكننا تخصيص صفحات المنتج باستخدام الامتداد الاحترافي المسمى الوظائف الإضافية للمنتج أو باستخدام CSS إضافية.

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

إليك كيفية إضافة CSS إلى موقع WooCommerce الخاص بك.

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

يمكنك هنا إضافة CSS لإجراء التغييرات اللازمة على صفحات منتج واحد. تحقق من قائمة CSS الأكثر استخدامًا لـ WooCommerce.

1. قم بتغيير حجم خط عناوين المنتج

يمكنك استخدام الكود أدناه لتغيير حجم عناوين المنتج. على سبيل المثال ، قم بتغيير 36 بكسل إلى 50 بكسل أو أي شيء تريده. ثم أضف الكود إلى مربع CSS الإضافي وانقر على زر النشر.

2. قم بتغيير لون عناوين المنتج

لتغيير لون عناوين المنتج ، يمكنك استخدام الكود أدناه مع رمز اللون الذي تريده. لذلك ، سيتم استبدال لون عناوين المنتجات باللون الذي تريده.

3. اجعل تسميات التنويعات غامقة

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

4. اجعل تسميات الاختلاف مائلة

للتصميم ، استخدم الكود أدناه لإضافة النمط المائل إلى نص تسمية التنويعات.

5. تغيير لون خلفية زر "الشراء الآن":

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

تخصيص صفحة منتج WooCommerce باستخدام ProductX

إذا كنت لا ترغب في كتابة التعليمات البرمجية لتخصيص صفحات منتج WooCommerce ، فإن ProductX هو الحل الأمثل لك. إنه يوفر برنامج WooCommerce Builder Addon الحصري لإنشاء قوالب مخصصة لـ Shop و Archive و Single Product Pages.

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

الخطوة 1: تثبيت البرنامج المساعد ProductX

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

قم بتثبيت الإصدار المجاني: الإصدار المجاني من ProductX متاح في دليل WordPress. لتثبيت هذا البرنامج المساعد: -

• انقر فوق الزر "إضافة جديد" من قسم البرنامج المساعد.
• ابحث عن ProductX.
• انقر فوق الزر "تثبيت".
• بعد التثبيت اضغط على زر "تفعيل".

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

قم بتثبيت الإصدار الاحترافي: إذا كنت ترغب في الاستفادة الكاملة من المكون الإضافي ProductX ، فمن المستحسن تثبيت الإصدار Pro مع الإصدار المجاني.

يقدم الإصدار الاحترافي عدة حزم بداية Premade ، وقائمة أمنيات WooCommerce ، ومقارنة المنتجات ، و WooCommerce Builder ، وما إلى ذلك.

في البداية ، تحتاج إلى شراء البرنامج المساعد وتنزيل ملف البرنامج المساعد. لتثبيته اتبع الخطوات التالية: -

• انقر فوق الزر "إضافة جديد" من قسم البرنامج المساعد.
• انقر فوق تحميل البرنامج المساعد.
• قم بتحميل ملف البرنامج المساعد الذي تم تنزيله.
• تثبيت وتفعيل البرنامج المساعد.

الخطوة 2: قم بتشغيل WooCommerce Builder

لإنشاء صفحة منتج WooCommerce مخصصة ، يمكنك استخدام الملحق WooCommerce builder الخاص بـ ProductX. لذلك ، تحتاج إلى تشغيل الملحق لبدء استخدامه.

• انتقل إلى قسم جميع الإضافات.
• انقر فوق الملحق منشئ.

بعد تشغيل الملحق ، سيكون هناك قسم Builder مع خيارات أخرى لـ ProductX.

الخطوة 3: إنشاء نموذج جديد

الآن ، يتعين علينا إنشاء قالب صفحة منتج WooCommerce وتخصيصه من البداية. من أجل هذا:

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

الآن قم بتخصيص قالب صفحة منتج WooCommerce باستخدام 13 قالب منتج جديد تم تصميمها بدقة لصفحات منتج واحد.

الخطوة 4: إضافة قالب مسار التنقل وتخصيصه

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

بعد إضافة الكتلة ، يمكننا أيضًا إجراء بعض التغييرات باستخدام الخيارات المتاحة:

• اختر الألوان المرغوبة للنص ، والارتباط ، والارتباط Hover.
• اختر الخطوط المخصصة من عنصر التحكم في الطباعة.
• اضبط الحجم واختر لون الفاصل.

الخطوة 5: إضافة وتخصيص كتلة عمود جوتنبرج

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

الخطوة 6: إضافة وتخصيص كتلة الصورة

الآن ، يمكنك إضافة كتلة الصورة على الجانب الأيسر من العمود. لذلك ، سيتم عرض الصور المميزة والمعرض ديناميكيًا.

بعد إضافة كتلة صورة ، يمكنك اللعب بالخيارات التالية:

• إظهار أو إخفاء صور المعرض.
• إظهار أو إخفاء السهم.
• تخصيص الرمز.
• تخصيص موقف المعرض.

الخطوة 7: قم بإضافة وتخصيص كتلة تصنيف المنتج

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

تأتي مجموعة تصنيف المنتج مع الخيارات التالية:

• حدد الحجم المطلوب.
• اختر المحاذاة المطلوبة.
• اختر Star color.
• اختر لون خلفية النجمة.

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

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

فيما يلي خيارات التخصيص:

• اختر الحجم المطلوب.
• حدد المحاذاة المطلوبة.
• اختر لونًا محددًا.
• تغيير نمط الخط باستخدام الطباعة.

الخطوة 9: قم بإضافة وتخصيص كتلة الوصف المختصر

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

استخدم الخيارات أدناه لتخصيص الكتلة:

• حدد المحاذاة.
• اختر اللون المطلوب.
• تخصيص الطباعة.

الخطوة 10: قم بإضافة وتخصيص قالب سعر المنتج

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

يحتوي Product Price Block على خيارات التخصيص التالية:

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

الخطوة 11: قم بإضافة وتخصيص كتلة مخزون المنتج

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

فيما يلي خيارات التخصيص لكتلة مخزون المنتج

• اختيار المحاذاة.
• اختيار اللون.
• التحكم في الطباعة.

الخطوة 12: قم بإضافة عنصر إضافة إلى عربة التسوق وتخصيصه

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

فيما يلي خيارات التخصيص:

• إظهار أو إخفاء كمية المنتج.
• إظهار أو إخفاء مقارنة المنتج وقائمة الرغبات.
• اختر الإضافة إلى لون عربة التسوق.
• اختر لون الكمية.

الخطوة 13: قم بإضافة وتخصيص كتلة تعريف المنتج

ستتم إضافة رمز SKU للمنتج والفئة والعلامات تلقائيًا إلى صفحات المنتج بعد إضافة هذه الكتلة إلى قالب منتج واحد.

فيما يلي خيارات التخصيص لهذه الكتلة:

• إظهار أو إخفاء SKU والفئة والعلامة.
• اختر لون العناوين الوصفية.
• التحكم في الطباعة.

الخطوة 14: إضافة قالب علامة تبويب المنتج وتخصيصه

علامة تبويب المنتج عبارة عن مزيج من ثلاث كتل (وصف المنتج ، ومعلومات إضافية ، ومراجعات) تحتوي على أجزاء مختلفة من المعلومات حول منتجات WooCommerce.

فيما يلي خيارات التخصيص:

• إظهار أو إخفاء أي من علامات التبويب.
• التحكم في الطباعة.
• اختر ألوانًا للنص ، والخلفية ، وخلفية التمرير.

الخطوة 15: قم بإضافة وتخصيص المنتجات ذات الصلة والمبيعات الأعلى

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

لإضافة المنتجات ذات الصلة:

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

لإضافة منتجات مبيعاً:

• إضافة كتلة شبكة المنتج.
• قم بتغيير عنوان الكتلة إلى منتجات Up-Sell.
• قم بفرز المنتجات على أنها منتجات مبيعًا باستخدام ميزة الاستعلام السريع.

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

تحسين على الصفحة أثناء تخصيص صفحات منتج واحد

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

فيما يلي بعض نصائح التحسينات الرئيسية على الصفحة لزيادة حركة المرور العضوية.

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

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

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

ركز أيضًا على تحسين العناوين والأوصاف التعريفية لزيادة معدل النقر.

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

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

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

خاتمة

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