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

اضافه کردن بخش جدید به صفحه محصول در ووکامرس

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

افزونه custom product tab 

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

نحوه کار با افزونه custom product tab 

گام اول: نصب و دانلود : شما می توانید این افزونه را به صورت رایگان و بدون پرداخت هیچ هزینه ای از مخزن وردپرس دانلود و نصب کنید. بعد از نصب افزونه یک منو تحت عنوان نام افزونه یعنی custom product tab در پیشخوان ایجاد می شود در ادامه به تنظیمات و نحوه کار با این افزونه را بررسی می کنیم. 

گام دوم: شروع کار با افزونه: با کلیک روی نام افزونه شما صفحه ای مشابه را می بینید که لیستی از تب هایی که در سایت وجود دارد و یا ایجاد کرده اید قرار دارد. 

گام سوم: ایجاد تب جدید: با کلیک روی گزینه add tab  می توانید تب جدید اضافه کنید. هنگامی این گزینه را می زنید با سه گزینه رو به رو هستید که باید اطلاعات مربوط به هر یک را وارد کنید. 

گزینه tab title: در این قسمت شما باید یک عنوان برای تب سفارشی خود انتخاب کنید. 

گزینه tab name:  در این قسمت علاوه بر عنوان می توانید یک نام هم برای تب خود انتخاب کنید. کاربرد این بخش چیست؟ نام تب زمانی کاربرد دارد که شما دو تب با عنوان های یکسان ولی محتوا متفاوت می خواهید داشته باشید از طریق نام می توانید این دو تب را مجزا کنید. 

گزینه tab content: در این بخش شما اطلاعات و محتوا مربوط به تب را وارد می کنید. 

گام چهارم: نحوه استفاده از تب های ایجاد شده : در گام قبل شما نحوه ایجاد تب سفارشی آشنا شدید در این بخش به نحوه استفاده از آن می پردازیم وارد محصولی که می خواهید از تب مورد نظر در آن استفاده کنید می شوید. مانند تصویر زیر در جایی که اطلاعات محصول وجود دارد به منو custom tab می روید.

در این بخش دو گزینه را مشاهده می کنید که با انتخاب دکمه Add Saved Tab از بین تب های ایجاد شده تب مورد نظر را انتخاب کنید و به محصول اضافه کنید. با انتخاب گزینه Add Tab  می توانید یک تب جدید برای این محصول اضافه کنید اما توجه داشته باشید که از این tab فقط در این محصول مشخص استفاده کنید. 

نحوه ترتیب قرار گیری تب ها

شما می توانید ترتیب قرار گرفتن تب ها در صفحه محصول را تغییر دهید. هنگامی که روی منو custom tab کلیک می کنید در سمت چپ صفحه باز شده دکمه ای تحت عنوان move tab  می بینید که می توانید از طریق نشانگر بالا و پایین آن ترتیب نمایش تب ها را تغییر دهید و در نهایت روی دکمه save tabs کلیک کنید تا ترتیب نمایش به آن شکلی که می خواهید در می آید.

ویرایش یک تب

هنگامی که شما یک تب را تغییر می دهید این تغییرات در تمام محصولاتی که از این تب استفاده کرده اند اعمال می شود. حال اگر می خواهید تغییرات روی یک محصول اعمال نشود باید مطابق زیر عمل کنید. در سمت چپ تب محصول یک گزینه  تحت عنوان override saved Tab وجود دارد که باید آن را فعال کنید با انتخاب تیک این گزینه دیگر تغییراتی که روی tab اعمال شود در تب مرتبط با این محصول هیچ تغییری به وجود نمی آید.

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

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

برای این کار باید یک قطعه کد را در فایل function.php قرار دهید. قطعه کد مورد نظر به شکل زیر است: 

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

    }, ۳۰۰);

}

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 );

        }

    });

});

حال برای استفاده از لینک می توانید به شکل زیر عمل کنید:

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

با این کار شما می توانید از هرجایی از سایت یک کاربر را به تب مورد نظر ارجاع دهید. 

سخن آخر

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