Integrate WooCommerce with Genesis Themes

Follow these 3 steps to nicely integrate the WooCommerce products loop with the Genesis content template structure.

This WooCommerce compatibility guide works with Genesis, Genesis child themes and the Dynamik Website Builder for Genesis.

Step 1: Genesis WooCommerce page templates

The plugin Genesis Connect for WooCommerce installs a set of WooCommerce templates for use with the Genesis theme. Install the plugin from the WordPress plugin repository and activate it.

Step 2: Make the WooCommerce product loop display correctly within Genesis page templates

Add the below code snippet to your child theme’s functions.php file. This code snippet is based on the theme integration code provided by WooCommerce. The difference is that the code below uses the HTML5 markup used by Genesis and the code ensures the correct CSS classes are applied to the HTML tags.

/* WooCommerce Integration */

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', 'vr_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'vr_theme_wrapper_end', 10);

function vr_theme_wrapper_start() {

			// Remove .entry class from WooCommerce div content container
			function vr_post_class( $wp_classes, $extra_classes )
			{
    			// List of the only WP generated classes that are not allowed
    			$blacklist = array( 'entry' );

    			// Blacklist result:
    			$wp_classes = array_diff( $wp_classes, $blacklist );

    			// Add the extra classes back untouched
    			return array_merge( $wp_classes, (array) $extra_classes );
			}
			add_filter( 'post_class', 'vr_post_class', 10, 2 );
	
			// Add 'page' class to <article>
			function vr_extra_article_class( $attributes ) {
  				$attributes['class'] = $attributes['class']. ' page';
    			return $attributes;
			}
			add_filter( 'genesis_attr_entry', 'vr_extra_article_class' );

			// Add containers around content
			do_action( 'genesis_before_entry' );

			printf( '<article %s>', genesis_attr( 'entry' ) );

				// uncomment to add post/page title
				/* do_action( 'genesis_entry_header' ); */

				// uncomment to add by-lines
				/* do_action( 'genesis_before_entry_content' ); */

				printf( '<div %s>', genesis_attr( 'entry-content' ) );
}

function vr_theme_wrapper_end() {
				echo '</div>';

				do_action( 'genesis_after_entry_content' );

				// Uncomment to display categories & tags
				/* do_action( 'genesis_entry_footer' ); */

			echo '</article>';

			do_action( 'genesis_after_entry' );
}


add_theme_support( 'genesis-connect-woocommerce' );
add_theme_support('woocommerce');

Step 3: Declare WooCommerce theme compatibility

We did this in step 2 so no need to worry about this one :p

So now you have WooCommerce integrated with your Genesis child theme using HTML5 markup.