ظل تحدي اليوم على رأس قائمة الكتابة الخاصة بي لفترة من الوقت. وبفضل أحد مشتركي Business Bloomer ، قررت أخيرًا أن أنشر درسًا تعليميًا سريعًا. فيما يلي كيفية محاذاة الصور المصغرة لـ “معرض المنتجات” إلى جانب صورة صفحة المنتج الفردية الرئيسية ، بغض النظر عن الجهاز.
WooCommerce: اعرض الصور المصغرة لمنتج واحد بجانب الصورة الرئيسية
WooCommerce: اعرض الصور المصغرة لمنتج واحد بجانب الصورة الرئيسية
أولاً ، نحتاج إلى التأكد من أن معرض المنتجات لدينا يحتوي على صورة واحدة لكل صف إذا أردنا عرضها عموديًا (الافتراضي هو 3 إذا لم أكن مخطئًا).
/**
* @snippet Change Gallery Columns @ Single Product Page
* @how-to Get CustomizeWoo.com FREE
* @sourcecode https://businessbloomer.com/?p=20518
* @author Rodolfo Melogli
* @compatible WooCommerce 3.5.4
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_filter ( 'woocommerce_product_thumbnails_columns', 'bbloomer_change_gallery_columns' );
function bbloomer_change_gallery_columns() {
return 1;
}/**
* @snippet CSS to Move Gallery Columns @ Single Product Page
* @sourcecode https://businessbloomer.com/?p=20518
* @author Rodolfo Melogli
* @compatible WooCommerce 3.5.4
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_filter ( 'storefront_product_thumbnail_columns', 'bbloomer_change_gallery_columns_storefront' );
function bbloomer_change_gallery_columns_storefront() {
return 1;
}ثانيًا ، نحتاج إلى “نقل” معرض المنتجات بجانب الصورة. هذا هو CSS أساسي جدًا يمكنك وضعه في ورقة أنماط قالب طفلك.
/**
* @snippet CSS to Move Gallery Columns @ Single Product Page
* @sourcecode https://businessbloomer.com/?p=20518
* @author Rodolfo Melogli
* @compatible WooCommerce 3.5.4
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
/* Make image 75% width to make room to its right */
.single-product div.product .woocommerce-product-gallery .flex-viewport {
width: 75%;
float: left;
}
/* Make Gallery 25% width and place it beside the image */
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
width: 25%;
float: left;
}
/* Style each Thumbnail with width and margins */
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
width: 90%;
float: none;
margin: 0 0 10% 10%;
}WooCommerce: كيفية تقصير عناوين المنتج
WooCommerce: إزالة علامات تبويب المنتج ، وإظهار الوصف الطويل
WooCommerce: تعطيل نشر Jetpack للمنتجات
WooCommerce: تغيير عدد الصور المصغرة لكل صف @ معرض المنتج
WooCommerce: قم بتغيير كمية إضافة إلى عربة التسوق في قائمة اختيار المنسدلة
WooCommerce: قم بتعطيل Zoom و Slider & Lightbox @ Single Product
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 في حالة حدوث خطأ!
