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.

1
Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
jspada

Hello Lee, This is a great little article and a great piece of code. It was exactly what I was looking for. I wonder why genesis connect just doesn’t do this already.
I have found just one issue that Id like to get your insite on.
On products that have reviews enabled, I get the reviews section twice. Once under the reviews tab where it belongs and then once again down at the very bottom of the page outside of the tabs markup. Do you have any idea why the code you provided may be doing this?

Free to your inbox

Join our mailing list to receive the latest news and updates from JournalXtra.

You have Successfully Subscribed!