WP e-Commerce bug, product category pages sometimes show a product name as page title

Time to fix a bug. It seems that in recent updates a bug appeared that means some Product Category pages will show a seemingly random Product name as the Title. Some say it is the latest product added in that category, who has the time to investigate. We just want it fixed.

This fix is for Storefront Themes “Designer” theme. I have not heard from users of other Storefront Themes about this problem. If you are a user of one of the other themes and this is effecting you let me know via comment here or the Storefront Themes Forums and I will post code for your theme.
If you have a theme from another vendor, then you will have to sort it out yourself or ask them to help. This post has code to get you started.

You are going to edit page.php in the Designer theme folder, it is a pretty easy edit. Show no fear and jump in even if you have never done it before. New to PHP editing? see the Tools note at the end of this post.
First make a backup copy of this file somewhere!

<div <?php post_class() ?> style="margin-top:-5px;">
    <h1><?php the_title();?></h1>
    <?php the_content(); ?>
</div>
<hr />	
<?php endwhile; ?>

Delete line 15, the line number may vary in different theme versions. You need to add 5 lines to replace line 15. Your finished code should look like this.

<div <?php post_class() ?> style="margin-top:-5px;">
    <h1 class="entry-title">
		<?php if ('wpsc-product' == get_post_type() && !is_single()){
				$category_name= wpsc_category_name(); ?> <a href="" rel="bookmark" title=" <?php $category_name; ?>"><?php echo $category_name; ?></a> <?php
			} else { ?> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a> <?php
} ?> </h1>
<?php the_content(); ?>
</div>
<hr />	
<?php endwhile; ?>

This is an addition for Storefront Theme Elegance 1.4.5 as someone reported the problem

Please read the comments about safe PHP editing at the beginning of this article. You are going to edit a different file taxonomy-wpsc_product_category.php which is in the theme folder.

Find the highlighted line around line 24

	<div id="content" class="grid_<?php echo $contentgrid;?> <?php if (get_option('storefront_shop_layout') == '3 Column') {echo "center-column";}?>">
		<div class="page-content  <?php echo $pageclass;?>">
		<h1><?php _e('Products in the', 'storefront'); ?> &ldquo;<?php the_title();?>&rdquo; <?php _e('Category', 'storefront'); ?></h1>
			<?php the_content(); ?>
		</div>	
	</div>

Delete line 24 and add the 5 highlighted lines of code in its place

	<div id="content" class="grid_<?php echo $contentgrid;?> <?php if (get_option('storefront_shop_layout') == '3 Column') {echo "center-column";}?>">
		<div class="page-content  <?php echo $pageclass;?>">
		<h1 class="entry-title">
        <?php if ('wpsc-product' == get_post_type() && !is_single()){
                $category_name= wpsc_category_name(); ?> <a href="" rel="bookmark" title=" <?php $category_name; ?>"><?php echo $category_name; ?></a> <?php
            } else { ?> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a> <?php
} ?> </h1>
			<?php the_content(); ?>
		</div>	
	</div>

Save and you should be good to go.

This is an addition for Storefront Theme Xyloto 0.9.4 as someone reported the problem

Please read the comments about safe PHP editing at the beginning of this article. You are going to edit the file taxonomy-wpsc_product_category.php which is in the theme folder.

New information

This error has so far only appeared on one Xyloto site. I recently discovered that in that case it was caused by adding the image using the “use as product thumbnail” button in the media manager. This is not how you should do it in Xyloto or most new themes when using WordPress 3.3 or higher. Just upload and order your images. See the Xyloto video from the 16:20 mark, or read the second part “Image Uploading for WordPress 3.3 and higher” of this post on adding images with WordPress 3.3 and WP e-Commerce.
Before using the code solution check how your images are uploaded. This may be the case with other themes too.

Find the highlighted line around line 12

<?php get_header(); ?>
	<?php if ( have_posts() ) : ?>
		<?php /* Start the Loop */ ?>
		<?php while ( have_posts() ) : the_post(); ?>
			<div class="page">
				<?php if ( has_post_thumbnail()) {
				   $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
				   echo '<a class="fancybox-image" href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
				   the_post_thumbnail('thumbnail');
				   echo '</a>';
				 } ?>
				<h1><?php _e('Products in the', 'storefront'); ?> &ldquo;<?php the_title();?>&rdquo; <?php _e('Category', 'storefront'); ?></h1> 
				<?php the_content(); ?>
				<div class="clear"></div>
			</div>
		<?php endwhile; ?>
	<?php else : ?>
		<h1>Not Found!</h1>
		<p><?php _e( 'Apologies, but no results were found. Perhaps searching will help...', 'storefront' ); ?></p>
		<?php get_search_form(); ?>
	<?php endif; ?>
<?php get_footer(); ?>

Delete line 12 and add the 5 highlighted lines of code in its place. This is in fact the whole file, so you could just delete everything and copy and paste this block of code into the empty file. You could do this via Appearance/Editor in the WordPress backend.

<?php get_header(); ?>
	<?php if ( have_posts() ) : ?>
		<?php /* Start the Loop */ ?>
		<?php while ( have_posts() ) : the_post(); ?>
			<div class="page">
				<?php if ( has_post_thumbnail()) {
				   $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
				   echo '<a class="fancybox-image" href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
				   the_post_thumbnail('thumbnail');
				   echo '</a>';
				 } ?>
	        <h1 class="entry-title">
        <?php if ('wpsc-product' == get_post_type() && !is_single()){
                $category_name= wpsc_category_name(); ?> <a href="" rel="bookmark" title=" <?php $category_name; ?>"><?php echo $category_name; ?></a> <?php
            } else { ?> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a> <?php
} ?> </h1> 
				<?php the_content(); ?>
				<div class="clear"></div>
			</div>
		<?php endwhile; ?>
	<?php else : ?>
		<h1>Not Found!</h1>
		<p><?php _e( 'Apologies, but no results were found. Perhaps searching will help...', 'storefront' ); ?></p>
		<?php get_search_form(); ?>
	<?php endif; ?>
<?php get_footer(); ?>

Save and you should be good to go.

Well now a report with Mylo theme.

Instructions are basically the same. You are going to open page.php which is in the Mylo theme folder.
Find this line which is around line 12

<h1 class="cufon title"><a href="<?php echo get_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

Replace it with the 5 lines of code from the Xyloto post above, in fact it is always the same 5 lines of code, it just goes in different locations depending on the theme.

New information Echo Theme July 30 2012

This error has now been seen on a Echo site. The solution is below

Find the highlighted line around line 19 in page.php which is in the Echo theme folder

					<?php if ( have_posts() ) : ?>
							<?php /* Start the Loop */ ?>
							<?php while ( have_posts() ) : the_post(); ?>
								<h1><?php the_title(); ?></h1>
								<?php the_content(); ?>
							<?php endwhile; ?>

Delete line 19 and add the 5 highlighted lines of code in its place. You could do this via Appearance/Editor in the WordPress backend.

					<?php if ( have_posts() ) : ?>
							<?php /* Start the Loop */ ?>
							<?php while ( have_posts() ) : the_post(); ?>
							<h1 class="entry-title">
        <?php if ('wpsc-product' == get_post_type() && !is_single()){
                $category_name= wpsc_category_name(); ?> <?php echo $category_name; ?></a> <?php
            } else { the_title(); ?></a> <?php
} ?> </h1>
								<?php the_content(); ?>
							<?php endwhile; ?>

Save and you should be good to go.

Tools:

Edit the PHP file with a code editor. You may also edit custom.css outside WordPress and upload it to your server. You must use an appropriate code editor NOT Microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/

Added in Response to Comments, Crafty Cart theme

There was a request in the comments for help with the Crafty Cart theme, a really cute but rather old theme. With the kind help of Michelle from Instinct makers of WP e-Commerce the page for that theme was updated. As I have had a couple of requests for the file I am posting it here for anyone to download. This was made for WP e-Commerce 3.8.7.6 but I think it will still work up to 3.8.8.5 at least.

11 Comments

  1. Smarty
    June 6, 2014

    Hello There,

    Can you help me to solve the issue with my website.

    I am using StoreFront Original theme and I am getting blank Product page with only Header, SideBar and Footer.
    Yo can check it on my site also.

    If you help me with this issue it would be great!!!!

    My URL :http://leatherswithstyle.com/
    Thanks

    Reply
  2. Rick Cano
    July 17, 2013

    Thats for the tip on how to fix this….I found this same bug on one Woo Theme – Gazette and all I had to do was modify the page.php with the code you used for the Storefront and it fixed it perfectly.

    Thanks again.
    RC

    Reply
  3. Tara Keene
    February 15, 2013

    Hey there, thanks for this!!!! It is now showing me the correct category name, but my products in the category do not appear, it just goes to a blank page with the category heading. I am using Storefront Theme Elegance. Any suggestions?
    Thanks!
    Tara

    Reply
  4. Pirkka Rannikko
    August 7, 2012

    Thanks for the solutions this nasty bug! Hope the WP e-Commerce fixes this properly soon.

    Reply
  5. Pim
    March 8, 2012

    Hi,

    Ik found a lot of people having problems with the category in the title. Before this hack (in my case in my custom build theme) the categorie showed the title of one of my products, and after it showed the categorie on top and at the first product in the list.

    Well, I think I found a solution. It is not pretty, but it works fine for me and perhaps for others as well:

    You do exactly as in the first suggestion of this article:

    <a href="" rel="bookmark" title=" “> <a href="” rel=”bookmark” title=”Permanent Link: “>

    After that, I noticed that calling the_title(); resolved the problem. So I added this inside the if, so you get:

    <a href="" rel="bookmark" title=" “>
    <!– –>
    <a href="” rel=”bookmark” title=”Permanent Link: “>

    Make sure to put inside html comment brackets, or else it will print the title of your product.

    Hope this helps.

    Reply
  6. mgason
    February 23, 2012

    Anyone who may be using Crafty Cart like Jenn, Michelle at Instinct, the makers of WP e-Commerce kindly produced a new page.php for that theme. I can supply it to anyone if they need it. To get a copy contact me via the contact page form on this site.

    Reply
  7. mgason
    January 7, 2012

    Hi,
    I am not very familiar with Crafty Cart. It is quite old isn’t it? I remember thinking it was rather nice looking, quite unique.
    Contact me via the contact form on this site and I will see if I can help. I do not get time to check my comments here very often.

    Reply
  8. Jenn Nickerson
    January 6, 2012

    /*<div class="post" id="post-“>

    <a href="" rel="bookmark" title=" “> <a href="” rel=”bookmark” title=”Permanent Link: “>

    */

    Reply
  9. Jenn Nickerson
    January 6, 2012

    If it helps, here’s the code that I have for page.php. I pasted in your bug fix in between the h2 tags.
    <div class="post" id="post-“>

    <a href="" rel="bookmark" title=" “> <a href="” rel=”bookmark” title=”Permanent Link: “>

    Reply
  10. Jenn Nickerson
    January 6, 2012

    Just a question, I did this and it also changed the first product on that page’s title to the category title as well. So now it will say “Liter Size Bags” at the top of the page and the first product’s title is “Liter Size Bags”. Do you know of a way to fix that as well?
    Thanks for the code!

    Reply
  11. Jenn Nickerson
    January 5, 2012

    The site I’m working on has an “under construction” page up for the non-logged in viewer, but I am using the “Crafty Cart” theme and am having this exact issue. I will save the original file and give this a shot. Thanks!

    Reply

Leave a Reply