WooCommerce Select Variations on Shop Page

Today we talk about WooCommerce or WordPress select variation on shop page programmatically. In this tutorial, We focus on how to show select/dropdown on the shop page. It will be easier for customers to add to the cart with variations from the shop page. It will eliminate the step of the go-to single page and add to the cart from there.

Let’s start with our example.

add_action('woocommerce_before_shop_loop', 'qaisar_satti_variations_dropdown');

function qaisar_satti_variations_dropdown() {
remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart' ); // remove already add to cart
add_action('woocommerce_after_shop_loop_item', 'woocommerce_template_single_add_to_cart', 50 );// add sigle page add to cart
}

Qaisar Satti

Hi, I'm Qaisar Satti! I've been a developer for over 20 years, and now I love sharing what I've learned through tutorials and guides. Whether you're working with Magento, PrestaShop, or WooCommerce, my goal is to make your development journey a bit easier and more fun. When I'm not coding or writing, you can find me exploring new tech trends and hanging out with the amazing developer community. Thanks for stopping by, and happy coding!