🌟 نقشه راه ساخت جدول قیمت‌گذاری 📊

📞 برای راهنمایی بیشتر، با ما تماس بگیرید: 09202232789

بخش‌های ضروری:

• عنوان پلن: (مثلاً “اقتصادی”، “حرفه‌ای”، “سازمانی”) باید واضح و جذاب باشه.
• قیمت: هم عدد اصلی و هم واحد زمانی (ماهانه/سالانه) رو مشخص کن.
• لیست ویژگی‌ها: لیستی از امکانات و قابلیت‌های هر پلن. از آیکون تیک یا ضربدر برای وضوح بیشتر استفاده کن.
• دکمه اقدام به عمل (CTA): (مثلاً “شروع کنید”، “همین حالا بخرید”) باید پررنگ و قابل مشاهده باشه.
• برچسب‌های خاص: (مثلاً “محبوب‌ترین”، “پیشنهاد ما”) برای جذب توجه به یک پلن خاص.
• سوئیچ انتخاب دوره: دکمه‌ای برای جابجایی بین قیمت‌گذاری ماهانه و سالانه.

<!– برای کپی کردن، کد زیر را انتخاب کنید –>

کپی کد

<!-- کانتینر اصلی جداول قیمت‌گذاری -->
<div class="pricing-table-wrapper">

    <!-- سوئیچ انتخاب پلن (ماهانه/سالانه) -->
    <div class="pricing-toggle">
        <span class="toggle-option active" data-period="monthly">ماهانه</span>
        <div class="toggle-switch"></div>
        <span class="toggle-option" data-period="yearly">سالانه</span>
    </div>

    <!-- کانتینر پلن‌ها -->
    <div class="pricing-plans-container">

        <!-- پلن 1: پایه -->
        <div class="pricing-plan" data-plan="basic">
            <div class="plan-header">
                <h3 class="plan-title">پلن پایه</h3>
                <p class="plan-description">برای شروع کار و نیازهای اولیه</p>
            </div>
            <div class="plan-price">
                <span class="price-currency">تومان</span>
                <span class="price-value monthly" data-monthly="190000" data-yearly="1900000">190,000</span>
                <span class="price-period">/ماه</span>
            </div>
            <ul class="plan-features">
                <li><span class="icon-check">✔</span> 10 گیگابایت فضا</li>
                <li><span class="icon-check">✔</span> 1 کاربر</li>
                <li><span class="icon-check">✔</span> پشتیبانی ایمیلی</li>
                <li class="unavailable"><span class="icon-cross">✖</span> گزارش‌های پیشرفته</li>
            </ul>
            <a href="#" class="plan-cta">شروع کنید</a>
        </div>

        <!-- پلن 2: حرفه‌ای (پیشنهادی) -->
        <div class="pricing-plan recommended" data-plan="pro">
            <div class="plan-badge">محبوب‌ترین</div>
            <div class="plan-header">
                <h3 class="plan-title">پلن حرفه‌ای</h3>
                <p class="plan-description">بهترین گزینه برای کسب و کارهای در حال رشد</p>
            </div>
            <div class="plan-price">
                <span class="price-currency">تومان</span>
                <span class="price-value monthly" data-monthly="390000" data-yearly="3900000">390,000</span>
                <span class="price-period">/ماه</span>
            </div>
            <ul class="plan-features">
                <li><span class="icon-check">✔</span> 100 گیگابایت فضا</li>
                <li><span class="icon-check">✔</span> 5 کاربر</li>
                <li><span class="icon-check">✔</span> پشتیبانی 24/7</li>
                <li><span class="icon-check">✔</span> گزارش‌های پیشرفته</li>
            </ul>
            <a href="#" class="plan-cta">همین حالا بخرید</a>
        </div>

        <!-- پلن 3: سازمانی -->
        <div class="pricing-plan" data-plan="enterprise">
            <div class="plan-header">
                <h3 class="plan-title">پلن سازمانی</h3>
                <p class="plan-description">راهکار جامع برای سازمان‌های بزرگ</p>
            </div>
            <div class="plan-price">
                <span class="price-currency">تومان</span>
                <span class="price-value monthly" data-monthly="890000" data-yearly="8900000">890,000</span>
                <span class="price-period">/ماه</span>
            </div>
            <ul class="plan-features">
                <li><span class="icon-check">✔</span> فضای نامحدود</li>
                <li><span class="icon-check">✔</span> کاربران نامحدود</li>
                <li><span class="icon-check">✔</span> پشتیبانی اختصاصی</li>
                <li><span class="icon-check">✔</span> سفارشی‌سازی کامل</li>
            </ul>
            <a href="#" class="plan-cta">تماس برای خرید</a>
        </div>

    </div> <!-- /pricing-plans-container -->

</div> <!-- /pricing-table-wrapper -->

<!– برای کپی کردن، کد زیر را انتخاب کنید –>

کپی کد

/* فونت و تنظیمات کلی */
body {
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl; /* برای زبان فارسی */
    margin: 0;
    padding: 20px;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
}

/* کانتینر اصلی */
.pricing-table-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 30px;
}

/* سوئیچ ماهانه/سالانه */
.pricing-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    background-color: #e9ecef;
    border-radius: 50px;
    padding: 5px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.pricing-toggle .toggle-option {
    padding: 10px 20px;
    cursor: pointer;
    font-weight: 600;
    color: #6c757d;
    transition: color 0.3s ease;
    z-index: 1;
}

.pricing-toggle .toggle-option.active {
    color: #fff;
}

.pricing-toggle .toggle-switch {
    position: absolute;
    height: calc(100% - 10px);
    width: calc(50% - 5px); /* Adjusted for padding */
    background-color: #007bff;
    border-radius: 50px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    z-index: 0;
    right: 5px; /* Initial position for 'monthly' (right because of rtl) */
}

.pricing-toggle .toggle-option[data-period="yearly"].active ~ .toggle-switch {
    transform: translateX(-100%); /* Moves to the left */
}

/* کانتینر پلن‌ها */
.pricing-plans-container {
    display: flex;
    flex-wrap: wrap; /* برای رسپانسیو بودن */
    justify-content: center;
    gap: 25px;
    margin-top: 30px;
}

/* کارت هر پلن */
.pricing-plan {
    flex: 1 1 300px; /* فلکس بیس برای 300px و انعطاف */
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease;
    display: flex; /* استفاده از فلکس برای چیدمان داخلی */
    flex-direction: column;
}

.pricing-plan:hover {
    transform: translateY(-5px);
    border-color: #007bff;
}

/* پلن پیشنهادی */
.pricing-plan.recommended {
    border-color: #007bff;
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.2);
    transform: scale(1.03);
}

.pricing-plan.recommended:hover {
    transform: translateY(-5px) scale(1.05); /* Combine transformations */
}

.plan-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffc107;
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

/* هدر پلن */
.plan-header {
    margin-bottom: 20px;
}

.plan-title {
    font-size: 26px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 10px;
}

.plan-description {
    font-size: 15px;
    color: #7f8c8d;
    margin-bottom: 20px;
}

/* قیمت پلن */
.plan-price {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.price-currency {
    font-size: 20px;
    color: #6c757d;
    margin-left: 5px;
}

.price-value {
    font-size: 48px;
    font-weight: bold;
    color: #007bff;
    display: inline-block; /* برای انیمیشن جاوااسکریپت */
    transition: transform 0.3s ease, color 0.3s ease; /* انیمیشن تغییر قیمت */
}

.price-period {
    font-size: 18px;
    color: #6c757d;
    margin-right: 5px;
}

/* لیست ویژگی‌ها */
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    text-align: right; /* راست چین برای فارسی */
    flex-grow: 1; /* باعث میشه لیست ویژگی‌ها فضای باقی‌مانده رو پر کنه */
}

.plan-features li {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* آیتم‌ها از راست شروع بشن */
}

.plan-features li:last-child {
    border-bottom: none;
}

.plan-features li .icon-check {
    color: #28a745;
    margin-left: 10px;
    font-size: 18px;
}

.plan-features li .icon-cross {
    color: #dc3545;
    margin-left: 10px;
    font-size: 18px;
}

.plan-features li.unavailable {
    color: #a0a0a0;
    text-decoration: line-through;
}

/* دکمه اقدام به عمل */
.plan-cta {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    margin-top: auto; /* دکمه رو به پایین ترین قسمت پلن هل میده */
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.2);
}

.plan-cta:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

/* رسپانسیو برای تبلت و موبایل */
@media (max-width: 992px) {
    .pricing-plans-container {
        flex-direction: column; /* در صفحه‌های کوچک، پلن‌ها زیر هم قرار بگیرند */
        align-items: center;
    }

    .pricing-plan {
        flex: 0 0 90%; /* هر پلن 90 درصد عرض کانتینر رو بگیره */
        max-width: 450px; /* حداکثر عرض برای جلوگیری از کشیدگی زیاد در تبلت */
    }

    .pricing-table-wrapper {
        padding: 20px;
        margin: 20px auto;
    }

    .plan-title {
        font-size: 24px;
    }

    .price-value {
        font-size: 42px;
    }
}

@media (max-width: 576px) {
    .pricing-table-wrapper {
        padding: 15px;
    }

    .pricing-plan {
        padding: 25px;
        flex: 0 0 100%; /* در موبایل، هر پلن کل عرض رو بگیره */
    }

    .plan-badge {
        font-size: 12px;
        padding: 6px 12px;
        top: -12px;
    }

    .plan-title {
        font-size: 22px;
    }

    .price-value {
        font-size: 38px;
    }

    .plan-cta {
        padding: 12px 25px;
        font-size: 16px;
    }

    .pricing-toggle {
        padding: 3px;
    }

    .pricing-toggle .toggle-option {
        padding: 8px 15px;
        font-size: 14px;
    }
}

<!– برای کپی کردن، کد زیر را انتخاب کنید –>

کپی کد

<script>
document.addEventListener('DOMContentLoaded', () => {
    const toggleOptions = document.querySelectorAll('.pricing-toggle .toggle-option');
    const priceValues = document.querySelectorAll('.price-value');
    const pricePeriods = document.querySelectorAll('.price-period');
    const toggleSwitch = document.querySelector('.pricing-toggle .toggle-switch');

    // تابع برای فرمت کردن عدد به صورت هزاری (مثلاً 1,000,000)
    const formatPrice = (num) => num.toLocaleString('fa-IR');

    toggleOptions.forEach(option => {
        option.addEventListener('click', () => {
            // حذف کلاس active از همه گزینه‌ها و اضافه کردن به گزینه کلیک شده
            toggleOptions.forEach(opt => opt.classList.remove('active'));
            option.classList.add('active');

            const selectedPeriod = option.dataset.period;

            // جابجایی سوئیچ
            if (selectedPeriod === 'yearly') {
                toggleSwitch.style.transform = 'translateX(-100%)';
            } else {
                toggleSwitch.style.transform = 'translateX(0)'; // برگرداندن به حالت اولیه (راست)
            }

            // تغییر قیمت‌ها و متن دوره
            priceValues.forEach(priceEl => {
                const monthlyPrice = parseFloat(priceEl.dataset.monthly);
                const yearlyPrice = parseFloat(priceEl.dataset.yearly);

                let newPrice;
                let newPeriodText;

                if (selectedPeriod === 'monthly') {
                    newPrice = monthlyPrice;
                    newPeriodText = '/ماه';
                } else {
                    newPrice = yearlyPrice; // اینجا می‌توانیم تخفیف سالانه را اعمال کنیم
                    newPeriodText = '/سال';
                }

                // انیمیشن تغییر قیمت
                priceEl.style.transform = 'translateY(-5px)';
                priceEl.style.opacity = '0.5';
                setTimeout(() => {
                    priceEl.textContent = formatPrice(newPrice);
                    priceEl.style.transform = 'translateY(0)';
                    priceEl.style.opacity = '1';
                }, 200); // زمان انیمیشن
            });

            pricePeriods.forEach(periodEl => {
                periodEl.textContent = selectedPeriod === 'monthly' ? '/ماه' : '/سال';
            });
        });
    });

    // تنظیم اولیه (مثلاً ماهانه) هنگام بارگذاری صفحه
    // این قسمت مطمئن میشه که همیشه یکی از گزینه ها فعال باشه و سوئیچ در جای درست قرار بگیره
    const initialActive = document.querySelector('.pricing-toggle .toggle-option.active');
    if (initialActive) {
        if (initialActive.dataset.period === 'yearly') {
             toggleSwitch.style.transform = 'translateX(-100%)';
        } else {
             toggleSwitch.style.transform = 'translateX(0)';
        }
    } else {
        // اگر هیچکدام active نبود، به صورت پیشفرض ماهانه را فعال کن
        const monthlyOption = document.querySelector('.pricing-toggle .toggle-option[data-period="monthly"]');
        if (monthlyOption) {
            monthlyOption.classList.add('active');
            toggleSwitch.style.transform = 'translateX(0)';
        }
    }
});
</script>

مقایسه ویژگی‌های پلن‌های پیشنهادی

ویژگی	پلن پایه	پلن حرفه‌ای
تعداد کاربر	1	5
فضای ذخیره‌سازی	10 گیگابایت	100 گیگابایت
پشتیبانی	ایمیل	تلفنی + ایمیل
گزارش‌های پیشرفته	✖	✔

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

• Flexbox یا CSS Grid: این دو تا بهترین دوستای تو برای چیدمان رسپانسیو هستن. تو کد بالا از Flexbox استفاده کردیم.
• Media Queries: با استفاده از `min-width` و `max-width` می‌تونی استایل‌های خاصی رو برای اندازه‌های مختلف صفحه اعمال کنی.
• رویکرد Mobile-First: همیشه اول برای موبایل طراحی کن و بعد برای صفحات بزرگتر. اینطوری کمتر دچار مشکل میشی.
• جلوگیری از Overflow: مطمئن شو که محتوای طولانی باعث بیرون زدن از کادر نمیشه. از `overflow-x: auto` برای جداول و کدها استفاده کن.
• آزمایش روی دستگاه‌های واقعی: شبیه‌سازها خوبن، ولی بهترین راه آزمایش روی گوشی و تبلت واقعیه.

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

مشکلات متداول و راه حل‌ها:

• ⁉️ مشکل: قیمت‌ها با کلیک روی سوئیچ تغییر نمی‌کنند.

  ✅ راه حل:

  • مطمئن شو که `Event Listener` به درستی روی گزینه‌های سوئیچ اعمال شده.
  • بررسی کن که `dataset.monthly` و `dataset.yearly` در HTML به درستی ست شده باشند و مقادیر عددی معتبر داشته باشند.
  • کنسول مرورگر رو چک کن (F12) تا خطاهای جاوااسکریپت رو پیدا کنی.
• ⁉️ مشکل: چیدمان جداول روی موبایل یا تبلت به هم می‌ریزد.

  ✅ راه حل:

  • `Media Queries` رو به دقت بررسی کن. از `max-width` های صحیح استفاده کردی؟
  • مطمئن شو که `flex-wrap: wrap` روی کانتینر پلن‌ها اعمال شده باشه.
  • از `viewport meta tag` در `head` صفحه HTML استفاده کرده‌ای؟ (`<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>`)
• ⁉️ مشکل: دکمه سوئیچ (اون دایره آبی رنگ) به درستی جابجا نمی‌شود.

  ✅ راه حل:

  • کلاس‌های `active` به درستی اضافه و حذف می‌شوند؟
  • `transform: translateX` در CSS یا جاوااسکریپت به مقدار صحیح اعمال شده؟ (فراموش نکن `right` در RTL با `left` در LTR فرق داره!)
  • مقادیر `position: absolute` و `relative` برای عناصر سوئیچ درست تنظیم شده باشند.
• ⁉️ مشکل: فونت‌ها یا رنگ‌ها درست نمایش نمی‌یابد.

  ✅ راه حل:

  • مطمئن شو که فایل CSS به درستی به HTML لینک شده.
  • اولویت‌بندی CSS (specificity) رو بررسی کن. شاید یه استایل دیگه داره استایل تو رو Overwrite می‌کنه.
  • برای فارسی، `direction: rtl` رو روی `body` یا کانتینر اصلی اعمال کن.

برای راهنمایی‌های تخصصی‌تر، همیشه می‌تونی با تیم ما در **تماس با تیم فنی** باشی.

پرسش‌های متداول (FAQ)

نقشه راه ساخت جدول قیمت‌گذاری حرفه‌ای

فهرست مطالب

• چرا طراحی جدول قیمت‌گذاری اهمیت دارد؟
• گام اول: ساختار استخوان‌بندی (HTML)
• گام دوم: استایل‌دهی و زیباسازی با CSS
• گام سوم: تعاملی کردن با جاوااسکریپت
• مقایسه روش‌های چیدمان: Flexbox در برابر CSS Grid
• چگونه جدول را در وردپرس پیاده‌سازی کنیم؟
• عیب‌یابی سریع کدهای جدول قیمت‌گذاری
• سوالات متداول کاربران

<div class="pricing-container">
  <div class="toggle-container">
    <span>ماهانه</span>
    <label class="switch">
      <input type="checkbox" id="billing-toggle">
      <span class="slider"></span>
    </label>
    <span>سالانه (۲۰٪ تخفیف)</span>
  </div>

  <div class="pricing-grid">
    <!-- پلن اقتصادی -->
    <div class="pricing-card">
      <h3 class="plan-name">اقتصادی</h3>
      <div class="price" data-monthly="۹۹,۰۰۰" data-yearly="۷۹,۰۰۰">
        <span class="currency">تومان</span>
        <span class="amount">۹۹,۰۰۰</span>
        <span class="period">/ ماهانه</span>
      </div>
      <ul class="features">
        <li>پشتیبانی تیکتی ۲۴ ساعته</li>
        <li>فضای ذخیره‌سازی ۱۰ گیگابایت</li>
        <li>پهنای باند نامحدود</li>
      </ul>
      <button class="select-btn">انتخاب پلن اقتصادی</button>
    </div>

    <!-- پلن حرفه‌ای -->
    <div class="pricing-card popular">
      <div class="badge">پیشنهاد ویژه</div>
      <h3 class="plan-name">حرفه‌ای</h3>
      <div class="price" data-monthly="۱۹۹,۰۰۰" data-yearly="۱۵۹,۰۰۰">
        <span class="currency">تومان</span>
        <span class="amount">۱۹۹,۰۰۰</span>
        <span class="period">/ ماهانه</span>
      </div>
      <ul class="features">
        <li>پشتیبانی تلفنی و تیکتی</li>
        <li>فضای ذخیره‌سازی ۵۰ گیگابایت</li>
        <li>دسترسی به تمام ابزارها</li>
      </ul>
      <button class="select-btn">انتخاب پلن حرفه‌ای</button>
    </div>
  </div>
</div>

.pricing-container {
  font-family: Tahoma, sans-serif;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
}
.toggle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 40px;
  font-weight: bold;
  color: #334155;
}
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}
.switch input { display: none; }
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #cbd5e1;
  transition: .4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px; width: 18px;
  left: 4px; bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider { background-color: #3b82f6; }
input:checked + .slider:before { transform: translateX(24px); }

.pricing-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}
.pricing-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 30px;
  width: 300px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  position: relative;
  transition: transform 0.3s ease;
}
.pricing-card:hover { transform: translateY(-5px); }
.pricing-card.popular {
  border: 2px solid #3b82f6;
  transform: scale(1.05);
}
.pricing-card.popular:hover { transform: scale(1.05) translateY(-5px); }
.badge {
  position: absolute;
  top: -15px; right: 20px;
  background-color: #3b82f6;
  color: #ffffff;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
}
.plan-name {
  font-size: 1.5rem;
  color: #1e293b;
  margin-bottom: 15px;
}
.price {
  font-size: 2rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 20px;
}
.price .currency { font-size: 1rem; font-weight: normal; }
.price .period { font-size: 0.9rem; color: #64748b; font-weight: normal; }
.features {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  line-height: 2;
  color: #475569;
}
.features li::before {
  content: "✓ ";
  color: #10b981;
  font-weight: bold;
  margin-left: 5px;
}
.select-btn {
  width: 100%;
  padding: 12px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}
.select-btn:hover { background-color: #2563eb; }

document.getElementById('billing-toggle').addEventListener('change', function() {
  const isYearly = this.checked;
  const prices = document.querySelectorAll('.price');

  prices.forEach(price => {
    const monthlyPrice = price.getAttribute('data-monthly');
    const yearlyPrice = price.getAttribute('data-yearly');
    const amountSpan = price.querySelector('.amount');
    const periodSpan = price.querySelector('.period');

    if (isYearly) {
      amountSpan.textContent = yearlyPrice;
      periodSpan.textContent = '/ سالانه';
    } else {
      amountSpan.textContent = monthlyPrice;
      periodSpan.textContent = '/ ماهانه';
    }
  });
});

💡 نکته طلایی سئو و تجربه کاربری (UX)
استفاده از ویژگی data-attributes به موتورهای جستجو کمک می‌کند تا بدون نیاز به بارگذاری مجدد صفحه، بفهمند قیمت‌های مختلف چطور مدیریت می‌شوند. این کار سرعت سایت شما را به شدت بهبود می‌دهد.

❌ مشکل ۱: سوئیچ ماهانه و سالانه کار نمی‌کند و خطا می‌دهد.

راه‌حل: اطمینان حاصل کنید که شناسه billing-toggle در تگ اینپوت دقیقا منطبق با شناسه نوشته شده در کد جاوااسکریپت باشد. همچنین مطمئن شوید کدهای جاوااسکریپت پس از لود کامل سند HTML اجرا می‌شوند.

❌ مشکل ۲: ستون‌ها در موبایل به شدت فشرده و زشت می‌شوند.

راه‌حل: برای حل این مشکل مطمئن شوید دستور flex-wrap: wrap; در کلاس دایرکتوری والد یعنی .pricing-grid وجود داشته باشد تا وقتی فضا کم شد، کارت‌ها به صورت خودکار زیر هم قرار گیرند.

❌ مشکل ۳: استایل جداول تحت تاثیر کدهای پیش‌فرض قالب وردپرس خراب شده است.

راه‌حل: برای جلوگیری از این موضوع از ویژگی پیشوندهای اختصاصی (مانند wp-custom-pricing-card) استفاده کنید تا کلاس‌های ساده‌ای مثل card با استایل هسته قالب شما هم‌پوشانی نداشته باشند.

آیا ایجاد جدول قیمت‌گذاری بدون افزونه در وردپرس ایمن است؟

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

تکنیک روانشناسی قیمت در جدول قیمت‌گذاری چیست؟

بهترین تکنیک، برجسته کردن یک پلن متوسط به عنوان محبوب‌ترین گزینه (Popular Plan) است. با استفاده از تفاوت رنگ، دکمه رنگی‌تر و اضافه کردن متنی مثل «پیشنهاد ویژه»، تصمییم‌گیری برای کاربران را به شدت تسهیل می‌کنید.

چطور می‌توانم واحد پول را اتوماتیک به دلار یا ریال تبدیل کنم؟

با اعمال یک منطق ساده در بخش ویژگی‌های داده (Data Attributes) کدهای جاوااسکریپتی می‌توانید در زمان تغییر سوئیچ، مقدار عددی را به سادگی به ارز دلخواه فرمت‌دهی کنید.