CODEWITHSUNDEEP
wordpresswoocommerceelementor
Benb1
Benb1

Reputation: 65

How to add variation selection in Woo commerce to the Products Archive page?

recently I started working on a Fruits & Vegetable website (I'm using Woocommerce, Elementor, and Hello Theme).

I'm trying to give the user an option to select variations of the product in the Archive Page, not only the product page. also adding a quantity option to the archive page. that I've managed to do using the code below.

There's images that are illustrating what I'm trying to create: https://i.sstatic.net/tIw4S.jpg

https://i.sstatic.net/WWpTU.jpg

so far i'v managed to add Quantity selection in products archive page using this code:

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        $html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
        $html .= woocommerce_quantity_input( array(), $product, false );
        $html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
        $html .= '</form>';
    }
    return $html;
}

the remaining part is to create 2 variable products. the first product is a Single apple per 1USD. the second product is a Pack of apples for 5USD per KG.

and to override/create a code that show's the selection in the "products archive" page not the "product page"

assuming some adjustment to the original code could create that too.

Upvotes: 1

Views: 2453

Answers (1)

Bhautik
Bhautik

Reputation: 11282

You need to use the woocommerce_before_shop_loop action hook to add a variation dropdown on the shop page. try the below code.

add_action( 'woocommerce_before_shop_loop', 'show_production_variations_on_shop_page' );
function show_production_variations_on_shop_page() {
    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
    add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_add_to_cart', 30 );
}

Tested and works

enter image description here

Upvotes: 3

Related Questions