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

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

ما هي صفحة حسابي؟

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

[ woocommerce_my_account ]

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

لماذا تخصيص صفحة حسابي في WooCommerce؟

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

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

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

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

هناك طريقتان مختلفتان لتحرير صفحة حسابي في WooCommerce:

1. يمكنك تجاوز ملفات قالب WooCommerce الافتراضية
2. استخدم بعض أدوات WooCommerce

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

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

1) تخصيص ملفات قالب صفحة حسابي

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

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

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

plugins/woocommerce/templates/myaccount

افتح المجلد /myaccount وستجد جميع ملفات القوالب التي تستخدمها صفحة حسابي.

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

على سبيل المثال ، لنفترض أنك تريد نسخ ملف dashboard.php من تثبيت WooCommerce. قبل لصقها في القالب الفرعي الخاص بك ، تحتاج إلى إنشاء دليلين فرعيين متداخلين والاتصال بهم / woocommerce و / myaccount . بعد ذلك ، الصق ملف dashboard.php بداخله: child_theme/woocommerce/myaccount/dashboard.php

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

تخصيص لوحة معلومات صفحة حسابي

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

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

نص كامل

هذا هو ملف dashboard.php الأخير الذي ينشئ لقطة الشاشة أعلاه.

 إذا (! المعرفة ("أبسبات")) {
خروج؛ // خروج إذا تم الوصول إليها مباشرة.
}
$ allow_html = مجموعة (
'أ' => صفيف ('href' => مجموعة () ،)
) ؛
؟>
<h2>
<؟ php
printf (
/ * المترجمون: 1: اسم عرض المستخدم 2: عنوان url لتسجيل الخروج * /
wp_kses (__ ("مرحبًا٪ 1 $ s ، لقد عدت!" ، "woocommerce") ، $ allowed_html) ،
"<strong>". esc_html ($ current_user-> display_name). "</strong>"،
esc_url (wc_logout_url ())
) ؛
؟>
</h2>
<img src = "https://encrypted-tbn0.gstatic.com/images؟q=tbn:ANd9GcSBg81lLt4o-uEuBTgrMCwhDhX1HJKLCPTSxA&usqp=CAU" />
<h3>
<؟ php
/ * المترجمون: 1: عنوان URL للطلبات 2: عنوان URL 3: عنوان URL للحساب. * /
$ dashboard_desc = __ ('هذه هي لوحة التحكم الرئيسية لحسابك:'، 'woocommerce')؛
إذا (wc_shipping_enabled ()) {
/ * المترجمون: 1: عنوان URL للطلبات 2: عنوان URL 3: عنوان URL للحساب. * /
$ dashboard_desc = __ ('هذه هي لوحة التحكم الرئيسية لحسابك:'، 'woocommerce')؛
}
printf (
wp_kses (dashboard_desc $ ، allow_html $) ،
esc_url (wc_get_endpoint_url ("الطلبات")) ،
esc_url (wc_get_endpoint_url ("تحرير العنوان")) ،
esc_url (wc_get_endpoint_url ("تحرير الحساب"))
) ؛
$ ul_list = __ ('<ul>
<li> اعرض <a href="٪1$s"> طلباتك الأخيرة </a> </li>
<li> إدارة <a href="٪2$s"> عناوين الشحن والفواتير </a> </li>
<li> <a href="٪3$s"> عدّل كلمة المرور وتفاصيل الحساب </a> </li>
</ul> ')؛
$ div_contact = __ ('
<div class = "acc_contact">
<span class = "acc_images">
<a href="#link to send whatsapp message"> <img src = "http: //localhost/Sampler/wp-content/uploads/2020/12/whatsapp-icon.png" /> </a>
<a href="#link to facebook profile"> <img src = "http: //localhost/Sampler/wp-content/uploads/2020/12/fcbk-icon.png" /> </a>
<a href="#link to twitter profile"> <img src = "http: //localhost/Sampler/wp-content/uploads/2020/12/twitter-icon.png" /> </a>
<a href="#link to send email"> <img src = "http: //localhost/Sampler/wp-content/uploads/2020/12/email-icon2.png" /> </a>
</ span>
</div> ') ؛
$ div_footer = __ ('
<div>
<h4> <i> بنيت بالحب! </ i> </h4>
<img src = "http: //localhost/Sampler/wp-content/uploads/2020/08/ql-logo-300x65.png" />
</div> ') ؛
؟>
</h3>
<p> إدارة الملف الشخصي والمعلومات الشخصية هنا. املأ جميع الحقول حتى نتمكن من التعرف عليك. ستنعكس جميع الإصدارات التي تم إجراؤها في حسابك في موقع الويب بشكل فوري ، حتى يتمكن المستخدمون الآخرون من التعرف عليك وباحتياجاتك الحالية دون أي تأخير </ p>
<؟ php
صدى $ ul_list. $ div_footer. $ div_contact؛

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

مضيفا الصور

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

تخصيصات CSS

هناك طريقة أخرى لتخصيص صفحة "حسابي" - وأي صفحة أخرى - وهي استخدام البرامج النصية لـ CSS. هذا هو نص CSS الذي استخدمناه لتصميم ملف dashboard.php المخصص:

 .woocommerce-MyAccount-content> h2: nth-child (2) ،
.woocommerce-MyAccount-content> h3: nth-child (4) {
محاذاة النص: مركز ؛
}
.acc_contact {
أعلى الحشو: 20 بكسل ؛
محاذاة النص: مركز ؛
}
.acc_contact> h3 {
تعويم: اليسار؛
}
.acc_images {
الهامش: تلقائي ؛
العرض: 50٪؛
العرض محجوب؛
}
#أهلا بك{
الهامش: تلقائي ؛
}
.acc_images img {
الهامش الأيسر: 4 بكسل ؛
الهامش الأيمن: 4 بكسل ؛
عرض: مضمنة كتلة ؛
العرض: 55 بكسل ؛
}
#acc_footer {
أعلى الهامش: 15 بكسل ؛
لون الخلفية: # 202020 ؛
محاذاة النص: مركز ؛
نصف قطر الحدود: 15 بكسل ؛
}
#acc_footer> h4 {
أعلى الحشو: 20 بكسل ؛
اللون: rgb (235 ، 228 ، 228) ؛
وزن الخط: عريض ؛
}
#acc_footer> img {
الهامش: تلقائي ؛
الحشو السفلي: 20 بكسل ؛
}

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

2. قم بتحرير صفحة حسابي في WooCommerce باستخدام الخطافات

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

أ) إعادة تسمية علامات التبويب

سيعيد هذا البرنامج النصي تسمية علامة التبويب "العنوان" إلى العناوين الخاصة بك .

 add_filter ('woocommerce_account_menu_items'، 'QuadLayers_rename_acc_adress_tab'، 9999) ؛
الدالة QuadLayers_rename_acc_adress_tab ($ العناصر) {
$ items ['edit-address'] = 'عناوينك' ؛
إرجاع العناصر $؛
}

ب) إزالة علامات التبويب

لإزالة أي علامة تبويب تمامًا ، استخدم وظيفة unset () على النحو التالي:

 add_filter ('woocommerce_account_menu_items'، 'QuadLayers_remove_acc_address'، 9999) ؛
الوظيفة QuadLayers_remove_acc_address ($ العناصر) {
unset ($ items ['downloads'])؛
إرجاع العناصر $؛
}

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

 العناصر $ = مجموعة (
'لوحة القيادة' => __ ('Dashboard'، 'woocommerce') ،
'الطلبات' => ​​__ ('الطلبات' ، 'woocommerce') ،
"التنزيلات" => __ ("التنزيلات" ، "woocommerce") ،
'edit-address' => _n ('Addresses'، 'Address'، (int) wc_shipping_enabled ()، 'woocommerce')،
"طرق الدفع" => __ ("طرق الدفع"، "woocommerce") ،
'edit-account' => __ ('Account details'، 'woocommerce')،
'customer-logout' => __ ('Logout'، 'woocommerce') ،
) ؛

ج) دمج علامات التبويب والمحتوى

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

 // -----------------------------
// 1. قم بإزالة علامة التبويب "العناوين"
add_filter ('woocommerce_account_menu_items'، 'QuadLayers_remove_acc_tab'، 999) ؛
الوظيفة QuadLayers_remove_acc_tab ($ items) {
unset ($ items ['edit-address']) ؛
إرجاع العناصر $؛
}
// -------------------------------
// 2. أدخل محتوى علامة التبويب "العناوين" في علامة تبويب موجودة (تعديل الحساب في هذه الحالة)
add_action ('woocommerce_account_edit-account_endpoint'، 'woocommerce_account_edit_address') ؛

الآن ، ستبدو علامة التبويب الحساب كما يلي:

د) أضف علامة تبويب جديدة بمحتوى مخصص

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

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

 // 1. تسجيل نقطة نهاية جديدة
// ملاحظة: أعد حفظ الروابط الثابتة وإلا ستعطي خطأ 404  
الوظيفة QuadLayers_add_support_endpoint () {
    add_rewrite_endpoint ('دعم' ، EP_ROOT | EP_PAGES) ؛
}  
add_action ('init'، 'QuadLayers_add_support_endpoint')؛  
// ------------------
// 2. إضافة استعلام جديد
دالة QuadLayers_support_query_vars ($ vars) {
    $ vars [] = 'دعم'؛
    العودة $ vars؛
}  
add_filter ('query_vars'، 'QuadLayers_support_query_vars'، 0) ؛  
// ------------------
// 3. أدخل نقطة النهاية الجديدة 
وظيفة QuadLayers_add_support_link_my_account ($ العناصر) {
    $ items ['support'] = 'Support'؛
    إرجاع العناصر $؛
}  
add_filter ('woocommerce_account_menu_items'، 'QuadLayers_add_support_link_my_account') ؛
// ------------------
// 4. أضف محتوى إلى نقطة النهاية الجديدة  
الوظيفة QuadLayers_support_content () {
echo '<h3> Support </h3> <p> مرحبًا بك في منطقة الدعم. كعميل متميز ، قم بإدارة تذاكر الدعم الخاصة بك من هنا ، يمكنك إرسال تذكرة إذا كان لديك أي مشاكل مع موقع الويب الخاص بك. سنبذل قصارى جهدنا لنقدم لك حلاً سريعًا وفعالاً </ p> '؛
echo do_shortcode ('[كود قصير]') ؛
echo do_shortcode ('[wpforms]') ؛
}  
add_action ('woocommerce_account_support_endpoint'، 'QuadLayers_support_content') ؛

إذا تلقيت خطأ 404-page not found (لم يتم العثور على الصفحة) عند النقر فوق علامة التبويب الجديدة ، فافتح صفحة الرابط الثابت بالانتقال إلى لوحة معلومات WordPress> الإعدادات> الروابط الثابتة وانقر فوق الزر حفظ في الأسفل.

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

استنتاج

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

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

• تجاوز ملفات القوالب
• استخدم خطافات WooCommerce

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

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

• كيفية تخصيص حسابي WooCommerce مع المكونات الإضافية وبدونها
• أفضل المكونات الإضافية لتخصيص صفحة حسابي على WooCommerce

ما هي التغييرات التي قمت بإجرائها على صفحة حسابي الخاصة بك؟ هل لديك أي مشاكل بعد البرنامج التعليمي لدينا؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!