طراحی باکس قیمت حرفه‌ای در ووکامرس با CSS؛ نمایش قیمت ویژه و تاریخ شمسی

طراحی باکس قیمت حرفه‌ای در ووکامرس با CSS؛ نمایش قیمت ویژه و تاریخ شمسی

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

کد 
<style>

/* =========================================
   PRODUCT PRICE
   BLUE / WHITE / CENTER
   ========================================= */

.beautiful-product-price {

    direction: rtl;

    width: 100%;

    font-family: inherit;

    text-align: center;

}


/* =========================================
   PRICE BOX
   ========================================= */

.beautiful-product-price
.price {

    position: relative;

    display: flex !important;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

    margin: 0 !important;

    padding: 17px 20px 14px !important;

    box-sizing: border-box;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,.16) 0%,
            rgba(255,255,255,0) 45%
        ),
        linear-gradient(
            145deg,
            #1677ff 0%,
            #075acb 55%,
            #064cae 100%
        ) !important;

    border: 1px solid #075acb !important;

    border-radius: 17px;

    box-shadow:
        0 8px 25px rgba(7,90,203,.25),
        inset 0 1px 0 rgba(255,255,255,.2);

    overflow: hidden;

    text-align: center;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


/* =========================================
   LIGHT EFFECT
   ========================================= */

.beautiful-product-price
.price::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    top: -170px;

    left: 50%;

    transform: translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.15) 0%,
            rgba(255,255,255,0) 70%
        );

    pointer-events: none;

}


/* =========================================
   TOP LINE
   ========================================= */

.beautiful-product-price
.price::before {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 85px;

    height: 4px;

    border-radius:
        0 0 12px 12px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #bdddff,
            #ffffff
        );

    box-shadow:
        0 3px 12px rgba(255,255,255,.3);

}


/* =========================================
   PRICE
   ========================================= */

.beautiful-product-price
.price .amount {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: baseline;

    justify-content: center;

    color:
        #ffffff !important;

    font-size:
        36px !important;

    font-weight:
        900 !important;

    line-height:
        1.2;

    letter-spacing:
        -.7px;

    white-space:
        nowrap;

    text-shadow:
        0 2px 8px rgba(0,0,0,.15);

}


/* =========================================
   CURRENCY
   ========================================= */

.beautiful-product-price
.price .woocommerce-Price-currencySymbol {

    margin-right:
        6px;

    color:
        rgba(255,255,255,.85) !important;

    font-size:
        11px !important;

    font-weight:
        500 !important;

}


/* =========================================
   OLD PRICE
   ========================================= */

.beautiful-product-price
.price del {

    position:
        relative;

    z-index:
        2;

    display:
        block;

    margin-bottom:
        3px;

    color:
        rgba(255,255,255,.65) !important;

    font-size:
        13px !important;

    opacity:
        .9;

}


.beautiful-product-price
.price del .amount {

    color:
        rgba(255,255,255,.65) !important;

    font-size:
        13px !important;

    font-weight:
        400 !important;

}


/* =========================================
   NEW PRICE
   ========================================= */

.beautiful-product-price
.price ins {

    display:
        block;

    text-decoration:
        none !important;

}


/* =========================================
   SPECIAL PRICE
   ========================================= */

.beautiful-product-price
.price ins::before {

    content:
        "قیمت ویژه";

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        5px;

    padding:
        3px 10px;

    background:
        rgba(255,255,255,.15);

    border:
        1px solid rgba(255,255,255,.3);

    border-radius:
        20px;

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        700;

}


/* =========================================
   DATE
   ========================================= */

.beautiful-product-price
.price .price-date {

    position:
        relative;

    z-index:
        2;

    display:
        block;

    margin-top:
        7px;

    color:
        rgba(255,255,255,.72);

    font-size:
        9px;

    font-weight:
        400;

    line-height:
        1.5;

}


/* =========================================
   DATE DOT
   ========================================= */

.beautiful-product-price
.price .price-date::before {

    content:
        "●";

    display:
        inline-block;

    margin-left:
        5px;

    color:
        #ffffff;

    font-size:
        6px;

    vertical-align:
        middle;

}


/* =========================================
   HOVER
   ========================================= */

.beautiful-product-price
.price:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(255,255,255,.35) !important;

    box-shadow:
        0 14px 35px rgba(7,90,203,.35),
        inset 0 1px 0 rgba(255,255,255,.25);

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

    .beautiful-product-price
    .price {

        padding:
            14px 15px 12px !important;

        border-radius:
            14px;

    }


    .beautiful-product-price
    .price .amount {

        font-size:
            30px !important;

    }


    .beautiful-product-price
    .price del .amount {

        font-size:
            12px !important;

    }

}

</style>


<script>

(function () {

    function addPersianDate() {

        document.querySelectorAll(
            '.beautiful-product-price .price'
        ).forEach(function (price) {


            /* =========================================
               جلوگیری از تکرار تاریخ
               ========================================= */

            if (
                price.querySelector(
                    '.price-date'
                )
            ) {

                return;

            }


            /* =========================================
               تاریخ امروز
               ========================================= */

            const today =
                new Date();


            /* =========================================
               تبدیل میلادی به شمسی
               ========================================= */

            function gregorianToJalali(
                gy,
                gm,
                gd
            ) {

                const g_d_m = [
                    0,
                    31,
                    59,
                    90,
                    120,
                    151,
                    181,
                    212,
                    243,
                    273,
                    304,
                    334
                ];


                let jy;


                if (gy > 1600) {

                    jy = 979;

                    gy -= 1600;

                } else {

                    jy = 0;

                    gy -= 621;

                }


                const gy2 =
                    (gm > 2)
                        ? gy + 1
                        : gy;


                let days =
                    (365 * gy)
                    +
                    Math.floor(
                        (gy2 + 3) / 4
                    )
                    -
                    Math.floor(
                        (gy2 + 99) / 100
                    )
                    +
                    Math.floor(
                        (gy2 + 399) / 400
                    )
                    -
                    80
                    +
                    gd
                    +
                    g_d_m[gm - 1];


                jy +=
                    33 *
                    Math.floor(
                        days / 12053
                    );


                days %= 12053;


                jy +=
                    4 *
                    Math.floor(
                        days / 1461
                    );


                days %= 1461;


                if (days > 365) {

                    jy +=
                        Math.floor(
                            (days - 1) / 365
                        );


                    days =
                        (days - 1) % 365;

                }


                let jm;


                if (days < 186) {

                    jm =
                        1 +
                        Math.floor(
                            days / 31
                        );

                } else {

                    jm =
                        7 +
                        Math.floor(
                            (days - 186) / 30
                        );

                }


                const jd =
                    1 +
                    (
                        days < 186
                            ? days % 31
                            : (days - 186) % 30
                    );


                return [
                    jy,
                    jm,
                    jd
                ];

            }


            /* =========================================
               تاریخ شمسی
               ========================================= */

            const jalali =
                gregorianToJalali(
                    today.getFullYear(),
                    today.getMonth() + 1,
                    today.getDate()
                );


            /* =========================================
               اعداد فارسی
               ========================================= */

            function persianNumbers(
                value
            ) {

                return String(value)
                    .replace(
                        /d/g,
                        function (digit) {

                            return "۰۱۲۳۴۵۶۷۸۹"[
                                digit
                            ];

                        }
                    );

            }


            /* =========================================
               ساخت تاریخ
               ========================================= */

            const dateText =
                persianNumbers(
                    jalali[0]
                )
                +
                "/"
                +
                persianNumbers(
                    String(
                        jalali[1]
                    ).padStart(
                        2,
                        "0"
                    )
                )
                +
                "/"
                +
                persianNumbers(
                    String(
                        jalali[2]
                    ).padStart(
                        2,
                        "0"
                    )
                );


            /* =========================================
               ایجاد تاریخ
               ========================================= */

            const date =
                document.createElement(
                    'span'
                );


            date.className =
                'price-date';


            date.textContent =
                'به‌روزرسانی قیمت: '
                +
                dateText;


            price.appendChild(
                date
            );

        });

    }


    /* =========================================
       اجرا
       ========================================= */

    if (
        document.readyState ===
        'loading'
    ) {

        document.addEventListener(
            'DOMContentLoaded',
            addPersianDate
        );

    } else {

        addPersianDate();

    }


    /* =========================================
       Elementor
       ========================================= */

    if (window.jQuery) {

        jQuery(window).on(
            'elementor/frontend/init',
            function () {

                setTimeout(
                    addPersianDate,
                    500
                );

            }
        );

    }

})();

</script>

طراحی باکس قیمت حرفه‌ای در ووکامرس با CSS؛ نمایش قیمت ویژه و تاریخ شمسی

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

در این آموزش یک نمونه باکس قیمت حرفه‌ای برای ووکامرس بررسی می‌کنیم که علاوه بر نمایش قیمت، قابلیت‌هایی مانند نمایش قیمت ویژه، قیمت قبلی، افکت Hover، گرادیان، سایه، طراحی RTL و نمایش تاریخ شمسی آخرین به‌روزرسانی قیمت را در اختیار شما قرار می‌دهد.

این روش برای فروشگاه‌هایی که از وردپرس، ووکامرس و المنتور استفاده می‌کنند کاربردی است و می‌تواند بدون تغییر در ساختار اصلی سیستم قیمت‌گذاری ووکامرس، ظاهر بخش قیمت را شخصی‌سازی کند.

باکس قیمت ووکامرس چیست؟

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

در این طراحی، باکس قیمت دارای پس‌زمینه گرادیانی آبی، گوشه‌های گرد، سایه، افکت نور و انیمیشن Hover است. ساختار اصلی باکس نیز به‌صورت RTL طراحی شده تا برای فروشگاه‌های فارسی مناسب باشد.

کلاس اصلی این طراحی:

beautiful-product-price

است و استایل‌های مربوط به قیمت داخل این کلاس قرار گرفته‌اند.

ویژگی‌های طراحی باکس قیمت ووکامرس

این کد چند قابلیت ظاهری و کاربردی را در اختیار شما قرار می‌دهد:

  • طراحی مدرن و حرفه‌ای قیمت محصول
  • پشتیبانی از زبان فارسی و حالت RTL
  • نمایش قیمت با فونت و اندازه بزرگ
  • نمایش قیمت قبلی در محصولات تخفیف‌دار
  • نمایش عبارت «قیمت ویژه»
  • استفاده از گرادیان آبی
  • ایجاد سایه حرفه‌ای
  • افکت Hover
  • طراحی واکنش‌گرا برای موبایل
  • نمایش تاریخ به‌روزرسانی قیمت
  • تبدیل تاریخ میلادی به شمسی
  • نمایش تاریخ با اعداد فارسی
  • سازگاری با ساختار قیمت ووکامرس
  • امکان استفاده در طراحی‌های مبتنی بر Elementor

طراحی ظاهر قیمت محصول با CSS

در این کد ابتدا یک ساختار اختصاصی برای بخش قیمت ایجاد شده است. باکس قیمت از ترکیب گرادیان، سایه، Border و Radius استفاده می‌کند تا قیمت محصول از سایر قسمت‌های کارت محصول متمایز شود.

رنگ اصلی باکس از طیف آبی تشکیل شده است و در کنار آن از رنگ سفید برای نمایش قیمت استفاده شده است. همچنین یک افکت نور در قسمت بالایی باکس ایجاد شده که ظاهر آن را مدرن‌تر می‌کند.

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

این افکت با استفاده از ویژگی transform ایجاد شده است و باعث می‌شود تعامل کاربر با کارت قیمت محسوس‌تر باشد.

نمایش قیمت اصلی محصول

یکی از مهم‌ترین قسمت‌های این طراحی، نمایش قیمت اصلی محصول است.

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

ساختار قیمت از کلاس:

amount

استفاده می‌کند و تنظیمات مربوط به اندازه، ضخامت، رنگ و فاصله حروف روی آن اعمال شده است.

این نوع طراحی مخصوصاً برای فروشگاه‌هایی که محصولات زیادی در صفحه دارند می‌تواند باعث شود قیمت هر محصول سریع‌تر قابل تشخیص باشد.

نمایش قیمت قبلی در محصولات تخفیف‌دار

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

در ووکامرس، زمانی که محصول دارای قیمت تخفیف‌خورده باشد، قیمت قبلی معمولاً با تگ del نمایش داده می‌شود.

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

به این ترتیب کاربر می‌تواند قیمت قبلی و قیمت فعلی را به‌صورت واضح از یکدیگر تشخیص دهد.

نمایش عبارت قیمت ویژه

برای قیمت‌های تخفیف‌دار یک برچسب با عنوان:

قیمت ویژه

در نظر گرفته شده است.

این عبارت با استفاده از pseudo-element و ویژگی ::before به بخش قیمت اضافه می‌شود و نیازی به اضافه کردن HTML جداگانه برای آن نیست.

برچسب قیمت ویژه با یک پس‌زمینه نیمه‌شفاف، Border و گوشه‌های گرد طراحی شده است تا با ظاهر کلی باکس هماهنگ باشد.

نمایش تاریخ به‌روزرسانی قیمت

یکی از قابلیت‌های متفاوت این طراحی، نمایش تاریخ آخرین به‌روزرسانی قیمت به‌صورت شمسی است.

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

در این کد عبارت زیر در قسمت پایین قیمت نمایش داده می‌شود:

به‌روزرسانی قیمت: تاریخ

تاریخ توسط JavaScript ایجاد شده و درون عنصر:

price-date

قرار می‌گیرد.

تبدیل تاریخ میلادی به شمسی با JavaScript

برای نمایش تاریخ شمسی، کد شامل یک تابع اختصاصی برای تبدیل تاریخ میلادی به تاریخ جلالی است.

ابتدا تاریخ فعلی مرورگر دریافت می‌شود:

new Date()

سپس سال، ماه و روز میلادی استخراج شده و توسط تابع تبدیل، تاریخ جلالی محاسبه می‌شود.

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

ساختار نهایی تاریخ به شکل زیر خواهد بود:

۱۴۰۵/۰۶/۲۵

البته تاریخ نمایش داده‌شده به زمان اجرای کد و تاریخ روز بستگی دارد.

نمایش اعداد فارسی

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

برای این کار تابعی با نام:

persianNumbers

در کد قرار گرفته است.

این تابع اعداد 0 تا 9 را به معادل فارسی آن‌ها تبدیل می‌کند:

۰ ۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹

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

سازگاری با Elementor

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

برای همین در این کد رویداد:

elementor/frontend/init

نیز در نظر گرفته شده است.

بعد از راه‌اندازی Elementor، تابع مربوط به افزودن تاریخ دوباره اجرا می‌شود تا تاریخ در باکس قیمت نیز قرار بگیرد.

این موضوع برای سایت‌هایی که از Elementor و WooCommerce به‌صورت هم‌زمان استفاده می‌کنند اهمیت دارد.

طراحی واکنش‌گرا برای موبایل

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

در این کد برای صفحه‌هایی با عرض کمتر از 600 پیکسل، اندازه باکس، فاصله داخلی و اندازه فونت قیمت تغییر می‌کند.

در حالت موبایل:

  • Padding باکس کاهش پیدا می‌کند.
  • Radius کمی کوچک‌تر می‌شود.
  • اندازه قیمت اصلی کاهش پیدا می‌کند.
  • اندازه قیمت قبلی نیز متناسب با صفحه تغییر می‌کند.

این کار باعث می‌شود باکس قیمت در صفحه‌های کوچک فضای زیادی اشغال نکند.

افکت Hover روی قیمت محصول

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

باکس کمی به سمت بالا حرکت کرده و میزان سایه آن افزایش پیدا می‌کند.

این افکت با استفاده از:

transform: translateY(-3px)

ایجاد شده است.

در نتیجه کارت قیمت در زمان Hover حالت شناور پیدا می‌کند و ظاهر رابط کاربری فروشگاه پویاتر می‌شود.

مزایای استفاده از باکس قیمت اختصاصی در ووکامرس

استفاده از طراحی اختصاصی برای قیمت محصول می‌تواند مزایای مختلفی داشته باشد.

افزایش خوانایی قیمت

قیمت اصلی با اندازه بزرگ و کنتراست بالا نمایش داده می‌شود و کاربر می‌تواند آن را سریع‌تر مشاهده کند.

ایجاد ظاهر حرفه‌ای‌تر

استفاده از گرادیان، سایه، Radius و افکت Hover باعث می‌شود بخش قیمت نسبت به حالت پیش‌فرض ووکامرس ظاهر متفاوتی داشته باشد.

نمایش بهتر تخفیف

با جدا کردن قیمت قبلی و قیمت فعلی، میزان تغییر قیمت برای کاربر قابل مشاهده‌تر خواهد بود.

نمایش تاریخ قیمت

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

سازگاری با موبایل

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

آیا این کد قیمت ووکامرس را تغییر می‌دهد؟

خیر. این کد در درجه اول برای تغییر ظاهر بخش قیمت نوشته شده است.

یعنی سیستم قیمت‌گذاری ووکامرس همچنان قیمت محصول را مدیریت می‌کند و CSS فقط نحوه نمایش آن را تغییر می‌دهد.

بخش JavaScript نیز برای اضافه کردن تاریخ شمسی به باکس قیمت استفاده می‌شود.

بنابراین این روش با سیستم قیمت محصول ووکامرس تداخلی در منطق قیمت‌گذاری ایجاد نمی‌کند، مگر اینکه کدهای دیگری در سایت ساختار HTML قیمت را تغییر داده باشند.

نکته مهم درباره تاریخ به‌روزرسانی قیمت

تاریخی که این کد نمایش می‌دهد، تاریخ فعلی مرورگر هنگام اجرای اسکریپت است.

بنابراین نباید آن را به‌عنوان تاریخ واقعی تغییر قیمت محصول در دیتابیس ووکامرس در نظر گرفت.

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

این تفاوت از نظر فنی بسیار مهم است.

چگونه ظاهر قیمت ووکامرس را شخصی‌سازی کنیم؟

برای شخصی‌سازی ظاهر قیمت، می‌توان موارد مختلفی مانند رنگ، اندازه فونت، Radius، سایه، فاصله داخلی و افکت Hover را تغییر داد.

برای مثال رنگ پس‌زمینه در این طراحی از ترکیب چند رنگ آبی ایجاد شده است و می‌توان آن را مطابق هویت بصری فروشگاه تغییر داد.

همچنین اندازه قیمت اصلی در دسکتاپ و موبایل جداگانه تنظیم شده است تا کنترل بیشتری روی طراحی Responsive وجود داشته باشد.

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

اگر سایت شما فارسی و راست‌چین است، استفاده از:

direction: rtl

باعث می‌شود ساختار باکس با جهت نوشتار فارسی هماهنگ باشد.

همچنین استفاده از font-family: inherit باعث می‌شود فونت تعریف‌شده در قالب یا سایت حفظ شود و این کد به‌صورت اجباری فونت جدیدی را به سایت تحمیل نکند.

نکات مهم قبل از استفاده

قبل از قرار دادن کد در سایت بهتر است یک نسخه پشتیبان از فایل‌ها و تنظیمات سایت داشته باشید.

همچنین اگر قالب یا افزونه دیگری روی ساختار قیمت ووکامرس CSS اعمال می‌کند، ممکن است بعضی از استایل‌ها نیاز به تنظیم مجدد داشته باشند.

در صورتی که قیمت محصول توسط Elementor یا افزونه‌های دیگر به‌صورت AJAX بارگذاری شود، اجرای مجدد JavaScript نیز ممکن است لازم باشد.

سوالات متداول

آیا این کد برای WooCommerce مناسب است؟

بله. ساختار CSS بر اساس کلاس‌های متداول بخش قیمت ووکامرس طراحی شده است و برای شخصی‌سازی ظاهر قیمت محصولات کاربرد دارد.

آیا قیمت محصول با این کد تغییر می‌کند؟

خیر. هدف اصلی کد، تغییر ظاهر قیمت است و عملیات قیمت‌گذاری توسط ووکامرس انجام می‌شود.

آیا امکان نمایش قیمت تخفیف‌خورده وجود دارد؟

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

آیا تاریخ به‌صورت شمسی نمایش داده می‌شود؟

بله. JavaScript موجود در کد تاریخ میلادی فعلی را به تاریخ جلالی تبدیل کرده و آن را با اعداد فارسی نمایش می‌دهد.

آیا این طراحی در موبایل هم نمایش داده می‌شود؟

بله. برای صفحه‌های با عرض کمتر از 600 پیکسل، استایل جداگانه Responsive در نظر گرفته شده است.

آیا با Elementor سازگار است؟

کد برای اجرای مجدد تابع پس از راه‌اندازی Elementor نیز آماده شده است تا در ساختارهای مبتنی بر Elementor شانس نمایش صحیح تاریخ بیشتر شود.

جمع‌بندی

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

در این نمونه علاوه بر طراحی بصری قیمت، امکاناتی مانند نمایش قیمت ویژه، قیمت قبلی، افکت Hover، طراحی RTL، سازگاری با موبایل و نمایش تاریخ شمسی نیز در نظر گرفته شده است.

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

این کد می‌تواند پایه مناسبی برای توسعه یک باکس قیمت اختصاصی ووکامرس باشد و در ادامه نیز قابلیت‌هایی مانند نمایش درصد تخفیف، قیمت عمده، قیمت همکاری، وضعیت موجودی و تاریخ واقعی تغییر قیمت به آن اضافه شود.