WooCommerce: إضافات المنتج (بدون مكون إضافي!)

الوظائف الإضافية لمنتج WooCommerce هي حقول إدخال مخصصة تظهر في صفحة منتج واحد. يطلق عليهم اسم “الوظائف الإضافية” حيث يمكنك إضافة تخصيص المنتج أو زيادة البيع (بتكلفة بالطبع).

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

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

قم بإضافة حقل إدخال مخصص لكل صفحة منتج واحد في WooCommerce @

مقتطف PHP: إظهار حقل الإدخال المخصص @ صفحة منتج واحد WooCommerce

/**
 * @snippet       Add input field to products - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.9
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
// -----------------------------------------
// 1. Show custom input field above Add to Cart
 
add_action( 'woocommerce_before_add_to_cart_button', 'bbloomer_product_add_on', 9 );
 
function bbloomer_product_add_on() {
    $value = isset( $_POST['custom_text_add_on'] ) ? sanitize_text_field( $_POST['custom_text_add_on'] ) : '';
    echo '<div><label>Custom Text Add-On <abbr class="required" title="required">*</abbr></label><p><input name="custom_text_add_on" value="' . $value . '"></p></div>';
}
 
// -----------------------------------------
// 2. Throw error if custom input field empty
 
add_filter( 'woocommerce_add_to_cart_validation', 'bbloomer_product_add_on_validation', 10, 3 );
 
function bbloomer_product_add_on_validation( $passed, $product_id, $qty ){
   if( isset( $_POST['custom_text_add_on'] ) && sanitize_text_field( $_POST['custom_text_add_on'] ) == '' ) {
      wc_add_notice( 'Custom Text Add-On is a required field', 'error' );
      $passed = false;
   }
   return $passed;
}
 
// -----------------------------------------
// 3. Save custom input field value into cart item data
 
add_filter( 'woocommerce_add_cart_item_data', 'bbloomer_product_add_on_cart_item_data', 10, 2 );
 
function bbloomer_product_add_on_cart_item_data( $cart_item, $product_id ){
    if( isset( $_POST['custom_text_add_on'] ) ) {
        $cart_item['custom_text_add_on'] = sanitize_text_field( $_POST['custom_text_add_on'] );
    }
    return $cart_item;
}
 
// -----------------------------------------
// 4. Display custom input field value @ Cart
 
add_filter( 'woocommerce_get_item_data', 'bbloomer_product_add_on_display_cart', 10, 2 );
 
function bbloomer_product_add_on_display_cart( $data, $cart_item ) {
    if ( isset( $cart_item['custom_text_add_on'] ) ){
        $data[] = array(
            'name' => 'Custom Text Add-On',
            'value' => sanitize_text_field( $cart_item['custom_text_add_on'] )
        );
    }
    return $data;
}
 
// -----------------------------------------
// 5. Save custom input field value into order item meta
 
add_action( 'woocommerce_add_order_item_meta', 'bbloomer_product_add_on_order_item_meta', 10, 2 );
 
function bbloomer_product_add_on_order_item_meta( $item_id, $values ) {
    if ( ! empty( $values['custom_text_add_on'] ) ) {
        wc_add_order_item_meta( $item_id, 'Custom Text Add-On', $values['custom_text_add_on'], true );
    }
}
 
// -----------------------------------------
// 6. Display custom input field value into order table
 
add_filter( 'woocommerce_order_item_product', 'bbloomer_product_add_on_display_order', 10, 2 );
 
function bbloomer_product_add_on_display_order( $cart_item, $order_item ){
    if( isset( $order_item['custom_text_add_on'] ) ){
        $cart_item['custom_text_add_on'] = $order_item['custom_text_add_on'];
    }
    return $cart_item;
}
 
// -----------------------------------------
// 7. Display custom input field value into order emails
 
add_filter( 'woocommerce_email_order_meta_fields', 'bbloomer_product_add_on_display_emails' );
 
function bbloomer_product_add_on_display_emails( $fields ) { 
    $fields['custom_text_add_on'] = 'Custom Text Add-On';
    return $fields; 
}

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

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

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

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

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

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

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

WooCommerce: إظهار الوصف المختصر المخصص عند إفراغه

WooCommerce: إعادة تسمية وصف المنتج Tab Label @ Single Product Page

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