Отображение общей цены на основе модели ценообразования количественного уровня - WooCommerce

Question

Hello Stackoverflow community,

Я занимаюсь разработкой веб-сайта WooCommerce с моделью ценового уровня (с помощью этого плагина Dynamic Pricing and Discount) .Цены на товары устанавливаются заранее и зависят от количества покупок (см. Таблицу ниже).

     | Product       | From Quantity | Price |
     | ------------- | ------------- | ----- |
     | Product 1     | 1             | £500  |
     | Product 1     | 2             | £480  |
     | Product 1     | 5             | £460  |
     | Product 2     | 1             | £200  |
     | Product 2     | 5             | £195  |
     | Product 2     | 10            | £190  |

Я рассчитываю добиться следующего эффекта с помощью jQuery (для лучшей идеи см. Рисунки ниже):

• отображает итоговую цену динамически при изменении поля количества (на основе оценки уровня)
• Выделите строку в таблице оценки уровня согласно вводимому количеству

Таким образом, из этого дисплея

На этот экран

Данные хранятся в моей базе данных, в таблице wp_options в виде сериализованного массива .Пока я извлекаю массив, десериализую его и отображаю таблицу цен в моем файле шаблона content-single-product.php.

$result = $wpdb->get_var( "SELECT option_value FROM $wpdb->options WHERE option_id = 1799" );
$array = unserialize($result);

function print_key($array) {
    global $product;
    $current_id = $product->get_id();
    ?>
    <table class="table">
        <thead>
            <tr>
                <th>Quantity</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
        <?php
            foreach ($array['product_rules'] as $key => $value) {
                foreach ($value['product_id'] as $key => $g_product_id) {
                    if ($g_product_id == $current_id ) { ?>
                        <tr>
                            <td>From <?php echo $value['min']; ?> to <?php echo $value['max']; ?></td>
                            <td><?php echo $value['value']; ?></td>
                        </tr>
                        <?php
                    }
                }
            }
        ?>
        </tbody>
    </table>
    <?php
} ?>

Как мне добиться, чтобы цена изменялась во внешнем интерфейсе с помощью jQuery?Должен ли я использовать Ajax