How to display the number of products to the left of the "Add to Cart" button in the product catalog?

Question

WooCommerce

Hello, the question is this, I used the hook to display variations in the product catalog (code below), but I came across the fact that the window for selecting the number of products is located above the button in the basket, how to make it so that it is to the left of the button, like the product card itself, thanks for the help!

/*
Вывод вариаций на главной
*/

add_filter('woocommerce_loop_add_to_cart_link', 'variation_on_category');

function variation_on_category(){

    global $product;

    if ($product->is_type('variable')) {

        // Enqueue variation scripts.
        wp_enqueue_script('wc-add-to-cart-variation');

        // Get Available variations?
        $get_variations = count($product->get_children()) <= apply_filters('woocommerce_ajax_variation_threshold', 30, $product);
        $available_variations = $get_variations ? $product->get_available_variations() : false;
        $attributes = $product->get_variation_attributes();
        $selected_attributes = $product->get_default_attributes();
        $attribute_keys = array_keys($attributes);
        ?>

        <form class="variations_form cart"
              action="<?php echo esc_url(apply_filters('woocommerce_add_to_cart_form_action', $product->get_permalink())); ?>"
              method="post" enctype='multipart/form-data' data-product_id="<?php echo absint($product->get_id()); ?>"
              data-product_variations="<?php echo htmlspecialchars(wp_json_encode($available_variations)); // WPCS: XSS ok. ?>">
            <?php do_action('woocommerce_before_variations_form'); ?>

            <?php if (empty($available_variations) && false !== $available_variations) : ?>
                <p class="stock out-of-stock"><?php esc_html_e('This product is currently out of stock and unavailable.', 'woocommerce'); ?></p>
            <?php else : ?>
                <table class="variations" cellspacing="0">
                    <tbody>
                    <?php foreach ($attributes as $attribute_name => $options) : ?>
                        <tr>
                            <td class="value">
                                <?php
                                wc_dropdown_variation_attribute_options(array(
                                    'options' => $options,
                                    'attribute' => $attribute_name,
                                    'product' => $product,
                                ));
                              
                                ?>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>

                <div class="single_variation_wrap">
                    <?php
                    /**
                     * Hook: woocommerce_before_single_variation.
                     */
                    do_action('woocommerce_before_single_variation');

                    /**
                     * Hook: woocommerce_single_variation. Used to output the cart button and placeholder for variation data.
                     *
                     * @since 2.4.0
                     * @hooked woocommerce_single_variation - 10 Empty div for variation data.
                     * @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
                     */
                    do_action('woocommerce_single_variation');

                    /**
                     * Hook: woocommerce_after_single_variation.
                     */
                    do_action('woocommerce_after_single_variation');
                    ?>
                </div>
            <?php endif; ?>

            <?php do_action('woocommerce_after_variations_form'); ?>
        </form>

    <?php } else {

        $args = array();
        $defaults = array(
            'quantity' => 1,
            'class' => implode(' ', array_filter(array(
                'button',
                'product_type_' . $product->get_type(),
                $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
                $product->supports('ajax_add_to_cart') ? 'ajax_add_to_cart' : '',
            ))),
            'attributes' => array(
                'data-product_id' => $product->get_id(),
                'data-product_sku' => $product->get_sku(),
                'aria-label' => $product->add_to_cart_description(),
                'rel' => 'nofollow',
            ),
        );

        $args = wp_parse_args($args, $defaults);

        if (isset($args['attributes']['aria-label'])) {
            $args['attributes']['aria-label'] = strip_tags($args['attributes']['aria-label']);
        }

        echo sprintf('<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
            esc_url($product->add_to_cart_url()),
            esc_attr(isset($args['quantity']) ? $args['quantity'] : 1),
          esc_attr(isset($args['class']) ? $args['class'] : 'button'),
            isset($args['attributes']) ? wc_implode_html_attributes($args['attributes']) : '',
            esc_html($product->add_to_cart_text())
        );

    }
}

Answer 1

With css