كيفية تحرير صفحة منتج WooCommerce برمجيًا

نشرت: 2021-01-09

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

تخصيص صفحة المنتج

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

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

مع الإضافات
برمجيا

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

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

كيفية تحرير صفحة منتج WooCommerce برمجيًا

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

باستخدام الخطافات
1. إزالة العناصر
2. أعد ترتيب العناصر
3. أضف عناصر جديدة
4. تطبيق المنطق الشرطي
  1. تم تسجيل الدخول إلى دور المستخدم والمستخدم
  2. معرفات المنتجات والتصنيفات
5. تحرير علامات التبويب المنتج
6. دعم للمنتجات المتغيرة
تجاوز ملفات قالب WooCommerce
1. قم بتحرير المعلومات الوصفية
2. قم بالتبديل إلى قالب مخصص لفئة منتج معينة
  1. قم بتحرير ملف single-product.php
  2. قم بإنشاء ملف محتوى واحد product.php جديد
  3. قم بإنشاء قالب مخصص لتحرير ملف content-single-product.php الجديد الخاص بك
تخصيص صفحة المنتج بنصوص CSS

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

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

single-product.php : يقوم ببناء القالب المطلوب للتخطيط الحالي
content-single-product.php : يقوم هذا الملف بطباعة المحتوى في القالب

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

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

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

1) قم بتحرير صفحة منتج WooCommerce باستخدام الخطافات

ملاحظة : إذا لم تكن معتادًا على WooCommerce hooks وكيفية استخدامها ، فراجع هذا الدليل.

1.1) إزالة العناصر من صفحات منتج واحد

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

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

 remove_action(/* hook -> */'woocommerce_single_product_summary', /* callback function ->*/ 'woocommerce_template_single_title', /* position ->*/5 );

ستجد جميع الخطافات والمعلمات ذات الصلة هنا أو في التعليقات في ملف content-single-product.php الخاص بملحق WooCommerce. الآن ، دعنا نلقي نظرة على بعض نماذج البرامج النصية الأخرى لإزالة العناصر المختلفة وتخصيص صفحة المنتج.

 // إزالة العنوان
remove_action ('woocommerce_single_product_summary'، 'woocommerce_template_single_title'، 5) ؛
// إزالة تصنيف النجوم
remove_action ('woocommerce_single_product_summary'، 'woocommerce_template_single_rating'، 10) ؛
// إزالة وصف المنتج 
remove_action ('woocommerce_single_product_summary'، 'woocommerce_template_single_meta'، 40) ؛
// إزالة الوصف
remove_action ('woocommerce_single_product_summary'، 'woocommerce_template_single_excerpt'، 20) ؛
// إزالة الصور
remove_action ('woocommerce_before_single_product_summary'، 'woocommerce_show_product_images'، 20) ؛
// إزالة المنتجات ذات الصلة
remove_action ('woocommerce_after_single_product_summary'، 'woocommerce_output_related_products'، 20) ؛
// إزالة علامات تبويب المعلومات الإضافية
remove_action ('woocommerce_after_single_product_summary'، 'woocommerce_output_product_data_tabs'، 10) ؛

1.2) إعادة ترتيب العناصر

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

 // تغيير ترتيب الوصف
remove_action ('woocommerce_single_product_summary'، 'woocommerce_template_single_excerpt'، 20) ؛
add_action ('woocommerce_single_product_summary'، 'woocommerce_template_single_excerpt'، 6) ؛

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

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

1.3) إضافة عناصر جديدة

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

 add_action ('woocommerce_before_single_product_summary' ، الوظيفة () {
  printf ('<h4> <a href="؟added-content"> تهانينا ، لقد أضفت رابطًا للتو! </a> </h4>')؛
}
) ؛

woocommerce_before_single_product_summary تخصيص صفحة منتج ربط بدلاً من ذلك ، يمكنك إنشاء وظيفتك الخاصة:

 add_action ('woocommerce_after_single_product_summary'، 'QuadLayers_callback_function') ؛
الوظيفة QuadLayers_callback_function () {
    printf ('
    <h1> مرحبًا! </ h1>
    <div> <h5> مرحبًا بك في صفحة المنتج المخصصة الخاصة بي </ h5>
    <h4> <a href="؟link-to-somewere"> رابط إلى مكان ما! </a> </h4>
    <img src = "https://img.freepik.com/free-vector/bird-silhouette-logo-vector-ill Image_141216-100.jpg" />
    </div> ') ؛
}

1.4) المنطق الشرطي في صفحة منتج واحد

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

1.4.1) تسجيل الدخول إلى دور المستخدم والمستخدم

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

 add_action ('woocommerce_before_single_product'، 'QuadLayers_get_user') ؛
الوظيفة QuadLayers_get_user () {
    إذا (is_user_logged_in ()) {
    المستخدم $ = wp_get_current_user () ، 
    printf ('<h1> Howdy'. $ user-> user_nicename. '! </h1>')؛
    $ الأدوار = (مجموعة) $ user-> الأدوار ؛
        إذا ($ players [0] == 'المسؤول') {
            صدى "<h4> <b> أنت $ players [0] </h4> </b>"؛
        }     
    } 
    آخر {
    مجموعة العودة () ؛
    }     
}

1.4.2) معرفات المنتجات والتصنيفات

وبالمثل ، يمكننا استرداد معرف المنتج و / أو فئات المنتج. الفرق هو أننا سنستخدم كائن post $ WP العالمي للحصول على المعرف get_the_terms() للحصول على فئات المنتجات.

 add_action ('woocommerce_before_single_product'، 'QuadLayers_get_product_taxonomies') ؛
الوظيفة QuadLayers_get_product_taxonomies () { 
    وظيفة $ العالمية ؛ 
    $ term_obj_list = get_the_terms ($ post-> ID، 'product_cat') ؛
    $ terms_string = Join ('،'، wp_list_pluck ($ term_obj_list، 'name')) ؛
    إذا ($ terms_string == "ملصقات") {
        صدى صوت "
<h1> يعد هذا أحد أفضل المصطلحات $ Terms_string </h1> "؛ echo" <h2> معرّف المنتج: $ post-> ID "؛}}

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

 add_action ('woocommerce_before_single_product'، 'QuadLayers_get_multiple_taxonomies') ؛
الوظيفة QuadLayers_get_multiple_taxonomies () {
    وظيفة $ العالمية ؛
    $ args = array ('التصنيف' => 'product_tag'،)؛
    شروط $ = wp_get_post_terms ($ post-> ID، 'product_tag'، $ args) ؛
    عدد دولارات = عدد (مصطلحات بالدولار الأمريكي) ؛
 إذا (عدد الدولارات> 0) {
        صدى '<div class = "custom-content"> <h4> قائمة العلامات: </ h4> <ul>'؛
        foreach (مصطلحات $ مثل $ term) {echo '<li>'. $ term-> name. '</li>'؛}
        صدى "</ul> </div>" ؛
    }
}

1.5) تحرير علامات تبويب المنتج

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

 add_filter ('woocommerce_product_tabs'، 'woo_remove_product_tabs'، 98) ؛
الدالة woo_remove_product_tabs (علامات تبويب $) {
    unset ($ tabs ['description'])؛ // إزالة علامة التبويب الوصف
    علامات التبويب $ ['التقييمات'] ['title'] = __ ('التقييمات') ؛ // إعادة تسمية علامة التبويب "التعليقات"
    علامات التبويب $ ['extra_information'] ['priority'] = 5 ؛ // معلومات إضافية في البداية
    إرجاع علامات التبويب $؛
}

تحرير صفحة منتج WooCommerce برمجيًا - تخصيص علامات تبويب المنتج لتحرير محتوى علامة تبويب ، تحتاج إلى استخدام وظيفة رد الاتصال مثل هذا:

 add_filter ('woocommerce_product_tabs'، 'woo_custom_description_tab'، 98) ؛

الوظيفة woo_custom_description_tab (علامات التبويب $) {
	علامات التبويب $ ['description'] ['callback'] = 'woo_custom_description_tab_content'؛ // رد الاتصال الوصف المخصص
	إرجاع علامات التبويب $؛
}
الوظيفة woo_custom_description_tab_content () {
	صدى صوت '
<h2> وصف مخصص </ h2>
"؛ صدى "هنا وصف مخصص" ؛ }

وبالمثل ، يمكننا إنشاء علامة تبويب جديدة على النحو التالي:

 add_filter ('woocommerce_product_tabs'، 'woo_new_product_tab') ؛
الدالة woo_new_product_tab (علامات تبويب $) {	
	// يضيف علامة تبويب جديدة	
	علامات التبويب $ ['test_tab'] = مجموعة (
		'title' => __ ('علامة تبويب منتج جديد' ، 'woocommerce') ،
		"الأولوية" => 50 ،
		'callback' => 'woo_new_product_tab_content'
	) ؛
	إرجاع علامات التبويب $؛
}
دالة woo_new_product_tab_content () {
	echo '<h2> علامة تبويب منتج جديد </ h2> <p> هنا محتوى علامة تبويب منتجك الجديد </ p>.'؛ 
}

في هذا المثال ، قمنا للتو بإنشاء علامة تبويب جديدة تسمى "علامة تبويب منتج جديد". هذا هو الشكل الذي تبدو عليه في الواجهة الأمامية.

1.6) دعم المنتجات المتغيرة

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

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

woocommerce_before_variations_form
woocommerce_before_single_variation
woocommerce_single_variation
woocommerce_after_single_variation

2) قم بتخصيص صفحة المنتج التي تتجاوز ملفات قالب WooCommerce

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

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

2.1) تحرير المعلومات الوصفية

لتحرير المعلومات الوصفية ، نحتاج إلى تجاوز ملف القالب المسؤول عن طباعة البيانات المقابلة. يتبع ملف meta.php الموجود في البرنامج المساعد WooCommerce هذا المسار: woocommerce/templates/single-product/meta.php

الآن قم بتحرير دليل ملفات السمات الفرعية الخاصة بك وقم بإنشاء مجلد WooCommerce. بعد ذلك ، قم بإنشاء مجلد آخر بداخله يسمى single-product والصق ملف meta.php هناك: Child_theme/woocommerce/single-product/meta.php

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

قم بتغيير تسمية SKU إلى ID
قم بتغيير العلامات إلى منشور تحت
قم بإزالة تسمية الفئة

 منتج $ عالمي؛
؟>
<div class = "product_meta">

	<؟ php do_action ('woocommerce_product_meta_start') ؛ ؟>

	<؟ php if (wc_product_sku_enabled () && ($ product-> get_sku () || $ product-> is_type ('variable'))):؟>

		<span class = "sku_wrapper"> <؟ php esc_html_e ('ID:'، 'woocommerce')؛ ؟> 
			<span class = "sku"> <؟ php echo ($ sku = $ product-> get_sku ())؟ $ sku: esc_html __ ('N / A'، 'woocommerce')؛ ؟>
			</ span>
		</ span>
	<؟ php endif؛ ؟>
	<؟ php echo wc_get_product_category_list ($ product-> get_id ()، '،'، '<span class = "posted_in">'. _n (''، ''، count ($ product-> get_category_ids ())، 'woocommerce ').' '،' </span> ') ؛ ؟>
	<؟ php echo wc_get_product_tag_list ($ product-> get_id ()، '،'، '<span class = "tagged_as">'. _n ('منشور تحت:'، 'منشور تحت:'، count ($ product-> get_tag_ids ())، 'woocommerce'). '،' </span> ') ؛ ؟>
	<؟ php do_action ('woocommerce_product_meta_end') ؛ ؟>
</div>

2.2) قم بالتبديل إلى قالب مخصص لفئة منتج معينة

لنجرب الآن مهمة أكثر تعقيدًا. لن نتجاوز نموذج المنتج الفردي إلا عندما ينتمي المنتج الحالي إلى فئة معينة.

2.2.1) قم بتحرير ملف single-product.php

أولاً ، انسخ ملف single-product.php والصقه في مجلد القالب الفرعي الخاص بك ، في دليل WooCommerce:

Child_theme/woocommerce/single-product.php

ثم افتح الملف وتحقق من السطر 37: wc_get_template_part('content','single-product');

هذه هي الطريقة التي يدخل بها ملف content-single-product.php إلى العمل ، حيث يقوم بطباعة جميع عناصر المنتج الحالي لإكمال الحلقة وإنشاء التخطيط.

نريد تجاوز هذا الملف فقط عندما ينتمي المنتج إلى الفئة المحددة ، لذلك سنحذف السطر 37: wc_get_template_part( 'content', 'single-product' ); واستبدله بالنص التالي:

 شروط $ = wp_get_post_terms ($ post-> ID، 'product_cat') ؛
				فئات $ = wp_list_pluck (المصطلحات بالدولار ، 'slug') ؛
			
				if (in_array ('Poster'، $ categories)) {
					wc_get_template_part ("محتوى" ، "ملصقات ذات منتج واحد") ؛
				} آخر {
					wc_get_template_part ('محتوى'، 'منتج واحد')؛
				}

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

تذكر أنه يمكنك العثور على سبيكة جميع فئات منتجاتك في لوحة معلومات WordPress الرئيسية> المنتجات> الفئات .

2.2.2) قم بإنشاء ملف content-single-product.php جديد

نحتاج الآن إلى إنشاء ملف جديد يتجاوز content-single-product.php الواحد. سيحتوي هذا الملف على الفئة slug في اسمه.

ألق نظرة على المثال أعلاه لترى كيف يتم استدعاء ملف content-single-product-posters.php .php. هذا مهم لأن اسم الملف يجب أن يتطابق مع الكود في الخطوة السابقة ، لذلك يجب أن يسمى ملفك content-single-product-/*YOURCATEGORYSLUG*/.php .

بهذه الطريقة ، wc_get_template_part( 'content', 'single-product-YOURCATEGORY' ) إلى تشغيل ملف content-single-product-YOURCATEGORY.php ملف قالب WooCommerce الافتراضي.

ما عليك سوى لصق ملف content-single-product.php الافتراضي في مجلد WooCommerce لموضوع الطفل ، وإعادة تسميته باتباع الإرشادات الموضحة أعلاه وإجراء بعض الإصدارات لاختباره.

2.2.3) قم بإنشاء قالب مخصص لتحرير ملف `content-single-product.php` الجديد الخاص بك

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

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

 // إزالة عناصر ملخص المنتج
remove_action ('woocommerce_single_product_summary'، 'woocommerce_template_single_title'، 5) ؛
remove_action ('woocommerce_single_product_summary'، 'woocommerce_template_single_rating'، 10) ؛
remove_action ('woocommerce_single_product_summary'، 'woocommerce_template_single_excerpt'، 20) ؛
remove_action ('woocommerce_single_product_summary'، 'woocommerce_template_single_add_to_cart'، 30) ؛
remove_action ('woocommerce_single_product_summary'، 'woocommerce_template_single_price'، 10) ؛
	
		// محتوى مخصص
		printf ('<h1> هذا هو <b>'. $ post-> post_name. '</b> الملصق </h1>')؛
		printf ('<h4> صفحة منتج مخصصة كاملة لمنتجات فئة "الملصقات" </ h4>') ؛
		// وصف
		printf ('<h5>'. $ post-> post_excerpt. '</h5>')؛
		//ظفري
		do_action ('woocommerce_before_single_product_summary') ؛
				
		// إضافة meta
		do_action ('woocommerce_single_product_summary') ؛
		// الرموز القصيرة
		echo do_shortcode (' [ add_to_cart show_price = "false" class = "my-addtocart" ] ') ؛ صدى "<h3> جهة الاتصال: </ h3>" .do_shortcode ('[wpforms]')؛ صدى "<h3> المزيد من الملصقات: </ h3>" .do_shortcode (' [ product_category category = "الملصقات" orderby = "desc" limit = "4" ] ')؛

الآن إذا تحققنا من الواجهة الأمامية ، فسنرى ما يلي: كيفية تحرير صفحة منتج WooCommerce برمجيًا - قالب صفحة المنتج لتصنيف معين لاحظ أننا نستخدم كائن البريد العالمي. var_dump($post); لتظهر لك جميع المعلومات المتاحة المتعلقة بالمنتج الحالي. يمكنك استخدام أي من بياناته تمامًا كما فعلنا في نموذج البرنامج النصي مع وصف المنتج: $post->post_excerpt .

3) تخصيص صفحة المنتج باستخدام برنامج نصي CSS

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

1. أولاً ، تحتاج إلى إنشاء ملف جديد في نسق الطفل بامتداد .css حتى تتمكن من إضافة نصوص CSS هناك. نوصيك single-product.css أو شيء مشابه لذلك من السهل العثور عليه.
2. بعد ذلك ، ضع الملف في المجلد الرئيسي للموضوع الفرعي بنفس مستوى ملفات functions.php و style.css .
3. بعد ذلك ، الصق البرنامج النصي التالي في ملف functions.php للقالب الفرعي الخاص بك واستبدل اسم ملف CSS إذا لزم الأمر.

 add_action ('wp_enqueue_scripts'، 'load_custom_product_style') ؛
      وظيفة load_custom_product_style () {
        إذا (is_product ()) {
        wp_register_style ('product_css'، get_stylesheet_directory_uri (). '/single-product.css'، false، '1.0.0'، 'all') ؛
          wp_enqueue_style ('product_css') ،
        }
	  }

if(is_product()) مما إذا كانت الصفحة الحالية هي صفحة منتج. هذا يمنع التحميل غير الضروري لملف CSS عندما لا تكون صفحة منتج.

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

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

قم بتحرير صفحة منتج واحد لـ WooCommerce باستخدام CSS

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

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

تغيير حجم خط العنوان

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

 .woocommerce div.product .product_title { 
        حجم الخط: 32 بكسل ؛ 
}

تغيير لون العنوان

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

 .woocommerce div.product .product_title { 
            اللون: # FFA500 ؛ 
}

قم بتغيير لون زر الشراء الآن

وبالمثل ، يمكنك تغيير لون زر الشراء الآن. في هذا المثال ، نستخدم اللون الأزرق المراوغ ، ولكن يمكنك اختيار أي لون آخر تريده عن طريق ضبط الكود.

 .woocommerce div.product .button { 
        الخلفية: # 1E90FF ؛ 
}

استنتاج

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

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

باستخدام الخطافات
تجاوز قوالب WooCommerce
مع نصوص CSS

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

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

تعلم كيفية تخصيص ملفات قالب WooCommerce
كيفية تخصيص صفحة متجر WooCommerce
قم بتخصيص الزر "إضافة إلى عربة التسوق" في WooCommerce
كيفية إزالة منتجات WooCommerce ذات الصلة
كيفية تحرير WooCommerce Checkout (الترميز والإضافات)

هل لديك أي مشاكل بعد البرنامج التعليمي لدينا؟ أخبرنا في قسم التعليقات أدناه وسنبذل قصارى جهدنا لمساعدتك.

كيفية تحرير صفحة منتج WooCommerce برمجيًا

تخصيص صفحة المنتج

كيفية تحرير صفحة منتج WooCommerce برمجيًا

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

1) قم بتحرير صفحة منتج WooCommerce باستخدام الخطافات

1.1) إزالة العناصر من صفحات منتج واحد

1.2) إعادة ترتيب العناصر

1.3) إضافة عناصر جديدة

1.4) المنطق الشرطي في صفحة منتج واحد

1.4.1) تسجيل الدخول إلى دور المستخدم والمستخدم

1.4.2) معرفات المنتجات والتصنيفات

1.5) تحرير علامات تبويب المنتج

1.6) دعم المنتجات المتغيرة

2) قم بتخصيص صفحة المنتج التي تتجاوز ملفات قالب WooCommerce

2.1) تحرير المعلومات الوصفية

2.2) قم بالتبديل إلى قالب مخصص لفئة منتج معينة

2.2.1) قم بتحرير ملف single-product.php

2.2.2) قم بإنشاء ملف content-single-product.php جديد

2.2.3) قم بإنشاء قالب مخصص لتحرير ملف content-single-product.php الجديد الخاص بك

3) تخصيص صفحة المنتج باستخدام برنامج نصي CSS

قم بتحرير صفحة منتج واحد لـ WooCommerce باستخدام CSS

تغيير حجم خط العنوان

تغيير لون العنوان

قم بتغيير لون زر الشراء الآن

استنتاج

2.2.3) قم بإنشاء قالب مخصص لتحرير ملف `content-single-product.php` الجديد الخاص بك