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

// تابع سفارشی برای نمایش ویژگی‌ها به صورت جعبه‌های افقی
function custom_display_product_attributes() {
    global $product;

    // اگر محصول وجود نداشت (مثلاً خارج از صفحه محصول)، چیزی نمایش نده
    if (!is_a($product, 'WC_Product')) {
        return '';
    }

    // گرفتن ویژگی‌های محصول
    $attributes = $product->get_attributes();

    if (empty($attributes)) {
        return ''; // اگر ویژگی‌ای وجود نداشت، چیزی نمایش نده
    }

    ob_start();
    echo '<div class="custom-product-attributes">';
    echo '<h3>ویژگی‌ها</h3>'; 

    foreach ($attributes as $attribute) {
        if ($attribute->get_visible()) { // فقط ویژگی‌های قابل نمایش
            $label = wc_attribute_label($attribute->get_name()); // نام ویژگی (مثل "نوع گوشی")
            $values = $product->get_attribute($attribute->get_name()); // مقادیر (مثل "دو گوشی")

            // نمایش هر ویژگی در یک جعبه
            echo '<div class="attribute-box">';
            echo '<div class="attribute-label">' . esc_html($label) . '</div>';
            echo '<div class="attribute-value">' . esc_html($values) . '</div>';
            echo '</div>';
        }
    }

    echo '</div>';
    return ob_get_clean();
}

// ثبت شورت‌کد [product_attributes] برای استفاده در هر جایی (مثل محتوای صفحه یا صفحه‌سازها)
add_shortcode('product_attributes', 'custom_display_product_attributes');

// اضافه کردن CSS برای استایل جعبه‌ها با flexbox 
function custom_attributes_styles() {
    if (is_product()) { // فقط در صفحه تک‌محصول
        ?>
        <style>
            .custom-product-attributes {
                margin: 5px 0;
                direction: rtl;
                text-align: right;
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start; 
                gap: 10px; /* فاصله بین جعبه‌ها */
            }
            .custom-product-attributes h3 {
                font-size: 18px;
                margin-bottom: 10px;
                flex: 0 0 100%; /* عنوان عرض کامل */
            }
            .attribute-box {
                background-color: #f0f0f0; /* خاکستری روشن */
                border: 1px solid #ddd;
                border-radius: 4px;
                padding: 8px 12px;
                font-size: 14px;
                text-align: right;
                box-sizing: border-box;
                flex: 0 0 calc(33.33% - 10px); /* سه ستون در دسکتاپ/تبلت، با کسر gap */
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                min-height: 70px; /* حداقل ارتفاع برای نمایش مناسب */
				max-width: calc(33.33% - 10px);
            }
            .attribute-label {
                color: #666; /* کمرنگ‌تر */
                font-size: 12px;
                margin-bottom: 4px;
            }
            .attribute-value {
                font-weight: bold; /* پررنگ‌تر */
                font-size: 14px;
                white-space: nowrap; /* یک خطی */
                overflow: hidden;
                text-overflow: ellipsis; /* سه نقطه در انتها برای متن طولانی */
            }
            /* رسانه‌کوئری برای موبایل (زیر 768px): دو ستون */
            @media (max-width: 767px) {
                .attribute-box {
                    flex: 0 0 calc(50% - 10px); /* دو ستون */
                }
            }
        </style>
        <?php
    }
}
add_action('wp_head', 'custom_attributes_styles');