I was recently given the opportunity to develop an eCommerce site for a client of mine. I had developed a few eCommerce sites previously, all on different platforms, but for this project we wanted to go with WordPress as the CMS, and so my mind started to ponder back to eCommerce plug-ins I had used on previously. Honestly the only remotely good one was WP eCommerce, and I actually ended up have a lot of issues with implementing it, as it was very “buggy” at times. So I set out to hopefully find a new solution that would integrate as an eCommerce platform with WordPress and that’s when I came across Shopp.
After reading through the documentation and watching a few of the demo videos I was pretty much sold, but knew that I wouldn’t really know how good of fit it would be until I was able to install it in my own WP environment. Unfortunately this became a little bit of a leap of faith as Shopp is not a free plug-in. I had to pony up the doe before I would even know if it was good or not. This is why I am writing this review and tutorial, to hopefully help people make a decision on using Shopp without having to feel like they might be wasting their money in making the “$55 blind leap”.
Luckily for me, I wasn’t let down. Overall I have to say I give the plug-in an 8.5 out of 10. It is very impressive, very robust and easy to use, but it did have a few things that really irked me and I’ll touch those as well as the all of the benefits I found.
Pros
- Easy to install WordPress plug-in
- Plays nicely with other plug-ins
- Dashboard widgets for at-a-glance sales and marketing performance tracking
- Shortcode support for placing products and categories in blog posts or pages
- Handles multiple product images with easy drag-and-drop sorting
- Basic inventory management and low-stock e-mail alerts
- Support for selling digital & physical products and donations
- Search engine optimized shopping pages
- Product image galleries with beautifully smooth transitions
- Support for custom checkout fields and product inputs
- Fast product search
- Customizable product drill-down menus
- Built-in tiered rates based on a flat rate, order quantity, or weight
- Custom discount settings: Apply any of your discount options using promo/coupon codes
- Standards-compliant mark-up output
- Customizable shopping interface templates (Very easy to customize and control)
- Over 200 comprehensive template tags for unparalleled custom template development
- AJAX-capable shopping cart and development API for custom cart behaviors
These are just a few of the great features that I found very satisfying in using this plug-in. You can view their entire list of features here.
Cons
- Conditional Tags were a little tricky to figure out
- Permalink structure does not include a full path to a product by default
- Documentation is very scattered and hard to navigate
- Cost money / other eCommerce plug-ins don’t (but in my opinion it’s worth it)
How to Use Conditional Tags
As I stated earlier I am very happy overall with Shopp, and out of the very few “Cons” that I came across while using it, there was really only one that made me pull my hair out at times. It was the lack of documentation of using conditional tags. WordPress has a conditional tag structure already built in that lets you easily change what content is displayed and how that content is styled on a particular page depending on what conditions that page matches. A good example was that in my “Shopp” I wanted to add an “active” class to the category/page the user was currently on. On a default WP page this is simple, you would use the following to do so:
<a href="/about-us/"
<?php
if (is_page('23')) {
echo " class=\"current\"";
}?>
>
Link to About Us
<a/>However, there is no notation in the Shopp documentation on how get this to work using the Shopp templates. Since Shopp uses it’s own templating system, the only way to accomplish this task would be to create a separate template for every category… wow that could really be a pain depending on how many categories you have, and have to add new templates down the road and as more categories are created!
Luckily after many hours of pulling what hair I have left out of my skull, I thought of this. Which actually works! It seems that Shopp does contain conditional tags, but they’re not documented anywhere! To add a class to a link for a particular category you would the following:
<a href="/about-us/"
<?php
if(shopp('category','is-category','id=1')) {
echo " class=\"current\"";
}?>
>
Link to About Us
<a/>If you don’t need to change what content is displayed, only how then you can accomplish this completely through css and this nifty little piece of code:
<?php shopp('category','name'); ?>What this will do is print the category name of current product/section you are on. Here is an example of how you might use this to you styling benefit:
Let’s say, that for some reason, you wanted to set all of the links to be blue in the “Movie” category of your online store. Well, we will start by simply adding the php snippit above as a class/id value for the hightest surrounding div/element possible like so:
<div class="<?php shopp('category','name'); ?>;">
<a href"/link-1/">Link 1</a>
<a href"/link-1/">Link 2</a>
</div>This will now give the div/element a class of the category you are currently viewing. In this case we are viewing the “Movies” category, so the class for this div will be set to “Movies” (yes it is case sensitive). Next we just need to add some CSS to help style the links inside of that div by using a descendant selector like so:
.Movies a {
color: blue;
}This will now set all of the links to be blue, but only on the “Movies” category and single product pages.
I hope that this little tutorial is able to save some of you from losing as much hair as I did in finding this solution. Other than this little bump in the development process, I think Shopp is a fantastic plug-in, it is well worth the cost, and I definitely recommend it to anyone looking to supply themselves or their clients with an easy to use eCommerce solution.