How to use Genesis Connect for WooCommerce

This article contains a bunch of tips and tricks for working with Genesis Connect for WooCommerce, and shows you how to create and customise your own shop templates to help you make awesome Genesis-powered e-commerce sites. This page will be continually updated as more tips are added. Check back often!

add_theme_support( 'woocommerce' );

Genesis Connect for WooCommerce (referred to as GCW throughout this article) is an integration plugin enabling you to use WooCommerce seamlessly with Genesis child themes. This integration is achieved through specially designed templates which display WooCommerce products within Genesis child themes, enabling access to standard Genesis functionality such as Genesis layout and SEO options, and providing full compatibility with the Genesis Simple Sidebars and Genesis Simple Menus plugins.

Contents

• Installation Requirements
• How to create custom templates
• How to deal with existing custom WooCommerce templates
• How to customise WooCommerce CSS
• How to force the Genesis layout on Single Product pages
• How to force the Genesis layout on Product taxonomy pages
• How to remove Genesis layout options from the Product edit screen
• How to force use of a specific Simple Sidebar on Single Product pages
• How to force use of a specific Simple Sidebar on Product taxonomy pages
• How to force use of a specific Simple Menu on Single Product pages
• How to force use of a specific Simple Menu on Product taxonomypages
• How to modify the default WooCommerce Single Product display
• Integrating with the Prose theme by Studiopress

Installation Requirements

In order to integrate WooCommerce with Genesis you need to have the following installed and activated on your site:

• WordPress 3.5+
• Genesis Framework version 1.9+ (installed)
• A child theme for Genesis (activated)
• WooCommerce, minimum version 1.6.6 (activated). It is assumed that you have been through WooCommerce’s set up and all the relevant shop Pages have been created.
• Genesis Connect for WooCommerce (activated) Current version is 1.1.2
• Genesis Simple Sidebars (optional)
• Genesis Simple Menus (optional)

You also need to add this code to your child theme’s functions.php:

// Enable GCW
add_theme_support( 'genesis-connect-woocommerce' );

If you are using the Prose child theme (version 1.5+) by Studiopress, please read this.

A note about WooCommerce setup

When you first install and activate WooCommerce you will be prompted to set up the WooCommerce options. Explaining how to configure these options is way too big a topic for this article (see Woo’s excellent WooCommerce Codex for documentation), but two areas are particularly important for Genesis integration:

1. Let WooCommerce create the various “Shop” pages during its setup routine. It is much easier than setting them up yourself. If you want to rename them afterwards (eg rename “Cart” to “Basket”), fine, just remember to go back into the WooCommerce Settings > Pages tab and adjust the pages settings to point to the correct page.
2. Under the WooCommerce Settings > General tab you will see a checkbox option “Enable WooCommerce CSS styles”. Whether you should leave this checked or unchecked depends on how your theme deals with WooCommerce CSS. Please see the How to customise WooCommerce CSS section for more info.

Assuming you have already created some Products, you can now browse to your Shop page and you should see your products displayed in your theme.

How to customise the GCW templates

The plugin replaces WooCommerce’s built-in shop templates with its own Genesis-ready versions, specifically the single-product.php, archive-product.php and taxonomy.php templates needed to display, respectively, the single product page, the main shop page, and Product Category and Product Tag archive pages.

An important point to note is that you should never edit/modify these GCW templates, the reason being that if you do, your customisations will be overwritten whenever the plugin is updated and all your hard work will be lost!

Therefore, if you need to customise a template, you should ALWAYS create your own custom template first. Here’s how…

Create your own custom templates:

1. Create a copy of the GCW template that you wish to customise and place this copy in your child theme’s woocommerce folder. If your theme doesn’t have this folder, create the folder using your FTP client or hosting File Manager.
2. GCW’s templates can be found in the plugin’s templates folder.
3. Do not rename the copies. If you wish to customise the Single Product display, you must make a copy of single-product.php and ensure that your copy has the same template filename.
4. By default GCW only provides one taxonomy related template, taxonomy.php. If you wish to take advantage of the Template Hierarchy, for example to use a different layout for Product Categories and Product Tags, or for one or more terms within these taxonomies, you can create taxonomy-{taxonomy}.php and taxonomy-{taxonomy}-{term}.php files using GCW’s taxonomy.php as a starting point, and place these files in your child theme’s woocommerce folder.

Note: all of the code snippets shown in these tips and tricks should, unless otherwise stated, be added to your own custom templates created as per the above instructions. You should never modify a GCW core file or template!

How to deal with existing custom WooCommerce templates

This section is only applicable if one of the following scenarios applies to you:

• You have already done your own integration of WooCommerce with your Genesis child theme AND you have already created custom templates and placed them in your child theme’s woocommerce folder.
• You have an existing site using WooCommerce and you now wish to switch to using a Genesis child theme.

In either of the above cases, if you DO NOT have any custom WooCommerce templates, and there are no such templates in your theme’s (or child theme’s) woocommerce folder, you can simply ignore the rest of this section and skip straight to the other tips and tricks featured on this page.

However, if you DO already have custom WooCommerce templates, and these are currently located in your theme’s (or child theme’s) woocommerce folder, you will need to modify them in order for GCW to work properly. The rest of this section tells you how to do these modifications.

Modifying templates – two approaches

There are two possible ways to do these modifications: either modify your existing templates to incorporate essential Genesis/WooCommerce integration code found in GCW’s default templates, or use the GCW default templates as your starting point and then add in any WooCommerce-specific code from your existing templates.

My advice is to do the latter, ie use the GCW default templates as your starting point. The reasons why I advise this are:

1. Your existing templates may be out of date. WooCommerce 1.4 incorporated a huge re-write of the WooCommece templating system and, as GCW’s templates are based on WooCommerce 1.4.4, you will benefit from any enhancements introduced by these recent versions of WooCommerce.
2. The GCW default templates conform to the standards used by Genesis for theme templates, and therefore you can be sure that they will work correctly with Genesis.

Before you go any further, make sure that you have a backup of the contents of your woocommerce folder.

Making the new templates

1. If you have not done so already, create a custom template as per the instructions here. Don’t upload them to the child theme’s woocommerce folder until you have completed #2 below.
2. Download, and keep safe, copies of any existing templates found in your child theme’s woocommerce folder, and then delete these files from the child theme’s woocommerce folder.
3. Copy across any relevant code from your old templates to the new one(s) created at #1 above. (Unfortunately, I cannot be more precise as to which code, exactly, needs to be copied across. As every customisation is different, you will have to work that out for yourself.)
4. Upload your newly modified custom templates to the child theme’s woocommerce folder.

How to customise WooCommerce CSS

By default, WooCommerce loads its own default stylesheet. If it is just a case of making a few tweaks here and there, the easiest way to do this is to add the additional styles you need to the child theme’s style.css. For best results, to increase the CSS specificity to ensure that your new style does override WooCommerce’s default, target your CSS with the .woocommerce body class. For example, to change the colour of the add to cart button text to bright red, add this CSS:

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #review_form #submit {
color: #cc0000;
} 

From the GCW readme.txt…

For the benefit of theme developers and customizers, here is a summary of possible scenarios for dealing with WooCommerce CSS:

• Case 1: If the WooCommerce > General settings > Enable WooCommerce CSS option is checked, the default stylesheet supplied with WooCommerce will be loaded (see wp-content/plugins/woocommerce/assets/css/woocommerce.css).
• Case 2: If WooCommerce > General settings > Enable WooCommerce CSS option is unchecked, no stylesheet is loaded.
• Case 3: If the user (or theme developer) sets define( 'WOOCOMMERCE_USE_CSS', true ); in the child theme functions.php the options setting is ignored and the default WooCommerce stylesheet is loaded, ie has same effect as checking the settings box.
• Case 4: If the user (or theme developer) sets define( 'WOOCOMMERCE_USE_CSS', false ); in the child theme functions.php the options setting is ignored and NO stylesheet is loaded, ie has same effect as unchecking the settings box. Note: the value of WOOCOMMERCE_USE_CSS always takes precedence over the WooCommerce Settings page option!
• If either Case 1 or Case 3 applies, if themes/my-child-theme/woocommerce/styles.css exists it will be loaded in place of the default woocommerce stylesheet (located in plugins/woocommerce/assets/css/woocommerce.css).
• If either Case 2 or 4 applies, as no built-in stylesheet is loaded, all WooCommerce CSS styles need to be added to the theme’s main style.css stylesheet
• Note for Genesis child theme developers: For new themes, theme developers can use define( 'WOOCOMMERCE_USE_CSS', false ); and place all WooCommerce styles in the theme’s main stylesheet, or do nothing and let the user handle this via Case 1 or 3.

More to come…

How to force the Genesis layout on Single Product pages

Consider this scenario: you are integrating WooCommerce into a larger site and want to use content-sidebar layout as the default site layout, but you intend to use a different layout, eg full-width-content, for the single Product pages.

If you have a lot of Products, it will soon become apparent that each time you create a Product you have to remember to change the layout in the Genesis Layouts options in the Product edit screen. Trust me, after adding a few dozen Products you will get fed up doing this.

Luckily, thanks to Genesis, it is very easy to programmatically force the use of full-width-content (or any other Genesis layout option) for Product pages.

1. If you have not done so already, create a custom single-product.php template. Instructions for creating custom templates can be found here.
2. Add this code to your custom single-product.php template:

   // Force full-width-content on Single Product pages
   add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

   Place the above code above this block of code:

   /** Remove default Genesis loop */
   remove_action( 'genesis_loop', 'genesis_do_loop' );

3. Upload the modified custom single-product.php to your child theme’s woocommerce folder.

That’s it! The layout settings in the individual Product pages will now be ignored.

Note: the above example forces the layout to be full width. You can use other layouts by replacing this in the above code:

'__genesis_return_full_width_content'

with one of the following (their names are self-explanatory):

'__genesis_return_content_sidebar'
'__genesis_return_sidebar_content'
'__genesis_return_sidebar_content_sidebar'
'__genesis_return_content_sidebar_sidebar'

How to force the Genesis layout on Product taxonomy pages

The technique for forcing the layout on taxonomy pages is essentially the same as that described in How to force the Genesis layout on Single Product pages except, of course that the template in question is taxonomy.php.

1. If you have not done so already, create a custom taxonomy.php template. Instructions for creating custom templates can be found here.
2. Add this code to your custom taxonomy.php template:

   // Force full-width-content on Taxonomy pages
   add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

   Place the above code above this block of code:

   /** Remove default Genesis loop */
   remove_action( 'genesis_loop', 'genesis_do_loop' );

3. Upload the modified custom taxonomy.php to your child theme’s woocommerce folder.

That’s it! The layout settings in the individual Taxonomy term edit screens will now be ignored.

Note: the above example forces the layout to be full width. You can use other layouts by replacing this in the above code:

'__genesis_return_full_width_content'

with one of the following (their names are self-explanatory):

'__genesis_return_content_sidebar'
'__genesis_return_sidebar_content'
'__genesis_return_sidebar_content_sidebar'
'__genesis_return_content_sidebar_sidebar'

Note: bear in mind that, as per the Template Hierarchy, taxonomy.php is used for all your custom taxonomies’ terms (by default WooCommerce creates two taxonomies – product category and product tag). If you only want to force the layout on, say, Product Categories only, do the following:

1. Create a custom taxonomy-product_cat.php template, which should be a copy of the GCW taxonomy.php. Note that you will name your new file taxonomy-product_cat.php. Instructions for creating custom templates can be found here.
2. Add this code to your custom taxonomy-product_cat.php template:

   // Force full-width-content on Product Category Taxonomy pages
   add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

   Place the above code above this block of code:

   /** Remove default Genesis loop */
   remove_action( 'genesis_loop', 'genesis_do_loop' );

3. Upload the modified custom taxonomy-product_cat.php to your child theme’s woocommerce folder.

Alternatively, if you understand Conditional tags, you can manage all of this logic for forcing different layouts for different taxonomies and/or taxonony terms, from within a single custom taxonomy.php file.

How to remove Genesis layout options from the Product edit screen

If you force the Genesis layout for Single Product pages as shown above, it doesn’t make much sense leaving the Genesis layout options visible in the Product edit screen, especially if there are a number of authors/contributors working on your site. Inevitably, someone will try to change the layout content and will be confused when the change takes no effect, or will think that something is broken.

So, to suppress the Genesis layout options altogether from the Product edit screen, add this code to your child theme’s functions.php:

add_action( 'init', 'child_remove_post_type_support' );
/**
 * Remove Genesis inpost layouts from 'product' post_type
 *
 * Hooked to 'init', otherwise won't be removed
 * Note: GCW adds post_type support on genesis_init hook
 *
 * @author Studiograsshopper
 * @link http://www.studiograsshopper.ch
 */
function child_remove_post_type_support() {
	remove_post_type_support( 'product', 'genesis-layouts' );
}

How to force use of a specific Simple Sidebar on Single Product pages

The Genesis Simple Sidebars plugin is a very useful tool for displaying different sidebars on different pages. However, if you have a lot of Products and intend to use a specific sidebar on all single Product pages, you can save a lot of time and effort by programmatically forcing your theme to use a specific sidebar for these pages, rather than assigning the sidebar manually in each Product edit screen.

Before you begin make sure that you have created a custom single-product.php template. Instructions for creating custom templates can be found here.

1. First, if you haven’t already, you need to install and activate the Genesis Simple Sidebars plugin.
2. Next, go to Dashboard > Genesis > Simple Sidebars and create a new sidebar. Make sure that the sidebar slug is unique. You also need to make a note of this sidebar slug as it will be needed later. In the code example shown below, the slug of the new sidebar is forced-sidebar.
3. Go to Dashboard > Widgets and you should see your new sidebar ready to accept widgets. Add at least one widget to your new sidebar.
4. You now need to edit your custom single-product.php which you created earlier and which should be located in the child theme’s woocommerce folder. If you don’t have a custom single-product.php file, you must create one as per the instructions in the How to create custom templates section of this article.
5. Add this code to your custom single-product.php file:

   /** Force a specific SS sidebar on Single Product pages */
   
   add_action( 'get_header', 'child_single_product_ss_handler', 12);
   /**
    * Intercept GCW Simple Sidebar handling so that a specified Simple Sidebar
    * can be used for all Single Product pages
    *
    * @see gencwooc_ss_handler() in genesis-connect-woocommerce/sp-plugins-integration/genesis-simple-sidebars.php
    *
    * Unhooks gencwooc_ss_do_sidebar() and replaces it with child_single_ss_do_sidebar()
    *
    * This function is hooked to get_header with a priority of 12 so that it runs
    * after GCW's gencwooc_ss_handler() and therefore can unhook the relevant action
    *
    * @author Ade Walker
    * @link http://www.studiograsshopper.ch
    *
    */
   function child_single_product_ss_handler() {
   	
   	// Unhook GCW sidebar function
   	remove_action( 'genesis_sidebar', 'gencwooc_ss_do_sidebar' );
   	
   	// Add new callback
   	add_action( 'genesis_sidebar', 'child_single_ss_do_sidebar' );
   }
   
   /**
    * Callback to load specified SS sidebar
    *
    * This is run instead of GCW's gencwooc_ss_do_sidebar() function
    *
    * Note: dynamic_sidebar() uses SS slug
    *
    * @author Ade Walker
    * @link http://www.studiograsshopper.ch
    */
   
   function child_single_ss_do_sidebar() {
   
   	dynamic_sidebar( 'forced-sidebar' );
   
   }

   Place the above code above this:

   /** Remove default Genesis loop */
   remove_action( 'genesis_loop', 'genesis_do_loop' );

6. Upload the modified custom single-product.php to your child theme’s woocommerce folder. In your browser, navigate to your various single Product pages and you should now see the new sidebar displayed.

When adding the above code to your custom template, don’t forget to replace 'forced-sidebar' in line 41 with the actual slug of your sidebar.

Note that the above code ONLY affects the Primary Sidebar location. If you want to force the use of a Simple Sidebar in the Secondary Sidebar location (ie because you are using one of the three-column Genesis layouts on single Product pages), you will have to modify the above code as follows:

• Replace line 22 with this:

  remove_action( 'genesis_sidebar', 'gencwooc_ss_do_sidebar_alt' );

• Replace line 25 with this:

  add_action( 'genesis_sidebar', 'child_single_ss_do_sidebar_alt' );

• Replace line 39 with this:

  function child_single_ss_do_sidebar_alt() {

How to force use of a specific Simple Sidebar on Product taxonomy pages

This section is not yet complete…

/** Force a specific SS sidebar on Shop Taxonomy pages */

add_action( 'get_header', 'child_tax_ss_handler', 12);
/**
 * Intercept GCW Simple Sidebar handling so that a specified Simple Sidebar
 * can be used for all Single Product pages
 *
 * @see gencwooc_ss_handler() in genesis-connect-woocommerce/sp-plugins-integration/genesis-simple-sidebars.php
 *
 * Unhooks gencwooc_ss_do_sidebar() and replaces it with child_tax_ss_do_sidebar()
 *
 * This function is hooked to get_header with a priority of 12 so that it runs
 * after GCW's gencwooc_ss_handler() and therefore can unhook the relevant action
 *
 * @author Ade Walker
 * @link http://www.studiograsshopper.ch
 *
 */
function child_tax_ss_handler() {
	
	// Unhook GCW sidebar function
	remove_action( 'genesis_sidebar', 'gencwooc_ss_do_sidebar' );
	
	// Add new callback
	add_action( 'genesis_sidebar', 'child_tax_ss_do_sidebar' );
}

/**
 * Callback to load specified SS sidebar
 *
 * This is run instead of GCW's gencwooc_ss_do_sidebar() function
 *
 * Note: dynamic_sidebar() uses SS slug
 *
 * @author Ade Walker
 * @link http://www.studiograsshopper.ch
 */

function child_tax_ss_do_sidebar() {

	dynamic_sidebar( 'forced-sidebar-tax' );

}

When adding the above code to your custom template, don’t forget to replace 'forced-sidebar-tax' in line 41 with the actual slug (ID) of the Simple sidebar that you want to display on taxonomy archives.

Note that the above code ONLY affects the Primary Sidebar location. If you want to force the use of a Simple Sidebar in the Secondary Sidebar location (ie because you are using one of the three-column Genesis layouts on shop taxonomy pages), you will have to modify the above code as follows:

• Replace line 22 with this:

  remove_action( 'genesis_sidebar', 'gencwooc_ss_do_sidebar_alt' );

• Replace line 25 with this:

  add_action( 'genesis_sidebar', 'child_tax_ss_do_sidebar_alt' );

• Replace line 39 with this:

  function child_tax_ss_do_sidebar_alt() {

How to force use of a specific Simple Menu on Single Product pages

Coming soon…

How to force use of a specific Simple Menu on Product taxonomy pages

This section is not yet complete…

/** Force a specific Simple Menu on Shop Taxonomy pages */

add_action( 'wp_head', 'child_tax_gsm_handler', 12 );
/**
 * Intercept Genesis Simple Menus to force display of a
 * specified Simple menu ID
 *
 * Note: hooked to wp_head with priority of 12 to ensure that GSM
 * has already added the filter we want to replace
 */
function child_tax_gsm_handler() {
	
	// Unhook GCW function
	remove_filter( 'theme_mod_nav_menu_locations', 'gencwooc_gsm_theme_mod' );
	// Hook new function
	add_filter( 'theme_mod_nav_menu_locations', 'child_tax_gsm_theme_mod' );
}

/**
 * Replace the menu selected in the WordPress Menu settings with the custom one for this request
 *
 * @author Ade Walker
 * @link http://www.studiograsshopper.ch
 *
 * @see Genesis_Simple_Menus::wp_head()
 * @param array $mods Array of theme mods
 * @return array $mods Modified array of theme mods
 */
function child_tax_gsm_theme_mod( $mods ) {

	/** ID of specific Simple menu */
	$_menu = '29';

	$mods['secondary'] = (int) $_menu;

	return $mods;

}

When adding the above code to your custom template, don’t forget to replace '29' in line 32 with the actual ID of the Custom Menu that you want to display on taxonomy archives. To find the menu ID go to Dashboard > Appearance > Menus and then hover your mouse over the menu name at the top of the Menus screen. You will see the menu’s ID number in the browser’s link bar.

How to modify the default WooCommerce Single Product display

We’re getting deep into heavy customisation territory here, so I will only provide some general guidance to assist you to modify the default Single Product display. If you want to hire me, please contact me and I will be very happy to give you a quote!

WooCommerce hooks

WooCommerce uses a templating system that utilises action hooks to pull in the various elements seen on a Single Product page. By “elements”, I’m talking about the product image, thumbnails, title, description, tabs, related products, etc. In other words, all the stuff you see when viewing one of your product pages.

To know which hook is used for each element, take a look at WooCommerce’s woocommerce/woocommerce-hooks.php file. If you intend to customise the default layout you must get familiar with the contents of this file. Once you have identified the relevant add_action call, it’s relatively easy to manipulate the default layout. Let’s look at a few examples to show what’s involved…

Note: all of the customisations shown below require that you have created a custom single-product.php file as described here.

Remove Related Products

By default, Related Products are displayed at the bottom of the Single Product page. To remove them altogether, look at the contents of WooCommerce’s woocommerce/woocommerce-hooks.php file mentioned earlier, and you will see that Related Products are pulled in by this action:

add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);

So, to remove the Related Products, add this code to your custom single-product.php file:

// Remove Related Products from Single Product pages
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);

Place the above code above the following block of code in your custom single-product.php file:

/** Remove default Genesis loop */
remove_action( 'genesis_loop', 'genesis_do_loop' );

Move the Add to Cart button to below the Price

By default, WooCommerce displays the Add to Cart buttom below the Single Product’s summary description (the post Excerpt). To move the button to a position above the summary description, look again at the contents of WooCommerce’s woocommerce/woocommerce-hooks.php and you will see that the Add to Cart button is pulled in by this action:

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);

You now need to identify the add_action call which is pulling in the product summary description (the post Excerpt), which happens to be this:

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);

Looking at these two chunks of code you will notice that both elements are hooked to the woocommerce_single_product_summary hook, but with different priorities to determine the order in which they are output to the page. This means that to get the Add to Cart button to appear above the product summary description we will need to do two things: remove the existing action, and re-hook it at a higher priority (ie use a lower priority number) than the existing action call for the product summary description.

Therefore, add this code to your custom single-product.php file:

// Re-position the Add to Cart button
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30);
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 19);

Place the above code above the following block of code in your custom single-product.php file:

/** Remove default Genesis loop */
remove_action( 'genesis_loop', 'genesis_do_loop' );

As you can see, it is not that complicated to do this type of manipulation providing that you identify the correct action call to use, and take account of the priorities when re-hooking.

This section may be expanded in future to demonstrate other examples…

Integrating with the Prose theme by Studiopress

The Prose child theme by Studiopress uses a “custom code” box in the theme settings for adding custom PHP code, rather than the usual functions.php. However, due to the way the custom code box works, if the add_theme_support() code is added to the custom php box, when you activate GCW you will get an error telling you to add the add_theme_support() code.

This is all to do with WP hook firing order and, to get around this error message, you must place this code:

add_theme_support( 'genesis-connect-woocommerce' );

directly into the theme’s functions.php file.

This isn’t ideal because if and when Prose is updated, functions.php will be overwritten and your edit will be lost. However, until I tweak GCW, this is the only workaround to get GCW to work properly with Prose. I’m working on a more elegant solution for GCW but, in the meantime, follow the above advice.