أنشئ متجر ووكومرس باستخدام Avada

إذا بدت صفحة سلة التسوق لديك كفوضى عارمة من الرموز المختصرة سيئة التنسيق بمجرد تفعيل Avada، فالمشكلة ليست في WooCommerce، بل غالباً ما تكون مزيجاً من الإعدادات والقوالب والخطافات الموضوعة في غير موضعها الصحيح. بمجرد أن يصبح الأساس نظيفاً، يصبح Fusion Builder أداةً فعّالة لتسريع نمو متجرك الإلكتروني الاحترافي.

ما سنحققه

ستتمكن من إنشاء متجر WooCommerce مستقر و"نظيف" باستخدام Avada (Fusion Builder)، دون الحاجة إلى التعامل مع قوالب WooCommerce.

عملياً، في النهاية ستحصل على:

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

وهو مخصص للمتاجر التقليدية (المنتجات المادية، والدورات التدريبية، والتنزيلات الرقمية) والمدونين الذين يرغبون في البيع دون تحويل موقعهم إلى موقع بناء دائم.

ملخص سريع

تستخدم Avada + Fusion Builder للتصميم، ويحتفظ WooCommerce بمنطق التجارة الإلكترونية.
يمكنك تجنب تعديل WooCommerce "يدويًا": أنت تستخدم الخطافات (الإجراءات/الفلاتر) وبعض التجاوزات المستهدفة.
تقوم بإنشاء مكون إضافي مصغر (أو مكون إضافي مصغر) لتخصيصاتك، وليس في القالب الرئيسي.
يمكنك تحسين صفحة المنتج (التأكيد + الشارة + النص المشروط) عبر خطافات WooCommerce.
يمكنك تبسيط عملية الدفع عبر الفلتر woocommerce_checkout_fields وأسهم الاستثمار.
يمكنك تحميل ملفات CSS/JS بشكل سليم باستخدام wp_enqueue_scripts (وليس عبر "CSS مخصص" متناثر).

متى يستخدم هذا الحل

أنت تستخدم Avada (السمة) و Fusion Builder (أو Fusion Builder Elements) وتريد متجرًا متناسقًا بصريًا.
أنت مبتدئ وتريد طريقة تصمد أمام اختبار الزمن (التحديثات) WordPress 6.9.4+، ووكومرس حديث، PHP 8.1+).
تحتاج إلى تخصيص سلة التسوق/صفحة الدفع الخاصة بك دون تثبيت 12 مكونًا إضافيًا للحقول.
تريد أن تكون قادراً على العودة بسهولة إلى الحالة السابقة (تعطيل المكون الإضافي المصغر = العودة إلى السلوك القياسي).

متى لا يجب استخدام هذا الحل

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

قبل البدء (المتطلبات الأساسية)

الإصدارات والبيئة (أبريل 2026)

WordPress : 6.9.4 (سياقك).
PHP: يُوصى بالحد الأدنى 8.1 (غالباً ما يكون الإصدار 8.2/8.3 أكثر راحة في بيئة الإنتاج إذا كان مزود الاستضافة الخاص بك يدعمه).
ووكومرس: قم بتثبيت أحدث إصدار مستقر متوفر من wordpress.org/plugins/woocommerce.
Avada: تم تحديث القالب + Fusion Builder (عبر Avada > الصيانة / التحديثات).

موقع النسخ الاحتياطي والاختبار

لا تختبر هذه التغييرات مباشرةً في بيئة الإنتاج. فقد رأيتُ مرارًا وتكرارًا خطأً فادحًا يتسبب في تعطيل واجهة المستخدم بالكامل نتيجةً لخطأ جسيم.

قم بعمل نسخة احتياطية من ملفاتك وقاعدة بياناتك (أو لقطة استضافة).
إذا أمكن، قم بنسخ الموقع إلى بيئة تجريبية.

أين يتم لصق الكود (اختر طريقة واحدة)

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

الطريقة أ (موصى بها): mu-plugin

يتم تحميل إضافة mu-plugin (الإضافة الإلزامية) تلقائيًا ولا يمكن تعطيلها عن طريق الخطأ في لوحة التحكم. مثالية لتخصيصات النظام الأساسي.

أنشئ المجلد /wp-content/mu-plugins/ إذا لم يكن موجوداً.
إنشاء ملف /wp-content/mu-plugins/avada-woocommerce-pro.php.

الطريقة ب: إضافة مخصصة

أنشئ إضافة في /wp-content/plugins/الميزة: يمكنك تفعيلها/تعطيلها بسهولة.

الطريقة ج: ملف functions.php من القالب الفرعي (مقبول، ولكنه أقل أناقة)

فقط إذا كان لديك بالفعل قالب فرعي من Avada وقمت بتمركزه كل في الداخل. لا تقم بتعديل القالب الرئيسي مطلقًا.

الوصول إلى إعدادات WooCommerce ذات الصلة

ووكومرس > الإعدادات > المنتجات (عرض المتجر، الصور، المخزون).
ووكومرس > الإعدادات > خيارات متقدمة (صفحات سلة التسوق / الطلب / حسابي).
المظهر> التخصيص (إذا كنت تستخدم خيارات القالب المتعلقة بـ WooCommerce).

بعض المفردات (مفيدة قبل البرمجة)

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

خطافات ووكومرس المستخدمة

يعتمد ووكومرس على خطافات ووردبريس (do_action, apply_filtersلكنها توفر خطافاتها الخاصة، الموجهة بشكل كبير للتجارة الإلكترونية. والفرق العملي: تُوضع خطافات WooCommerce في قوالب WooCommerce (السلة، صفحة الدفع، المنتج) وتسمح لك بإضافة المحتوى دون الحاجة إلى إعادة كتابة القالب بالكامل.

woocommerce_before_single_product_summary : قبل ملخص المنتج (منطقة الصور/المعرض).
woocommerce_single_product_summary : منطقة العنوان، السعر، المقتطف، زر إضافة إلى السلة.
woocommerce_after_add_to_cart_button : فقط بعد زر "إضافة إلى السلة".
woocommerce_before_cart / woocommerce_after_cart : قبل/بعد السلة.
woocommerce_before_checkout_form : قبل نموذج الطلب.
woocommerce_checkout_fields (فلتر): تعديل حقول الدفع.
woocommerce_checkout_process : التحقق من صحة البيانات على جانب الخادم (الأمان + الاتساق).

الوثائق الرسمية المفيدة: developer.woocommerce.com/docs ودليل الخطافات (بحسب الإصدار) عبر github.com/woocommerce/woocommerce (قوالب).

الخطوة الأولى: تجهيز Avada + WooCommerce لعرض نظيف

قبل "بناء" أي شيء، تأكد من أن WooCommerce يشير إلى الصفحات الصحيحة وأن Avada لا يفرض عليك تخطيطًا غير متوقع.

1) تحقق من صفحات ووكومرس

اذهب ووكومرس > الإعدادات > خيارات متقدمة.
راجع الصفحات التالية: سلة التسوق, طلب, حسابي.
افتح كل صفحة في المحرر: يجب أن تحتوي على رمز WooCommerce المختصر المقابل (أو كتلة WooCommerce إذا كنت تستخدم محرر الكتل).

قاعدة بسيطة: في صفحة سلة التسوق/الدفع/حسابي، تجنب إضافة 15 قسمًا من Fusion Builder حول الكود المختصر. بدلًا من ذلك، استخدم بنية بسيطة (عنوان + حاوية) ودع WooCommerce يتولى الوظائف الأساسية.

2) أعد إنشاء الروابط الدائمة إذا واجهت أي أخطاء 404 متعلقة بالمنتج

إذا كانت صفحات منتجاتك تُظهر خطأ 404 بعد تفعيل Avada أو تغيير بنية الصفحة:

اذهب الإعدادات> الروابط الثابتة.
لا تُغيّر أي شيء، فقط انقر سجّل التعديلات.

هذا يُجبر ووردبريس على إعادة إنشاء قواعد إعادة الكتابة. إنه أمرٌ كلاسيكي.

3) تحديد قاعدة "تخطيط" متسقة لـ Avada

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

اختر قالبًا عالميًا "كامل العرض" لسلة التسوق/الطلب (غالبًا ما يكون أكثر قابلية للقراءة).
احتفظ بالشريط الجانبي فقط في صفحة المتجر إذا كان الكتالوج الخاص بك طويلاً (الفلاتر، الفئات).

في تجربتي، فإن غالبية "الأخطاء" في Avada + WooCommerce هي عدم اتساق في التخطيط: حاوية ضيقة للغاية، أو شريط جانبي يتم إدراجه افتراضيًا، أو عنوان صفحة مكرر (Avada + WooCommerce).

الخطوة الثانية: قم ببناء صفحات المتجر باستخدام Fusion Builder (دون تعطيل WooCommerce)

يُعدّ Fusion Builder أداةً ممتازةً لإنشاء صفحات التسويق. أما بالنسبة لـ WooCommerce، فإنّ أفضل استراتيجية هي استراتيجية هجينة: حيث تستخدم Fusion Builder لإنشاء الهيكل (الصفحات الرئيسية، والأقسام، وقسم التأكيدات، وقسم الأسئلة الشائعة)، وتترك لـ WooCommerce عرض الكتالوج عبر الرموز المختصرة/الكتل.

الخيار 1 (بسيط): صفحة المتجر "كتالوج" باستخدام رمز مختصر

قم بإنشاء صفحة "متجر" (أو قم بتحرير الصفحة الموجودة)، ثم أضف كتلة رمز/رمز مختصر في Fusion Builder باستخدام رمز مختصر WooCommerce.

أمثلة مفيدة:

يتم صيانة هذه الرموز المختصرة بواسطة ووكومرس. لتجنب المفاجآت، اجعلها بسيطة واختبرها على الهاتف المحمول.

الخيار الثاني (نظيف): صفحة المتجر الرئيسية مع أقسام Fusion Builder

الهيكل الذي أستخدمه غالباً:

القسم 1: البطل (باني الاندماج) + دعوة للعمل باتجاه فئة معينة.
القسم 2: 3 فوائد (التسليم، الإرجاع، الدعم).
القسم 3: المنتجات المميزة (رمز WooCommerce المختصر).
القسم 4: شهادات العملاء (Fusion Builder).
القسم 5: الفئات (رمز مختصر).

ستحصل على صفحة "تسويقية" دون إعادة اختراع منطق الكتالوج.

ملاحظة هامة: لا تقم ببناء صفحة الدفع "على أجزاء".

تُعدّ صفحة الدفع في WooCommerce نموذجًا معقدًا. إذا حاولت إعادة بنائها باستخدام Fusion Builder (الأعمدة، الأقسام، إلخ)، فإنك تُعرّض نفسك للمخاطر التالية:

الحقول التي لم تعد قابلة للتحقق،
طرق الدفع التي لم تعد معروضة (خلل في جافا سكريبت)،
أخطاء nonce (أمان) إذا قمت بتغليف النموذج بشكل غير صحيح.

لإتمام عملية الدفع، ابقَ على صفحة WooCommerce القياسية وقم بتخصيصها عبر الخطافات (الخطوة 4).

الخطوة 3: تخصيص صفحة المنتج (الشارات، عناصر التأكيد، النص الديناميكي)

سنضيف ثلاثة عناصر ملموسة، دون تجاوز القالب:

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

أنشئ إضافة صغيرة (مثال: إضافة صغيرة)

في /wp-content/mu-plugins/avada-woocommerce-pro.phpألصق هذا الهيكل الأساسي. حتى لو اخترت إضافة كلاسيكية، فسيكون الكود الداخلي متطابقًا.

<?php
/**
 * Plugin Name: Avada + WooCommerce (personnalisations boutique)
 * Description: Badges produit, réassurance, checkout simplifié. Compatible WordPress 6.9.4+ / PHP 8.1+.
 * Author: Votre Nom
 * Version: 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Badge stock : affiche un badge si le produit est en stock.
 */
add_action( 'woocommerce_before_single_product_summary', function () {
	if ( ! is_product() ) {
		return;
	}

	global $product;

	if ( ! $product || ! $product->is_in_stock() ) {
		return;
	}

	echo '<div class="bpcab-badge-stock" aria-label="Information expédition">';
	echo esc_html__( 'Expédié sous 24h (jours ouvrés)', 'textdomain' );
	echo '</div>';
}, 8 );

/**
 * Réassurance : affiche un bloc sous le bouton "Ajouter au panier".
 */
add_action( 'woocommerce_after_add_to_cart_button', function () {
	if ( ! is_product() ) {
		return;
	}

	echo '<div class="bpcab-reassurance" role="note">';
	echo '<ul>';
	echo '<li>' . esc_html__( 'Paiement sécurisé', 'textdomain' ) . '</li>';
	echo '<li>' . esc_html__( 'Support sous 24h', 'textdomain' ) . '</li>';
	echo '<li>' . esc_html__( 'Retours sous 14 jours (selon conditions)', 'textdomain' ) . '</li>';
	echo '</ul>';
	echo '</div>';
}, 20 );

/**
 * Texte dynamique : indique "Téléchargement immédiat" pour les produits téléchargeables.
 */
add_action( 'woocommerce_single_product_summary', function () {
	if ( ! is_product() ) {
		return;
	}

	global $product;

	if ( ! $product ) {
		return;
	}

	if ( $product->is_downloadable() || $product->is_virtual() ) {
		echo '<p class="bpcab-digital-note">' . esc_html__( 'Téléchargement immédiat après paiement.', 'textdomain' ) . '</p>';
	}
}, 35 );

النتيجة المتوقعة (واجهة المستخدم)

شارة مرئية أعلى معرض المنتجات (إذا كان المنتج متوفرًا في المخزون).
مربع صغير "للتأكيد" أسفل زر الشراء.
تصنيف يظهر أسفل العناصر الرئيسية (العنوان/السعر/المقتطف) للمنتجات الرقمية.

إذا لم يظهر لك أي شيء: تأكد من أنك بالفعل على صفحة منتج WooCommerce (نوع عنوان URL) /produit/...) وأن يتم تحميل الكود الخاص بك (mu-plugin في المكان الصحيح).

الخطوة الرابعة: تحسين سلة التسوق وعملية الدفع (الحقول، الرسائل، الثقة)

تُعدّ منطقة الدفع نقطة ضعف في مبيعات المتاجر. سنقوم هنا بثلاث خطوات بسيطة وفعّالة:

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

1) رسالة قبل نموذج الطلب

/**
 * Message de confiance avant le checkout.
 */
add_action( 'woocommerce_before_checkout_form', function () {
	if ( ! is_checkout() ) {
		return;
	}

	echo '<div class="bpcab-checkout-trust" role="note">';
	echo '<strong>' . esc_html__( 'Commande sécurisée', 'textdomain' ) . '</strong><br>';
	echo esc_html__( 'Vos informations sont chiffrées. Vous recevrez un e-mail de confirmation immédiatement.', 'textdomain' );
	echo '</div>';
}, 12 );

2) بسّط حقول الدفع باستخدام فلتر

فلتر تستلم مصفوفة من الحقول، تقوم بتعديلها، ثم تعيدها. إذا نسيتَ return، أنت تكسر جهاز الدفع.

/**
 * Simplifie certains champs du checkout.
 * - Retire "Adresse ligne 2" (souvent inutile)
 * - Rend le téléphone obligatoire (exemple)
 * - Renomme quelques libellés
 */
add_filter( 'woocommerce_checkout_fields', function ( $fields ) {

	// Facturation (billing)
	if ( isset( $fields['billing']['billing_address_2'] ) ) {
		unset( $fields['billing']['billing_address_2'] );
	}

	if ( isset( $fields['billing']['billing_phone'] ) ) {
		$fields['billing']['billing_phone']['required'] = true;
		$fields['billing']['billing_phone']['label']    = __( 'Téléphone (pour la livraison)', 'textdomain' );
		$fields['billing']['billing_phone']['priority'] = 65;
	}

	if ( isset( $fields['billing']['billing_company'] ) ) {
		$fields['billing']['billing_company']['label'] = __( 'Entreprise (optionnel)', 'textdomain' );
	}

	// Livraison (shipping) : exemple, vous pouvez aussi retirer des champs ici
	// if ( isset( $fields['shipping']['shipping_company'] ) ) {
	//     unset( $fields['shipping']['shipping_company'] );
	// }

	return $fields;
}, 20 );

3) التحقق من صحة الخادم (تجنب البيانات غير المتناسقة)

إذا جعلت حقلاً ما إلزامياً، فأضف التحقق من صحة البيانات من جانب الخادم. وإلا، فقد تتجاوزه بعض المتصفحات/الموجزات (أو قد تقوم الإضافات بتعديل النموذج).

/**
 * Validation serveur : vérifie que le téléphone est bien rempli si requis.
 */
add_action( 'woocommerce_checkout_process', function () {
	// On lit la donnée envoyée (POST). WooCommerce nettoie beaucoup de champs,
	// mais ici on reste prudent.
	$phone = isset( $_POST['billing_phone'] ) ? wc_clean( wp_unslash( $_POST['billing_phone'] ) ) : '';

	if ( empty( $phone ) ) {
		wc_add_notice( __( 'Merci de renseigner un numéro de téléphone pour la livraison.', 'textdomain' ), 'error' );
	}
} );

لقد حسّنتَ عملية الدفع دون تغيير أي قوالب. وهذا تحديداً ما يُحافظ على ثبات النظام مع التحديثات.

الخطوة 5: إضافة ملفات CSS/JS نظيفة (enqueue) لـ Avada + WooCommerce

يؤدي استخدام CSS الفوري في خيارات Avada غالبًا إلى تكرار العناصر أو عدم حفظ إصداراتها. إليك الطريقة الصحيحة في ووردبريس: إدراج بقائمة الانتظار (تحميل الملفات عبر واجهة برمجة التطبيقات).

1) أنشئ ملف CSS

إنشاء ملف: /wp-content/mu-plugins/assets/avada-woocommerce-pro.css (في حال استخدام إضافة mu-plugin) أو في إضافتك المخصصة. إذا كنت تستخدم قالبًا فرعيًا، فضعها في القالب الفرعي.

.bpcab-badge-stock{
	display:inline-block;
	margin: 0 0 12px 0;
	padding: 6px 10px;
	border-radius: 6px;
	background: #0b5;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
}

.bpcab-reassurance{
	margin-top: 12px;
	padding: 12px;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 10px;
	background: rgba(0,0,0,.02);
}

.bpcab-reassurance ul{
	margin: 0;
	padding-left: 18px;
}

.bpcab-digital-note{
	margin-top: 10px;
	opacity: .9;
}

.bpcab-checkout-trust{
	margin: 0 0 16px 0;
	padding: 12px 14px;
	border-left: 4px solid #2271b1;
	background: rgba(34,113,177,.08);
}

2) قم بتحميل ملف CSS فقط عندما يحتاجه WooCommerce

/**
 * Charge le CSS uniquement sur les pages WooCommerce utiles.
 */
add_action( 'wp_enqueue_scripts', function () {

	if ( function_exists( 'is_woocommerce' ) && ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) ) {

		// Chemin pour un mu-plugin : on ne peut pas utiliser plugins_url() directement
		// si le fichier est dans mu-plugins. On construit une URL depuis WP_CONTENT_URL.
		$css_url = content_url( 'mu-plugins/assets/avada-woocommerce-pro.css' );

		wp_enqueue_style(
			'bpcab-avada-woocommerce-pro',
			$css_url,
			array(),
			'1.0.0'
		);
	}
}, 20 );

خطأ شائع: وضع ملف CSS في مكان آخر غير عنوان URL المُعلن. النتيجة: ظهور خطأ 404 في تبويب الشبكة (أدوات المطورين). تحقق من المسار الصحيح.

الوثائق الرسمية المتعلقة بالمسح: developer.wordpress.org/reference/functions/wp_enqueue_style.

التوافق مع Divi 5 / Elementor / Avada

Avada / Fusion Builder (في حالتك)

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

ديفي 5

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

Elementor

يُقدّم Elementor (الإصدار الاحترافي) أداة "WooCommerce Builder" (قوالب المنتجات/الأرشيف). ويعتمد نفس النهج: التصميم داخل Elementor، والمنطق عبر الخطافات.
احذر من القوالب التي تستبدل صفحة المنتج بالكامل: فقد لا يتم استدعاء بعض الخطافات إذا لم يُفعّل القالب إجراءات WooCommerce القياسية. في هذه الحالة، أضف كتل المحتوى عبر أدوات Elementor (HTML) أو أعد تنشيط بنية WooCommerce.

نصيحة مشتركة (لجميع شركات البناء الثلاث)

عندما لا يعمل أحد الروابط، يكون التشخيص الحقيقي غالبًا هو: "القالب المعروض لا يستدعي هذا الرابط". قبل إلقاء اللوم على الكود الخاص بك، تحقق مما إذا كان مُنشئ الموقع الخاص بك يتجاوز قالب WooCommerce.

الكود الكامل

تقوم هذه الكتلة بتجميع كل شيء، وهي جاهزة للصقها في ملف. avada-woocommerce-pro.php (ملحق mu أو الملحق). يتم تهريب مخرجات HTML عند الاقتضاء، ويتم تنظيف المدخلات في جانب الدفع.

<?php
/**
 * Plugin Name: Avada + WooCommerce (personnalisations boutique)
 * Description: Badges produit, réassurance, checkout simplifié. Compatible WordPress 6.9.4+ / PHP 8.1+.
 * Author: Votre Nom
 * Version: 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Badge stock : affiche un badge si le produit est en stock.
 */
add_action( 'woocommerce_before_single_product_summary', function () {
	if ( ! is_product() ) {
		return;
	}

	global $product;

	if ( ! $product || ! $product->is_in_stock() ) {
		return;
	}

	echo '<div class="bpcab-badge-stock" aria-label="' . esc_attr__( 'Information expédition', 'textdomain' ) . '">';
	echo esc_html__( 'Expédié sous 24h (jours ouvrés)', 'textdomain' );
	echo '</div>';
}, 8 );

/**
 * Réassurance : affiche un bloc sous le bouton "Ajouter au panier".
 */
add_action( 'woocommerce_after_add_to_cart_button', function () {
	if ( ! is_product() ) {
		return;
	}

	echo '<div class="bpcab-reassurance" role="note">';
	echo '<ul>';
	echo '<li>' . esc_html__( 'Paiement sécurisé', 'textdomain' ) . '</li>';
	echo '<li>' . esc_html__( 'Support sous 24h', 'textdomain' ) . '</li>';
	echo '<li>' . esc_html__( 'Retours sous 14 jours (selon conditions)', 'textdomain' ) . '</li>';
	echo '</ul>';
	echo '</div>';
}, 20 );

/**
 * Texte dynamique : indique "Téléchargement immédiat" pour les produits téléchargeables.
 */
add_action( 'woocommerce_single_product_summary', function () {
	if ( ! is_product() ) {
		return;
	}

	global $product;

	if ( ! $product ) {
		return;
	}

	if ( $product->is_downloadable() || $product->is_virtual() ) {
		echo '<p class="bpcab-digital-note">' . esc_html__( 'Téléchargement immédiat après paiement.', 'textdomain' ) . '</p>';
	}
}, 35 );

/**
 * Message de confiance avant le checkout.
 */
add_action( 'woocommerce_before_checkout_form', function () {
	if ( ! is_checkout() ) {
		return;
	}

	echo '<div class="bpcab-checkout-trust" role="note">';
	echo '<strong>' . esc_html__( 'Commande sécurisée', 'textdomain' ) . '</strong><br>';
	echo esc_html__( 'Vos informations sont chiffrées. Vous recevrez un e-mail de confirmation immédiatement.', 'textdomain' );
	echo '</div>';
}, 12 );

/**
 * Simplifie certains champs du checkout (filtre).
 */
add_filter( 'woocommerce_checkout_fields', function ( $fields ) {

	// Retire Adresse ligne 2
	if ( isset( $fields['billing']['billing_address_2'] ) ) {
		unset( $fields['billing']['billing_address_2'] );
	}

	// Téléphone requis + libellé plus clair
	if ( isset( $fields['billing']['billing_phone'] ) ) {
		$fields['billing']['billing_phone']['required'] = true;
		$fields['billing']['billing_phone']['label']    = __( 'Téléphone (pour la livraison)', 'textdomain' );
		$fields['billing']['billing_phone']['priority'] = 65;
	}

	// Entreprise optionnelle, libellé explicite
	if ( isset( $fields['billing']['billing_company'] ) ) {
		$fields['billing']['billing_company']['label'] = __( 'Entreprise (optionnel)', 'textdomain' );
	}

	return $fields;
}, 20 );

/**
 * Validation serveur : vérifie que le téléphone est bien rempli.
 */
add_action( 'woocommerce_checkout_process', function () {
	$phone = isset( $_POST['billing_phone'] ) ? wc_clean( wp_unslash( $_POST['billing_phone'] ) ) : '';

	if ( empty( $phone ) ) {
		wc_add_notice( __( 'Merci de renseigner un numéro de téléphone pour la livraison.', 'textdomain' ), 'error' );
	}
} );

/**
 * Charge le CSS uniquement sur les pages WooCommerce utiles.
 * NOTE : si vous utilisez un plugin normal (wp-content/plugins), remplacez content_url()
 * par plugins_url('assets/avada-woocommerce-pro.css', __FILE__).
 */
add_action( 'wp_enqueue_scripts', function () {

	if ( function_exists( 'is_woocommerce' ) && ( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) ) {

		$css_url = content_url( 'mu-plugins/assets/avada-woocommerce-pro.css' );

		wp_enqueue_style(
			'bpcab-avada-woocommerce-pro',
			$css_url,
			array(),
			'1.0.0'
		);
	}
}, 20 );

شرح الكود

لماذا نستخدم الخطافات بدلاً من تعديلات القوالب؟

يؤدي استبدال قالب WooCommerce (نسخ ملف إلى قالبك الفرعي) إلى تثبيت موقعك على إصدار قالب محدد. مع كل تحديث رئيسي لـ WooCommerce، يجب عليك التحقق من التوافق. تتيح لك الخطافات إضافة عناصر دون تكرار الملفات بأكملها.

شارة المخزون (`woocommerce_before_single_product_summary`)

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

نحن نتحقق is_product() حتى لا يتم تلويث الصفحات الأخرى، $product->is_in_stock() لتجنب الإعلان عن شحن سريع لمنتج غير متوفر.

إعادة التأمين (`woocommerce_after_add_to_cart_button`)

هذه الخاصية مثالية لأنها تُطبّق عند نقطة اتخاذ القرار. يستطيع Avada تنسيق الزر، بينما يحتفظ WooCommerce برمز HTML لنموذج "إضافة إلى السلة". يمكنك إضافة كتلة بسيطة خلفه، دون تعديل النموذج (وبالتالي دون تعطيل عملية الإرسال).

نص ديناميكي (`woocommerce_single_product_summary`)

منطقة "الملخص" عبارة عن مجموعة من الإجراءات. ويتم إعطاء الأولوية لهذه الإجراءات. 35في معظم القوالب، يأتي تقييمك بعد العناصر الأساسية (العنوان، السعر، إلخ).

إتمام عملية الشراء: تصفية الحقول + التحقق من صحة الخادم

woocommerce_checkout_fields يُعدّل بنية الحقل. تقوم بإزالة billing_address_2لقد سجلت هدفًا billing_phone يمكنك تعديل الأولوية والملصقات حسب الحاجة.

woocommerce_checkout_process يتم تشغيلها عند الإرسال. يمكنك تنظيف البيانات باستخدام wc_clean et wp_unslashثم تضيف خطأً عبر wc_add_notice اذا لزم.

CSS: `wp_enqueue_scripts` واستهداف ووكومرس

يتم تحميل ملف CSS فقط على صفحات WooCommerce. هذا يجنب تحميل ملف CSS على مستوى الموقع بأكمله (مما يحسن الأداء ويسهل الصيانة). يستخدم الاستهداف is_woocommerce(), is_cart(), is_checkout(), is_account_page().

الفحص النهائي

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

جرب أيضاً:

منتج بسيط
منتج متغير (أحجام/ألوان)،
منتج غير متوفر في المخزون،
وسيلة للدفع (بطاقة، باي بال، إلخ).

إذا لم ينجح الأمر

إليكم جدول تشخيصي مبني على حالات حقيقية (Avada + ذاكرة التخزين المؤقت + مقتطفات).

عرض	السبب المحتمل	التحقق	الحلول
لا يظهر أي شيء على صفحة المنتج	تم لصق الكود في المكان الخطأ (السمة الرئيسية، ملف خاطئ، لم يتم تحميل الإضافة)	تحقق من وجود ملف mu-plugin ومساره الدقيق.	ضع الملف في `/wp-content/mu-plugins/` أو قم بتفعيل الملحق المخصص
خطأ فادح (شاشة بيضاء)	فاصلة منقوطة/أقواس مفقودة، أو كود PHP قديم	تحقق من سجلات PHP (أو وضع التصحيح)	صحّح الصيغة، وتأكد من استخدامك PHP 8.1+ (php.net/supported-versions.php)
لا يتم تحميل ملف CSS	عنوان URL غير صحيح (content_url) أو ملف مفقود	علامة تبويب الشبكة > بحث `avada-woocommerce-pro.css`	صحّح المسار، أو استخدم `plugins_url()` إضافة كلاسيكية
عملية الدفع جارية ولكنها لا تتحقق من صحة البيانات.	تعارض في جافا سكريبت (التخزين المؤقت/التصغير) أو أداة إنشاء تغلف النموذج	وحدة تحكم المتصفح + اختبار بدون تحسين	قم بتعطيل خاصية تصغير الملفات والعودة إلى صفحة الدفع القياسية في ووكومرس
لا تتغير حقول الدفع	تقوم إضافة الدفع باستبدال الحقول التي تلي الفلتر الخاص بك	قم بتعطيل إضافات "محرر حقل الدفع" مؤقتًا	قم بإزالة الملحق، أو اضبط أولوية الفلتر (على سبيل المثال، 99).

وثائق تفعيل تصحيح الأخطاء في ووردبريس: developer.wordpress.org/advanced-administration/debug/debug-wordpress.

الأخطاء الشائعة والمزالق

خطأ	سبب	الحلول
ألصق الكود في قالب Avada الرئيسي	تم تحديث القالب؛ ستختفي التغييرات التي أجريتها.	استخدم إضافة mu-plugin، أو إضافة مخصصة، أو قالبًا فرعيًا.
لتنسى `return $fields;` في `woocommerce_checkout_fields`	يُعيد المرشح `null`نظام الدفع معطل	تأكد من أن دالتك تُرجع المصفوفة بشكل صحيح
الخلط بين الفعل والمرشح	انت تستخدم `add_action` على خطاف يعمل كمرشح	استعمال `add_filter` لتغيير قيمة، `add_action` لعرض/تشغيل
خطاف غير مناسب (لا يظهر أي شيء)	لا يقوم القالب (المنشئ) الخاص بك باستدعاء خطافات WooCommerce القياسية	ارجع إلى قالب منتج WooCommerce أو قم بإدراجه عبر أداة الإنشاء
اختبار في بيئة الإنتاج بدون نسخة احتياطية	يؤدي خطأ في بناء الجملة إلى قطع الموقع	مرحلة الإعداد + النسخ الاحتياطي + النشر المُتحكم به
لم يتم مسح ذاكرة التخزين المؤقت	تقوم بتعديل ملفات CSS/JS ولكن ذاكرة التخزين المؤقت تعرض الإصدار القديم	مسح ذاكرة التخزين المؤقت للملحقات + ذاكرة التخزين المؤقت للخادم + ذاكرة التخزين المؤقت للمتصفح
لم يتم تحميل ملفات CSS/JS (خطأ في عملية التحميل)	مسار ملف أو حالة غير صحيحة `is_woocommerce()` غير صحيح أبداً	اختبر عنوان URL المباشر للملف وتحقق من الشروط.
انسخ مقتطفًا من درس تعليمي قديم	وظائف قديمة، أنماط غير متوافقة	تحقق من developer.wordpress.org/reference وتوافق مع ووردبريس 6.9.4+

بديل / متغير

بديل "بدون كتابة أكواد" (أو شبه بدون كتابة أكواد): إضافة حقول الدفع

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

نهجي عندما أحتاج إلى البقاء "مناسبًا للمبتدئين": إضافة لتنسيق الحقول، وإضافة صغيرة للتحقق من صحة الخادم (لأن التحقق "النظيف" غالبًا ما ينتهي به الأمر إلى طلب التعليمات البرمجية).

بديل متقدم: تجاوز مُستهدف لقالب WooCommerce

احتفظ بهذا الخيار إذا كنت بحاجة إلى تغيير بنية HTML بشكل كبير (على سبيل المثال، نقل كتل لا تسمح بها الخطافات). الإجراء:

أنشئ قالبًا فرعيًا لـ Avada.
انسخ القالب من إضافة WooCommerce إلى votre-theme-enfant/woocommerce/.
قم بتعديله، ثم اتبع تحديثات WooCommerce (مخاطرة حقيقية).

للعثور على القوالب، تصفح المجلد الرسمي: github.com/woocommerce/woocommerce/templates.

نصائح السلامة والأداء والصيانة

لا تقم بتعديل النواة (ووردبريس/ووكومرس/أفادا). يجب أن يمر كل شيء من خلال الإضافات، والقوالب الفرعية، والخطافات.
التحقق من صحة الخادم بمجرد إرسال حقل مطلوب، قم بالتحقق منه باستخدام woocommerce_checkout_processوإلا، فستكون لديك طلبات "غير مكتملة".
العادم لعرض النص، استخدم esc_html__() / esc_attr__()بالنسبة لعناوين المواقع الإلكترونية، esc_url().
هاملت قم بتحميل ملفات CSS/JS فقط على صفحات WooCommerce. تجنب استخدام البرامج النصية العامة.
الدورية أضف رقم إصدار إلى ملفاتك (CSS/JS). عند تغيير ملف CSS، قم بزيادة رقم الإصدار. 1.0.0 لإجبار ذاكرة التخزين المؤقت على التحديث.
سجلات فعّل خاصية تسجيل الأحداث في وضع الاختبار. أخطاء PHP في متجر الإنتاج تُؤدي إلى خسارة في المبيعات.

مراجع رسمية مفيدة:

الموارد

وثائق ووردبريس (مرجع الوظائف): developer.wordpress.org/reference
تصحيح أخطاء ووردبريس (WP_DEBUG، السجلات): developer.wordpress.org/advanced-administration/debug/debug-wordpress
وثائق مطوري ووكومرس: developer.woocommerce.com/docs
قوالب ووكومرس (المصدر): github.com/woocommerce/woocommerce/templates
إضافة WooCommerce على موقع WordPress.org: wordpress.org/plugins/woocommerce
إصدارات PHP المدعومة: php.net/supported-versions.php

الأسئلة الشائعة

هل يحل Fusion Builder محل WooCommerce؟

لا. يتولى Fusion Builder تصميم الصفحة. أما WooCommerce فيتولى إدارة الكتالوج، وسلة التسوق، وعملية الدفع، والطلبات، والرسائل الإلكترونية. إذا حاولتَ إعادة بناء هذه الآليات في Fusion Builder، فستفقد موثوقيتها.

لماذا استخدام إضافة mu بدلاً من ملف functions.php؟

لأنه مركزي، ومستقل عن Avada، ويتم تحميله تلقائيًا. في المواقع التي يديرها عدة أشخاص، يمنع هذا اختفاء جزء من الكود مع تغيير القالب الفرعي التالي.

لا أرى شارة المخزون، على الرغم من أنها متوفرة في المخزون.

تأكد من أن صفحة منتجك تستخدم قوالب WooCommerce القياسية. بعض قوالب "المنشئ" لا تعمل woocommerce_before_single_product_summaryاختبر ذلك عن طريق تعطيل قالب المنتج المخصص مؤقتًا (إذا كان لديك واحد).

يعرض نظام الدفع رسالة خطأ "الرجاء إدخال رقم الهاتف" على الرغم من ملء الحقل.

يحدث هذا إذا قام أحد المكونات الإضافية بإعادة تسمية الحقل (على سبيل المثال). billing_phone (يصبح شيئًا آخر) أو إذا تم استبدال صفحة الدفع. افحص كود HTML الخاص بالحقل وتحقق من السمة name="billing_phone".

هل يمكنني حذف حقول أخرى (الرمز البريدي، المنطقة...إلخ)؟

نعم، ولكن انتبه لقيود التوصيل والضرائب. إزالة الرمز البريدي قد تُؤدي إلى خلل في حسابات الشحن. لا تفعل ذلك إلا إذا كان لديك نظام توصيل بسيط (أو رقمي).

هل هذا متوافق مع المنتجات المتغيرة؟

نعم. لا تتعارض الخطافات المستخدمة هنا مع الخيارات. يتم وضع كتلة التأكيد أسفل الزر، بغض النظر عن الخيار المحدد.

كيفية تجنب التعارضات مع إضافة التخزين المؤقت/التصغير؟

إذا تصرفت عملية الدفع بشكل غير طبيعي (اختفاء المدفوعات، مؤشر التحميل لا ينتهي)، فعطّل خاصية تصغير ملفات جافا سكريبت مؤقتًا واختبرها. ثم استبعد نصوص ووكومرس من عملية التصغير، وأعد تفعيلها تدريجيًا.

كيف يمكنني معرفة ما إذا كان قالب ابني يتجاوز بالفعل أي قوالب WooCommerce؟

في قالبك الفرعي، ابحث عن مجلد /woocommerce/إذا كان موجودًا، فمن المحتمل أن لديك تعديلات عليه. قارنه بنسخة القالب في إضافة WooCommerce (GitHub).

هل أحتاج إلى استخدام إضافة "محرر حقول الدفع" إذا كان لدي هذا الكود؟

ليس بالضرورة. بالنسبة لـ 80% من الاحتياجات (إزالة حقل، تغيير تسمية، جعله إلزاميًا)، فإن عامل التصفية woocommerce_checkout_fields هذا يكفي. تصبح الإضافة مفيدة إذا كان لديك العديد من الشروط (B2B/B2C، الحقول التابعة، إلخ).

ماذا لو عرضت Avada عنوان صفحة واحد وعرضت WooCommerce عنوان صفحة آخر؟

هذا تصميم مكرر. عطّل أحد الخيارين (عادةً في خيارات Avada لصفحات WooCommerce، أو عبر خيارات الصفحة). تجنّب "إخفائه" في CSS إذا كان بإمكانك تعديل الكود المصدري.

هل هذا الكود متوافق مع ووردبريس 6.9.4 / PHP 8.1؟

نعم. يستخدم واجهات برمجة التطبيقات القياسية (الخطافات، ووظائف الإضافة إلى قائمة الانتظار، ووظائف الهروب) ومساعدات WooCommerce الشائعة (wc_clean, wc_add_noticeإذا كان مزود الاستضافة الخاص بك يستخدم PHP 7.x، فقم بتحديثه: ستتجنب بعض الأخطاء التي يصعب تشخيصها.