كيفية إضافة صورة المنتج إلى WooCommerce Checkout

هل تريد إضافة صورة منتج إلى تسجيل الخروج من WooCommerce في محاولة لتحسين تجربة التسوق لعميلك؟ لقد قمنا بتغطيتك. في هذه المقالة ، سوف نوضح لك كيفية إضافة صورة منتج إلى تسجيل الخروج من WooCommerce. ولكن قبل التعمق في ذلك ، من المهم أن يكون لديك فهم واضح لسبب حاجتنا إلى إضافة صور المنتج إلى صفحة الخروج من WooCommerce. من الضروري أيضًا معرفة فوائدها وكيف تؤثر على المبيعات؟ لذا ، دعنا نكتشف ذلك أولاً. لماذا يجب عليك إضافة صورة منتج إلى Checkout؟ صفحة الخروج الخاصة بك موجودة في أهم الصفحات في متجر WooCommerce الخاص بك. إنه المكان الذي ينهي المستخدم عملية الشراء ويؤكد طلبه. لذلك ، يجب تحسين صفحة الخروج الخاصة بك للحصول على تجربة مستخدم أفضل وأن تكون سهلة المتابعة. بالنظر إلى صفحة الخروج الافتراضية ، ستلاحظ ذلك بسرعة لم يتم تحسينها لتجربة المستخدم. على سبيل المثال ، يعرض قسم الطلب في الخروج عناوين المنتج فقط بدون الصور. هذا يجعل من الصعب على العميل التحقق مما إذا كان قد حصل على المنتجات الصحيحة. بطبيعتنا ، نحن البشر أفضل مع الصور مقارنة بالنص العادي. من الأسهل علينا التعرف على صورة أكثر من قراءة نص عادي. من خلال إضافة صور المنتج بالإضافة إلى العناوين ، يمكنك تسهيل الأمر على عملائك للتعرف على المنتجات والتأكد من حصولهم على المنتجات المناسبة عند الدفع. حيث أنه بدون صورة المنتج ، سيتعين عليهم إما تذكر العناوين الدقيقة للمنتجات أو العودة إلى المتجر والتحقق مرة أخرى للتحقق مما إذا كان لديهم المنتجات الصحيحة عند الخروج. من الواضح أن هذه ليست علامة على تجربة مستخدم جيدة. إنها تجعل العميل يتخذ خطوات قليلة إضافية. هدفنا هو تقليل عدد الخطوات وجعل عملية الشراء أبسط وأسرع للعميل. تذكر أن تجربة المستخدم الأفضل تؤدي إلى رضا العميل وبالتالي مبيعات أفضل. لذلك ، دعنا ننتقل الآن ونرى كيف يمكننا إضافة صورة منتج إلى تسجيل الخروج من WooCommerce. كيفية إضافة صورة منتج إلى تسجيل الخروج من WooCommerce من أجل إضافة صورة منتج إلى تسجيل الخروج من WooCommerce ، سنستخدم مقتطفات التعليمات البرمجية المخصصة. لا تقلق ، لست بحاجة إلى أي خبرة في البرمجة للقيام بهذا الجزء. انها بسيطة جدا ومباشرة. ما عليك سوى المتابعة ، وسترى مدى بساطة الأمر حقًا. إضافة قصاصات التعليمات البرمجية قبل أن نذهب إلى مقتطفات الشفرة ، نوصي بشدة بإنشاء نسخة احتياطية كاملة من موقعك واستخدام سمة فرعية لتعديل المتعة ctions.php ملف. للرجوع إليها ، تحقق من دليلنا حول كيفية إنشاء سمة فرعية أو استخدم أيًا من هذه المكونات الإضافية للقوالب الفرعية. بمجرد إعداد قالب طفلك ، انتقل إلى WP Admin Dashboard> Appearance> Theme Editor. حدد نسق طفلك وانتقل إلى وظائف .php ملف. هنا ، يمكنك إضافة مقتطفات الشفرة المخصصة في نهاية الملف و تحديثها بعد ذلك حتى تصبح التغييرات سارية المفعول. بدلاً من ذلك ، يمكن أيضًا استخدام المكوّن الإضافي Code Snippets في حال لم تكن مرتاحًا لفكرة تعديل النواة ملفات WordPress. يمكنك تثبيت البرنامج المساعد من مستودع WordPress. بمجرد تثبيت البرنامج المساعد وتنشيطه ، انتقل إلى إعدادات البرنامج المساعد من لوحة معلومات WordPress الخاصة بك وانقر فوق أضف مقتطفًا جديدًا. باستخدام هذا البرنامج المساعد ، يمكنك إضافة العديد من المقتطفات كما تريد. مع قصاصات الكود المكون الإضافي ، لست بحاجة إلى سمة فرعية لأن المكون الإضافي يعتني بمقتطفات التعليمات البرمجية من تلقاء نفسه. ومع ذلك ، نوصي دائمًا بالحصول على واحد في حالة حدوث خطأ ما. الآن نحن نعرف كيفية إضافة مقتطفات التعليمات البرمجية إلى موقعك ، دعنا نرى مقتطفات التعليمات البرمجية إلى أضف صورة منتج إلى تسجيل الخروج من WooCommerce. قصاصات لإضافة صورة منتج إلى WooCommerce Checkout لدينا مقتطفان مخصصان هنا من أجلك. يعرض الأول صورة المنتج بما يتماشى مع عنوان المنتج. في حين أن الثاني يعرض الصورة والعنوان في أسطر منفصلة. دعونا نرى اثنين منهم في العمل. أضف صورة المنتج إلى Checkout في Inline Style استخدم مقتطف الشفرة التالي لإضافة صورة المنتج إلى صفحة الدفع في أسلوب مضمّن . add_filter (‘woocommerce_cart_item_name’، ‘quadlayers_product_image_checkout’، 1024 ، 3) ؛ الوظيفة ‘quadlayers_product_image_checkout’ ($ name، $ cart_item، $ cart_item_key) {if (! is_checkout ()) {return $ name؛} $ product = $ cart_item ؛ $ thumbnail = $ product-> get_image (مجموعة (’02 ‘،’ 04 ‘) ، مجموعة (‘ class ‘=>’ alignleft ‘)) ؛ / أعلاه ، يمكنك تغيير حجم الصورة المصغرة عن طريق تغيير قيم المصفوفة ، مثل المصفوفة (’04 ‘ ‘) وقم أيضًا بتغيير المحاذاة إلى المحاذاة / return $ thumbnail. اسم $؛ } يتم تحديثه في الواجهة الأمامية بمجرد قيامك أنت أو عميلك بمعاينة عملية الدفع صفحة. أضف صورة المنتج والعناوين على خطوط منفصلة وبالمثل ، يمكنك استخدام مقتطف الشفرة التالي لعرض صورة المنتج وعنوانه على سطور منفصلة . يمكن أن يكون هذا رائعًا إذا كانت عناوين المنتجات طويلة ولا توجد مساحة كافية لتناسب كل من الصورة والعنوان في سطر واحد. add_filter (‘woocommerce_cart_item_name’، ‘quadlayers_product_image_checkout’، 1024 ، 3) ؛ function quadlayers_product_image_checkout ($ name، $ cart_item، $ cart_item_key) {if (! is_checkout ()) {return $ name؛} $ _product = application_filters (‘woocommerce_cart_item_product’، $ cart_item ، cart_item $، $ cart_item_key)؛ الصورة المصغرة = $ _product-> get_image () ؛ $ image = ”. الصورة المصغرة. “” ؛ / أعلاه يمكنك تغيير العرض والارتفاع ومحاذاة الصورة كما تريد / إرجاع صورة $. اسم $؛ } سيتم عرض صورة المنتج والعناوين في سطور منفصلة بعد تحديث صفحة التفقد. هذا هو! تهانينا! لقد نجحت الآن في إضافة صور المنتج إلى تسجيل الخروج من WooCommerce. ومع ذلك ، هناك شيء أكثر من ذلك. بمجرد أن ينقر العميل على زر تقديم الطلب ، يتم نقله إلى Order-Pay أو صفحة تفاصيل الطلب ، حيث يحتاجون إلى إجراء الدفعات. دعنا نرى كيف تبدو صفحة Order-Pay افتراضيًا وكيف يمكننا تحسينها أيضًا. مقتطف لإضافة صورة المنتج إلى صفحة WooCommerce Oder-Pay عند الوصول إلى صفحة Order-Pay ، هذا هو المكان الذي يسدد فيه عملاؤك مدفوعاتهم. تعرض صفحة Order-Pay جميع تفاصيل الطلب ، بما في ذلك عنوان المنتج والكمية والسعر وإجمالي سعر الأمر. إليك كيف تبدو الصفحة افتراضيًا. كما ترى ، تمامًا مثل صفحة Checkout الافتراضية ، لا يتم عرض صور المنتج هنا أيضا. لذا ، دعونا نصلح ذلك. هدفنا هو إضافة صور المنتج إلى صفحة Order-Pay. لإضافة صور المنتج إلى صفحة Order-Pay ، يمكنك استخدام الكود التالي مقتطف. ما عليك سوى إضافته إلى موقعك باستخدام طريقتك المفضلة كما هو موضح سابقًا. add_filter (‘woocommerce_order_item_name’، ‘quadlayers_product_image_orderpay’، 1024 ، 3) ؛ function quadlayers_product_image_orderpay ($ name، $ item، $ extra) {if (! is_checkout ()) {return $ name؛} $ product_id = $ item-> get_product_id ()؛ $ _product = wc_get_product ($ product_id) ؛ الصورة المصغرة = $ _product-> get_image () ؛ $ image = ”. الصورة المصغرة. “” ؛ / أعلاه يمكنك تغيير عرض الصورة وارتفاعها ومحاذاة الصورة كما تريد / return $ image. اسم $؛ } أحسنت! يمكنك الآن إضافة صورة منتج بنجاح إلى صفحات WooCommerce Checkout و Order-Pay. بالتأكيد سوف يسعد عملاؤك بتجربة المستخدم المحسنة. حتى الآن ، رأينا كيفية إضافة صورة منتج إلى WooCommerce Checkout and Order-Pay الصفحات. دعونا نرى بعض الطرق الأخرى لتخصيص صفحة الخروج لجعلها أكثر سهولة في الاستخدام. دعنا نتعمق في ذلك. المكافأة: تخصيص صفحة الخروج باستخدام البرنامج المساعد Checkout Manager أسهل طريقة لتخصيص صفحة الخروج من WooCommerce هي عبر المكونات الإضافية لجهات خارجية. لأغراض العرض التوضيحي ، سنستخدم مدير الخروج للمكوِّن الإضافي WooCommerce الذي طوره QuadLayers. وهي واحدة من أفضل المكونات الإضافية للتخصيص صفحة الخروج الخاصة بك مع أكثر من 03 ، عمليات التثبيت النشطة. Checkout Manager for WooCommerce هو مكون إضافي غني بالميزات يسمح لك بإدارة جميع حقول الخروج الخاصة بك بحيث يمكن تخصيصها حسب متطلباتك. تابع صفحة منتجاتنا للتحقق من جميع الوظائف القيمة التي توفرها هذه الأداة. دعونا نرى الآن كيف يسمح لنا البرنامج المساعد تخصيص صفحة الخروج من WooCommerce. تثبيت Checkout Manager لبرنامج WooCommerce Plugin أولاً ، تحتاج إلى تثبيت وتفعيل البرنامج المساعد. ما عليك سوى الانتقال إلى لوحة تحكم مسؤول WordPress و انتقل إلى الإضافات> إضافة جديدة. ابحث عن Checkout Manager لمكوِّن WooCommerce الإضافي بواسطة QuadLayers وانقر فوق الزر التثبيت الآن . بمجرد تثبيت البرنامج المساعد ، اضغط على تنشيط . سيؤدي هذا إلى تفعيل البرنامج المساعد على موقعك. إذن ، البرنامج المساعد مثبت الآن وجاهز للاستخدام. دعنا ننتقل إلى تخصيص صفحة الخروج الخاصة بنا باستخدام المكون الإضافي Checkout Manager. إذا كنت تريد الإصدار المميز ، فيمكنك إضافته إلى موقع الويب الخاص بك أيضًا. ولكن سيتعين عليك تثبيت المكون الإضافي يدويًا في موقع WooCommerce الخاص بك. إضافة وتحرير وحذف حقول الخروج بمجرد تنشيط المكون الإضافي على موقعك ، ما عليك سوى الانتقال إلى لوحة تحكم مسؤول WordPress وانتقل إلى WooCommerce> Checkout. هناك ستجد جميع الإعدادات الخاصة بـ Checkout Manager. ضمن علامة التبويب Checkout ، سيكون لديك قوائم مختلفة لأقسام مختلفة من صفحة Checkout. يمكنك إدارة الحقول الخاصة بالشحن والفواتير والطلب والبريد الإلكتروني. علاوة على ذلك ، يمكنك إضافة الحقول المخصصة الخاصة بك أيضًا. ستجد داخل كل قائمة الحقول ذات الصلة التي يمكنك إدارتها وفقًا لمتطلباتك. لكل حقل معلمات متعددة تتحكم في الطريقة التي يتصرف بها حقل معين. من خلال تعديل هذه المعلمات ، يمكنك تغيير سلوكها وبالتالي التحكم بشكل أكبر في صفحة Checkout الخاصة بك. دعونا نلقي نظرة على المعلمات الميدانية المختلفة ونرى ما يفعلونه. تغيير الموضع: أصبح تحريك الحقل ، لأعلى أو لأسفل ، ممكنًا باستخدام السهمين لأعلى ولأسفل. ما عليك سوى النقر فوق واحدة ، وسينتقل الحقل خطوة واحدة لأعلى أو لأسفل ، على التوالي. بدلاً من ذلك ، يمكنك النقر فوق الخطوط الأفقية الثلاثة وسحبها لتغيير موضع الحقل إليك ص الموقف المطلوب. مطلوب: قيد التشغيل المعلمة المطلوبة تجعل الحقل إلزاميًا. لن يتمكن عملاؤك من تخطي الحقل الذي تم تحديده كمطلوب. موضع: تسمح لك معلمة الموضع بشكل أساسي بمحاذاة حقل حسب رغبتك. يمكنك اختيار محاذاة حقل إلى اليسار أو اليمين أو جعله بعرض كامل. صافي: سيؤدي تشغيل المعلمة الواضحة إلى تقييد أي مجال آخر يتماشى مع هذا الحقل المحدد. تعطيل: كما يوحي الاسم ، قم بتعطيل المعامل ، عند تشغيله ، يعطل الحقل بحيث لا يظهر في الخروج. تحرير وحذف: يمكنك تحرير أو حذف حقل باستخدام الزر المعني. من الجدير بالذكر أن زر الحذف يظهر فقط للحقول المخصصة. لا يمكنك حذف الحقول الافتراضية ولكن فقط تعطيلها كان هذا كله يتعلق بإدارة الحقول الخاصة بك عن طريق التغيير والتبديل في معلمات المجال. بعد ذلك ، سنرى كيفية إضافة حقل تحميل مخصص إلى WooCommerce Checkout. أضف حقل تحميل مخصص في WooCommerce Checkout انتقل إلى لوحة تحكم مسؤول WordPress و انتقل إلى WooCommerce> Checkout. ضمن علامة التبويب تسجيل الخروج ، افتح علامة التبويب الإضافية قائمة الحقول. ملاحظة: إضافة حقول مخصصة لا يقتصر فقط على حقول إضافية. يمكنك إضافة حقول مخصصة إلى أقسام أخرى من صفحة الخروج مثل الفواتير ، والشحن ، وما إلى ذلك ، ما عليك سوى الانتقال إلى القائمة المعنية ضمن علامة التبويب Checkout لإضافة حقول جديدة إلى المنطقة التي تريدها. بمجرد دخول قائمة الحقول الإضافية ، انقر فوق إضافة حقل جديد لإنشاء حقل جديد. إلى جانب ذلك ، يمكنك ضبط موضع قسم الحقول الإضافية من القائمة المنسدلة في الزاوية اليمنى. يمكنك وضعها قبل أو بعد نماذج الفواتير أو ملاحظات الطلب. هو – هي سوف يأخذك إلى صفحة جديدة مع نموذج لإنشاء حقل جديد. نظرًا لأننا مهتمون بإضافة زر تحميل ملفات ، فقم بتعيين النوع كملف ، وامنحه تسمية ونص زر. اضغط على احفظ لحفظ حقلك الجديد. هذا كل شئ! إنها بهذه السهولة. يمكنك الآن الانتقال إلى صفحة Checkout الخاصة بك للتحقق من التغييرات. هناك سترى زر تحميل الملف قيد التشغيل. مثل هذا تماما، هناك عدة طرق لتخصيص صفحة الخروج الخاصة بك. للحصول على برنامج تعليمي كامل ، راجع دليلنا الكامل حول كيفية تخصيص صفحة WooCommerce Checkout. الخلاصة بشكل عام ، يعد الدفع الخاص بك أحد أهم الخطوات في عملية شراء عميلك. بحلول هذا الوقت ، يكون العميل قد قرر بالفعل إنهاء عملية الشراء. لذلك ، لا تريد أن يصبح أي شيء سيئًا هنا لإفساد عملية بيع جيدة. لهذا السبب تحتاج إلى تحسين صفحة الخروج الخاصة بك لتجربة مستخدم أفضل. حتى يكون من المرجح أن ينهي عميلك عملية الشراء ويقدم طلبًا. على سبيل المثال ، يعرض فقط عناوين المنتجات وليس صورها. من وجهة نظر العميل ، العنوان فقط لا يكفي للتحقق مما إذا كان قد حصل على العناصر الصحيحة عند الخروج. يمكن أن يكون عرض صورة المنتج على الخروج من WooCommerce مفيدًا جدًا هنا لأنه سيؤكد للمستخدم النهائي أنه حصل على المنتج المناسب عند الخروج. في هذه المقالة ، رأينا كيفية إضافة صورة منتج إلى WooCommerce checkout باستخدام مقتطفات التعليمات البرمجية المخصصة. لقد رأينا خيارين لعرض صور المنتج ، في الخط وعلى أسطر منفصلة في صفحة الخروج. علاوة على ذلك ، رأينا أيضًا كيف يمكننا إضافة صور المنتج إلى صفحة WooCommerce Order-Pay باستخدام رمز مخصص. بالإضافة إلى ذلك ، رأينا طرقًا مختلفة لتخصيص صفحة Checkout باستخدام Checkout Manager لبرنامج WooCommerce الإضافي. إذا وجدت هذا الدليل مفيدًا ، فإليك بعض المقالات الإضافية التي قد تهمك: كيفية ضغط الصور في WordPress (مع الإضافات وبدونها) أفضل الإضافات لإضافة علامات ALT إلى الصور (المجانية والمدفوعة) كيفية إصلاح مشكلات حجم صورة WooCommerce هل هل سبق لك أن حاولت إضافة صور المنتج إلى تسجيل الخروج من WooCommerce؟ ما الحل المناسب لك؟ ما هو الفرق الذي تعتقد أنه يحدث؟ اسمحوا لنا أن نعرف في التعليقات أدناه.