عرض عمودين على المحمول للمنتجات المرتبطة في ووكوميرس

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

تعديل عرض المنتجات ذات الصلة في ووكومرس

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

تطبيق أسلوب Flexbox

لتطبيق عرض عمودين من المنتجات ذات الصلة، يمكننا استخدام خاصية display: flex في CSS. عند إدخال تعديل على القواعد الخاصة بالشاشة، يمكننا التحكم في تصميم هذه العمودين. على سبيل المثال، يمكن استخدام الكود التالي:

@media (max-width: 600px) {
    .wp-block-post-template-is-layout-grid {
        display: flex;
        flex-wrap: wrap;
    }
}

يؤدي هذا التعديل إلى تغيير طريقة عرض المنتجات من الوضع العمودي إلى الوضع الأفقي. لكننا بحاجة إلى خطوة إضافية لتطبيق عرض معين لكل عمود.

تحديد العرض لكل عمود

بعد أن نجحنا في تغيير طريقة العرض من العمودي إلى الأفقي، يتعين الآن أن نحدد عرض كل عمود ليكون 50%. يمكن تحقيق ذلك عن طريق تعديل الكود السابق وإضافة خواص أخرى للتحكم في توزيع المساحات بين العناصر. إليك كيف يتم ذلك:

@media (max-width: 600px) {
    .wp-block-post-template-is-layout-grid {
        display: flex;
        flex-wrap: wrap;
    }
    .wp-block-post-template-is-layout-grid .product {
        width: 50%; /* تحديد عرض 50% لكل عمود من الأعمدة */
    }
}

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

اختبار التعديلات

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

أهمية تحسين تجربة المستخدم

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

في الختام، إذا كنت ترغب في عرض عمودين من المنتجات ذات الصلة على الهواتف المحمولة في ووكومرس، فإن استخدام CSS بشكل صحيح سيمكنك من القيام بذلك بسهولة. اتباع الخطوات المذكورة سيساعدك على تحسين عرض المنتجات بشكل كبير، مما يعود بالنفع على نشاطك التجاري. استمتع بتحسين متجرك الإلكتروني وتقديم أفضل تجربة لمستخدميك!