WooCommerce

I’m using Sketch and added some code to implement WooCommerce as per their support docs:

/**
 * WooCommerce Compatibility
 */
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '<section id="main">';
}

function my_theme_wrapper_end() {
  echo '</section>';
}

add_theme_support( 'woocommerce' );

There is a span in-between the img and the product titles that breaks the links on the shop page. When I remove the span in Firebug it works fine.

An alternate to try : <?php woocommerce_content(); ?> throws a 502 Gateway Error. A little bit of screwing with the loop

<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php if ( have_posts() ) : the_post(); ?>

				<?php woocommerce_content(); ?>

			<?php endif; // end of the loop. ?>

and it works, but now the individual products don’t load.