مقاله تخصصی از مصطفی نور - متخصص طراحی و توسعه سایت

نمایش ویژیگی محصولات ووکامرس مشابه دیجی کالا

نمایش ویژیگی محصولات ووکامرس مشابه دیجی کالاآیا به دنبال راهی زیبا و متفاوت برای نمایش مشخصات محصولات فروشگاه ووکامرس خود هستید؟ آیا می‌خواهید صفحات محصول حرفه‌ای‌تر و کاربرپسندتر به نظر برسند؟ در این مقاله…

1 دقیقه مطالعه
بروزرسانی:
NOOR / ARTICLE
نمایش ویژیگی محصولات ووکامرس مشابه دیجی کالا
حالت مطالعه ۰٪

نمایش ویژیگی محصولات ووکامرس مشابه دیجی کالا

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

				
					function my_product_features_boxed_shortcode() {
    global $product;
    if ( ! $product ) {
        $product = wc_get_product( get_the_ID() );
    }
    if ( ! $product ) {
        return '';
    }

    $attributes = $product->get_attributes();
    if ( empty( $attributes ) ) {
        return '';
    }

    ob_start();
    ?>
    <style>.product-features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 12px;
            direction: rtl;
            font-family: inherit;
            margin-bottom: 20px;
        }

        .product-feature-box {
            background-color: #f2f2f5;
            border-radius: 8px;
            padding: 10px 14px;
            text-align: right;
        }

        .product-feature-title {
            color: #6b6b6b;
            font-size: 13px;
            margin-bottom: 6px;
            font-weight: 500;
            line-height: 1.5;
        }

        .product-feature-value {
            color: #1e1e2d;
            font-weight: 700;
            font-size: 14px;
            line-height: 1.6;
        }

        @media (max-width: 767px) {
            .product-features-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .product-feature-title {
                font-size: 12px;
                margin-bottom: 4px;
            }
            .product-feature-value {
                font-size: 13px;
            }
        }</style>

    <div class="product-features-grid">
        <?php
        foreach ( $attributes as $attribute ) {
            if ( method_exists( $attribute, 'get_visible' ) && ! $attribute->get_visible() ) {
                continue;
            }

            if ( $attribute->is_taxonomy() ) {
                $attribute_label = wc_attribute_label( $attribute->get_name() );
                $terms = wp_get_post_terms( $product->get_id(), $attribute->get_name(), array( 'fields' => 'names' ) );
                $attribute_values = implode( ', ', $terms );
            } else {
                $attribute_label = $attribute->get_name();
                $attribute_values = implode( ', ', $attribute->get_options() );
            }

            if ( ! empty( $attribute_values ) ) {
                ?>
                <div class="product-feature-box">
                    <div class="product-feature-title"><?php echo esc_html( $attribute_label ); ?></div>
                    <div class="product-feature-value"><?php echo esc_html( $attribute_values ); ?></div>
                </div>
                <?php
            }
        }
        ?>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode( 'my_boxed_product_features', 'my_product_features_boxed_shortcode' );

				
			

این شورت کد چه کاری انجام می‌دهد؟

این شورت کد پیشرفته به نام [my_boxed_product_features] تمام ویژگی‌های محصول ووکامرس را استخراج کرده و آنها را در قالب جعبه‌های زیبا و مرتب نمایش می‌دهد. هر جعبه شامل دو بخش است:

  1. عنوان ویژگی: نام ویژگی محصول (مانند رنگ، سایز، جنس و…)
  2. مقدار ویژگی: مقدار یا مقادیر مربوط به آن ویژگی (مانند قرمز، XL، چرم و…)

نتیجه کار، یک نمایش گرید (شبکه‌ای) زیبا از تمام مشخصات محصول است که:

  • به صورت خودکار در دستگاه‌های مختلف (موبایل، تبلت و دسکتاپ) تنظیم می‌شود
  • از راست به چپ چیده می‌شود (مناسب برای سایت‌های فارسی و عربی)
  • با طراحی ساده و شیک، اطلاعات محصول را برجسته می‌کند
  • فونت و رنگ‌های استاندارد دارد که با اکثر قالب‌ها سازگار است

مزایای استفاده از نمایش جعبه‌ای ویژگی‌های محصول

این روش نمایش ویژگی‌های محصول مزایای زیادی دارد:

  1. تجربه کاربری بهتر: اطلاعات محصول به شکلی سازمان‌یافته و خوانا ارائه می‌شوند
  2. ظاهر حرفه‌ای‌تر: این نمایش مدرن، فروشگاه شما را از سایر فروشگاه‌های معمولی متمایز می‌کند
  3. افزایش نرخ تبدیل: دسترسی سریع‌تر به اطلاعات مهم محصول می‌تواند تصمیم‌گیری خرید را تسهیل کند
  4. سازگار با موبایل: طراحی واکنش‌گرا به صورت خودکار در دستگاه‌های مختلف تنظیم می‌شود
  5. افزایش زمان حضور در صفحه: جذابیت بصری باعث می‌شود کاربران زمان بیشتری را در صفحه محصول سپری کنند

نحوه پیاده‌سازی شورت کد در سایت ووکامرسی

برای استفاده از این شورت کد، باید:

  1. کد کامل ارائه شده در این مقاله را کپی کنید
  2. به داشبورد وردپرس خود بروید
  3. به بخش ظاهر (Appearance) و سپس ویرایشگر (Theme Editor) بروید
  4. فایل functions.php قالب فرزند (child theme) خود را انتخاب کنید
  5. کد را در انتهای فایل اضافه کرده و ذخیره کنید

نکته مهم: حتماً از قالب فرزند (child theme) استفاده کنید تا در صورت بروزرسانی قالب، تغییرات شما از بین نرود.

نحوه استفاده از شورت کد

پس از افزودن کد به فایل functions.php، می‌توانید از شورت کد [my_boxed_product_features] در یکی از این روش‌ها استفاده کنید:

روش 1: استفاده در توضیحات محصول

ساده‌ترین روش، اضافه کردن شورت کد در ویرایشگر توضیحات محصول است:

  1. به پنل مدیریت ووکامرس بروید
  2. محصول مورد نظر را برای ویرایش باز کنید
  3. در قسمت توضیحات محصول، عبارت [my_boxed_product_features] را وارد کنید
  4. تغییرات را ذخیره کنید

با این روش، جعبه‌های ویژگی در همان محلی که شورت کد را قرار داده‌اید نمایش داده می‌شوند.

روش 2: استفاده در قالب محصول

اگر می‌خواهید این ویژگی در تمام محصولات نمایش داده شود، می‌توانید آن را مستقیماً به قالب محصول اضافه کنید:

  1. فایل single-product.php قالب فرزند خود را باز کنید
  2. در محل مناسب (معمولاً بعد از توضیحات محصول یا قبل از تب‌ها)، کد زیر را قرار دهید:
    php
     
COMMUNITY نظر شما مهم است
امتیاز و دیدگاه کاربران

تجربه و نظر شما می‌تواند به کامل‌تر شدن این مقاله و تصمیم بهتر خوانندگان بعدی کمک کند.

— از ۵ 0 رأی
RATE THIS ARTICLE
این مقاله چقدر برای شما مفید بود؟

از ۱ تا ۵ ستاره امتیاز دهید.

امتیاز موردنظر را انتخاب کنید
DISCUSSION
دیدگاه‌ها 0
ثبت دیدگاه
هنوز دیدگاهی ثبت نشده است. اولین نفری باشید که درباره این مقاله نظر می‌دهد.
YOUR COMMENT
دیدگاه خود را بنویسید

ایمیل شما منتشر نمی‌شود. فیلدهای ضروری مشخص شده‌اند.

لینک مقاله کپی شد