إذا كنت تحب تخطيط صفحة منتج واحد من Amazon ، فمن المحتمل أنك لا تحب تخطيط علامات تبويب صفحة منتج واحد من WooCommerce الافتراضي. هذا هو القسم الذي يظهر فيه ، افتراضيًا ، “الوصف” و “التعليقات” و “المعلومات الإضافية” والمحتوى المخصص الآخر … كعلامات تبويب أسفل الصورة ووصف موجز.
لحسن الحظ ، هناك طريقة سهلة للغاية لإزالة علامات التبويب هذه وعرض كل علامة تبويب فوق بعضها البعض ، دون إخفاء أي محتوى. إذا كان ذلك مفيدًا للمستخدمين ، فأوصيك باستخدام هذا المقتطف البسيط للغاية.
في هذا البرنامج التعليمي ، ستتعرف على “الوظائف القابلة للتوصيل”. بشكل أساسي ، حيثما تم توفيره ، يمكنك ببساطة إعادة تعريف وظيفة مكون إضافي مخصص (WooCommerce) دون الحاجة إلى استخدام الخطافات أو التجاوزات. سيقوم وورد بريس فقط “بالاستماع” إلى نسختك الجديدة وليس الإصدار الأصلي بعد الآن.
لذا استمتع!
هذا هو التنسيق الجديد بعد أن “انفجرت” علامات التبويب. كما ترى ، “الوصف” و “التعليقات” وعلامات التبويب الأخرى مكدسة فوق بعضها البعض وكلها مرئية. رائع. صحيح؟
بادئ ذي بدء ، كما قلت سابقًا ، يتم عرض علامات التبويب بواسطة WooCommerce بفضل هذه الوظيفة “القابلة للتوصيل”:
if ( ! function_exists( 'woocommerce_output_product_data_tabs' ) ) {
/**
* Output the product tabs.
*/
function woocommerce_output_product_data_tabs() {
wc_get_template( 'single-product/tabs/tabs.php' );
}
}هذا رائع ، لذا يمكننا ببساطة إعادة إعلان وظيفة woocommerce_output_product_data_tabs () PHP وإخبار وورد بريس بالاستماع إلى إصدارنا الجديد:
/**
* @snippet Explode Tabs @ WooCommerce Single Product Page
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 5
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
function woocommerce_output_product_data_tabs() {
$product_tabs = apply_filters( 'woocommerce_product_tabs', array() );
if ( empty( $product_tabs ) ) return;
echo '<div class="woocommerce-tabs wc-tabs-wrapper">';
foreach ( $product_tabs as $key => $product_tab ) {
?>
<h2><?php echo $product_tab['title']; ?></h2>
<div id="tab-<?php echo esc_attr( $key ); ?>">
<?php
if ( isset( $product_tab['callback'] ) ) {
call_user_func( $product_tab['callback'], $key, $product_tab );
}
?>
</div>
<?php
}
echo '</div>';
}WooCommerce: إزالة علامة تبويب @ صفحة منتج واحد
WooCommerce: المنتجات ذات الصلة في علامة تبويب في صفحة المنتج
WooCommerce: إزالة علامات تبويب المنتج ، وإظهار الوصف الطويل
WooCommerce: إعادة تسمية “الوصف” العنوان @ علامات تبويب صفحة منتج واحد
WooCommerce: إزالة عنوان “الوصف” @ علامات تبويب منتج واحد
WooCommerce: إعادة تسمية وصف المنتج Tab Label @ Single Product Page
WooCommerce: قم بالتمرير إلى علامة تبويب المنتج @ صفحة منتج واحد
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 في حالة حدوث خطأ!
