كتل WooCommerce: إخفاء الصور وما إلى ذلك من كتلة شبكة المنتج

يدخل Business Bloomer عالم Gutenberg اليوم ، ونقوم بذلك من خلال برنامج تعليمي بسيط للتخصيص يتعلق بمجموعات WooCommerce Gutenberg “Product Grid”: حاليًا هذه هي ” أفضل المنتجات مبيعًا ” ، ” أحدث المنتجات ” ، ” المنتجات المعروضة للبيع ” ، ” المنتجات الأعلى تقييمًا “،” المنتجات حسب الفئة “واستخدم نفس الرمز الأساسي …

ومع ذلك ، فإنهم جميعًا يستخدمون رمزًا مخصصًا وليس قوالب WooCommerce الافتراضية (وبالتالي لا يمكننا الاستفادة من خطافات WooCommerce لأرشيف المتجر / المنتج / حلقة المنتج للأسف) ، لذلك نحتاج إلى إيجاد حل بديل إذا أردنا ذلك قم بإزالة بعض العناصر الافتراضية التي تظهر مع عناصر شبكة المنتج: الرابط الثابت للمنتج ، وصورة المنتج ، وعنوان المنتج * ، وشارة البيع ، وسعر المنتج * ، والتصنيف * ، والإضافة إلى زر سلة التسوق * بهذا الترتيب الدقيق.

* كما ترى من لقطة الشاشة أدناه ، في الواقع ، يمكنك بالفعل إزالة المعلومات بعلامة النجمة من إعدادات الحظر. لذلك ، في هذه المقالة ، سنرى كيفية إزالة الباقي في حالة عدم رغبتك في ذلك: الرابط الثابت ، والصورة ، وشارة البيع. يتمتع!

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

WooCommerce Core (كود المصدر)

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

protected function render_product( $product ) {
   $data = (object) array(
      'permalink' => esc_url( $product->get_permalink() ),
      'image'     => $this->get_image_html( $product ),
      'title'     => $this->get_title_html( $product ),
      'rating'    => $this->get_rating_html( $product ),
      'price'     => $this->get_price_html( $product ),
      'badge'     => $this->get_sale_badge_html( $product ),
      'button'    => $this->get_button_html( $product ),
   );
 
   return apply_filters(
      'woocommerce_blocks_product_grid_item_html',
      "<li class=\"wc-block-grid__product\">
         <a href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">
            {$data->image}
            {$data->title}
         </a>
         {$data->badge}
         {$data->price}
         {$data->rating}
         {$data->button}
      </li>",
      $data,
      $product
   );
}

كما ترى ، هناك عامل تصفية مفيد ( woocommerce_blocks_product_grid_item_html ) يمكننا استخدامه إذا كنا نرغب في تجاوز نتيجة HTML.

يمكننا إزالة (كما في هذا البرنامج التعليمي) ، وإعادة الترتيب (ترقب) وحتى إضافة معلومات مخصصة مثل الحقول المخصصة أو HTML (تابعنا) إلى كتل العناصر. هنا اتبع بعض الأمثلة “إزالة”.

مقتطف PHP: إزالة الصورة من كتل شبكة منتج WooCommerce

تلميح: لإزالة صورة المنتج ، ما عليك سوى استدعاء خطاف المرشح الذي ذكرناه عبر add_filter () وإزالة “{$ data-> image}” من الكود!

/**
 * @snippet       Hide Item Image - WooCommerce Product Grid Blocks
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'woocommerce_blocks_product_grid_item_html', 'bbloomer_remove_product_grid_block_inmage', 9999, 3 );
 
function bbloomer_remove_product_grid_block_image( $html, $data, $product ) {
   return "<li class=\"wc-block-grid__product\">
            <a href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">
               {$data->title}
            </a>
            {$data->badge}
            {$data->price}
            {$data->rating}
            {$data->button}
         </li>";
}

مقتطف PHP: إزالة شارة البيع من كتل شبكة منتج WooCommerce

تلميح: لإزالة شارة بيع المنتج ، ما عليك سوى استدعاء خطاف المرشح الذي ذكرناه عبر add_filter () وإزالة “{$ data-> شارة}” من الكود!

/**
 * @snippet       Hide Item Image - WooCommerce Product Grid Blocks
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'woocommerce_blocks_product_grid_item_html', 'bbloomer_remove_product_grid_block_badge', 9999, 3 );
 
function bbloomer_remove_product_grid_block_badge( $html, $data, $product ) {
   return "<li class=\"wc-block-grid__product\">
            <a href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">
               {$data->image}
               {$data->title}
            </a>
            {$data->price}
            {$data->rating}
            {$data->button}
         </li>";
}

مقتطف PHP: إزالة الرابط الثابت من كتل شبكة منتج WooCommerce

تلميح: لإزالة الرابط الثابت للمنتج ، ما عليك سوى استدعاء خطاف المرشح الذي ذكرناه عبر add_filter () وإزالة علامة href من الكود!

/**
 * @snippet       Remove Item Permalink - WooCommerce Product Grid Blocks
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
add_filter( 'woocommerce_blocks_product_grid_item_html', 'bbloomer_remove_product_grid_block_permalink', 9999, 3 );
 
function bbloomer_remove_product_grid_block_permalink( $html, $data, $product ) {
   return "<li class=\"wc-block-grid__product\">
            {$data->image}
            {$data->title}
            {$data->badge}
            {$data->price}
            {$data->rating}
            {$data->button}
         </li>";
}

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

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

WooCommerce: أضف إلى رابط عربة التسوق لفتحه في علامة تبويب متصفح جديدة

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

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

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

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

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