WooCommerce: تغيير عدد الصور المصغرة لكل صف @ معرض المنتج

أحدث WooCommerce 3.0 ثورة في صفحة المنتج الفردية المميزة وصور معرض المنتجات ، بما في ذلك PHP. إذا ، في الماضي ، كان عامل التصفية البسيط من WooCommerce كافياً لتغيير عدد الصور المصغرة لكل صف ( https://docs.woocommerce.com/document/change-number-of-thumbnails-per-row-in-product- صالات العرض / ) ، لم يعد هذا موجودًا بعد الآن 🙁

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

موضوع WooCommerce & 2017: قم بتغيير عدد الإبهام لكل صف في معرض المنتجات

مقتطف PHP: تغيير عدد الصور المصغرة لكل صف @ معرض المنتجات | كتب مريم الدخيل لاكاديمية الثراء

/**
 * @snippet       Change No. of Thumbnails per Row @ Product Gallery
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 5.0
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'woocommerce_single_product_image_gallery_classes', 'bbloomer_5_columns_product_gallery' );
 
function bbloomer_5_columns_product_gallery( $wrapper_classes ) {
   $columns = 5; // change this to 2, 3, 5, etc. Default is 4.
   $wrapper_classes[2] = 'woocommerce-product-gallery--columns-' . absint( $columns );
   return $wrapper_classes;
}

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

سيتم إضافة CSS لموضوع TwentySeventeen (تغيير عدد الصور المصغرة لكل صف في معرض المنتج)

يرجى ملاحظة: الصورة المميزة لهذه المدونة هي نتيجة PHP + CSS في موضوع TwentySeventeen.

/* Remove default "clear" at position 5, 9, etc. This is for 4 columns */
 
.woocommerce-product-gallery .flex-control-thumbs li:nth-child(4n+1) {
    clear: none;
}
 
/* Add new "clear" at position 6, 11, etc. This is for 5 columns */
 
.woocommerce-product-gallery .flex-control-thumbs li:nth-child(5n+1) {
    clear: left;
}

ستتم إضافة CSS لموضوع واجهة المتجر (تغيير عدد الصور المصغرة لكل صف @ معرض المنتج)

/* Add new CSS for 5 columns */
 
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
    width: 11.1%;
    margin-right: 11.1%;
float: left;
}
 
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) {
    margin-right: 0;
}

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

قم بتغيير معرض منتجات WooCommerce إلى 5 أعمدة في موضوع واجهة المتجر

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

WooCommerce: كيفية تقصير عناوين المنتج

WooCommerce: إزالة علامات تبويب المنتج ، وإظهار الوصف الطويل

WooCommerce: عرض معرض المنتجات عموديًا (صفحة منتج واحدة)

WooCommerce: نموذج الاستفسار عن المنتج @ صفحة منتج واحد (CF7)

WooCommerce: أضف ملصق “كمية” أمام زر إضافة إلى عربة التسوق

WooCommerce: قم بتغيير كمية إضافة إلى عربة التسوق في قائمة اختيار المنسدلة

WooCommerce: تحرير عنوان URL لصورة المنتج الخارجية

WooCommerce: أضف حقلًا مخصصًا إلى تنويعات المنتج

WooCommerce: قم بالتمرير إلى علامة تبويب المنتج @ صفحة منتج واحد

WooCommerce: منتجات مخصصة ذات صلة

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

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

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

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

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

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

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