Placement of Product Quantity Input Field on WooCommerce Checkout

Viewed 135

I've been working on this for well over two months and I realize that I need help. While I'm leaning a lot from reading and studying, I don't fully understand some of the stuff that others tell me.

As this is a project for school, I appreciate any help I can get and please -- whatever you suggest or tell me to do, please explain it so that I can follow along.

Idea: A one-page-checkout for WooCommerce where the customer can change the quantity and remove products.

Current design: Please see image.View image in a new tab.

Desired design: The quantity field should be moved "up" and next to the "remove" link.

I do not know how to accomplish this and neither do I do know if this code is optimal as an overall. If there are suggestions on how to make it better or cleaner or more optimal, please let me know.

Here's the code in full:

add_filter( 'woocommerce_checkout_cart_item_quantity', 'qty_change_remove_item_checkout_order_review', 1000, 3);
function qty_change_remove_item_checkout_order_review( $quantity_html, $cart_item, $cart_item_key ) {

    $_product = $cart_item['data'];

    if ( $_product->is_sold_individually() ) {

        $product_quantity = sprintf('<input type="hidden" name="cart[%s][qty]" value="" />', $cart_item_key);

    } else {

        $product_quantity = woocommerce_quantity_input(

            array(

                'input_name' => "cart[{$cart_item_key}][qty]",

                'input_value' => $cart_item['quantity'],

                'max_value' => $_product->get_max_purchase_quantity(),

                'min_value' => '1',

                'class' => 'qtyinput',

                'placeholder' => 'Qty',

                'product_name' => $_product->get_name(),

            ),

            $_product,

            false

        );

    }

    $cart = WC()->cart->get_cart();

    foreach ( $cart as $cart_key => $cart_value ) {

        if ( $cart_key == $cart_item_key ) {

            $product_id = $cart_item['product_id'];

            $_product = $cart_item['data'] ;

            if ( ! wp_is_mobile() ) {

                $remove_product = sprintf(

                    '<a href="%s" class="remove-product" title="%s" data-product_id="%s" data-product_sku="%s" data-cart_item_key="%s">Remove</a>',

                    esc_url( wc_get_cart_remove_url( $cart_key ) ),

                    __( 'Remove from this order', 'woocommerce' ),

                    esc_attr( $product_id ),

                    esc_attr( $_product->get_sku() ),

                    esc_attr( $cart_item_key )

                ); 
            } else {

                $remove_product = sprintf(

                    '<a href="%s" class="remove-product-mobile" title="%s" data-product_id="%s" data-product_sku="%s" data-cart_item_key="%s">&#9746;</a>',

                    esc_url(wc_get_cart_remove_url($cart_key)),

                    __( 'Remove from this order', 'woocommerce' ),

                    esc_attr( $product_id ),

                    esc_attr( $_product->get_sku() ),

                    esc_attr( $cart_item_key )

                ); 
            }
        }
    }

    return '<br><span class="product-quantity">' . sprintf( 'Qty: %s', $cart_item['quantity'] ) . ' / ' . $remove_product . '</span>'.$product_quantity.'';

}
1 Answers

You have a <br> in the following line that's why it moved down.

return '<br><span class="product-quantity">' . sprintf( 'Qty: %s', $cart_item['quantity'] ) . ' / ' . $remove_product . '</span>'.$product_quantity.'';
Related