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

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

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

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

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

كيفية تخصيص صفحة منتج WooCommerce باستخدام الميزات المضمنة

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

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

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

كيفية تخصيص صفحة منتجك باستخدام ملحقات WooCommerce

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

1. تنوع المنتج المتقدم لـ WooCommerce

المنتجات المتغيرة هي عناصر ذات خيارات مثل الحجم واللون - اختيارات يقوم بها المتسوق قبل إتمام الدفع. في الواجهة الأمامية ، يعرض WooCommerce قائمة منسدلة لكل سمة (مثل الحجم أو اللون) مع قائمة بالأشكال المتاحة أدناه (مثل صغير أو متوسط ​​أو كبير).

للحصول على أسلوب مرئي أكثر ، يتيح لك Advanced Product Variation لـ WooCommerce عرض أشكال المنتج مع الحوامل (الألوان والصور والنصوص) والمعارض والجداول. يمكنك حتى تضمين مقاطع فيديو في حواملك.

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

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

تعرف على المزيد حول تنوع المنتج المتقدم لـ WooCommerce.

2. WooCommerce Tab Manager

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

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

باستخدام WooCommerce Tab Manager ، يمكنك إعادة تسمية علامات التبويب الافتراضية وإعادة ترتيبها وإزالتها - الوصف المطول والمعلومات الإضافية والمراجعات - وتخصيص هذا القسم عن طريق إنشاء علامات التبويب العالمية الخاصة بك على مستوى الفئة والمخصصة للمنتج.

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

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

تعرف على المزيد حول WooCommerce Tab Manager.

3. أسئلة وأجوبة المنتج

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

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

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

تعرف على المزيد حول الأسئلة الشائعة حول المنتج.

4. المنتجات المركبة

باستخدام المنتجات المركبة ، يمكن لعملائك إنشاء مجموعات أو منتجات قابلة للتكوين.

لكل منتج مركب ، ستسمح للعملاء بالاختيار بين التحديدات المحددة مسبقًا من المخزون الحالي. يمكنك تعيين رسوم إضافية لتحديدات معينة والسماح بفئات معينة لتكون اختيارية.

على سبيل المثال ، قد تحتوي القلادة على خيارات للسلسلة (الفضة والذهب) والحجر (الياقوت والعقيق والزمرد) وسحر اختياري (خيارات متعددة للشكل).

لكل من اللبنات الأساسية للمجموعة - السلسلة والحجر والسحر - يمكنك تحديد وحدات SKU التي يمكن للعميل الاختيار من بينها أو السماح لهم باختيار أي خيار من فئة المنتج بأكملها.

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

تعرف على المزيد حول المنتجات المركبة.

5. إضافات المنتج

يتيح ملحق Product Add-Ons للمتسوقين تخصيص مشترياتهم وترقيتها من خلال الإضافات المجانية والمدفوعة.

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

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

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

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

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

تعرف على المزيد حول إضافات المنتج.

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

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

اختر "تصفح جميع القوالب" من القائمة المنسدلة أعلى منتصف الصفحة. اختر قالب منتج واحد من القائمة التي تظهر.

يحتوي تخطيط الصفحة الافتراضي على رأس وتذييل وكتلة WooCommerce Single Product ، والتي تعرض معلومات المنتج والسعر وعناصر الصورة.

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

كيفية تحرير قوالب رأس وتذييل صفحة منتج واحد

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

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

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

كيفية تخصيص هيكل المنتج الفردي

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

ومع ذلك ، يمكنك إضافة كتل جديدة حول كتلة منتج واحد لتخصيص تصميم صفحة منتجك بالكامل.

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

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

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

تخصيص صفحة المنتج الخاص بك يدويًا (باستخدام التعليمات البرمجية والخطافات)

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

قبل إجراء أي تغييرات على ملفاتك ، من المهم أن تأخذ الوقت الكافي لعمل نسخة احتياطية من WooCommerce. إذا كنت تستخدم Jetpack VaultPress Backup ، فسيتم ذلك تلقائيًا في الوقت الفعلي. لذلك إذا تسبب أي من التغييرات في تعطل موقعك ، فيمكنك استعادة نسخة احتياطية بنقرات قليلة ، حتى إذا لم يكن لديك حق الوصول إلى لوحة معلومات WordPress الخاصة بك.

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

تخصيص صفحات منتجات WooCommerce باستخدام الخطافات

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

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

فيما يلي بعض الأمثلة الأخرى للتغييرات التي يمكنك إجراؤها على صفحات المنتج باستخدام الخطافات:

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

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

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

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

 .woocommerce div.product .product_title { color: #222222; }

إذا أردت تغيير لون زر الشراء الآن ، فستستخدم هذا الرمز ، مع استبدال الرمز السداسي العشري باللون الذي تختاره:

 .woocommerce div.product .button {   background: #000000; }

يمكنك مشاهدة المزيد من الأمثلة في هذه المقالة من WooCommerce.

كيفية زيادة سرعات تحميل صفحة المنتج الخاص بك

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

يتم احتساب كل ثانية حرفيًا - يمكن أن يؤدي التأخير لمدة ثانية واحدة في أوقات التحميل إلى تقليل معدلات التحويل بنسبة 20٪!

Jetpack Boost هو أفضل حل لتحسين أداء وسرعة موقع الويب لبرنامج WordPress. لديه عملية إعداد سريعة وسهلة - لا حاجة إلى مطور - ويفتخر بالنتائج التي تفوقت على أفضل خمسة مكونات إضافية للأداء في اختبار وجهاً لوجه.

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

تسهل لوحة المعلومات البسيطة تكوين خيارات التحسين عبر عمليات التنشيط بنقرة واحدة. يمنحك هذا المرونة لاختبار وحدات الأداء بشكل فردي وتكوين Jetpack Boost لتلائم تمامًا أي سيناريو.

لمزيد من الطرق لتسريع صفحات منتجك ، تحقق من تسع طرق لتسريع متجر WooCommerce.

الأسئلة المتداولة حول تخصيص صفحات المنتج

لا يزال لديك أسئلة؟ ألق نظرة على إجابات بعض الإجابات الشائعة أدناه.

ما هي أفضل طريقة لتخصيص صفحة منتج WooCommerce؟

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

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

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

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

هل يجب أن أقوم بعمل نسخة احتياطية من موقعي قبل تحرير قالب صفحة المنتج؟

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

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

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

باستخدام Jetpack VaultPress Backup ، يمكنك استعادة موقعك بنقرة واحدة والعودة إلى الإنترنت بسرعة. باستخدام تطبيق Jetpack للجوال ، يمكنك الاستعادة في أي وقت وفي أي مكان ، حتى إذا كان الموقع معطلاً تمامًا.

أفضل جزء لأصحاب المتاجر؟ جميع بيانات العملاء وأوامرهم محمية وتظل محدثة.

ما هي بعض أفضل الممارسات لتخصيص صفحة منتج WooCommerce؟

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

قم بعمل نسخة احتياطية من موقعك أولاً ، في كل مرة . عند إضافة أو تحديث رمز الموقع ، يمكن أن يتسبب خطأ واحد في حدوث مشكلات. يجب أن تكون جاهزًا لاستعادة الموقع في أسرع وقت ممكن ، دون أن تفقد طلبًا واحدًا. Jetpack VaultPress Backup هو أفضل حل للنسخ الاحتياطي التلقائي في الوقت الفعلي لبرنامج WordPress.

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

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

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

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