WooCommerce: قائمة التنقل الأفقية في حسابي

تحتوي صفحات WooCommerce My Account على قائمة تنقل “الشريط الجانبي الأيسر” (افتراضيًا ، الروابط هي: “لوحة التحكم” ، “الطلبات” ، “التنزيلات” ، “العناوين” ، “تفاصيل الحساب” ، “تسجيل الخروج”).

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

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

إليك تخطيط قائمة التنقل الافتراضي لصفحات WooCommerce My Account. إذا كنت لا تحب الشريط الجانبي ، فهذا هو البرنامج التعليمي المناسب لك!

مقتطف CSS (WooCommerce افتراضي): عرض قائمة التنقل في حسابي أفقيًا على عكس الوضع الرأسي

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

@media only screen and (min-width: 769px) {
   .woocommerce-account .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-navigation {
       float: none;
       width: 100%;
   }
}

ها هي النتيجة:

ثانيًا ، نحتاج إلى توسيط محاذاة قائمة التنقل (علامة UL) وجعل عناصرها تتحرك أفقيًا (علامات LI):

@media only screen and (min-width: 769px) {
   .woocommerce-MyAccount-navigation ul {
       text-align: center;
   }
   .woocommerce-MyAccount-navigation ul li {
       display: inline-block;
   }
}

كود CSS ، معًا ، حتى تتمكن من نسخ / لصق:

@media only screen and (min-width: 769px) {
 
   .woocommerce-account .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-navigation {
       float: none;
       width: 100%;
   }
 
   .woocommerce-MyAccount-navigation ul {
       text-align: center;
   }
 
   .woocommerce-MyAccount-navigation ul li {
       display: inline-block;
   }
 
}

مقتطف CSS (موضوع واجهة المتجر): عرض قائمة التنقل في حسابي أفقيًا كما هو متعارض مع الوضع الرأسي

@media (min-width: 768px) {
 
   .page-template-template-fullwidth-php .woocommerce-MyAccount-navigation, .page-template-template-fullwidth-php .woocommerce-MyAccount-content {
      width: 100%;
      float: none;
   }
 
   .woocommerce-MyAccount-navigation ul {
      text-align: center;
      border-bottom: 1px solid rgba(0,0,0,.05);
   }
 
   .woocommerce-MyAccount-navigation ul li {
      display: inline-block;
      border-left: 1px solid rgba(0,0,0,.05);
      padding: 0 1em;
      border-bottom: 0;
   }
 
}

هل هناك مكون إضافي (موثوق) لذلك؟

إذا كنت تحب الكود ولكنك لا تشعر بالثقة بنسبة 100 ٪ مع CSS ، فقد قررت البحث عن مكون إضافي موثوق به يحقق نفس النتيجة.

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

ولكن في حال كنت تكره المكونات الإضافية وترغب في كتابة التعليمات البرمجية (أو ترغب في تجربة ذلك) ، فاستمر في القراءة 🙂

المنشورات ذات الصلة:

WooCommerce: أضف علامة تبويب جديدة @ صفحة حسابي

موضوع واجهة المتجر: كيفية تخصيص تخطيط الصفحة الرئيسية

WooCommerce: إخفاء أو إعادة تسمية علامة التبويب حسابي

WooCommerce: كيفية دمج علامات تبويب حسابي

WooCommerce + Jetpack: استبعاد الصورة من “Lazy Load”

WooCommerce + Storefront: إخفاء عنوان “الصفحة الرئيسية” @ الصفحة الرئيسية

WooCommerce: صفحات منفصلة لتسجيل الدخول والتسجيل

WooCommerce: أعد تسمية “حسابي” إذا تم تسجيل الخروج في قائمة التنقل @

WooCommerce: تسجيل الدخول إعادة التوجيه إلى عنوان URL السابق @ حسابي

مظهر واجهة المتجر: تحرير أو إزالة اعتمادات التذييل

أين تضيف هذا المقتطف؟

يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”

هل هذا المقتطف (لا يزال) يعمل؟

يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.

إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂

هل تحتاج إلى مساعدة في WooCommerce؟

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