How to use Genesis Connect for WooCommerce

Genesis Connect for WooCommerce plugin

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!

  • This article was updated on 18 December 2013
  • Current version of GCW is compatible with WooCommerce 2.0.20
  • Current version of the plugin is: 1.1.2
  • Requires WooCommerce 1.5.2+
  • Downloads: 389,992

For those upgrading from an earlier versions (0.9.4 or older) of Genesis Connect for WooCommerceC, you do NOT need this line of code in your theme’s functions.php

add_theme_support( 'woocommerce' );

Note: Versions since 0.9.5 take care of WooCommerce 2.0+ compatibility so that you don’t have to. Therefore, make sure you’re using the latest version of GCW!

If, having upgraded to WooCommerce 2.0 you are experiencing layout or other issues on your shop pages, it is very probable that code you have added to your custom GCW templates is no longer compatible with WooCommerce. This is nothing to do with the GCW plugin, which works 100% fine “out of the box”. To fix the issue, you will need to identify this code in your templates and update it to be WooCommerce 2.0 compatible. Please refer to the WooCommerce Docs and Wiki for assistance with this.

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

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

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.

If you are migrating an existing WooCommerce site to a Genesis child theme, please refer to the How to deal with existing custom WooCommerce templates section further down this page to learn how to integrate existing customisations with GCW.

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.

I hope you have found these tips useful. If so, please leave a comment. Note: I do not provide support for this plugin, nor Genesis, except via the official Studiopress support forums.

Comments

  1. This is awesome..Thanks for this tutorial and plugin. Will definitely be hanging around here..

    Mike

  2. Great reference article! I’ll be looking forward to seeing more on forcing the layout for taxonomy pages. I’ve hung around Genesis for awhile, but am new to WooCommerce. Appreciate the good tidbits here.

  3. Ade

    Thank-you for this…. I have been battling with how to get a single product page looking like a landing page – one quick skim through your tutorial and aha!! I knew what to do and where to do it

    Great work – I am having a big push towards getting Woocommerce customisation as another arrow to my Genesis bow, and this one tutorial has been a great help

    Thanks again
    Anne

    • Hi Anne,

      Thanks for the feedback. Glad to hear that the tutorials have been useful.

      I am updating them quite regularly, so do subscribe to make sure you don’t miss any updates.

      🙂

  4. Hello Ade
    Great article!
    I am new to WP and Woo and I wonder how to write php directly into widgets, pages and more places in the form

    Is there a way to do this?

    Thanks

    Have a nice day
    Poul

    • Hi,

      Not sure which form you are talking about.

      If you are asking about writing PHP directly into the post editor, the answer is no, not possible. There are plugins out there that will let you do this for text widgets. A search on WordPress Extend should turn up at least one such plugin.

  5. Hello Ade,

    Is GCW 0.9.3 incompatible with WooCommerece 1.5.6? I am trying to solve a thumbnail issue and wanted to rule out compatibility issues.

    Thanks, Todd

    P.S. I sent you a rather detailed PM at StudioPress identifying this issue.

    • Hi,

      Yes, it’s compatible. However, if your theme has custom code in it, it’s possible that you will need to tweak this code to work with WooC.

  6. Hi,

    I am trying to create my own style.css in a woocommerce folder under my theme, but when I pull up the woocommerce.css it is all on one line and a jumbled mess. Is there a way to find a clean copy of the css to copy over and edit?

    Thanks!
    Tyy

  7. Hi Ade,
    Thanks for posting and running this blog, sure its a lot of work to do, and its much appreciated by a newbie like me.
    So I am trying to remove the Product Description tabs in woo commerce for a site I am working on.
    I duplicated my single-product.php page and placed it in a folder called woocommerce in my Genesis child theme ( Lifestyle ) When I did this I could not get the product description tabs to remove – however if I added the code to my functions.php file it worked perfectly.
    So I am obviously concerned that while I got it to work- if the lifestyle theme gets updated the woocommerce change will be overwritten

    Any thoughts on what I might be doing wrong here .
    * I am using the latest version of wordpress, genesis, the woocommerce-connect plugin.
    I am pretty sure I am doing something stupid- ( know myself well ) as I can get rid of the description tabs fine when the code is pasted into the functions.php file

    Best

    Scott V

    • Hi Ade,

      Dooh – so I found my bad mistake out myself here. I created a new directory called woocommerce but nested the single-page.php in a directory within that called templates. I removed it so it is not in the template directory – just in the woocommerce folder and your solution worked perfect- sorry for the previous post-

      Scott V

      • Hi Scott,

        Cool! Glad you worked it out.

        However, you raise a good point re future updates to a child theme (especially if using a Genesis child theme like Prose) wiping out the theme’s woocommerce folder. In practice, child themes are rarely upgradable in the same way that Genesis is, or any plugin. In other words, “upgrading” from one child theme to another is not simply a question of overwriting what is already there.

        Of course, if you’re concerned about this, the safest route is to “edit” GCW templates by unhooking/re-hooking actions rather than actually creating new custom templates. To add further precautions, put this code in a plugin rather than in the theme’s functions.php.

        Anyway, you’ve given me an idea for a future tutorial on this subject. Cheers!

        🙂

  8. Hi,

    This is great thank you! I was working with the WooCommerce alone for a few days and this is much easier.

    I have a few questions:

    1) How would I go about making my product and catagory pages 3 columns instead of 2 see here I would like 3 columns of products. Would I have to create the templates folders as you described or maybe just add some code to my functions.php file?

    2) As you can also see, there is that yellow highlight mark over the number in each catagory and I want to remove it. Again, would I need to set up the template files to edit this?

    These just seem like small, simple things and I am brand new to WordPress so if I don’t have to re-create files, etc… I would rather not.

    My site is a test site right now so please excuse the mess.

    Thanks for your help!

    • Hi,

      1. No, you don’t need to make a template. Check the WooCommerce docs to find out how to change the number of product columns. There’s a WooCommerce filter which you can use for this.

      2. This is CSS. You will need to add a style for “mark” (without the quotes) with background-color:none;

      PS: This isn’t a support forum. 😉

      Glad you are enjoying Genesis and WooCommerce.

  9. Hi Ade,

    I’ve been using a Genesis child theme, WooCommerce, and Genesis Connect for WooCommerce together for several months on a site I am developing (I can provide login details privately if you need). Today I updated to the latest version of WooCommerce 1.6.5.2 along with the latest versions of Genesis and Genesis Connect for WooCommerce, and now the product title h1 is displaying twice on the single product page. I did some Googling and it looks like WooCommerce changed the way they hook the product title, so some themes are having this duplicate title problem now. I believe the Genesis Connect for WooCommerce plugin needs to be updated to fix this. Can you provide a function or updated single-product.php template? Or if I am completely wrong, just let me know 🙂

  10. This is awesome!! Thank you for investing your time and effort.

  11. Hi – hope you can help with this – I’m trying to add a little space around the View Cart and Checkout boxes in the sidebar Shopping cart on this page – http://cdmpta.com/class-of-2013/. Have tried every which way, including many of the suggestions in this article without success. Am using Genesis Connect for StudioPress/WooCommerce. Can you help? Thanks!

  12. Right now it appears that WooCommerce 2.x and Genesis Connect for WooCommerce do not work well together. Is an update planned for the plugin?

    • Hi Marc,

      Can you describe what is breaking, exactly? I don’t have any issues on my test site…

      Thanks.

    • A tip: make sure that you have this code in your child theme’s functions.php:

      add_theme_support( 'woocommerce' );

    • GCW version 0.9.5 fixes the above issue.

      With this version, there is no need to add the theme support for woocommerce as this is now done for you by GCW 0.9.5.

  13. Ciaran Whelan says:

    Hi there, thank you for taking the time to write this info for us to learn from.

    What I am wanting to do is follow the standard WooCommerce Codex for modifying the other templates such as cart.php

    In the WooCommerce Codex they advise to create woocommerce folder to the child theme, then simply add the templates you wish to override to that folder. It seems that whatever I do to the templates they do not seem to take effect when using Genesis and the GCW plugin.

    Is this because something in the plugin is not allowing me to edit the WooCommerce templates in my child theme?

    Thanks..

  14. Ciaran Whelan says:

    Hi there,
    Not sure what happened with my message last night? However I have re read all instruction here, and still having difficulty in getting the other hierarchy of WooCommerce to be edited. For instance I have created the folder WooCommerce in the child theme, added the folder single-product, and started to edit a few template parts ( child-theme/woocommerce/single-product/title.php and also child-theme/woocommerce/single-product/meta.php )

    When I make changes to these files, they do not reflect on the product.

    I wonder if you might shed some light on this if you could spare a few minutes, it will be greatly appreciated.

    Ciaran

    • Hi Ciaran,

      I think you’re right – GCW doesn’t deal with this scenario properly. I’ll look into it.

      Glad you found the article useful. 🙂

    • UPDATE:

      Actually, GCW does play nice with this feature of WooCommerce. Make sure that you have replicated the same folder structure in your theme’s woocommerce folder. For example, your custom cart template would go here:

      yourtheme/woocommerce/cart/cart.php

  15. Fran Eleazer says:

    Are there any changes to this since the release of Genesis 2.0, or does all of it still apply?

    Fran

  16. Hi,
    I followed a link from the StudioPress forums to here and I wonder whether you could say what the situation is as of now, October 2013, and specifically:

    Does the Genesis Connect for WooCommerce plugin work with Genesis Version: 2.0.0 that was released on August 7, 2013 ?

    Does the plugin work with the HTML5-ready themes?

    And does WooCommerce plugin work with these OK?

    And finally, are there any StudioPress themes that are particularly suited to the plugins ?

    Thanks,
    David

    • Does the Genesis Connect for WooCommerce plugin work with Genesis Version: 2.0.0 that was released on August 7, 2013 ?

      Yes!

      Does the plugin work with the HTML5-ready themes?

      Yes. Woocommerce has been using HTML5 markup for some time and the plugin uses Woocommerce’s markup.

      And does WooCommerce plugin work with these OK?

      As I don’t know the ins and outs of all possible G child themes out there, I can’t say for sure. However, I can confirm that GCW and WooC work fine with the Genesis HTML5 sample theme.

      And finally, are there any StudioPress themes that are particularly suited to the plugins ?

      Any Genesis child theme is suitable in terms of code, backend, etc. You will have to decide which theme suits best your needs re look and feel.

      • Thank you, that’s a big help.

        Does what you wrote about the Prose theme still apply?

        • Great!

          Honestly, I haven’t kept track to see if a new version of Prose has been released since I wrote the advice above. Theoretically, what I wrote about Prose should still apply as I doubt there has been any change to the underlying code (too many sites would break!). Best bet is to try it and – if you do have an issue – post back so that I can look into it.

  17. A comprehensive and worthy resource. Thank you and perhaps one day I may use your customisations services.

  18. Hi im very new to all this wordpress and few months ago i bought a studiopress theme with the shop all built in, so i downloaded the genesis connect and woo commerce, the quest is are there any tutorials or places i go can that will show me how to setup my store end like where to put the pages that are already made? when i go to my pages there are tons of them already made like cart, customer login, and so etc… i just dont know where to put all these pages to make the shop part function right,

    • Correction on my post- I meant I had bought a theme by designer “pretty darn cute” and was built on a genesis framework

  19. Im sorry, but to add one more thing if you look at the theme “moddern blogger pro” the shop part that it was im “trying” to achieve but just not sure on where to even begin!

    • Hi Angie,

      If you need support about how to use WooCommerce you need to look at the setup guides and tutorials on Woo Themes’ WooCommerce pages.

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*


+ seven = 13