How to Make Entire Product Card Clickable in Woocommerce

How to Make Entire Product Card Clickable in Woocommerce

Fuck this was harder to figure out than it needed to be. The docs on this suck.

Add a woocommerce folder directly inside your theme file. Here’s where you can add templates that override the native woocommerce templates.

Here’s the base template reference.

You’ll need to add the content-product.php file into the woocommerce folder. You’ll then need to modify it.

You need to do is move the do_action( 'woocommerce_before_shop_loop_item' ); and do_action( 'woocommerce_after_shop_loop_item' ); to the outside of the <li></li> and take out the product classes wc_product_class( '', $product ); inside the <li>.

So it’ll look like:

do_action( 'woocommerce_before_shop_loop_item' );
?>
    <li>
        <?php
            // insert irrelevant center code
        ?>
    </li>
<?php 
do_action( 'woocommerce_after_shop_loop_item' );
?>

There. That’s it. You’re done. This took me all day to figure out (first time using woocommerce and severely sleep deprived).

Like IDK why there weren’t docs to do this specific thing because that’s a very common thing to do in an eCommerce theme.

If I sound angry, that’s because I am. Hopefully this saved you time and you’re less angry than me.