WooCommerce: أضف حقلًا مخصصًا إلى تنويعات المنتج

تعد إضافة وعرض الحقول المخصصة على منتجات WooCommerce أمرًا بسيطًا للغاية. على سبيل المثال ، يمكنك إضافة حقل “RRP / MSRP” إلى أحد المنتجات ، أو ربما استخدام ACF وعرض قيمته على صفحة منتج واحد .

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

WooCommerce: كيفية إضافة حقل مخصص لأشكال المنتج المختلفة

الجزء 1 – مقتطف PHP: إضافة وحفظ Custom Field @ Product Variations

/**
 * @snippet       Add Custom Field to Product Variations - WooCommerce
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 4.6
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
 
// -----------------------------------------
// 1. Add custom field input @ Product Data > Variations > Single Variation
 
add_action( 'woocommerce_variation_options_pricing', 'bbloomer_add_custom_field_to_variations', 10, 3 );
 
function bbloomer_add_custom_field_to_variations( $loop, $variation_data, $variation ) {
   woocommerce_wp_text_input( array(
'id' => 'custom_field[' . $loop . ']',
'class' => 'short',
'label' => __( 'Custom Field', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, 'custom_field', true )
   ) );
}
 
// -----------------------------------------
// 2. Save custom field on product variation save
 
add_action( 'woocommerce_save_product_variation', 'bbloomer_save_custom_field_variations', 10, 2 );
 
function bbloomer_save_custom_field_variations( $variation_id, $i ) {
   $custom_field = $_POST['custom_field'][$i];
   if ( isset( $custom_field ) ) update_post_meta( $variation_id, 'custom_field', esc_attr( $custom_field ) );
}
 
// -----------------------------------------
// 3. Store custom field value into variation data
 
add_filter( 'woocommerce_available_variation', 'bbloomer_add_custom_field_variation_data' );
 
function bbloomer_add_custom_field_variation_data( $variations ) {
   $variations['custom_field'] = '<div class="woocommerce_custom_field">Custom Field: <span>' . get_post_meta( $variations[ 'variation_id' ], 'custom_field', true ) . '</span></div>';
   return $variations;
}

الجزء 2 – تجاوز قالب WooCommerce: عرض الحقل المخصص عند اختيار تنوع المنتج

نظرًا لأن عملية اختيار التنويعات تستخدم JavaScript من أجل استرداد بيانات التباين الصحيحة ، فإن الخيار الوحيد لدينا هو تجاوز ملف قالب WooCommerce المسمى variation.php ، والذي يمكن العثور عليه ضمن woocommerce / قوالب / single-product / add-to- عربة التسوق

يرجى ملاحظة – لن نقوم بتحرير الملفات الأساسية (لأن أ) ليست فكرة رائعة وسيتم حذف الكود في المرة القادمة التي نقوم فيها بتحديث WooCommerce). بدلاً من ذلك ، من أجل تجاوز هذا النموذج ، نقوم بإنشاء ملف يسمى ” variation.php ” ووضعه في مجلد ” woocommerce / single-product / add-to-cart ” الخاص بقالبنا الفرعي . إذا لم يكن ذلك موجودًا ، فقم بإنشائه عبر FTP.

يجب أن يبدو البرنامج النصي للملف woocommerce / single-product / add-to-cart / variation.php للقالب الفرعي النهائي على هذا النحو (يرجى ملاحظة أنه يجب تغيير تكرارات “custom_field” في حالة إعادة تسميته في Snippet 1):

<script type="text/template" id="tmpl-variation-template">
<div class="woocommerce-variation-description">
{{{ data.variation.variation_description }}}
</div>
 
<div class="woocommerce-variation-price">
{{{ data.variation.price_html }}}
</div>
 
<div class="woocommerce-variation-custom_field">
{{{ data.variation.custom_field}}}
</div>
 
<div class="woocommerce-variation-availability">
{{{ data.variation.availability_html }}}
</div>
</script>

هل هناك مكون إضافي (موثوق) لذلك؟

إذا كنت تحب البرمجة ولكنك لا تشعر بالثقة بنسبة 100 ٪ مع PHP ، فقد قررت البحث عن مكون إضافي موثوق به يحقق نفس النتيجة (حسنًا ، يمنحك في الواقع المزيد).

في هذه الحالة ، أوصي  بإضافة WooCommerce Custom Fields for Variations plugin. علاوة على إضافة أي نوع من الحقول المخصصة إلى منتجات متغيرة (نص أو منطقة نصية أو تحديد أو مربعات اختيار أو أزرار اختيار) ، يمكنك تجميعها تحت عناوين منفصلة والسماح لمدير المتجر بإدارتها بسهولة أكبر وأكثر من ذلك بكثير.

ولكن في حال كنت تكره المكونات الإضافية وترغب في كتابة التعليمات البرمجية (أو ترغب في تجربة ذلك) ، فاستمر في القراءة 🙂

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

WooCommerce: أضف حقول منتج مخصصة (مثل RRP) بدون مكون إضافي

WooCommerce: احصل على معرف التباين المحدد حاليًا

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

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

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

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