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.