Home / eCommerce / Enable quantity field on shop page
Duplicate Snippet

Embed Snippet on Your Site

Enable quantity field on shop page

Code Preview
php
<?php
// Remove the default add to cart button
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
// Add custom add to cart form for both simple and variable products
add_action( 'woocommerce_after_shop_loop_item', 'custom_add_to_cart_form_on_shop_page', 10 );
function custom_add_to_cart_form_on_shop_page() {
    global $product;
    if ( $product->is_type( 'simple' ) && $product->is_purchasable() && ! $product->is_sold_individually() ) {
        // Simple product add to cart with quantity
        echo '<form style="display:flex; justify-content:center; gap:8px;" class="cart" action="' . esc_url( $product->add_to_cart_url() ) . '" method="post" enctype="multipart/form-data">';
        woocommerce_quantity_input( array(
            'min_value' => $product->get_min_purchase_quantity(),
            'max_value' => $product->get_max_purchase_quantity(),
            'input_value' => 1,
        ), $product );
        echo '<button type="submit" name="add-to-cart" value="' . esc_attr( $product->get_id() ) . '" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
        echo '</form>';
    } elseif ( $product->is_type( 'variable' ) ) {
        // Variation form copied from single-product page template
        $attributes = $product->get_variation_attributes();
        $available_variations = $product->get_available_variations();
        if ( empty( $available_variations ) ) {
            echo '<p class="stock out-of-stock">' . esc_html__( 'This product is currently out of stock and unavailable.', 'woocommerce' ) . '</p>';
        } else {
            echo '<form class="variations_form cart" action="' . esc_url( get_permalink( $product->get_id() ) ) . '" method="post" enctype="multipart/form-data" data-product_id="' . esc_attr( $product->get_id() ) . '" data-product_variations="' . esc_attr( wp_json_encode( $available_variations ) ) . '">';
            
            echo '<table class="variations">';
            foreach ( $attributes as $attribute_name => $options ) {
                echo '<tr>';
                echo '<td class="label"><label for="' . esc_attr( sanitize_title( $attribute_name ) ) . '">' . wc_attribute_label( $attribute_name ) . '</label></td>';
                echo '<td class="value">';
                wc_dropdown_variation_attribute_options( array(
                    'options'   => $options,
                    'attribute' => $attribute_name,
                    'product'   => $product,
                ) );
                echo '</td></tr>';
            }
            echo '</table>';
            echo '<div class="single_variation_wrap">';
            /**
             * woocommerce_before_single_variation Hook.
             */
            do_action( 'woocommerce_before_single_variation' );
            /**
             * woocommerce_single_variation. Contains the selected variation price, stock info, etc.
             */
            do_action( 'woocommerce_single_variation' );
            /**
             * woocommerce_single_variation_add_to_cart_button hook.
             * Note: This will output quantity + submit button
             */
            do_action( 'woocommerce_single_variation_add_to_cart_button' );
			
			echo '<style>
            	form.variations_form.cart .woocommerce-variation-add-to-cart.variations_button {
					display:flex;
					justify-content:center;
					gap:8px;
				}
        	</style>';
            /**
             * woocommerce_after_single_variation Hook.
             */
            do_action( 'woocommerce_after_single_variation' );
            echo '</div>';
            echo '</form>';
        }
    }
}

Comments

Add a Comment