چگونه برای توضیحات کوتاه محصول دکمه «نمایش بیشتر» اضافه کنیم؟

توضیحات کوتاه محصول یکی از بخش‌های مهم در صفحه محصول ووکامرس است که معمولاً در کنار تصویر محصول نمایش داده می‌شود. این بخش فرصت مناسبی برای معرفی سریع ویژگی‌های اصلی محصول به مشتری است و می‌تواند در تصمیم‌گیری خرید کاربران نقش مؤثری داشته باشد. با این حال، زمانی که حجم این توضیحات زیاد شود، ممکن است ظاهر صفحه محصول شلوغ شده و کاربر در اولین برخورد با اطلاعات بیش از حد مواجه شود. برای حل این مشکل می‌توان قابلیت «نمایش بیشتر» را به توضیحات کوتاه محصولات اضافه کرد. با این روش، تنها بخش ابتدایی متن به کاربر نمایش داده می‌شود و کاربران در صورت نیاز می‌توانند با کلیک روی گزینه «نمایش بیشتر»، محتوای کامل را مشاهده کنند. پشتیبانی سایت

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

برای اضافه کردن این قابلیت می‌توان از کدنویسی اختصاصی یا افزونه‌های مرتبط با ووکامرس استفاده کرد. در روش کدنویسی، کافی است کد زیر را در فایل `functions.php` قالب یا افزونه Code Snippets وردپرس قرار دهید تا امکان نمایش و مخفی‌سازی ادامه توضیحات کوتاه فعال شود. اگر درباره اضافه کردن این قطعه کد به سایت تون نیاز به راهنمایی داشتید با ما تماس بگیرید. 

 

 

 

/**
 * محدودسازی توضیحات کوتاه یا ویژگی‌های کنار محصول
 * Mahvision
 */

add_action('wp_head', function () {
    if (!function_exists('is_product') || !is_product()) {
        return;
    }
    ?>
    <style>
        .mahvision-collapsible-content {
            position: relative;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }

        .mahvision-collapsible-content:not(.is-expanded)::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            left: 0;
            height: 45px;
            pointer-events: none;
            background: linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0),
                #fff
            );
        }

        .mahvision-show-more {
            display: none;
            align-items: center;
            gap: 7px;
            margin-top: 0px;
            padding: 5px 10px;
            border: 0;
            background: transparent;
            color: #252dad;
            font: inherit;
            font-size: 0.8rem;
            cursor: pointer;
        }
        .mahvision-show-more {
            background: #f3f7fb !Important;
            color:#083248;
            border-radius: 10px;
        }
        

        .mahvision-show-more.is-visible {
            display: block;
        }

        
    </style>
    <?php
});

add_action('wp_footer', function () {
    if (!function_exists('is_product') || !is_product()) {
        return;
    }
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            /*
             * ارتفاع بخش در حالت بسته
             * در صورت نیاز عدد 160 را کم یا زیاد کن
             */
            const collapsedHeight = 80;

            /*
             * توضیحات کوتاه استاندارد ووکامرس
             * به‌همراه چند کلاس متداول قالب‌ها
             */
            const selectors = [
                '.single-product .summary .woocommerce-product-details__short-description',
                '.single-product .summary .product-short-description',
                '.single-product .summary .product-features',
                '.single-product .summary .product-attributes'
            ];

            let content = null;

            for (const selector of selectors) {
                const element = document.querySelector(selector);

                if (element) {
                    content = element;
                    break;
                }
            }

            if (!content || content.dataset.mahvisionCollapse === 'true') {
                return;
            }

            content.dataset.mahvisionCollapse = 'true';

            const fullHeight = content.scrollHeight;

            /*
             * اگر محتوا کوتاه باشد دکمه ساخته نمی‌شود
             */
            if (fullHeight <= collapsedHeight + 20) {
                return;
            }

            content.classList.add('mahvision-collapsible-content');
            content.style.maxHeight = collapsedHeight + 'px';

            const button = document.createElement('button');

            button.type = 'button';
            button.className = 'mahvision-show-more is-visible';
            button.textContent = 'نمایش بیشتر';
            button.setAttribute('aria-expanded', 'false');

            content.insertAdjacentElement('afterend', button);

            button.addEventListener('click', function () {
                const isExpanded = content.classList.toggle('is-expanded');

                button.classList.toggle('is-expanded', isExpanded);
                button.textContent = isExpanded
                    ? 'نمایش کمتر'
                    : 'نمایش بیشتر';

                button.setAttribute(
                    'aria-expanded',
                    isExpanded ? 'true' : 'false'
                );

                content.style.maxHeight = isExpanded
                    ? content.scrollHeight + 'px'
                    : collapsedHeight + 'px';
            });
        });
    </script>
    <?php
});