اعتمادًا على المظهر الخاص بك ، قد يعمل أو لا يعمل فقط إنشاء رابط رابط href إلى علامة تبويب المنتج ، أي أنه قد لا يتم التمرير إليه لأنه مغلق حاليًا.
فيما يلي طريقة لإنشاء روابط href لا تقوم بالتمرير إلى علامة التبويب فحسب ، بل تفتحها أيضًا في حالة إغلاقها (سيضمن ذلك تمرير المرساة إلى علامة التبويب). أيضًا ، القليل من “تحريك” jQuery سيوفر التمرير السلس ويعزز تجربة المستخدم. آمل أن تستمتع!
قم بإنشاء روابط للتمرير السلس إلى أي علامة تبويب منتج WooCommerce
/**
* @snippet Scroll to tab - WooCommerce Single Product
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 3.5.7
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_action( 'woocommerce_single_product_summary', 'bbloomer_scroll_to_and_open_product_tab', 21 );
function bbloomer_scroll_to_and_open_product_tab() {
global $post, $product;
// LINK TO SCROLL TO DESC TAB
if ( $post->post_content ) {
echo '<p><a class="jump-to-tab" href="#tab-description">' . __( 'Read more', 'woocommerce' ) . ' →</a></p>';
}
// LINK TO SCROLL TO ADDITIONAL INFO TAB
if ( $product && ( $product->has_attributes() || apply_filters( 'wc_product_enable_dimensions_display', $product->has_weight() || $product->has_dimensions() ) ) ) {
echo '<p><a class="jump-to-tab" href="#tab-additional_information">' . __( 'Additional information', 'woocommerce' ) . ' →</a></p>';
}
// LINK TO SCROLL TO REVIEWS TAB
if ( comments_open() ) {
echo '<p><a class="jump-to-tab" href="#tab-reviews">' . __( 'Reviews', 'woocommerce' ) . ' →</a></p>';
}
?>
<script>
jQuery(document).ready(function($){
$('a.jump-to-tab').click(function(e){
e.preventDefault();
var tabhash = $(this).attr("href");
var tabli = 'li.' + tabhash.substring(1);
var tabpanel = '.panel' + tabhash;
$(".wc-tabs li").each(function() {
if ( $(this).hasClass("active") ) {
$(this).removeClass("active");
}
});
$(tabli).addClass("active");
$(".woocommerce-tabs .panel").css("display","none");
$(tabpanel).css("display","block");
$('html,body').animate({scrollTop:$(tabpanel).offset().top}, 750);
});
});
</script>
<?php
}WooCommerce: إزالة علامة تبويب @ صفحة منتج واحد
WooCommerce: المنتجات ذات الصلة في علامة تبويب في صفحة المنتج
WooCommerce: إعادة تسمية “الوصف” العنوان @ علامات تبويب صفحة منتج واحد
WooCommerce: إزالة عنوان “الوصف” @ علامات تبويب منتج واحد
WooCommerce: إعادة تسمية وصف المنتج Tab Label @ Single Product Page
WooCommerce: علامات تبويب المنتج “انفجار”
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 في حالة حدوث خطأ!
