WooCommerce: أضف محتوى أسفل صور منتج واحد

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

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

في الواقع ، يستبدل المعرض الجديد تمامًا المحتوى الافتراضي عبر JQuery ، بما في ذلك هذا الخطاف. إضافة المحتوى ليست سهلة كما كانت من قبل. إذن ، هذا هو الحل (قد ترغب في التحقق من كيفية تصرفه على الهاتف المحمول أو ربما إخفاء ذلك تمامًا للأجهزة الصغيرة – تم اختبار هذا على سطح المكتب فقط).

أضف محتوى أسفل صور WooCommerce Single Product Page

مقتطف PHP: أضف محتوى أسفل معرض الصور @ WooCommerce منتج واحد

/**
 * @snippet       Add Content Below the Gallery Images @ WooCommerce Single Product
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 4.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
  
// Note 1: this works on Storefront theme, might need customization for other themes
// Note 2: class "woocommerce-product-gallery" is vital for inheriting CSS float left, margins and widths
  
add_action( 'woocommerce_after_single_product_summary' , 'bbloomer_add_below_prod_gallery', 5 );
  
function bbloomer_add_below_prod_gallery() {
   echo '<div class="woocommerce-product-gallery" style="background: #fdfd5a; padding: 1em 2em">';
   echo '<span>THIS IS A TEST. YOU CAN ADD TEXT, IMAGES AND ANY HTML</span>';
   echo '</div>';
}

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

WooCommerce: عرض الفيديو بدلاً من صور المنتج

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

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

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

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

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

WooCommerce: أضف رمزًا إلى أزرار إضافة إلى عربة التسوق

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