Themed Jigoshop 1.8
Update 20.11.2015 – Suffusion Commerce Pack was updated to 1.12 version and fixed the incompatibility with newer versions of Jigoshop, so, this article remain here only for reference. Just install the new version of the plugin and everything will work as expected.
Update 06.01.2014 – Finally, Jigoshop was updated to 1.8.1 and Jigowatt seems to preserve their options for enqueuing the styles. So, I recommend to use the patch for Suffusion Commerce Pack (Solution 2.). This way you will not have to rebuild your files at each update of Jigoshop (when Sayontan will update Suffusion Commerce Pack, will treat this problem too).
Post Updated: solving the problem by changing Suffusion Commerce Pack (see Solution 2.).
As you already know I am a fan of Suffusion theme but also a fan of Jigoshop e-commerce plugin. In fact I was probably the first user of Suffusion which has adapted the templates of Jigoshop to work with the theme. My friendship with Iefie started exactly with these templates which I put together in a child theme for helping him with one of his beginning sites. After Sayontan wrote Suffusion Commerce Pack, my templates have become obsolete and I didn’t used them anymore. But I still use Jigoshop for all sites where e-commerce functionalities are needed.
With the last update of Jigoshop I observed some malfunctions. One of them was the malfunction of Sales Template and was treated in my previous post about Jigoshop 1.8. and Suffusion.
But another one bother me after updating the plugin to 1.8. version. This new version seems to not take in account the option for “Include extra theme styles with Jigoshop frontend.css”. What I mean? The users of Jigoshop in Suffusion theme have been accustomed to see a themed output of Jigoshop after activating Suffusion Commerce Pack. The colors of buttons was adapted to the skin used, the prices was presented in a themed ribbon.
If someone not like this look or wish to add his own styles was enough to deselect the option “Include extra theme styles with Jigoshop frontend.css” from Jigoshop -> Settings -> General and then only Jigoshop styles was applied (but also with the colors corresponding to selected skin).
Looking in jigoshop.php of 1.7.3 version we can see that jigoshop styles are enqueued with this function:
1 2 3 4 5 6 |
if ( $jigoshop_options->get_option( 'jigoshop_disable_css' ) == 'no' ) { if ( $jigoshop_options->get_option( 'jigoshop_frontend_with_theme_css' ) == 'yes' ) { wp_enqueue_style( 'jigoshop_frontend_styles', $frontend_css ); } wp_enqueue_style( 'jigoshop_theme_styles', $theme_css ); } |
In jigoshop.php of this new version (1.8) the styles are enqueued by this function:
1 2 3 4 5 6 |
if ( $jigoshop_options->get_option( 'jigoshop_disable_css' ) == 'no' ) { if ( $jigoshop_options->get_option( 'jigoshop_frontend_with_theme_css' ) == 'yes' ) { wp_enqueue_style( 'jigoshop_theme_styles', $frontend_css ); } wp_enqueue_style( 'jigoshop_styles', $theme_css ); } |
In this new configuration, no matter what you select at “Include extra theme styles with Jigoshop frontend.css” will see only the colors defined in frontend.css of Jigoshop (orange with green) with all thumbnails shrinked to 150×150 px (another problem here – these dimensions stick no matter what you set at Jigoshop -> Settings -> Images). In this new construction scp.css, the stylesheet provided for themed version by Suffusion Commerce Pack, is never loaded.
Solution 1. So, the first solution to have a themed output is to change back the function from jigoshop.php to the previous version. Of course this is not the safest option and you will stay at the mercy of Jigowatt to revert the function in the next release. Can download the changed file from here: Changed jigoshop.php
Solution 2. This solution presumes to change Suffusion Commerce Pack instead of jigoshop.php, according to the new call from Jigoshop. Again, is not safe for upgrades, as an update of Suffusion Commerce Pack will overwrite the new file. But I am confident that if Jigoshop will maintain the new call to styles, Sayontan will release himself a new version of SCP to correct this error.
So, this solution presume to edit suffusion-commerce-pack.php from /suffusion-commerce-pack folder and look for the function add_scripts() (around line 306). Replace the “if” block for Jigoshop dependencies:
1 2 3 |
if (function_exists('is_jigoshop')) { $dependencies[] = 'jigoshop_frontend_styles'; } |
with this new block which test the version of Jigoshop and add the dependencies accordingly:
1 2 3 4 5 6 7 |
if (function_exists('is_jigoshop')) { $jigoshop_db_version = get_site_option( 'jigoshop_db_version' ); if ( $jigoshop_db_version < 1307110 ) { $dependencies[] = 'jigoshop_frontend_styles'; } $dependencies[] = 'jigoshop_theme_styles'; } |
Can download this new version of suffusion-commerce-pack from here:Changed suffusion-commerce-pack.php
Solution 3. A safer way is to include yourself the themed stylesheet. After activating Suffusion Commerce Pack which is required anyway for wrapping the output of Jigoshop in the markup of theme, the needed stylesheet is installed at /wp-content/plugins/suffusion-commerce-pack/include/css/scp.css but, as I said, the inclusion of file by Suffusion Commerce Pack not working anymore and the styles are never loaded. But you can include this file manually by adding the absolute path to it at Suffusion Options -> Back-end -> Custom Includes -> First Additional Stylesheet link (https://yoursite.tld/wp-content/plugins/suffusion-commerce-pack/include/css/scp.css). After that you will have themed Jigoshop pages, but of course, the setting from Jigoshop -> Settings -> General will not have effect anymore (the styles will be generated based on scp.css) – but is better than orange and green, no?
What solution to choose? Depends on the next move of Jigowatt. If they will maintain the change introduced in 1.8. version, probably Sayontan will upgrade Suffusion Commerce Pack to cover the change. Until then can modify the suffusion-commerce-pack.php file, for having a working themed Jigoshop. Make a copy of original file, because if Jigowatt will revert to the old call to styles, Suffusion Commerce Pack will start to work again with Jigoshop without changes. But, any move will be assumed by Jigowatt or Sayontan, the solution of manual inclusion of styles will cover you.
And for solving the problem with images on Catalog Page can add at Suffusion Options -> Backend -> Custom Includes -> Custom Styles:
1 2 3 |
ul.products {width:100%;} ul.products li.product {width:24%;} .products li a img {width:100%;height:100%;} |
(The code above is calculated for 4 products per row, you will have to recalculate the width for li.product as needed for different numbers of products (the value need to be less than 100%/number of products – by eg. for 3 products need to be 32%). Of course you need to set the dimensions of images at Jigoshop -> Settings -> Images (and maybe need to regenerate thumbnails with the help of a plugin like Force Regenerate Thumbnails)
Thank you, Florin, you are very kind, as always 🙂
Nice job!