آموزش کامل نمایش محصولات ووکامرس با شورت‌کد

معرفی شورت‌کد avin_product_box و نقش آن در نمایش حرفه‌ای محصولات ووکامرس

شورت‌کد avin_product_box یک راه‌حل کاملاً حرفه‌ای و اختصاصی برای نمایش محصولات ووکامرس داخل نوشته‌ها، صفحات و لندینگ‌پیج‌هاست. بسیاری از صاحبان سایت با مشکل نمایش جذاب و یکپارچه محصولات در محتوای خود مواجه هستند؛ چرا که قالب‌ها یا افزونه‌های آماده معمولاً انعطاف کافی ندارند یا از ظاهر ساده و تکراری استفاده می‌کنند. این شورت‌کد دقیقاً برای حل همین نیاز طراحی شده و بدون وابستگی به صفحه‌ساز‌ها، یک باکس محصول کاملاً واکنش‌گرا، زیبا و سئو محور ارائه می‌دهد.

با استفاده از این شورت‌کد، تنها کافی است ID محصول را وارد کنید تا اطلاعات داینامیک محصول—including نام، قیمت، تخفیف، تصویر و توضیح کوتاه—به‌صورت خودکار نمایش داده شود. نکته مهم این است که تمام این داده‌ها مستقیماً از خود ووکامرس فراخوانی می‌شوند؛ بنابراین همیشه با آخرین تغییرات فروشگاه هماهنگ است.

نمایش محصول داخل محتوا باعث افزایش نرخ کلیک، افزایش توجه کاربر و در نهایت افزایش فروش می‌شود. همچنین طراحی مدرن، سایه‌های ملایم، دکمه خرید جذاب و سیستم محاسبه درصد تخفیف، این شورت‌کد را به یک ابزار ارزشمند برای ساخت صفحات فرود و مقالات محصول‌محور تبدیل می‌کند. در مجموع، avin_product_box یک راهکار سبک، قدرتمند و بهینه برای نمایش حرفه‌ای محصولات ووکامرس در هر نقطه از سایت است.

آموزش استفاده از شورت‌کد avin_product_box همراه با توضیح کامل سورس کد

برای استفاده از شورت‌کد avin_product_box هیچ کار پیچیده‌ای لازم نیست؛ کافی است ID محصول را وارد کنید و شورت‌کد را در هر جایی از سایت قرار دهید.

شورت‌کد را می‌توانید داخل:

• ویرایشگر وردپرس (گوتنبرگ)

• المنتور (ویجت Shortcode)

• ابزارک‌ها

• یا حتی داخل قالب

قرار دهید.

شیوه استفاده دقیق شورت‌کد:

کافی است این عبارت را بنویسید:

" [avin_product_box id="123"] "

به‌جای 123 باید شناسه محصول ووکامرس را قرار دهید.
شناسه محصول را می‌توانید از مسیر Products → محصول موردنظر → ستون ID پیدا کنید.

بعد از وارد کردن شورت‌کد، وردپرس به‌صورت خودکار یک باکس کامل شامل:

• تصویر محصول

• عنوان

• قیمت

• درصد تخفیف (اگر وجود داشته باشد)

• توضیحات کوتاه

• دکمه خرید

را نمایش می‌دهد.

به همین سادگی! این شورت‌کد در هر صفحه‌ای که خواستید، یک باکس حرفه‌ای محصول نمایش می‌دهد.

function avin_product_box($atts) {
    $atts = shortcode_atts([
        'id' => ''
    ], $atts);

    if (!$atts['id']) {
        return '<p>لطفاً یک شناسه محصول معتبر وارد کنید.</p>';
    }

    $avin_product = wc_get_product($atts['id']);

    if (!$avin_product) {
        return '<p>محصول پیدا نشد.</p>';
    }

    $avin_title = $avin_product->get_name();
    $avin_price = $avin_product->get_price_html();
    $avin_link = $avin_product->get_permalink();
    $avin_short_desc = $avin_product->get_short_description();
    $avin_sale = '';

    if ($avin_product->is_on_sale()) {
        $avin_regular = $avin_product->get_regular_price();
        $avin_sale_price = $avin_product->get_sale_price();
        if ($avin_regular && $avin_sale_price) {
            $avin_discount = round((($avin_regular - $avin_sale_price) / $avin_regular) * 100);
            $avin_sale = '<span class="avin-product-discount">' . $avin_discount . '% تخفیف</span>';
        }
    }

    if (strlen($avin_short_desc) > 150) {
        $avin_short_desc = mb_substr($avin_short_desc, 0, 150) . '...';
    }

    $avin_image = $avin_product->get_image('large', ['class' => 'avin-product-image']);

    $avin_html = '<style>
        .avin-product-box {
            display: flex;
            flex-direction: row-reverse;
            align-items: flex-start;
            justify-content: space-between;
            background: #fff;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            margin: 25px auto;
            max-width: 100%;
            font-family: "IRANSans", sans-serif;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .avin-product-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 25px rgba(0,0,0,0.15);
        }
        .avin-product-image-container {
            max-width: 220px;
            margin-left: 25px;
        }
        .avin-product-image {
            width: 100%;
            border-radius: 10px;
            object-fit: cover;
        }
        .avin-product-details {
            flex-grow: 1;
            text-align: right;
        }
        .avin-product-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 12px;
            color: #222;
        }
        .avin-product-price {
            font-size: 22px;
            font-weight: 700;
            color: #1B5E20;
            margin-bottom: 15px;
        }
        .avin-product-desc {
            font-size: 15px;
            line-height: 1.9;
            color: #555;
            margin-bottom: 20px;
        }
        .avin-product-button {
            display: inline-block;
            padding: 12px 25px;
            background: #FF5722;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
            border-radius: 8px;
            text-decoration: none;
            transition: background 0.3s ease;
        }
        .avin-product-button:hover {
            background: #E64A19;
        }
        .avin-product-discount {
            background: linear-gradient(45deg, #FFC107, #FF5722);
            color: #fff;
            padding: 6px 18px;
            border-radius: 6px;
            font-size: 14px;
            display: inline-block;
            margin-bottom: 15px;
        }
        @media (max-width: 768px) {
            .avin-product-box {
                flex-direction: column;
                text-align: center;
                padding: 20px;
            }
            .avin-product-image-container {
                margin-left: 0;
                margin-bottom: 20px;
            }
        }
    </style>';

    $avin_html .= '<div class="avin-product-box">';
    $avin_html .= '<div class="avin-product-image-container">' . $avin_image . '</div>';
    $avin_html .= '<div class="avin-product-details">';
    if ($avin_sale) {
        $avin_html .= $avin_sale;
    }
    $avin_html .= '<h3 class="avin-product-title">' . $avin_title . '</h3>';
    $avin_html .= '<p class="avin-product-price">' . $avin_price . '</p>';
    $avin_html .= '<p class="avin-product-desc">' . $avin_short_desc . '</p>';
    $avin_html .= '<a href="' . esc_url($avin_link) . '" class="avin-product-button">خرید محصول</a>';
    $avin_html .= '</div>';
    $avin_html .= '</div>';

    return $avin_html;
}

add_shortcode('avin_product_box', 'avin_product_box');

 

ویژگی‌ها و مزایای استفاده از شورت‌کد محصول اختصاصی در وردپرس

استفاده از یک شورت‌کد محصول اختصاصی در وردپرس، مانند avin_product_box، مزایای فراوانی دارد که آن را به یک ابزار ضروری برای سایت‌های فروشگاهی تبدیل می‌کند. اولین و مهم‌ترین ویژگی، کنترل کامل روی طراحی و نحوه نمایش محصول است. برخلاف قالب‌ها و افزونه‌های آماده، این شورت‌کد ظاهر سفارشی، سبک و بهینه‌ای دارد که کاملاً مطابق نیاز سایت طراحی شده است. به‌این‌ترتیب، هر بار که محصولی را داخل یک نوشته یا صفحه قرار می‌دهید، یک باکس حرفه‌ای، تمیز و یکپارچه نمایش داده می‌شود.

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

از نظر بازاریابی، این شورت‌کد امکان نمایش محصول را در هر جایی از محتوا فراهم می‌کند: وسط یک مقاله، کنار توضیحات، در صفحات فرود یا حتی در لندینگ کمپین‌ها. این موضوع به‌طور مستقیم نرخ تبدیل را افزایش می‌دهد؛ زیرا محصول دقیقاً در جایی نمایش داده می‌شود که کاربر بیشترین توجه را دارد.

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