WooCommerce: منتجات ذات ارتفاع متساوٍ في صفحة المتجر

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

إذن ، إليك بعض الخطوات التي يمكنك اتخاذها لجعل العرض متسقًا. يتمتع!

من ليس على دراية بهذا الرأي؟

الخطوة 1: فرض ارتفاع الصورة

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

1: 1 اقتصاص الصورة

الخطوة 2: اجعل عناوين المنتج متسقة

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

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

الخطوة 3: إزالة معلومات المنتج

الخطوة الأخيرة هي إزالة المعلومات التي تتسبب في أن يتخذ “مربع” المنتج ارتفاعًا مخصصًا. إذا كانت جميع المنتجات تحتوي فقط على IMAGE – NAME – PRICE – BUTTON ، فمن الواضح أنها ستأخذ نفس الارتفاع!

لذا فإن أحد الخيارات هو إزالة الأشياء التي يضيفها WooCommerce إلى منتجات صفحة المتجر: شارة SALE (التي في موضوع Storefront لا يتم وضعها فوق الصورة ولكن داخل div الخاص بها) ونجوم المراجعة – بدونها ستكون المنتجات متسقة في الارتفاع :

بإزالة SALE و REVIEW STARS سنحصل على ارتفاعات متساوية

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

/**
 * @snippet       Remove Sale & Reviews @ WooCommerce Shop
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli, BusinessBloomer.com
 * @testedwith    WooCommerce 4.5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
// Default WooCommerce:
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
 
// For Storefront theme:
add_action( 'woocommerce_before_shop_loop', 'bbloomer_trigger_after_storefront' );
 
function bbloomer_trigger_after_storefront() {
   remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 6 );
   remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
}

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

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 في حالة حدوث خطأ!