كيفية إضافة صورة إلى المنتج في WooCommerce

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

أهمية الصور في التجارة الإلكترونية

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

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

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

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

كيفية إضافة صور إلى منتج في WooCommerce

هناك طريقتان رئيسيتان لإضافة الصور إلى المنتجات في WooCommerce:

1. استخدام لوحة تحكم WooCommerce
2. برمجيا

دعونا نلقي نظرة على كلتا الطريقتين.

1) أضف صورًا من لوحة معلومات WooCommerce

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

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

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

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

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

2) كيفية إضافة صورة إلى منتج WooCommerce برمجيًا

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

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

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

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

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

2.1) إضافة صورة مميزة لمنتج واحد

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

 وظيفة QuadLayers_add_featured_image () {

    معرف الصورة $ = 48 ؛ // معرف الصورة
    post_id دولار أمريكي = 195 ؛ //معرف المنتج

    set_post_thumbnail ($ post_id، $ imageID) ؛
    
}

add_action ('init'، 'QuadLayers_add_featured_image')؛

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

2.2) إضافة صورة مميزة لمنتجات متعددة

وبالمثل ، يمكنك فعل الشيء نفسه مع العديد من المنتجات ببساطة عن طريق إضافة معرفاتهم. سيضيف هذا البرنامج النصي الصورة ذات المعرف 53 إلى المنتجات ذات المعرفات 32 و 33 و 34.

 الوظيفة QuadLayers_multiple_featured_image () {

    معرف الصورة $ = 53 ؛ // معرف الصورة
    post_id $ = مجموعة (32،33،34) ؛ // معرفات المنتج

    لـ ($ ii = 0؛ $ ii <count ($ post_id)؛ $ ii ++) { 
          
           set_post_thumbnail ($ post_id [$ ii]، $ imageID)؛      
    }
    
}
add_action ('init'، 'QuadLayers_multiple_featured_image') ؛

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

2.3) إضافة الصور إلى معرض المنتج

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

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

 الوظيفة QuadLayers_create_gallery () { 
        imgs_ids $ = مجموعة (48،53،47) ؛ // معرفات الصورة
        add_img_to_gallery (195، imgs_ids دولارًا) ؛ // معرف المنتج
}
الوظيفة add_img_to_gallery ($ product_id ، $ image_id_array) {
        update_post_meta ($ product_id، '_product_image_gallery'، implode ('،'، $ image_id_array)) ؛ 
  
}
add_action ('init'، 'QuadLayers_create_gallery')؛

2.4) تعيين صورة افتراضية للمنتجات بدون صورة مميزة

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

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

 add_filter ('QuadLayers_default_image'، 'custom_woocommerce_placeholder_img_src') ؛

الوظيفة QuadLayers_default_image ($ src) {
	$ upload_dir = wp_upload_dir () ،
	$ uploads = untrailingslashit ($ upload_dir ['baseurl'])؛
	// استبدل المسار إلى صورتك
	$ src = $ التحميلات. "/2021/07/album-1.jpg" ؛
	 
	عودة src $؛
}

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

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

كيفية إضافة أحجام الصور المخصصة

بصرف النظر عن إضافة صورة إلى منتج WooCommerce ، هناك المزيد الذي يمكنك القيام به لتخصيص العناصر الخاصة بك. الخيار الجيد هو إنشاء أحجام صور مخصصة. بشكل افتراضي ، يتضمن WordPress 3 أحجام للصور: صورة مصغرة (150 × 150) ومتوسطة (300 × 300) وكبيرة (1024 × 1024). يمكنك بسهولة تغيير هذه الأحجام من لوحة القيادة ، ولكن ماذا لو كنت تريد إضافة أحجام افتراضية مخصصة بدلاً من ذلك؟ دعونا نرى كيف نفعل ذلك.

أولاً ، افتح ملف jobs.php والصق الكود التالي:

add_theme_support( 'post-thumbnails' );

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

 add_image_size( 'post-thumbnail size' , 800, 240 ); add_image_size( 'homepage-thumb size' , 220, 180 ); add_image_size( 'fullpage-thumb size' , 590, 790 );

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

المكافأة: إزالة أحجام الصور الافتراضية في WordPress

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

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

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

 add_filter ('intermediate_image_sizes_advanced'، 'prefix_remove_default_images') ؛ 
// سيؤدي ذلك إلى إزالة الحجم الافتراضي للصورة المتوسطة. 
دالة prefix_remove_default_images (أحجام $) { 
unset (أحجام $ ['medium']) ؛ // 300 بكسل 
عودة أحجام دولار؛
}

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

 add_filter ('intermediate_image_sizes_advanced'، 'prefix_remove_default_images') ؛ 
// سيؤدي ذلك إلى إزالة الحجم الافتراضي للصور المتوسطة والكبيرة. 
دالة prefix_remove_default_images (أحجام $) { 
unset (أحجام $ ['medium']) ؛ // 300 بكسل
unset (أحجام $ ['large']) ؛ // 1024 بكسل 
عودة أحجام دولار؛
}

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

استنتاج

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

في هذا الدليل ، رأينا طريقتين مختلفتين لإضافة صورة إلى منتج WooCommerce:

• من لوحة معلومات WooCommerce
• برمجيا

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

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

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

لمزيد من البرامج التعليمية لتخصيص متجرك ، تحقق من المنشورات التالية:

• كيفية تخصيص صفحة المتجر في WooCommerce
• الدليل: كيفية تحرير صفحة WooCommerce Thank You برمجيًا
• الدليل الكامل لتحسين عملية الدفع