WooCommerce: عرض المنتجات في نموذج طلب جدول

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

لنرى كيف فعلت هذا – سأحاول التعليق على PHP الخاص بي قدر الإمكان حتى تتمكن من فهم استراتيجيتي. يتمتع!

اعرض منتجات WooCommerce في جدول

مقتطف PHP: تحرير عرض عناصر حلقة منتج WooCommerce

قبل تطبيق CSS ، علينا التأكد من إزالة العناصر غير المرغوب فيها (مثل شارة Sale!) وترك 3 “أعمدة” فقط: العنوان والسعر والإضافة إلى سلة التسوق.

/**
 * @snippet       Edit WooCommerce Product Loop Items Display
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.8
 */
  
// -------------------------
// 1. Change number of products per row to 1
// Note: this is specific to Storefront theme
// See https://docs.woocommerce.com/document/change-number-of-products-per-row/
  
add_filter( 'storefront_loop_columns', 'bbloomer_loop_columns' );
  
function bbloomer_loop_columns() {
return 1;
}
  
// -------------------------
// 2. Remove default image, price, rating, add to cart
  
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
  
// -------------------------
// 3. Remove sale flash (Storefront)
  
add_action( 'init', 'bbloomer_hide_storefront_sale_flash' );
  
function bbloomer_hide_storefront_sale_flash() {
remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 6 );
}
  
// -------------------------
// 4. Add <div> before product title
  
add_action( 'woocommerce_before_shop_loop_item', 'bbloomer_loop_product_div_flex_open', 8 );
 
function bbloomer_loop_product_div_flex_open() {
echo '<div class="product_table">';
}
  
// -------------------------
// 5. Wrap product title into a <div> with class "one_third"
  
add_action( 'woocommerce_before_shop_loop_item', 'bbloomer_loop_product_div_wrap_open', 9 );
 
function bbloomer_loop_product_div_wrap_open() {
echo '<div class="one_third">';
}
  
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_wrap_close', 6 );
 
function bbloomer_loop_product_div_wrap_close() {
echo '</div>';
}
  
// -------------------------
// 6. Re-add and Wrap price into a <div> with class "one_third"
  
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_wrap_open', 7 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_price', 8 );
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_wrap_close', 9 );
  
// -------------------------
// 7. Re-add and Wrap add to cart into a <div> with class "one_third"
  
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_wrap_open', 10 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 11 );
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_wrap_close', 12 );
  
// -------------------------
// 8. Close <div> at the end of product title, price, add to cart divs
  
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_loop_product_div_flex_close', 13 );
 
function bbloomer_loop_product_div_flex_close() {
echo '</div>';
}

CSS: تحرير عرض عناصر حلقة منتج WooCommerce

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

سنستخدم خاصية “flex” الرائعة في CSS 🙂

ملاحظة: مرة أخرى ، هذا CSS خاص بموضوع Storefront ، لذلك ستحتاج بالتأكيد إلى تغيير بعض المكالمات للتأكد من تشغيل كل شيء.

@media (min-width: 768px) {
  
.site-main ul.products li.product {
    width: 100%;
    float: none;
    margin: 0;
}
  
.site-main ul.products {
border-right: 1px solid;
border-bottom: 1px solid;
margin: 1em 0;
}
  
.site-main ul.products li.product .product_table {
  display: flex;
  flex-wrap: wrap;
}
  
.site-main ul.products li.product div.one_third {
    width: 33.3%;
    float: left;
    margin: 0;
    text-align: left;
    background-color: #eee;
    border-left: 1px solid;
    border-top: 1px solid;
    padding: 1em 2em;
    box-sizing: border-box;
    flex-grow: 1;
    overflow: hidden;
}
  
}

هل هناك مكون إضافي لذلك؟

إذا كنت تحب البرمجة ولكنك لا تشعر بالثقة بنسبة 100٪ مع PHP ، فقد قررت البحث عن مكونات إضافية موثوقة تحقق نفس النتيجة. كالعادة ، اخترت بائعي الإضافات WooCommerce استنادًا إلى سمعة السوق ، وجودة الدعم المخصص ، ونظافة الكود ، والموثوقية طويلة المدى – وربما بنفس الأهمية تقريبًا – حيث يكون “الأشخاص الذين يقفون” المكون الإضافي داعمين نشطين لنظام وورد بريس البيئي.

1. التسوق بالجملة لـ WooCommerce

البائع: WooCommerce.com – طور بواسطة: Consortia AS – ضمان استرداد الأموال لمدة 30 يومًا

أنشئ طرق عرض لقائمة المنتجات واجعل من الممكن تسوق كميات من المنتجات بسهولة. مثالي لحلول البيع بالجملة ، حيث يعرض للعملاء جميع المنتجات في طاولة ويتيح التسوق بالجملة. تم تحسين Bulk Shop أيضًا للأجهزة المحمولة وسريع الاستجابة.

2. YITH نماذج الطلبات السريعة لـ WooCommerce

البائع: YITH – طور بواسطة: YITH – ضمان استرداد الأموال لمدة 30 يومًا

امنح العملاء الفرصة لشراء جميع المنتجات أو مجموعة من المنتجات بسهولة. اجعل من السهل البحث عن منتجات سلة التسوق وتحديدها وإضافتها بنقرة واحدة من نفس الصفحة.

3. جدول منتج WooCommerce

البائع: Barn2 – طور بواسطة: Barn2 – ضمان استرداد الأموال لمدة 30 يومًا

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

المنشورات ذات الصلة:

WooCommerce: تعطيل نطاق سعر المنتج المتغير $$$ – $$$

منطق WooCommerce الشرطي – العلامات والأمثلة و PHP

WooCommerce: المجموع الفرعي لسلة التسوق المقطوعة في حالة القسيمة @ السلة

WooCommerce: عرض إجمالي عنصر سلة التسوق مع خصم القسيمة

WooCommerce: راجع ما يوجد داخل مصفوفة العربة (print_r)

WooCommerce: Display٪ Discount @ Shop & Loop Pages

WooCommerce: POA / Call for Price @ Single Product

WooCommerce: إجبار سلة التسوق على المبلغ المحدد (الإيداع)

WooCommerce: التسعير الديناميكي المجمع بدون مكون إضافي

WooCommerce: تعيين / تجاوز سعر المنتج برمجيًا

أين تضيف هذا المقتطف؟

يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”

هل هذا المقتطف (لا يزال) يعمل؟

يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.

إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂

هل تحتاج إلى مساعدة في WooCommerce؟

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