Custom Product Tabs for WooCommerce تب های سفارشی ووکامرس

Custom Product Tabs for WooCommerce

اگر می خواهید اطلاعات بیشتری درباره محصولات خود در اختیار مشتریان قرار دهید و می خواهید با یک روش حرفه ای و زیبا این کار را انجام دهید افزونه Custom Product Tabs for WooCommerce به شما کمک می کند.

یکی از نقاط قوت افزونه ووکامرس به عنوان بهترین فروشگاه ساز وردپرس این است که افزودنی های زیادی دارد که با نصب و فعال سازی آنها می توانید قابلیت های فروشگاه ووکامرس خود را تقویت کرده و ویژگی های آن را افزایش دهید.

افزونه Custom Product Tabs for WooCommerce با اضافه کردن تب های سفارشی به محصولات یا حذف کردن تب های پیش فرض ووکامرس به شما اجازه می دهد صفحه محصولات خود را شخصی سازی کنید. شما می توانید این کار را در صفحه یک محصول یا همه محصولات انجام دهید.

در این مقاله افزونه Custom Product Tabs for WooCommerce را بررسی کرده و نحوه استفاده از آن را آموزش می دهیم.

آموزش افزونه  Custom Product Tabs for WooCommerce و نحوه اضافه کردن تب به محصولات ووکامرس

توجه داشته باشید که برای استفاده از این افزونه باید فروشگاه اینترنتی خود را با افزونه ووکامرس ساخته باشید.

ابتدا افزونه را از پایین صفحه دریافت نموده و آن را در سایت خود در بخش افزونه ها نصب کنید. اگر منو افزونه را ندیدید یا اطلاعات جزئی تری لازم دارید، به راهنمای گام به گام ما در مورد آموزش نصب افزونه وردپرس مراجعه کنید.

بعد از اینکه افزونه نصب شد آن را فعال کنید. پس از فعال سازی افزونه منوی جدیدی به نام Custom Product Tabs در پیشخوان وردپرس اضافه می شود.

با کلیک بر روی این منو صفحه ای مشابه شکل زیر مشاهده می کنید.

Custom Product Tabs for WooCommerce

تمام تب های ذخیره شده در افزونه Custom Product Tabs for WooCommerce در این صفحه قرار می گیرند.

تب های ذخیره شده تب هایی هستند که پس از اینکه آنها را ساختید می توانید در هر تعداد محصول که مورد نظر شما است، استفاده کنید.

وقتی برای اولین بار از افزونه استفاده می کنید، این صفحه خالی است. برای ساختن و ذخیره کردن اولین تب روی دکمه Add New کلیک کنید.

صفحه ساخت تب مشابه شکل زیر نشان داده می شود.

Custom Product Tabs for WooCommerce

در قسمت Tab Title یک عنوان برای تب و در قسمت Tab Content محتوای تب خود را وارد کنید.

همچنین در قسمت Tab Name می توانید یک نام برای تب انتخاب کنید. اگر تب هایی با عنوان مشابه و محتوای متفاوت داشته باشید، این گزینه مفید است. به این ترتیب یک تب می تواند در چندین محصول استفاده شود.

در انتها روی دکمه Save Tab کلیک کنید.

اگر روی لینک Go Back to All Saved Tabs List کلیک کنید به صفحه لیست تب ها برمی گردید و در آن می توانید تب ساخته شده را مشاهده کنید.

Custom Product Tabs for WooCommerce

افزونه Custom Product Tabs for WooCommerce به شما امکان ویرایش یا حذف تب ها را می دهد. کافی است روی لینک Edit Tab یا Delete Tab که با هاور کردن روی تب مورد نظر ظاهر می شود، کلیک کنید یا روی دکمه Edit Tab روبروی تب مورد نظر خود کلیک کنید.

هر بار که یک تب ذخیره شده را ویرایش می کنید، تغییرات ایجاد شده در تمام محصولاتی که از آن تب استفاده می کنند اعمال می شود، به جز محصولاتی که “Override Saved Tab” را در آنها فعال کرده اید که در ادامه آموزش در مورد آن توضیح خواهیم داد.

استفاده از تب های ذخیره شده

برای اینکه تب های ذخیره شده را در صفحه محصول نشان دهید، محصول مورد نظر خود را به حالت ویرایش باز کنید. در باکس اطلاعات محصول در انتهای صفحه تب Custom Tabs را مشاهده می کنید.

روی آن کلیک کنید تا صفحه ویرایش تب های سفارشی نشان داده شود.

Custom Product Tabs for WooCommerce

برای اضافه کردن تب ذخیره شده به صفحه محصول روی دکمه Add a Saved Tab کلیک کنید. با این کار یک پنجره با لیست تمام تب های ذخیره شده ظاهر می شود. روی علامت + کنار تبی که می خواهید اضافه کنید، کلیک کنید.

Custom Product Tabs for WooCommerce

اکنون تب ذخیره شده شما در صفحه تب های سفارشی نشان داده می شود. پس از اتمام کار مطمئن شوید که روی دکمه “Save Tabs” کلیک کنید.

افزونه Custom Product Tabs for WooCommerce می توانید در همین صفحه اقدام به ساخت تب جدید کنید. اما تب ساخته شده را نمی توانید برای محصولات دیگر استفاده کنید. برای این کار کافی است روی دکمه Add a Tab کلیک کنید.

Custom Product Tabs for WooCommerce

پس از آن عنوان و توضیحات تب را وارد کرده و روی دکمه Save Tabs کلیک کنید.

پس از ذخیره تغییرات می توانید صفحه محصول را در فروشگاه خود مشاهده کنید. تب سفارشی که ایجاد کرده اید در سمت چپ تب پیش فرض توضیحات قرار می گیرد.

Custom Product Tabs for WooCommerce

برای تغییر ترتیب نمایش تب ها می توانید از نشانگرهای بالا و پایین Move tab order استفاده کنید. این نشانگرها تب ها را بالا و پایین می برند. پس از اینکه ترتیب قرارگیری تب ها را مرتب کردید، روی دکمه Save Tabs کلیک کنید. پس از آن تب ها با ترتیبی که شما برای آنها در نظر گرفته اید نمایش داده می شوند.

بازنویسی تب های ذخیره شده در افزونه Custom Product Tabs for WooCommerce

هنگامی که یک تب ذخیره شده را ویرایش می کنید، این تغییرات برای هر محصولی که از آن تب استفاده می کند اعمال خواهد شد. اگر می خواهید تغییرات فقط برای یک محصول اعمال شود، گزینه Override Saved Tab را برای آن فعال کنید.

Custom Product Tabs for WooCommerce

با فعال کردن این چک باکس، می توانید تب ذخیره شده را فقط برای آن محصول ویرایش کنید. هرگونه ویرایش در تب اصلی ذخیره شده، درمورد محصول یا محصولاتی که Override Saved Tab برای آنها فعال شده است، اعمال نخواهد شد.

لینک دادن مستقیم به یک تب سفارشی

با استفاده از افزونه Custom Product Tabs for WooCommerce می توانید به صورت مستقیم به یک تب سفارشی لینک دهید. برای این کار باید یک کد جاوااسکریپت سفارشی در فایل functions.php قالب خود قرار دهید. توصیه می شود برای این کار از یکی از افزونه های ویرایش قالب وردپرس استفاده کنید.

این افزونه ها به شما امکان می دهند فایل های قالب سایت خود را ویرایش کنید بدون اینکه آسیبی به سایت وارد کنید و با بروزرسانی قالب نیز این تغییرات حفظ می شوند.

بهترین افزونه ای که می توانید استفاده کنید افزونه Simple Custom CSS and JS است که توضیحات مربوط به این افزونه و بسیاری اطلاعات دیگر را می توانید در مقاله ویرایش CSS در وردپرس با افزونه و به صورت دستی مطالعه کنید.

پس از نصب و فعال سازی افزونه در پیشخوان وردپرس به صفحه تنظیمات افزونه بروید.

روی Add JS Code در بالای صفحه کلیک کنید.

کد زیر را در آن قرار داده و روی دکمه ذخیره تغییرات کلیک کنید.

const tabOpener = function(tab) {
    // Simulate a click on that tab.
   if ( typeof tab === 'string') {
       const currentTab = jQuery( '.' + tab + '_tab' );
        currentTab.children('a').click()
   }

    // Scroll to that tab.
    jQuery('html, body').animate({
	    scrollTop: jQuery( '#tab-' + tab ).offset().top
    }, 300);
}

jQuery(document).ready(function($) {
    const { hash } = window.location;
    let tab;

    // If a # exists in the url lets see if its a tab.
    if ( hash ) {
        tab = hash.replace('#', '');
	    return tabOpener( tab );
    }

    // On click we'll check to see if the event target has a tab hash.
    $('body').on('click', function(e) {

        if ( e.target.hash && ! e.target.hash.includes('#tab') ) {
            tab = e.target.hash.replace('#', '');
             return tabOpener( tab );
        }
    });
});

اکنون که جاوااسکریپت پیاده سازی شده است می توانید از هرجای دیگری مستقیماً به یک تب سفارشی لینک دهید. برای انجام این کار 2 راه وجود دارد.

لینک را در صفحه محصول جاسازی کنید:

<a href=”#limited-edition”>Limited Edition</a>

     از جای دیگری مستقیماً به تب سفارشی لینک دهید:

<a href=”https://example.com/product-page#limited-edition”>Tennis Shoes</a>

اگر لینک را در صفحه محصول خود قرار دهید، یک #  به عنوان تب اضافه می شود. اگر لینک در صفحه محصول نباشد، ابتدا آدرس کامل صفحه محصول و به دنبال آن # و عنوان تب آورده می شود.

حال می توانید با افزونه Custom Product Tabs for WooCommerce از هرجای سایت خود مستقیماً به یک تب سفارشی لینک دهید.

همانطور که گفته شد افزونه ووکامرس افزودنی های زیادی دارد که با استفاده از آنها می توانید ویژگی های بیشتری به فروشگاه ووکامرس خود اضافه کنید. لیستی از این افزونه ها را می توانید در مقاله بهترین افزودنی های ووکامرس مشاهده کنید.

امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد.

دانلود افزونه

دانلود افزونه Custom Product Tabs for WooCommerce
صفحه افزونه Custom Product Tabs for WooCommerce

درباره ی مینا قدسی

مطلب پیشنهادی

آموزش افزونه WP Smush

آموزش افزونه WP Smush و بهینه سازی تصاویر وردپرس

یکی از بهترین راه ها برای افزایش سرعت وردپرس این است که حجم تصاویر سایت …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *