WooCommerce: منتج واحد في كل صف في صفحة المتجر

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

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

هدفنا: تصميم منتج واحد لكل صف على صفحة المتجر

مقتطف PHP: تغيير عدد المنتجات لكل صف في صفحة متجر WooCommerce

/**
 * @snippet       1 Column Layout @ WooCommerce Shop
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.9
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'loop_shop_columns', 'loop_columns', 999 );
 
function loop_columns() {
   return 1; 
}

مقتطف CSS: تخطيط مركزي @ صفحة تسوق WooCommerce

بمجرد أن يكون لديك “منتج واحد لكل صف” في مكانه ، قد تحصل على نتيجة مشابهة لهذه (بشكل أساسي ، على الرغم من وجود منتج واحد في كل صف ، إلا أنها لا تأخذ العرض الكامل وبالتالي لا يبدو التصميم صحيحًا):

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

مما يعني أننا نحتاج أيضًا إلى استخدام بعض CSS لنقل المنتجات وتوسيطها.

/**
 * @snippet       Stretch Products to Full Width @ WooCommerce Shop
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.9
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
ul.products li.product .woocommerce-loop-product__link {
    margin: 0 auto;
}
 
ul.products li.product .button {
    margin: 0 auto;
}

تظهر النتيجة النهائية في أعلى هذه الصفحة.

إذا كنت تريد أيضًا تغيير أبعاد صور منتجك ، فانتقل إلى وورد بريس Dashboard> Appearance> Customize> WooCommerce> Product Images وتأكد من أن عرض صور الكتالوج لا يقل عن 1000 بكسل.

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

WooCommerce: إخفاء الأسعار في صفحات المتجر والفئة

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

WooCommerce: أضف نصًا أسفل كل صفحة متجر في كل منتج

WooCommerce: إخفاء المنتجات من فئة معينة في المتجر

WooCommerce: اعرض “مباع بالكامل” @ Shop Page

WooCommerce: عرض حالة المخزون / الكمية في صفحة المتجر

WooCommerce: عرض YITH أزرار قائمة الرغبات @ Shop Page

WooCommerce: أعد تسمية زر “إضافة إلى عربة التسوق” إذا كان المنتج بالفعل @ سلة التسوق

WooCommerce: تغيير الروابط الثابتة للمنتج في صفحات المتجر / الحلقات

WooCommerce: إزالة عنوان “Shop” @ WooCommerce Shop Page

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

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

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

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

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

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

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