Display Woocommerce product variations dropdown on the shop page best for the direct customer can be a select option in shop and category page.
Woocommerce show product variations on the shop page will be shown on both way variation as well single product as a variation.
A Woocommerce show variation on the single product page using woocommerce hooks. Most customers want a short and simple system for the process to an easy way of adding to cart.
In this article, I’ll show you how you can make this possible just using the woocommerce hooks. Just copy the below code snippet to function.php file. Display Product Variations In Shop/Catalogue page in this article,
/**
* Replace add to cart button in the loop.
*/
function mycustom_change_loop_add_to_cart() {
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
add_action( 'woocommerce_after_shop_loop_item', 'mycustom_template_loop_add_to_cart', 10 );
}
add_action( 'init', 'mycustom_change_loop_add_to_cart', 10 );
/**
* Use single add to cart button for variable products.
*/
function mycustom_template_loop_add_to_cart() {
global $product;
if ( ! $product->is_type( 'variable' ) ) {
woocommerce_template_loop_add_to_cart();
return;
}
remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
add_action( 'woocommerce_single_variation', 'mycustom_loop_variation_add_to_cart_button', 20 );
woocommerce_template_single_add_to_cart();
}
/**
* Customise variable add to cart button for loop.
*
* Remove qty selector and simplify.
*/
function mycustom_loop_variation_add_to_cart_button() {
global $product;
?>
<div class="woocommerce-variation-add-to-cart variations_button">
<button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
<input type="hidden" name="add-to-cart" value="<?php echo absint( $product->get_id() ); ?>" />
<input type="hidden" name="product_id" value="<?php echo absint( $product->get_id() ); ?>" />
<input type="hidden" name="variation_id" class="variation_id" value="0" />
</div>
<?php
}
You can adjust CSS according to your site style.
You may also like https://quicklearncode.com/show-discount-price-percentage-on-woocommerce/
We hope this article helped you learn some new useful tricks for functions.php file in WordPress. You may also refer https://iconicwp.com/blog/show-variations-shop-page-woocommerce/
Do you have any questions about this article and If so, ask away in the comments section below!
