افزودن دکمه «محصول قبلی» و «محصول بعدی» در صفحه تک محصول ووکامرس

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

چطور دکمه «محصول قبلی» و «محصول بعدی» در صفحه تک محصول ووکامرس اضافه کنیم؟

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

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

ابتدا کد php را در مسیر «نمایش> ویرایشگر پوسته> توابع پوسته» جایگذاری می کنیم. کد به شرح زیر است:

add_add_action( 'woocommerce_before_single_product', 'woocommerceir_prev_next_product' );
 
// and if you also want them at the bottom...
add_action( 'woocommerce_after_single_product', 'woocommerceir_prev_next_product' );
 
function woocommerceir_prev_next_product(){
 
echo '<div class="prev_next_buttons">';
 
   // 'product_cat' will make sure to return next/prev from current category
        $previous = next_post_link('%link', '&larr; بعدی', TRUE, ' ', 'product_cat');
   $next = previous_post_link('%link', 'قبلی &rarr;', TRUE, ' ', 'product_cat');
 
   echo $previous;
   echo $next;
    
echo '</div>';

حال نوبت به استفاده از کد css رسیده است. شما باید از این تکه کد استفاده کنید تا ظاهر جذابتری برای دکمه های مربوط به محصول قبلی و بعدی فراهم کنید. کد css را باید در بخش «نمایش> سفارشی سازی> css اضافی» جایگذاری کنید.

/* CSS */
 
.prev_next_buttons {
line-height: 40px;
margin-bottom: 20px;
}
 
.prev_next_buttons a[rel="prev"], .prev_next_buttons a[rel="next"] {
display: block;
}
 
.prev_next_buttons a[rel="prev"] {
float: right;
}
 
.prev_next_buttons a[rel="next"] {
float: left;
}
 
.prev_next_buttons::after {
content: '';
display: block;
clear:both;
}

ضمنا توجه داشته باشید که این تکه کد و درستی عملکرد آن روی قالب وودمارت تست شده است. قالب وودمارت یکی از برترین قالب های ووکامرس می باشد. اگر سوالی پیرامون این نوشته دارید با ما در میان بگذارید.