Get Grid View Without the Gold Cart

gratuitous blog post imageWPSC means WordPress Shopping Cart, a plugin for WordPress.

What: Too cheap to buy a Gold Cart Module for your WPSC plugin? Well, it isn’t only out of cheapness that I’m writing this (anyway I make my clients buy the module for other reasons like more payment gateways than PayPal) it’s the constant battle to optimize SEO. This shopping cart plugin is possibly the best thing to happen to WordPress but it gives less than great SEO. Duplicate title tags,missing or too short meta descriptions.

How: Use the WordPress editor in Visual Mode to insert a product group into a Page or Post.

The more familiar I get with how low ranking websites get knocked for duplicate content (yep, Google gives more leeway to popular sites with loads of incoming links and high page rank) the more value I see in adding a product group/category to a page or post rather than use the one page to show your entire store.

The editor in HTML mode will not show the shopping cart button. And if you turned this option off in your user profile you won’t ever see this button. So go to your user profile and turn Use Visual Editor back on.
So go to Write > Page and click on the cart icon to choose a category from product groups. Select, insert,save. Once you preview you’ll see that the products scroll down the page.
Don’t publish just yet.

Here is some sweet sweet CSS to fake the Grid View, save 20 bucks and get some good SEO working (that those rich guys that paid for Grid View probably won’t have).
This part is so incredibly easy I could kiss myself. In fact I will.

Fake Grid View CSS
Add this to style.css in your theme folder:
[css]
#homepage_products{overflow:hidden;}
#homepage_products .category_view_product .product_details .wpsc_product_title{font-size:12px;}
#homepage_products .category_view_product{width:200px;height:300px;float:left;margin:8px 3px;}
[/css]
The height and width and margins will have to be tweaked to fit your wishes.You can make the product titles smaller and change color.You can also have borders.It’s wide open for customization.But the float:left is what matters and creates the grid.Having overflow:hidden in the wrapper div keeps the page from looking screwy.

SEO
Next thing is to download the All in One SEO pack plugin for WordPress, unzip, upload to plugins folder, activate settle up the options and go back to your almost done Page or Post.Pop open the All in One SEO box in the editor page, below Categories. You’ll see title,description and keyword fields. Writing in your description will solve the short or missing meta description problem. If you used a post you can skip the keywords field and use tags instead. Tags are better anyway.

Use a Page or a Post?
In WordPress categories are king and you can great things with category templates.You can only use categories with posts. I would rather be able to place a single product into a Post.I think this would open up a lot more flexibility in using this plugin. This is supposed to be an option in the latest release of the plugin but either it doesn’t work or I have another plugin that breaks the button code for this. Entirely possible.

Last but not least tweak your header.php. Look for the line with html]blah blah blah [/html] delete it and paste this in it’s place:
[php]<title><?php

// Page or Single Post
if ( is_page() or is_single() ) {
the_title();

// Category Archive
} elseif ( is_category() ) {
printf( __(‘Archive for &lsquo;%s&rsquo;’), single_cat_title(”, false) );

// Tag Archive
} elseif ( function_exists(‘is_tag’) and function_exists(‘single_tag_title’) and is_tag() ) {
printf( __(‘Tag Archive for &lsquo;%s&rsquo;’), single_tag_title(”, false) );

// General Archive
} elseif ( is_archive() ) {
printf( __(‘%s Archive’), wp_title(”, false) );

// Search Results
} elseif ( is_search() ) {
printf( __(‘Search Results for &lsquo;%s&rsquo;’), get_query_var(‘s’) );
}

// Insert separator for the titles above
if ( !is_home() and !is_404() ) {
_e(‘ at ‘);
}

// Finally the blog name
bloginfo(‘name’);

?></title>[/php]

That helps take care of the duplicate title problem for categories and archives.
The all in one seo pack does most of the work and this does the rest. It’s very cool.

6 thoughts on “Get Grid View Without the Gold Cart”

  1. I forgot to add don’t choose the full category option(I think it is auto checked so uncheck it)when adding a product group to a post or page.My fake Grid View layout only works on compact option.

  2. Pingback: Page 7 | Cables
  3. Very helpful! Thank you. Newbies like me have to figure out where to put the line breaks in the replacement header title tag code you provided, other than that it’s not often that tips like this work the first time.

    Chrys

  4. Really great you´re blogging about it. I wonder if I am doing it wrong or missing something. trying on the latest version 3.6.10. I get a nice grid… but when I do choose to not display details… I also wont get them when clicking on a product. Is that true? So when I look at the original gridview… there is a preview ( gridview) and a detailed page… that would be nice…

    Your demo shows the original gold cart so its hard to compare.

    Any advice?

    Sascha

    1. Hi Sascha,
      The demo link is to a page not using Grid View even though that site has the Gold Cart and Grid View modules added.
      My main reasons for writing this were to how to insert several similar product groups in one page in a Grid View Like display (hence Fake grid) and have each page or post have a unique title and meta description.It was an SEO experiment,really.
      The shopping cart plugin has gone through several revisions since I wrote this post and I would not be surprised if my “fix”
      http://mccormicky.com/1053/revised-fake-grid-view/
      didn’t work for the latest cart 3.10
      because the file I edited to really fake grid view probably got revised by the developers.I haven’t had a chance to work with 3.10 yet.

Comments are closed.