How to Properly Wrap Jigoshop Content in your WordPress Theme

Please Note that this guide is not maintained. See the KB for up to date guide

There is a bit of a challenge when first using the Jigoshop eCommerce plugin for WordPress in a theme for newcomers. The trick is to properly replace Jigoshop content wrappers with the ones in use in your theme.

You would want to do this for most themes, as Jigoshop out of the box is only guaranteed to work with the twenty-ten and twenty-eleven themes. If you notice your sidebar(s) are below the products that Jigoshop lists instead of beside, then that may be your first indication that you need the following.

You have to first unhook (the provided functions below do this for you) the ones in use by Jigoshop which are:

<div id="container"><div id="content" role="main">

… and then hook in yours. The following are example containers and how to make them; you will need to analyze yours and replace them as needed in the first function. (more on this later).

function mytheme_open_jigoshop_content_wrappers()
{
    echo '<div class="container"><div id="content"><div id="left-area>';
}

function mytheme_close_jigoshop_content_wrappers()
{
    echo '</div></div></div>';
}

function mytheme_prepare_jigoshop_wrappers()
{
    remove_action( 'jigoshop_before_main_content', 'jigoshop_output_content_wrapper', 10 );
    remove_action( 'jigoshop_after_main_content', 'jigoshop_output_content_wrapper_end', 10);
    
    add_action( 'jigoshop_before_main_content', 'mytheme_open_jigoshop_content_wrappers', 10 );
    add_action( 'jigoshop_after_main_content', 'mytheme_close_jigoshop_content_wrappers', 10 );
}
add_action( 'wp_head', 'mytheme_prepare_jigoshop_wrappers' );

You would place all of this code somewhere into your theme’s ‘functions.php‘ file; doesn’t much matter where but somewhere at the end before any closing ?> PHP tag is as good as anywhere.

So the hardest part is determining what your wrappers are and it’s been suggested to look at your ‘page.php‘ file. That assumes that your theme has one of course. Mine doesn’t, so ‘loop.php‘ might also be a good choice.

Generally, we will want the containers after the WordPress ‘get_header()‘ function call and before the 'the_post()' function call, but this is also very theme dependent. If we look at the WP 3.2 new default theme, twenty-eleven, and it’s ‘page.php‘ file we will see:

<?php get_header(); ?>
    <div id="primary">
        <div id="content" role="main">

            <?php the_post(); ?>

            <?php get_template_part( 'content', 'page' ); ?>

            <?php comments_template( '', true ); ?>

        </div><!-- #content -->
    </div><!-- #primary -->
<?php get_footer(); ?>

So … to make Jigoshop properly wrap content for the twenty-eleven theme, we need the ‘primary‘ and ‘content‘ div’s. These are ID div’s, some may just be CSS class’s as my first function above uses.

My first function above to open content for twenty-eleven becomes:

function mytheme_open_jigoshop_content_wrappers()
{
    echo '<div id="primary"><div id="content" role="main">';
}

… and since we are only opening 2 div’s, then we only need to close 2 in the second function to close the wrappers. There, you would remove one of the closing div tags so that there are only 2.

Source: http://diverge.blogdns.com/blog/how-to-properly-wrap-jigoshop-content-in-your-wordpress-theme/