كيفية تحرير صفحة متجر WooCommerce برمجيًا (CSS و PHP)

نشرت: 2020-08-27

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

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

لماذا من المهم تحرير صفحة المتجر في WooCommerce؟

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

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

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

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

في هذا البرنامج التعليمي ، ستتعلم كيفية تحرير صفحة متجر WooCommerce برمجيًا من أجل:

  1. قم بتعطيل قالب صفحة متجر WooCommerce الافتراضي
  2. تخصيص الرؤوس والمحتوى
    1. المنتجات الأكثر رواجًا
    2. المنتجات الأكثر مبيعًا
    3. أعلى التقييمات
    4. عرض المنتجات بالتصنيفات
    5. تخصيص صفحة متجر WooCommerce في jobs.php
  3. قم بتحرير تخطيط حلقة المنتجات وطبق ورقة أنماط CSS
    1. تحرير عدد الأعمدة الافتراضية لكل صف
    2. قم بتطبيق نمط CSS على صفحة المتجر
  4. قم بتحرير ملفات الحلقة لصفحة متجر WooCommerce
    1. استبدل نص "البيع" الافتراضي لصورة gif المتحركة
    2. إزالة خيارات الفرز وتقسيم الصفحات

قبل ان تبدا

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

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

الآن ، دعنا نرى كيفية تخصيص صفحة المتجر في WooCommerce باستخدام الترميز.

1. قم بتعطيل قالب صفحة متجر WooCommerce الافتراضي

لتخصيص صفحة المتجر ، هناك طريقتان محتملتان:

  1. يمكنك الكتابة فوق ملف WooCommerce المسؤول عن طباعة صفحة المتجر
  2. أضف نصوصًا مخصصة إلى ملف functions.php الخاص بالقالب الفرعي الخاص بك باستخدام خطافات WC

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

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

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

ملف archive-product.php

في WooCommerce ، يُطلق على الملف المسؤول عن الإخراج في صفحة المتجر اسم archive-product.php ، ويمكنك العثور عليه في مجلد قوالب WooCommerce ( WooCommerce> Templates> archive-product.php ). تحرير صفحة متجر WooCommerce برمجيًا - تعطيل قالب صفحة المتجر

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

الآن ، دعنا نلقي نظرة على ملف archive-product.php حتى تتمكن من رؤية كيفية عرض WooCommerce لصفحة المتجر. للقيام بذلك ، افتح بيئة التطوير المتكاملة المفضلة لديك (IDE) ، وانتقل إلى مجلد القوالب في المكون الإضافي WooCommerce ، وافتح الملف. يمكنك تحريره والتلاعب به ، بنفس الطريقة التي يمكنك من خلالها تخصيص أي ملف قالب WC آخر.

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

في ملف archive-product.php ، سترى عدة وظائف do_action() . تُستخدم هذه الوظائف لإنشاء خطافات WooCommerce المتاحة حاليًا لصفحة المتجر. لتعطيل صفحة متجر WooCommerce تمامًا ، ما عليك سوى حذف الحلقة المسؤولة عن طباعة المنتجات:

 إذا (wc_get_loop_prop ('total')) {
    بينما (have_posts ()) {
        المنشور()؛
        do_action ('woocommerce_shop_loop') ؛
        wc_get_template_part ('content'، 'product') ؛
    }
}

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

بعد حذف الحلقة الخاصة بطباعة المنتجات ، سيبدو ملف archive-product.php بالشكل التالي:

 المعرفة ("ABSPATH") || خروج؛
get_header ("متجر") ؛
do_action ('woocommerce_before_main_content') ؛
إذا (woocommerce_product_loop ()) {
    do_action ('woocommerce_before_shop_loop') ؛
    // هنا قمنا بحذف الحلقة
    do_action ('woocommerce_after_shop_loop') ؛
} آخر {
    do_action ('woocommerce_no_products_found') ؛
}
do_action ('woocommerce_after_main_content') ؛
do_action ('woocommerce_sidebar') ؛
get_footer ("متجر") ؛

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

2. تخصيص رؤوس ومحتوى صفحة متجر WooCommerce برمجيًا

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

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

2.1 عرض المنتجات الأكثر شعبية

لعرض المنتجات الأكثر شيوعًا ، تحتاج إلى تحرير ملف archive-product.php لموضوع طفلك. أولاً ، استخدم الرمز القصير التالي

 [ products orderby="popularity" ]

بالضبط حيث كانت الحلقة قبل حذفها. # اعرض المنتجات الأكثر شيوعًا: منتجان في عمودين

 do_action ('woocommerce_before_shop_loop') ؛
صدى "<h1> الأكثر شعبية !! </ h1> '؛
do_shortcode ('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]') ؛ do_action ('woocommerce_after_shop_loop') ؛

في الرمز المختصر ، ستضيف فئة تسمى m-popular ، والتي يمكنك استخدامها لاحقًا عند تطبيق الأنماط. في المثال أعلاه ، قمنا بتعيينه لعرض منتجين في صف واحد من عمودين (الأعمدة = ”2 ″ limit =” 2 ″) . لاحظ أنه لا يمكنك استخدام الرموز المختصرة هنا بنفس الطريقة التي تستخدمها بها في منشور أو صفحة.

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

2.2 أفضل المنتجات مبيعًا

هناك طريقة أخرى لتخصيص متجر WooCommerce برمجيًا وهي فرز المنتجات حسب أفضل البائعين. لهذا ، إلى جانب ترديد الرمز القصير ، ستضيف بعض المحتوى باستخدام ترميز HTML بسيط ( <h1> ). هنا ، يمكنك إضافة أي نوع آخر من المحتوى المطابق بتنسيق HTML المناسب.

دعنا نعرض المنتجات الأكثر مبيعًا ، هذه المرة بتنسيق من صفين و 3 أعمدة. للقيام بذلك ، ما عليك سوى لصق هذا مباشرةً بعد echo do_shortcode() الذي أدخلته في الخطوة السابقة 2.1:

 echo '<h1> الأفضل مبيعًا </ h1>'؛
do_shortcode ('[ best_selling_products limit="9" columns="3" class="b-sellers" ]') ؛

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

2.3 المنتجات الأعلى تقييماً

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

 صدى "<h1> الأعلى تقييما </ h1> '؛
do_shortcode ('[ top_rated_products class="t-rated" ]') ؛

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

2.4 عرض المنتجات حسب التصنيفات على صفحة المتجر

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

 صدى '<h1> تصنيف الملابس: </ h1>'؛
do_shortcode ('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]') ؛ صدى '<h1> تصنيف الملصقات: </ h1>'؛ صدى '<h2> خذ أفضل الملصقات إلى الحائط الخاص بك </ h2>'؛ do_shortcode ('[ products category="Posters" limit="4" class="t-posters" ]') ؛

وهذه هي الطريقة التي يجب أن تبدو بها archive-product.php الآن:

 <header class = "woocommerce-products-header">
       <h1 class = "woocommerce-products-header__title page-title"> </h1>	
</header>
<؟ php
إذا (woocommerce_product_loop ()) {
	do_action ('woocommerce_before_shop_loop') ؛		
	
	صدى "<h1> الأكثر شعبية !! </ h1> '؛
        do_shortcode ('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]') ؛ echo '<h1> الأفضل مبيعًا </ h1>'؛ do_shortcode ('[ best_selling_products limit="9" columns="3" class="b-sellers" ]') ؛ صدى "<h1> الأعلى تقييما </ h1> '؛ do_shortcode ('[ top_rated_products class="t-rated" ]') ؛ صدى '<h1> تصنيف الملابس: </ h1>'؛ do_shortcode ('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]') ؛ صدى '<h1> تصنيف الملصقات: </ h1>؛ صدى '<h2> خذ أفضل الملصقات إلى الحائط الخاص بك </ h2>'؛ do_shortcode ('[ products category="Posters" columns="2" limit="4" class="t-posters" ]') ؛ do_action ('woocommerce_after_shop_loop') ؛ } else {do_action ('woocommerce_no_products_found') ؛ } do_action ('woocommerce_after_main_content') ؛ do_action ('woocommerce_sidebar') ؛ get_footer ("متجر") ؛

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

2.5 تخصيص صفحة متجر المرحاض في jobs.php

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

في هذا المثال ، دعنا نضيف رأسًا مخصصًا بعنوان ، وعنوان فرعي ، ووصف ، وشعار. الصق هذا البرنامج النصي في ملف functions.php للقالب الفرعي:

 add_action ('woocommerce_before_shop_loop'، 'shop_main_heading') ؛
وظيفة shop_main_heading () {
	محتوى $ = "؛
	$ content. = '<h1> مرحبًا بك في صفحة متجري الرائعة! </ h1>'؛ 
	$ content. = '<h2> صنعت بحب بنفسي </ h2>'؛
	$ content. = '<p> نشكرك على المرور وزيارة صفحة متجر موقع الويب الخاص بي ، يرجى تصفح المنتجات المفضلة لديك وشراءها جميعًا </ p>'؛
	$ content. = '<img src = "https://www.carpetright.co.uk/globalassets/static-pages/useful-links/samples/sample-banner.jpg" />'؛
	صدى المحتوى $؛
}

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

3. قم بتحرير عدد المنتجات لكل صف وقم بتطبيق ورقة أنماط CSS على صفحة متجر WC

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

3.1 تحرير عدد الأعمدة الافتراضية لكل صف

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

 [ product orderby=”popularity” columns=”3” limit=”3” ]

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

 add_filter ('loop_shop_columns'، 'loop_columns'، 999) ؛
إذا (! function_exists ('loop_columns)) {
    الدالة loop_columns () {
        إرجاع 4 ؛ // 4 منتجات لكل صف
    }
}

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

3.2 قم بتطبيق بعض أنماط CSS على صفحة المتجر

لتطبيق بعض CSS على صفحة متجر WooCommerce ، يمكنك ببساطة إضافة البرامج النصية الخاصة بك في ملف القالب مثل هذا:

 <ستايل>
* {
    لون الخلفية: # a2bcff ؛
}
</style>

هذا جيد بالنسبة للقطع الصغيرة من CSS ولكنه ليس ممارسة موصى بها. لتطبيق CSS Style بطريقة WordPress ، تحتاج إلى استخدام الخطاف wp_enqueue_scripts لتحميل البرامج النصية الخاصة بك من ملف مختلف.

في هذا المثال ، سنقوم بتسمية هذا الملف shop_style.css في المجلد الرئيسي للقالب الفرعي الخاص بنا ، في نفس مستوى التسلسل الهرمي مثل ملف style.css الافتراضي. بعد إنشاء هذا الملف ، الصق البرنامج النصي التالي في ملف functions.php الخاص بك:

 add_action ('wp_enqueue_scripts'، 'quadlayers_enqueue_css') ؛
دالة quadlayers_enqueue_css () {    
    إذا (is_shop ()):
    wp_enqueue_style ('checkout_style'،
        get_stylesheet_directory_uri (). "/shop_style.css"
    ) ؛
    إنهاء إذا؛
}

كما ترى ، if(is_shop()): الشرطي مطلوب ليكون صحيحًا لإدراج ملف shop_style.css . في هذا الملف ، سيكون لديك جميع البرامج النصية للأنماط التي تريد تطبيقها فقط على صفحة المتجر . هذا يختلف عن ملف style.css في القالب الفرعي الذي سيطبق البرامج النصية على واجهة موقع الويب بالكامل. بالنسبة لهذا الدليل ، سنستخدم ملف shop_style.css التالي ولكن لا تتردد في استخدام البرامج النصية لـ CSS أو تغيير هذا:

 div.storefront-sorting: nth-child (2) {
	محاذاة النص: مركز ؛
} 
#main div.storefront-Sorting h1 {
	نمط الخط: عادي ؛
}
#main h1، # main h2 {
	وزن الخط: أكثر جرأة ؛
	نمط الخط: منحرف ؛
	محاذاة النص: مركز ؛
}
#main> .m-popular، # main> .b-selling، # main> .t-Rated، # main> .t-clothing، # main> .t-stickers {	
	الحد: صلب # b8b8b8 1px ؛
	نصف قطر الحدود: 25 بكسل ؛
	الهامش السفلي: 25 بكسل ؛
	أعلى الحشو: 35 بكسل ؛	
	المساحة المتروكة: 20 بكسل ؛
	المساحة المتروكة لليمين: 20 بكسل ؛	
} 
#main> .m-popular {
	لون الخلفية: # dbad97 ؛	
}
#main> .b -ellers {
	لون الخلفية: # b4e6a3 ؛
}
#main> تصنيف .t {
	لون الخلفية: # f0f695 ؛	
}
#main> .t-clothing {
	لون الخلفية: # 95b4f6 ؛	
}
#main> .t-بوسترات {
	لون الخلفية: # c88fe5 ؛	
}

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

 do_shortcode ('[ best_selling_products limit="9" columns="3" class="b-sellers" ]') ؛

لذلك بعد إضافة نمط CSS إلى صفحة متجر WooCommerce ، ستحصل على شيء مثل هذا (انقر فوق الصورة لرؤيتها بالحجم الكامل): اضغط على الصورة لمشاهدتها بالحجم الكامل

اضغط على الصورة لمشاهدتها بالحجم الكامل.

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

BONUS : كيفية تغيير عدد المنتجات لكل صفحة

الآن ، لنفترض أنك تريد تغيير عدد المنتجات التي تعرضها في كل صفحة على صفحة المتجر. إذا كنت تريد عرض 10 منتجات لكل صفحة على سبيل المثال ، فما عليك سوى إضافة الكود التالي إلى ملف jobs.php :

 add_filter ('loop_shop_per_page'، 'new_loop_shop_per_page'، 20) ؛

function new_loop_shop_per_page ($ cols) {
  كولون دولار = 10 ؛
  إرجاع $ cols؛
}

حيث يحتوي $cols على عدد المنتجات لكل صفحة تأخذ القيمة من الخيارات -> القراءة وإرجاع عدد المنتجات التي تريد عرضها في كل صفحة.

4. قم بتحرير ملفات الحلقة لصفحة متجر WooCommerce

حتى الآن ، رأينا كيفية تحرير ملف قالب archive-product.php لتخصيص صفحة متجر WooCommerce برمجيًا. هذا الملف هو المكان الذي يتم فيه تشغيل حلقة WC لعرض جميع منتجات الصفحة. الآن ، افتح مجلد البرنامج المساعد WooCommerce في محرر البرنامج المساعد أو IDE الخاص بك ، وافتح مجلد الحلقة. ستجده في نفس مستوى ملف archive-product.php .

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

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

4.1 استبدال نص "البيع" الافتراضي لصورة gif متحركة

في هذا القسم ، سنوضح لك كيفية تعطيل رسالة البيع الافتراضية واستبدالها بصور gif متحركة. أنت بحاجة إلى تحرير ملف flash-sale.php لموضوع طفلك بحيث يبدو كالتالي:

 المعرفة ("ABSPATH") || خروج؛
العالمي $ post، $ product؛
إذا ($ product-> is_on_sale ()) { 
   $ an_gif = '<img src = "https://i1.wp.com/tamingchaos.net/wp-content/uploads/2020/04/Sale-Gif.gif" width = "100px" height = "60px" / > '؛
   صدى $ an_gif؛
}

هناك يمكنك استبدال ملف gif بأي ملف gif آخر تريده.

4.2 إزالة خيارات الفرز وتقسيم الصفحات

الآن ، دعنا نلقي نظرة على كيفية تعطيل محدد "الفرز حسب" ووظيفة ترقيم الصفحات على صفحة متجر WooCommerce. على غرار ما فعلته مع ملف sale-flash.php ، يمكنك تحقيق ذلك ببساطة عن طريق حفظ ملف فارغ يحمل نفس الاسم.

أنشئ كلا الملفين في مجلد الحلقة orderby.php و pagination.php . لتعطيل كلا الملفين تمامًا ، يجب عليك فقط وضع هذا البرنامج النصي في كل ملف من الملفات:

 المعرفة ("ABSPATH") || خروج؛

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

ملاحظات ختامية

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

المكافأة: عرض الفئات على صفحة متجر WooCommerce

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

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

أضف فئات إلى صفحة التسوق

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

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

 دالة product_subcategories ($ args = array ()) {
$ parentid = get_queried_object_id () ؛

$ args = مجموعة (
'الوالدين' => $ parentid
) ؛

شروط $ = get_terms ('product_cat'، $ args)؛

إذا (شروط $) {
echo '<ul class = "product-cats">'؛

foreach (مصطلحات $ مثل $ term) {
صدى '<li class = "category">'؛ 
woocommerce_subcategory_thumbnail ($ term) ؛
صدى "<h2>" ؛
صدى '<a href="'. esc_url( get_term_link( $term)).'" class="'. $term-> slug.' "> '؛
صدى $ term-> الاسم ؛
صدى "</a>" ؛
صدى "</ h2>" ؛
صدى "</li>" ؛
}

صدى "</ul>"؛
}

}

add_action ('woocommerce_before_shop_loop'، 'product_subcategories'، 50) ؛

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

استنتاج

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

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

لمزيد من الأدلة لتخصيص متجر WooCommerce الخاص بك ، نوصيك بمراجعة:

  • إضافة إلى عربة WooCommerce AJAX
  • كيف تضيف الحقول المخصصة إلى صفحة الخروج؟
  • تضيف WooCommerce إلى وظيفة السلة برمجيًا

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