How to Properly Wrap Jigoshop Content in your WordPress Theme

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 theme. If you notice your sidebar(s) are below the products that Jigoshop lists instead of beside, then that is your first indication that you need the following.

You have to first unhook 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 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:

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.

Hope this helps everyone.

 

18 Responses to How to Properly Wrap Jigoshop Content in your WordPress Theme

  1. 61pixels says:

    Great post Jeff.

    I think it is also important to explain to “regular users” how they need to check what their theme uses.

    A good place to start would be to go to their appearance -> editor, and to take a look at page.php (which is the default output for that themes pages). Users should pay attention to the div’s that are being output immediately after the get_header() call.

    Those typically will be the divs they then need to make sure jigoshop is outputting and can be added using the method you described.

  2. Rob Couty says:

    Jeff,

    Thanks for this article. This is exactly what I needed and can’t thank you enough for it.

    RC

  3. Naomi says:

    Hi Jeff,

    What do you mean by ‘unhook’ ?

    Does that mean I need to delete it?

    Thanks,
    Naomi

  4. Naomi says:

    Hi Jeff,

    I’ve entered the code you’ve outlined above into the functions.php file of my theme. But I noticed that while the div tags are wrapping around the product, it seems to have kicked the sidebar out of the container. This isn’t true on any other pages.

    Please advise if possible. :)

    • Jeff Parsons says:

      Then you may not have exactly the right wrappers in place. A sidebar appearing anywhere other than ‘normal’ is a usual indication of in-correct wrapping. You should post on the Jigoshop community support forums with a link to your site and get it looked at if you need it. It could be something else of course, but it’s hard to say without looking.

  5. Thanks a lot for the tip, it works rather well with the Graphene theme, we had been tinkering for too many days when we discovered it. Now we can go to bed early again. :p

  6. mallik279 says:

    Hi Jeff,

    I have done exactly the way you have mentioned above. I am using a business theme which calls some other functions in DIV tag to replace the class name. ID is “content-container”. My code in PAGE.PHP looks like this.

    <?php
    get_header();

    if(have_posts()){
        while(have_posts()){
            the_post();
            $subtitle=get_post_meta($post->ID, 'subtitle_value', true);
            $slider=get_post_meta($post->ID, 'slider_value', $single = true);
            $slider_prefix=get_post_meta($post->ID, 'slider_name_value', true);
            if($slider_prefix=='default'){
                $slider_prefix='';
            }
            $layout=get_post_meta($post->ID, 'layout_value', true);
            if($layout==''){
                $layout='right';
            }
            $show_title=get_opt('_show_page_title');
            $sidebar=get_post_meta($post->ID, 'sidebar_value', $single = true);
            if($sidebar==''){
                $sidebar='default';
            }
           
            include(TEMPLATEPATH . '/includes/page-header.php');
    ?>

    <div id="content-container" class="content-gradient <?php echo $layoutclass; ?> ">
    <div id="<?php echo $content_id; ?>">
           <!--content-->
        <?php
       
        if($show_title!='off'){?>
            <h1 class="page-heading"><?php the_title(); ?></h1><hr/>   
        <?php }

    the_content();
        }
    }

    ?>

    And, I have added code in FUNCTIONS.PHP as bellow;

    function mytheme_open_jigoshop_content_wrappers()
    {
        echo '<div id="content-container" class="content-gradient <?php echo $layoutclass; ?> "><div id="<?php echo $content_id; ?>">';
    }

    function mytheme_close_jigoshop_content_wrappers()
    {
        echo '</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' );

    Even after this, my products page remains same. no changes. My issue is not only getting the sidebar in place, but I want the wordpress regular widgetted sidebar. But, I am seeing some kind of categorized sidebar where the plugin is spitting all my pages, archives and categories. I don’t know why Jigoshop is doing this. I have tried so many ways to get rid of this. I could get rid of it, but I can’t get regular wordpress sidebar instead. Please help me if you know what I am doing mistake.

    Just for your reference. I have a screen shot of my front page of products page. Please take a look at it.

    Please click here to view my Product Page

    Thank you.
    Arjun

    • Jeff Parsons says:

      Well, certainly your’s is a little more involved, but not insurmountable. First, you are using variables do help define classes and are using them within a function, (that I supply, the first one) and if you don’t do anything else, those variables will be empty. You have to let PHP know to access them externally from the function by defining them as global variables. Second, since you are already inside of a PHP function you don’t need to wrap those variables in PHP tags as you have. Last, some proper string concatenation to build the string. I have changed it using your classes with proper double quote escaping. Try this:

      function mytheme_open_jigoshop_content_wrappers()
      {
          global $layoutclass, $content_id;
           
          echo "<div id=\"content-container\" class=\"content-gradient " . $layoutclass . "\"><div id=\"" . $content_id . "\">";
      }

      Hard to say for sure without testing, but that should work.

      Sidebars, well, Jigoshop does nothing special for sidebars other than call for one if your theme supports it. The actual call is for sidebar-shop.php in your theme. If not found, then sidebar.php is called. If not found, then WordPress default templates are used and this is standard WordPress behaviour.

  7. jack says:

    thanks alot jeff..
    I’m a new user with Jigoshop and I have used the Skeleton theme. Once I activated the theme and deactivated the jigoshop frontend.css, my product images on my shop page has disappeared, leaving only the product name. Has this problem got to do with the wrapping of content in Skeleton, conflicting with Jigoshop’s template?

  8. David says:

    Hi Jeff

    First of all, thanks a lot for the tips in this article, it saved me a lot of time.

    Your instructions work well with my theme, except one area still won’t wrap properly – product reviews. These seem to ‘fall off’ the bottom of the page; the styling doesn’t pick up the content and the footer is applied as if there was nothing there.

    Wondering if this is a generic problem which requires more hooks, or something specific with my theme.

    Cheers, David

    • Jeff Parsons says:

      Hi David,

      Hard to say for sure without seeing it. Generally, it’s not an issue, no. Why don’t you post on the Jigoshop community forums with a few specifics and a link and get it looked at.

      http://forum.jigoshop.com/

      I’ll be happy to take a quick look at least.

      Cheers,

      -Jeff

  9. Sean says:

    Hi Jeff,

    I just ran across your thread and see that you have a lot of really useful info. Wish i would have come across some of this before. But I did however find and bookmark some answers to questions above. Like the sidebar issue.

    I found this thread that had ALOT of usefulness. :) Read both pages though.

    Short answer to those not wanting to read it, I used this fuinction in my child theme functions.php page.

    /**
    * Sidebar
    **/
    if (!function_exists(‘jigoshop_get_sidebar’)) {
    function jigoshop_get_sidebar() {
    return false;
    }
    }
    It worked nicely for me. Still building it though. having some issues with the share button placement within each product. Take a look if you have a min. Drifted Art clustered page

    Thanks,
    Sean

    • Jeff Parsons says:

      Hi Sean,

      Thanks for the comments. Read through what I could of that thread without a subscription and some interesting stuff for theming with Hybrid.

      If your intent is solely to remove the sidebar then this actually the preferred way by placing it in your theme’s functions.php:

      remove_action( ‘jigoshop_sidebar’, ‘jigoshop_get_sidebar’, 10);

      … although what you have will work quite well too. Most Jigoshop actions for theming at least are in the file jigoshop/jigoshop_template_actions.php and placing a corresponding ‘remove_action’ in your theme’s functions.php will as suggested … remove that action from occurring.