WooCommerce: عرض شارة المنتج المخصصة (بشروط)

هناك العديد من المكونات الإضافية لإظهار الشارات والإشعارات والرسائل المخصصة … ولكن كالمعتاد يمكن أن تساعدك بضعة أسطر من PHP في تحقيق نفس النتيجة!

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

استمتع 🙂

اعرض شارة منتج مخصصة على صفحة منتج واحد لـ WooCommerce

الجزء 1 – مقتطف PHP: عرض مربع الاختيار @ صفحة تحرير المنتج

نحتاج أولاً إلى إنشاء مربع اختيار جديد يمنحنا التحكم في إظهار الشارة أم لا. هذا سهل جدا للقيام به الشيء الصعب الوحيد هو التأكد من أننا “نحفظ” قيمة مربع الاختيار في ملف التعريف المنشور ، بحيث يمكننا في الجزء 2 التحقق مما إذا كان مربع الاختيار محددًا أم لا.

/**
 * @snippet       Checkbox to display Custom Product Badge Part 1 - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @source        https://businessbloomer.com/?p=73566
 * @author        Rodolfo Melogli
 * @testedwith    Woo 3.5.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
  
// -----------------------------------------
// 1. Add new checkbox to product edit page (General tab)
  
add_action( 'woocommerce_product_options_general_product_data', 'bbloomer_add_badge_checkbox_to_products' );        
  
function bbloomer_add_badge_checkbox_to_products() {           
woocommerce_wp_checkbox( array( 
'id' => 'custom_badge', 
'class' => '', 
'label' => 'Show Custom Badge'
) 
);      
}
  
// -----------------------------------------
// 2. Save checkbox via custom field
  
add_action( 'save_post', 'bbloomer_save_badge_checkbox_to_post_meta' );
  
function bbloomer_save_badge_checkbox_to_post_meta( $product_id ) {
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
        return;
    if ( isset( $_POST['custom_badge'] ) ) {
            update_post_meta( $product_id, 'custom_badge', $_POST['custom_badge'] );
    } else delete_post_meta( $product_id, 'custom_badge' );
}

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

اعرض مربع اختيار لتمكين / تعطيل شارة منتج WooCommerce

الجزء 2 – مقتطف PHP: Display Badge @ Single Product Page

/**
 * @snippet       Checkbox to display Custom Product Badge Part 2 - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @source        https://businessbloomer.com/?p=73566
 * @author        Rodolfo Melogli
 * @compatible    Woo 3.5.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
  
// -----------------------------------------
// 3. Display badge @ single product page if checkbox checked
  
add_action( 'woocommerce_single_product_summary', 'bbloomer_display_badge_if_checkbox', 6 );
  
function bbloomer_display_badge_if_checkbox() {
    global $product;     
    if ( get_post_meta( $product->get_id(), 'custom_badge', true ) ) {
        echo '
<div class="woocommerce-message">CUSTOM BADGE!</div>
 
';
    }
}

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

اعرض شارة منتج مخصصة على صفحة منتج واحد لـ WooCommerce

“لا أكود – هل هناك مكون إضافي موثوق به؟”

نظرًا لأن العديد من القراء يرغبون في كتابة الكود ولكنهم لا يشعرون بالثقة بنسبة 100 ٪ به ، فقد قررت البحث عن مكون إضافي موثوق به يحقق نفس النتيجة (أو حتى أفضل).

في هذه الحالة ، أوصي باستخدام البرنامج المساعد YITH WooCommerce Badge Management . علاوة على عرض شارات نصية مخصصة (إصدار مجاني) ، يمكنك أيضًا إنشاء CSS وصورة وشارات متقدمة وتعيين شارات منتج لمنتجات و / أو فئات محددة واختيار موضع الشارة وغير ذلك الكثير.

ولكن في حالة رغبتك في الترميز ، استمر في القراءة 🙂

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

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

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

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

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

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

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

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

WooCommerce: 10 مقتطفات سهلة لزيادة مبيعاتك

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