Как сделать кнопку Добавить в корзину, которая при нажатии меняется на выбор количества?

Чтобы создать кнопку "Добавить в корзину", которая меняется на выбор количества при нажатии, вам потребуется использовать JavaScript и AJAX запросы для обновления содержимого страницы без ее перезагрузки. Вот пошаговое руководство о том, как это сделать на платформе WordPress:

Шаг 1: Создайте шорткод
Создайте новый шорткод в functions.php вашей темы. Шорткод будет отвечать за отображение кнопки и формы для выбора количества. Вот пример кода:

function add_to_cart_button_shortcode() {
    global $product;
    
    ob_start();

    echo '<button class="add-to-cart-button">Добавить в корзину</button>';
    echo '<form class="quantity-form" method="post" action="'.esc_url( WC_AJAX::get_endpoint( 'get_refreshed_fragments' ) ).'">';
    echo '<input type="number" name="quantity" value="1" min="1" class="quantity-input" />';
    echo '<input type="hidden" name="product_id" value="'.get_the_ID().'" />';
    echo '<input type="hidden" name="add-to-cart" value="'.get_the_ID().'" />';
    echo '<button type="submit" class="add-to-cart-button">Добавить в корзину</button>';
    echo '</form>';

    return ob_get_clean();
}
add_shortcode( 'add_to_cart_button', 'add_to_cart_button_shortcode' );

Шаг 2: Подключите JavaScript
Добавьте следующий код JavaScript в functions.php вашей темы или создайте новый файл .js и подключите его к вашей теме. Этот код будет выполнять AJAX запросы для обновления содержимого страницы при нажатии на кнопку.

jQuery(document).ready(function($) {
    $(document).on('click', '.add-to-cart-button', function(e) {
        e.preventDefault();
        var $thisButton = $(this);
        var $form = $thisButton.closest('form');
        var data = {
            add_to_cart: $form.find('input[name="add-to-cart"]').val(),
            product_id: $form.find('input[name="product_id"]').val(),
            quantity: $form.find('input[name="quantity"]').val()
        };
        
        $.ajax({
            type: 'post',
            url: wc_add_to_cart_params.ajax_url,
            data: data,
            beforeSend: function() {
                $thisButton.addClass('loading');
            },
            complete: function() {
                $thisButton.removeClass('loading');
                $thisButton.closest('.woocommerce').find('.woocommerce-message').remove();
            },
            success: function(response) {
                $form.find('button.add-to-cart-button').hide();
                $form.find('.quantity-form').show();
            }
        });
    });
});

Шаг 3: Используйте шорткод
Вставьте шорткод [add_to_cart_button] в любое место страницы, где вы хотите отобразить кнопку "Добавить в корзину". При нажатии на кнопку она должна замениться на форму для выбора количества товаров.

Это все! Теперь у вас должна быть функциональная кнопка "Добавить в корзину", которая меняется на форму выбора количества при нажатии.