الموقع معروض للبيع Domain Authority 25 / Page Authority 46 / No Spam / عدد المقالات 180 مقاله. للإتفاق على السعر وطرق الدفع > راسلنا

كيفية تخصيص صفحة WooCommerce Cart باستخدام Elementor

هل تبحث عن طرق مختلفة لتخصيص صفحة عربة WooCommerce الخاصة بك؟ يعد Elementor أحد أفضل الأدوات عندما يتعلق الأمر بتخصيص WooCommerce. يمكنك بسهولة تكوين وإنشاء تصميم مخصص لصفحة عربة التسوق الخاصة بك للعنصر الخاص بك في أي وقت من الأوقات. هذا هو السبب في أننا قدمنا ​​لك دليلنا حول كيفية تخصيص صفحة عربة WooCommerce باستخدام Elementor. ولكن أولاً ، دعنا نلقي نظرة على سبب وجوب التفكير فيه باستخدام Elementor لتخصيص صفحة عربة التسوق الخاصة بك. لماذا تخصيص سلة التسوق الصفحة باستخدام Elementor؟ يعد تخصيص صفحة عربة WooCommerce جزءًا مهمًا من تحسين معدلات التحويل الخاصة بك. يمكن لواجهة صفحة سلة التسوق أن تحدد بشكل كبير ما إذا كان عميلك سيتابع عملية الدفع أم لا. يتضمن ذلك إضافة خيارات لإظهار تفاصيل سلة التسوق ، وزيادة / تقليل المبلغ ، وإضافة صور مصغرة مفصلة لعناصر سلة التسوق الخاصة بك ، وما إلى ذلك. وعلى الرغم من وجود الكثير من طرق تخصيص صفحة عربة التسوق الخاصة بك مثل استخدام المكونات الإضافية للعربة أو برمجيًا ، يمكن أن يكون استخدام أداة إنشاء الصفحات أحد أفضل الطرق للقيام بذلك. Elementor هو أحد أشهر أدوات إنشاء صفحات WordPress المتاحة مع تكامل كامل مع WooCommerce. يمكنك بسهولة تخصيص أي صفحة WooCommerce معها في أي وقت من الأوقات مع الكثير من التصميمات الجميلة والحاجيات والوحدات النمطية المخصصة بعمق وغير ذلك الكثير. علاوة على ذلك ، يمكنك استخدام Elementor لتكوين صفحات WooCommerce بسهولة واستخدام القوالب والوحدات النمطية المخصصة لتعيين عليهم في أي وقت من الأوقات. يمكن تكوين كل وحدة وعنصر وفقًا لاحتياجات موقع الويب الخاص بك. يمكن صنعها يدويًا لكل ما تريد إضافته إلى صفحات عربة WooCommerce الخاصة بك. قبل أن نبدأ: قبل أن نبدأ ببرنامجنا التعليمي ، نود أن نلاحظ أنك ستحتاج إلى كل من Elementor و Elementor Pro لمتابعة البرنامج التعليمي الخاص بنا. بينما من الممكن إدارة وإعداد صفحات WooCommerce باستخدام الإصدار المجاني من Elementor ، يكون الإجراء أكثر صعوبة مع ميزات محدودة. لا يمكنك استخدام خيار استخدام القوالب والتصميمات المخصصة التي تعتبر نعمة عندما يتعلق الأمر بتخصيص صفحات عربة التسوق في الإصدار المجاني. لذلك ، نوصيك بالتفكير في شراء Elementor Pro مع الأخذ في الاعتبار جميع تخصيصات WordPress التي يمكنك الحصول عليها منه. لـ دولار في السنة يمكنك الاستمتاع بميزات مثل: خيارات التخصيص بالكامل ، من البداية أو باستخدام القوالب ومن الصفر. تكامل كامل وخيارات لإنشاء وتخصيص جميع صفحات WooCommerce مثل صفحة المتجر وصفحات المنتج وأرشيف المتجر وصفحة عربة التسوق والمزيد. 01 + أدوات احترافية مع خيارات لأدوات WooCommerce محددة. + مجموعات موقع مفصلة مع 258 + قوالب يمكنك تكوينها وإعدادها أثناء التنقل. أداة السحب والإفلات سهلة الاستخدام للمبتدئين مع خيارات تخصيص مذهلة لكل عنصر من عناصر موقع الويب الخاص بك. دعم لا يصدق للملحقات والإضافات. يمكنك أيضًا الاختيار من بين خطط متعددة حسب احتياجاتك. تأتي كل خطة أيضًا مع 01 فترة ضمان استرداد الأموال اليومية مثالية في حالة عدم رضاك ​​عن استخدام البرنامج المساعد. وبالمثل ، تأكد من أنك قمت بإعداد WooCommerce بشكل صحيح واستخدمت أحد موضوعات WooCommerce المتوافقة أيضًا. سيضمن ذلك عدم وجود أي مشكلات تعارض أثناء تخصيص صفحة سلة التسوق. الآن وقد أوضحنا لماذا يجب أن تفكر في استخدام Element لتخصيص صفحة عربة WooCommerce ، دعنا نمضي قدمًا ونلقي نظرة على كيفية القيام بذلك. كيفية تخصيص صفحة عربة WooCommerce باستخدام Elementor؟ بعد تثبيت وتفعيل Elementor Pro على موقع الويب الخاص بك ، قم بإنشاء صفحة جديدة في لوحة معلومات WordPress الخاصة بك من خلال النقر على Pages> اضف جديد. امنح صفحتك المخصصة الجديدة اسمًا وانقر فوق الزر تحرير باستخدام Elementor . سينقلك هذا إلى Elementor منشئ الصفحة حيث يمكنك الآن إضافة محتوى إلى صفحة عربة التسوق المخصصة الخاصة بك. دعنا نمضي قدمًا ونضيف بعض عناصر WooCommerce الأساسية لملء سلة التسوق الخاصة بك. ابدأ بالتمرير لأسفل في قائمة عنصر واجهة المستخدم على اليسار والنقر على خيار القائمة المنسدلة WooCommerce . اضغط على سلة التسوق واسحبه إلى أضف القطعة هنا في القسم منشئ. بعد ذلك ، قم بتكوين أداة سلة التسوق الخاصة بك باستخدام خيارات تحرير عنصر واجهة المستخدم على اليسار. يمكنك استخدام علامة التبويب المحتوى لتكوين عناصر مختلفة مثل: تخطيط العمود (عمود واحد / عمودان الخروج.) تحديث نص سلة التسوق. تطبيق نص القسيمة. تخصيص إجمالي سلة التسوق . خيارات التحديث التلقائي لعربة التسوق. بالطبع يمكنك ضبط التصميم والخط والألوان والمزيد لكل هذه الحقول والعناصر التي تستخدم علامة التبويب Styling أيضًا. وبالمثل ، فإن تتيح لك علامة التبويب المتقدمة تكوين جميع الرسوم المتحركة والخلفيات وتأثيرات الحركة المخصصة والمزيد. إذا كنت تريد تكوين بعض الخيارات على التصميم ، انقر فوق علامة التبويب النمط . في هذا البرنامج التعليمي ، قدمنا ​​ظلالاً لمربع الأقسام. انقر فوق الأقسام ثم زر التحرير في Box Shadow . ثم اضغط على خيار اللون لمنح ظل الصندوق لونا مخصصا. الآن ، امنح عربتك حدًا باستخدام خيار نوع الحدود. بالنسبة إلى العرض التوضيحي الخاص بنا ، قمنا بتعيين هذا على Solid. بالطبع ، يمكنك تخصيص كل من الحدود وظل الصندوق باستخدام خيارات إضافية. وبالمثل ، إذا قمت بتخصيص عناصر إضافية مثل ملخص الطلب وزر الخروج و الإجماليات ، يجب أن تحصل على عربة مثل هذه: في الوقت الحالي ، سنحتفظ بهذه العربة. ولكن يمكنك دائمًا الرجوع وتخصيص صفحة عربة التسوق بشكل أكبر إذا لزم الأمر. بعد ذلك ، يمكن إضافة بعض العناصر الأخرى إلى صفحة عربة التسوق. يمكنك إضافتها باستخدام شريط الأدوات الموجود على اليسار باستخدام نفس الطريقة الموضحة أعلاه. دعنا نمضي قدمًا ونضيف نص إخلاء مسؤولية وفيديو واتصال شكل. هذه كلها عناصر رائعة لإضافتها لمساعدة عملائك في الاستفسارات والمعلومات المتعلقة بملاحظات الطلب والشحن والمزيد. بمجرد الانتهاء يمكنك نشر هذا صفحة مخصصة والانتهاء من التحرير. ومع ذلك ، نقترح إضافة هذا كنموذج مخصص للتخصيص في المستقبل إذا كنت ترغب في ذلك. فقط اضغط على زر السهم بجوار زر نشر في الأسفل وانقر على حفظ كقالب. ثم أدخل اسم قالب سلة التسوق المخصص الخاص بك وانقر فوق حفظ. أخيرًا ، يمكنك إنهاء تخصيص صفحة سلة التسوق المخصصة الخاصة بك عن طريق النقر فوق نشر. تعيين صفحة عربة التسوق المخصصة الخاصة بك كصفحة عربة WooCommerce تبني العملية المذكورة أعلاه ببساطة صفحة عربة WooCommerce المخصصة الخاصة بك. بمجرد إنشاء صفحة عربة WooCommerce المخصصة في Elementor ، تحتاج إلى تحديد هذه الصفحة الجديدة كصفحة عربة التسوق التي يحتاجها WooCommerce. يمكنك القيام بذلك عن طريق فتح إعدادات WooCommerce بالنقر فوق WooCommerce> الإعدادات من لوحة معلومات WordPress الخاصة بك. ثم انقر فوق علامة التبويب Advanced للوصول إلى خيارات إعداد الصفحة . في خيار صفحة عربة التسوق ، انطلق وابحث عن اسم الصفحة التي أنشأتها للتو. بالنسبة لنا ، ستكون صفحة عربة العرض التجريبية. انقر فوق صفحة عربة التسوق المخصصة ، وقم بالتمرير لأسفل وانقر فوق حفظ التغييرات. سيؤدي هذا إلى حفظ صفحتك المخصصة حديثًا كصفحة WooCommerce Cart الافتراضية الخاصة بك. استخدام قوالب WooCommerce لتخصيص صفحة WooCommerce Cart في Elementor: يمكنك أن ترى بوضوح أن الخطوات المذكورة أعلاه ليست سوى الأساسيات لإنشاء صفحة عربة WooCommerce المخصصة . بالطبع ، هناك الكثير من العمل المتضمن عندما يتعلق الأمر تخصيص صفحة عربة WooCommerce الخاصة بك باستخدام Elementor. لكنك أيضًا حر تمامًا في استخدام تصميم بسيط لصفحة عربة التسوق مع المزيد من التصميم والتخصيص ولكن لتحقيق أقصى قدر من الفوائد. إذا كان هذا النهج يناسب احتياجاتك أكثر نوصي باستخدام قوالب العنصر . هذه مصنوعة من عدد كبير من خيارات النماذج وإضافات القوالب المتاحة لـ Elementor. لإعداد صفحة عربة WooCommerce الخاصة بنا ، سنستخدم أيضًا عنصر إضافي مجاني يأتي مع قوالب صفحة عربة مخصصة لعرضنا التوضيحي. في حين أن هناك الكثير من الإضافات Elementor وإضافات القوالب المتاحة ، سنستخدم CoDesigner لهذا العرض التوضيحي. هذه واحدة من أسهل الطرق وخالية من المتاعب للحصول على صفحة عربة متقنة الصنع جاهزة لموقعك على الويب. فلنبدأ بـ تثبيت البرنامج المساعد. تثبيت البرنامج المساعد CoDesigner: افتح WordPress الخاص بك لوحة تحكم المسؤول وانتقل إلى الملحقات> إضافة جديدة. ثم استخدم شريط البحث في أعلى اليمين للبحث عن ‘ CoDesigner ‘واضغط على زر Install Now لتثبيته. بمجرد اكتمال التثبيت ، انقر فوق Activate لإنهاء عملية التثبيت والتفعيل. تمكين أدوات عربة CoDesigner: قبل إضافة عنصر واجهة مستخدم CoDesigner إلى صفحة عربة التسوق ، تحتاج إلى تمكين القطعة في CoDesigner dashboa rd . لذا افتح CoDesigner على WP Admin Dashboard. سيفتح لوحة معلومات CodDesigner. ثم اضغط على Widgets. بعد ذلك ، قم بالتمرير لأسفل أقسام عربة التسوق وقم بتمكين جميع الأدوات الموجودة تحتها. ستتم إضافتها إلى قائمة Elementor Widgets مباشرة. الآن ، يمكنك إضافة عنصر واجهة مستخدم CoDesigner المخصص مباشرة إلى صفحة عربة التسوق الخاصة بك. أخيرًا ، انقر فوق حفظ الإعدادات لتمكين الحاجيات. باستخدام أدوات CoDesigner Cart Widgets والقوالب: تتطابق عملية إنشاء صفحة عربة WooCommerce وتخصيصها في Elementor باستخدام Codesigner مع العملية المذكورة أعلاه باستخدام Elementor. ما عليك سوى إنشاء صفحة جديدة بالضغط على الصفحات> إضافة جديد وتسميتها. بعد ذلك ، انقر فوق تحرير باستخدام Elementor كما هو مذكور أعلاه. بمجرد فتح صفحتك الجديدة في منشئ صفحة Elementor ، فأنت جاهز لإضافة قوالب CoDesigner الخاصة بك. ما عليك سوى النقر فوق رمز CoDesigner في قسم اسحب الأدوات هنا . ثم تحت الكتل ، استخدم القائمة المنسدلة للفئة وحدد عربة التسوق. استخدم تصميمًا مناسبًا ومثاليًا لموقعك وانقر على إدراج. إذا تم تنشيط أدوات CoDesigner الخاصة بك ، فيجب أن يظهر قالب صفحة عربة التسوق بشكل مثالي. بالطبع ، لا يزال هذا مجرد قالب ، لذا فأنت بحاجة إلى تخصيص النص والعناصر الأخرى يدويًا. لنبدأ باستبدال نص العنوان . انقر فوق العنوان widge واستخدم قائمة التخصيص الموجودة على اليسار لإضافة نصك المخصص. وبالمثل ، افعل الشيء نفسه مع الحقول النصية الموجودة أسفله. يمكنك انقر أيضًا على أداة سلة التسوق و خصص خيارات إضافية مثل الصورة المصغرة وخيارات الإجمالي الفرعي للعنصر وحقول الكمية. تمامًا مثل الخطوات المذكورة سابقًا ، يمكنك أيضًا تصميم وتعديل جميع الحقول والأدوات وتخصيص الألوان والطباعة والحشو وما إلى ذلك. . ما عليك سوى النقر فوق أي عنصر واجهة مستخدم واستخدام علامة التبويب التصميم و المتقدم . الأمر بهذه السهولة! بمجرد الانتهاء ، انقر فوق الزر نشر لحفظ صفحة عربة التسوق المخصصة الخاصة بك أو احفظها كقالب بنفس الطريقة المذكورة سابقًا. مرة أخرى ، انتقل إلى WooCommerce> الإعدادات> خيارات متقدمة وحدد صفحة عربة التسوق حديثًا تحت حقل صفحة عربة التسوق . ثم اضغط على Save Changes للإنهاء. 999287 الآن يجب أن تشاهد صفحة عربة التسوق الجديدة على الواجهة الأمامية الخلاصة: وهذا ينتهي دليلنا حول كيفية تخصيص صفحة عربة WooCommerce مع Elemento ص. يعد Elementor أحد أقوى مواقع إنشاء مواقع الويب المتاحة لتخصيص مواقع WooCommerce و WordPress. سواء كنت تستخدم عناصر واجهة مستخدم وقوالب إضافية ، فلديك عدد لا يحصى من الأدوات المتاحة لك لتخصيص كل زاوية من موقع الويب الخاص بك. إليك بعض النصائح الرائعة لك عندما أنت تقوم بتخصيص صفحة عربة WooCommerce في Elementor: تأكد من أن صفحة عربة التسوق المخصصة قابلة للاستخدام تمامًا على كل من الهاتف المحمول وسطح المكتب باستخدام الخيار سريع الاستجابة. استخدم خيارات تصميم الألوان والطباعة الخاصة بـ Elementor للتأكد من أن صفحة عربة التسوق الخاصة بك تتطابق مع بقية تصميم المظهر الخاص بك. إنها لفكرة رائعة تخصيص صفحة عربة التسوق وصفحة الخروج الخاصة بك بحيث يتطابقان مع بعضهما البعض. النظر في عناصر إضافية مثل المنتجات ذات الصلة ، المنتجات المميزة ، شارات الثقة ، إلخ إلى صفحة عربة التسوق الخاصة بك. كانت يمكنك معرفة كيفية تخصيص عربة التسوق الخاصة بك صفحة؟ هل تواجه مشكلة في إعداد الوظائف الإضافية أو القوالب الخاصة بك؟ أخبرنا في التعليقات حول كيف كنت أو لم تتمكن من تخصيص صفحة عربة التسوق الخاصة بك. نحن نحب مساعدة القراء في حل مشكلاتهم والاستماع إلى آرائهم فيما يتعلق بتخصيصات WordPress و WooCommerce. إذا كنت تبحث عن أدلة أخرى لتخصيص العديد من صفحات WooCommerce الأخرى باستخدام Elementor لماذا لا تحقق من بعض مقالاتنا الأخرى هنا: كيفية تخصيص صفحة منتج WooCommerce باستخدام Elementor إنشاء قائمة Mega مع Elementor باستخدام البرنامج المساعد Nav Menu كيفية تخصيص صفحة متجر WooCommerce في Elementor