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

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

کافیه از قطعه کدهای زیر استفاده کنی:

نمایش محصولات بعدی و قبلی از همون دسته بندی محصول

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

<?php
/**
 * @snippet       Add next/prev buttons @ WooCommerce Single Product Page
 * @how-to        mrebr.ir
 * @author        Rahmat Ebr
 * @testedwith    WooCommerce 9.5.1
 */

add_action('woocommerce_before_single_product', 'mrebr_prev_next_product');

// and if you also want them at the bottom...
add_action('woocommerce_after_single_product', 'mrebr_prev_next_product');

function mrebr_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', '← PREVIOUS', TRUE, ' ', 'product_cat');
    $next = previous_post_link('%link', 'NEXT →', TRUE, ' ', 'product_cat');

    echo $previous;
    echo $next;

    echo '</div>';
}

نتیجه:

این مقاله رو از دست نده:  نحوه غیرفعال کردن XML-RPC در وردپرس (3 روش امن)
لینک به محصولات قبلی و بعدی در صفحه تک محصول ووکامرس با دسته بندی مشابه
لینک به محصولات قبلی و بعدی در صفحه تک محصول ووکامرس با دسته بندی مشابه

استایل دهی به دکمه های قبلی و بعدی

میتونی با کلاس های زیر به این دکمه ها استایل بدی یا با دادن کلاس یا ای دی در کد PHP قبل، استایل دلخواهی بهشون بدی. انتخاب با شماست


.prev_next_buttons {
    margin-bottom: 20px;
}

.prev_next_buttons a[rel="prev"],
.prev_next_buttons a[rel="next"] {
    display: block;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    float: left;
    background: #5333ed;
    color: #fff;
    padding: 0.25rem 1rem;
    border-radius: 5px;
}

.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;
}

نتیجه:

استایل دهی به دکمه های قبل و بعد
استایل دهی به دکمه های قبل و بعد

EBR
EBR

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

مقاله‌ها: 27

پاسخی بگذارید

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