ازاي حولت متجر متصمم على فيجما لووردبريس؟

من أكتر المشاريع اللي بتحتاج دقة وتركيز هي لما العميل بييجيلك بتصميم Figma كامل ويقولك: “عاوز الموقع يطلع بالظبط زي كده.”

مش مجرد “خد تصميم واعمل حاجة قريبة منه” لا، بالظبط زيه. نفس الألوان، نفس المسافات، نفس الـ Typography، نفس تجربة المستخدم

المشروع ده كان متجر إلكتروني كامل، وبشاركك التجربة دي بالتفصيل وأقولك إزاي حولت متجر متصمم على فيجما الى موقع على ووردبريس

الأدوات اللي اخترتها وليه

قبل ما أبدأ أي مشروع، بحدد الـ Stack الصح حسب طبيعته.

Hello Theme كـ Base Theme لأنه أخف قالب ووردبريس موجود مفيش أي Styling مسبق، وده بيديني حرية كاملة أبني فوقيه من الصفر من غير ما أحارب Styles جاهزة.

Elementor + Pro Elements  عشان الـ Theme Builder بتاعه بيخليني أتحكم في كل جزء في الموقع Header، Footer، صفحة المنتج، صفحة الكارت — كل حاجة.

WooCommerce عشان هو الحل الأقوى والأشيع لمتاجر ووردبريس — ومع Elementor Pro بيديني تحكم كامل في تصميم كل صفحات المتجر.

Custom CSS, JS وPHP  لأن في حاجات Elementor ما بيوصلش ليها، وده اللي هتكلم عنه أكتر في المقال.

💡 لو بتتساءل إيه الفرق بين ووردبريس والبرمجة الخاصة وإمتى تختار إيه اقرأ: ووردبريس ولا برمجة خاصة؟ إزاي تختار الأنسب لمشروعك

المرحلة الأولى: تحليل التصميم في Figma

قبل ما أفتح ووردبريس خالص، بقضي وقت كويس في Figma أفهم التصميم كامل.

اللي بعمله في المرحلة دي:

أول حاجة، بستخرج الألوان الأساسية، الـ Typography (الخطوط وأحجامها)، المسافات المتكررة، والـ Border Radius. وكل ده بظبطه من إعدادت المنتور – Site settings ، كمان بظبط ال H1, H2, H3, H4, H5, H6 , text , a بحيث كل حاجة تكون جاهزة

ده بيوفر عليا وقت ضخم لما أجي أعدل لون أو خط .

تاني حاجة، بحدد الـ Components المتكررة بطاقة المنتج، الأزرار، الـ Header، الفوتر. كل حاجة بتتكرر هعملها Template مرة واحدة وهستخدمها في كل الصفحات.

المرحلة الثانية: الإعداد والبنية الأساسية

تثبيت وضبط Hello Theme

Hello Theme بييجي فاضي تماماً وده بالظبط اللي انا محتاجه ، أول حاجة بعملها هي تعطيل كل الـ Default Styles الموروثة وأبدأ من صفحة بيضاء حقيقية، ومن ال site settings بضبط اعدادات الصفحة على “Elementor full width”

ضبط WooCommerce مع Elementor

من داخل Elementor ، بروح على Theme Builder وببني:

• Shop Page — صفحة المتجر الرئيسية
• Single Product — صفحة المنتج الواحد
• Cart وCheckout — صفحات الشراء

كل واحدة بتتبني على حدة طبقا لتصميم الفيجما وبتطبق على الصفحات الصح تلقائياً.

المرحلة الثالثة: التنفيذ والتحديات الحقيقية

التحدي الأول: بطاقة المنتج

التصميم في Figma كان فيه بطاقة منتج بـ Hover Effect معقد — لما الماوس يعدي على البطاقة، بتظهر معلومات إضافية مع Animation.

Elementor بيعمل Hover Effects بسيطة، بس مش لدرجة اللي في التصميم. الحل كان Custom CSS:

.product-card .overlay {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.product-card:hover .overlay {
  opacity: 1;
  transform: translateY(0);
}

التحدي الثاني: تصميم صفحة المنتج

WooCommerce بييجي بـ Layout افتراضي لصفحة المنتج — وتغييره الكامل عن طريق Elementor لوحده ممكن يبقى محدود.
الحل كان مزيج بين Elementor Theme Builder وCustom PHP في ملف الـ Child Theme عشان أضيف Sections مخصوصة نفس اللي موجودة في الفيجما ، وكمان عملت الفيلتر نفس الفيجما بالضبط Static وخليته ديناميك بكود

التحدي الثالث: الـ Responsive

التصميم في Figma كان فيه 2 نسخ Desktop و Mobile,  Elementor بيديك تحكم في كل breakpoint، بس في حالات الـ WooCommerce Templates بيحتاج تعديل CSS إضافي.

أهم حاجة تعملها: ما تبدأش تشتغل على الـ Mobile إلا بعد ما تخلص الـ Desktop خالص عشان ما تعيدش الشغل من أول وجديد.

المرحلة الرابعة: الـ Custom Code اللي فرق معايا

في حاجات كتير عملتهم من الصفر ومكنش في بديل ليهم يكون نفس الفيجما منهم الآتي:

1. فلتر المنتجات بدون Page Reload الـ AJAX Filtering بتاع WooCommerce الافتراضي بيعمل Reload + كمان انا عامل كل حاجة custom ب المنتور . كتبت JavaScript  بسيط بيفلتر المنتجات من غير ما الصفحة تتحدث:

jQuery('.filter-btn').on('click', function() {
    const category = jQuery(this).data('category');
    jQuery.ajax({
        url: wc_ajax_url,
        data: { action: 'filter_products', category: category },
        success: function(response) {
            jQuery('.products-grid').html(response);
        }
    });
});

2. عداد الكارت في الـ Header Elementor مش بيديك Counter للكارت بيتحدث أوتوماتيكي ده احتاج Custom JS صغير يتحدث لما المستخدم يضيف منتج.

3. تخصيص صفحة الـ Checkout شيلت حقول كتير من صفحة الـ Checkout مش العميل محتاجها، وده بيبسط تجربة الشراء ويزود معدل الإتمام.

add_filter('woocommerce_checkout_fields', function($fields) {
    unset($fields['billing']['billing_company']);
    unset($fields['billing']['billing_address_2']);
    return $fields;
});

النتيجة وإيه اللي اتعلمته

المشروع خلص وطلع مطابق جداً من التصميم الأصلي في Figma بنسبة 99% تطابق لأن في فروق طبيعية بين بيئة التصميم والمتصفح، والعميل كان راضي تماماً.

أهم حاجات اتعلمتها:

Hello Theme + Elementor = الـ Combo الأفضل لمشاريع بيها تصميم مخصوص. أي قالب تاني هيضيف Styles موروثة هتحاربها طول المشروع.

الـ Custom Code مش عيب ده جزء طبيعي من الشغل الاحترافي. اللي بيفرق المطور المحترف إنه يعرف إمتى يستخدم الـ Plugin وإمتى يكتب الكود بنفسه.

💡ولو عاوز تسرع عملية كتابة ال Custom code وانت شغال هتلاقيني موضحلك هنا: ازاي تستفيد من Claude في ووردبريس ؟

ابدأ بالـ Design Tokens — استخراج الألوان والخطوط والمسافات واضبطتها في إعدادات Elementor من ال site settings من الأول بيوفر وقت ضخم في التعديلات.

الـ WooCommerce Templates محتاج صبر — في حاجات مش هتعمل بالظبط اللي إنت عايزه من أول مرة، والحل دايماً موجود بس محتاج تدور فيه، وطالما عملت التصميم ال static بالمنتور فتقدر تخليه ديناميك

💡 لو بتشتغل على مشروع ووردبريس وخايف من أخطاء شائعة، اقرأ: أكثر 7 أخطاء يقع فيها مطورو ووردبريس المبتدئين

أسئلة شائعة (FAQ)

هل Hello Theme أفضل من Astra أو GeneratePress لمشاريع Elementor؟

لو هتستخدم Elementor بشكل كامل – Hello Theme هو الأفضل لأنه أخف وما بيضيفش Styles تتعارض مع تصميمك. Astra وGeneratePress أحسن لو بتعمل مزيج بين القالب وElementor.

إيه الفرق بين Elementor Free وElementor Pro في مشاريع WooCommerce؟

Elementor Pro ضروري لو عاوز تتحكم في صفحات WooCommerce (المنتج، الكارت، الـ Checkout) – النسخة المجانية مش بتديك Theme Builder، بس تقدر تستبدله ب إضافة “Pro Elements” مجانية ومتاح فيها كل الودجات بتاع Elementor Pro

هل ممكن أحول تصميم Figma لووردبريس من غير Elementor ؟

آه، ممكن باستخدام Gutenberg أو Full Site Editing أو برمجة خاصة. بس Elementor بيوفر وقت أكبر خصوصاً لمشاريع WooCommerce.

كام بيكلف مشروع تحويل Figma لووردبريس؟

بيعتمد على حجم وتعقيد التصميم. متجر بسيط من 5-10 صفحات مختلف عن متجر كبير فيه Custom Features. التواصل معايا هيساعدك تعرف التكلفة حسب مشروعك بالتحديد.

إيه أكبر تحدي في تحويل Figma لووردبريس؟

من رأيي، الـ WooCommerce Templates – عشان بتتحكم في Markup معين وعشان تعدله بشكل كامل محتاج مزيج من Elementor وCustom PHP. ده اللي بياخد أكتر وقت في المشاريع.

خلاصة الكلام

تحويل تصميم Figma لووردبريس مش مجرد “سحب وإفلات” ده مشروع محتاج تخطيط، فهم الأدوات، وقدرة على كتابة Custom Code لما الأدوات الجاهزة متوصلش.

الـ Stack اللي اشتغلت بيه — Hello Theme + Elementor Pro + WooCommerce + Custom Code — ثبت إنه قوي ومرن لأي نوع من المتاجر.

لو عندك مشروع مشابه أو عاوز تتكلم في تفاصيله، تواصل معايا وهنشوف الأنسب لك. 👇