يتميز التخطيط القياسي لصفحة منتج WooCommerce الفردي بصورة المنتج الرئيسية / المميزة على اليسار والعنوان / الإضافة إلى عربة التسوق على اليمين. ولكن ماذا لو احتجت إلى تحويل تلك الصورة إلى صورة بطل ، أي صورة مميزة بعرض كامل ، ودفع العنوان والإضافة إلى زر عربة التسوق تحته؟
حسنًا ، لمرة واحدة ، سنلقي نظرة على مقتطف CSS فقط. في بعض الأحيان تكون أسهل الأشياء هي أيضًا تلك التي تعمل ببراعة. يتمتع!
بعد تطبيق CSS الموجود في هذا البرنامج التعليمي WooCommerce ، تأخذ صورة المنتج الرئيسية العرض الكامل ويتم دفع العنوان والسعر والإضافة إلى عربة التسوق مع العرض الكامل أيضًا.
يرجى ملاحظة أنه بمجرد وصول صورتك المميزة إلى العرض الكامل ، قد تبدو منقطة. هذا لأنك من المحتمل أنك قمت بتعيين عرض صورة مميز أقل من العرض الكامل لموقع الويب (“WP Dashboard> Appearance> Customize> WooCommerce> Product Images”) وبالتالي فإن CSS تمدها بشكل سيء.
/**
* @snippet Full Width Product Image @ Single Product
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 3.9
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
float: none;
width: 100%;
max-width: unset;
clear: both;
}
.woocommerce-product-gallery img {
width: 100%;
}WooCommerce: صنف كـ “Body” Class @ Single Product Page
WooCommerce: عرض الفيديو بدلاً من صور المنتج
WooCommerce: تحرير عنوان URL لصورة المنتج الخارجية
WooCommerce: أضف محتوى أسفل صور منتج واحد
WooCommerce: كيفية تقصير عناوين المنتج
WooCommerce: أضف CSS لطلب رسائل البريد الإلكتروني
WooCommerce: أضف رمزًا إلى أزرار إضافة إلى عربة التسوق
WooCommerce: أعد تسمية زر “إضافة إلى عربة التسوق” إذا كان المنتج بالفعل @ سلة التسوق
WooCommerce: إعادة تسمية وصف المنتج Tab Label @ Single Product Page
WooCommerce: إعادة توجيه صفحة منتج واحد للعملاء المسجلين
يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”
يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.
إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂
تحقق من دروس الفيديو المجانية هذه. يمكنك تعلم كيفية تخصيص WooCommerce بدون مكونات إضافية غير ضرورية ، وكيفية تكوين إعدادات البرنامج المساعد WooCommerce بشكل صحيح وحتى كيفية إتقان استكشاف أخطاء WooCommerce في حالة حدوث خطأ!
