تغییر متغیر در صفحه محصول ووکامرس از لیست به دکمه

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

				
					add_action('woocommerce_before_variations_form', function () {
    ?>
    <style>
        .woo-variation-buttons {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* ۳ ستون در دسکتاپ */
            gap: 10px;
            max-width: 100%;
            padding: 0;
            box-sizing: border-box;
        }
        .woo-variation-buttons button {
            padding: 8px 12px; /* کاهش فاصله داخلی (padding) */
            border: 2px solid #ddd;
            cursor: pointer;
            border-radius: 5px;
            background: #f9f9f9;
            transition: 0.3s;
            font-size: 14px; /* اندازه فونت در دسکتاپ */
            font-weight: bold;
            width: 100%;
            text-align: center;
            min-height: 50px; /* ارتفاع ثابت */
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
        }
        .woo-variation-buttons button.selected {
            border-color: #0071a1;
            background: #0071a1;
            color: #fff;
        }
        .variations select {
            display: none !important;
        }
        /* 🟢 موبایل و تبلت (۲ ستون) */
        @media (max-width: 768px) {
            .woo-variation-buttons {
                grid-template-columns: repeat(2, 1fr); /* ۲ ستون در تبلت */
                gap: 8px; /* فاصله بین دکمه‌ها در تبلت */
            }
        }
        /* 🔵 موبایل کوچکتر از 480px (۲ ستون در موبایل) */
        @media (max-width: 480px) {
            .woo-variation-buttons {
                grid-template-columns: repeat(2, 1fr); /* ۲ ستون در موبایل */
                gap: 8px; /* فاصله بین دکمه‌ها در موبایل */
            }
            .woo-variation-buttons button {
                width: 100%; /* دکمه‌ها به‌صورت ۲ ستون در موبایل */
                min-width: 0; /* جلوگیری از کشیده شدن دکمه‌ها */
                font-size: 12px; /* کاهش اندازه فونت در موبایل */
                padding: 10px 15px; /* کمی افزایش فاصله داخلی برای موبایل */
            }
        }
    </style>
    <?php
});
add_action('woocommerce_after_variations_form', function () {
    ?>
    <?php
});