Theming with Jigoshop

Jigoshop comes with basic styling, and can be used with our Jigoshop themes, but if you truly want to make it match your WordPress theme you can do so using CSS and template files.

You can style the plugin using your theme's stylesheet: just add new style rules to that to style the shop's content. To see Jigoshop's default styling, see frontend.less and frontend.css.

Overriding Template Files in Jigoshop

The following files are in Jigoshop's template folder:

• archive-product.php
• checkout/form.php
• checkout/pay_for_order.php
• checkout/review_order.php
• loop-shop.php
• product_taxonomy.php
• single-product.php
• single-product-reviews.php
• taxonomy-product_cat.php
• taxonomy-product_tag.php

If you want to customise these templates you can do so (in an upgrade-safe manner) by copying the files into a folder called jigoshop inside your theme folder.

For example, if I put a file called archive-product.php into my theme's jigoshop directory, it would be used instead of the plugin's version of the file.

Remember, only copy across the template files you need to change. This will make updates easier.

Customising the templates using Hooks

Rather than overriding template files, you can change things or insert content using hooks. For example, if my theme needed a different wrapper element I could change the content wrappers used from:

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

to:

<section id="main">

by adding some hooks to my theme's functions.php file. Jigoshop outputs it's wrappers using two functions:

• jigoshop_output_content_wrapper
• jigoshop_output_content_wrapper_end

These are hooked into two actions in the template:

• jigoshop_before_main_content
• jigoshop_after_main_content

So you first un-hook the functions:

remove_action( 'jigoshop_before_main_content', 'jigoshop_output_content_wrapper', 10);
remove_action( 'jigoshop_after_main_content', 'jigoshop_output_content_wrapper_end', 10);

Then hook in your replacements (of which the markup should match the rest of your themes layout):

add_action('jigoshop_before_main_content', create_function('', 'echo "<section id=\"main\">";'), 10);
add_action('jigoshop_after_main_content', create_function('', 'echo "</section>";'), 10);

For a list of hooks, see here: Action and Filters . For help on actions see WordPress' documentation on add_action and remove_action. To see what actions we use in Jigoshop see the file jigoshop_template_actions.php in the plugin.