You can fix this by adding the following to your functions.php file.

function taxonomy_body_class( $classes ) {
	if ( is_tax() ) {
		$tax = get_query_var( 'taxonomy' );
		$term = $tax . '-' . get_query_var( 'term' );
		$classes = array_merge( $classes, array( 'taxonomy-archive', $tax, $term ) );
	}
	return $classes;
}
add_filter( 'body_class', 'taxonomy_body_class' );

I don’t know why WordPress doesn’t do this automatically – I guess it should be added to core. What do you think?

WP e-Commerce 3.7.5 adds the following styles to the body tag:

• wpsc
• wpsc-home
• wpsc-single-product
• wpsc-single-product-id
• wpsc-category
• wpsc-category-id
• wpsc-group-id
• wpsc-shopping-cart
• wpsc-transaction-details
• wpsc-user-account

These extra classes will give you more flexibility when designing themes for WP e-Commerce.

Where are these classes included?

wpsc
Included in every WP e-Commerce page.

wpsc-home
Included on the main WP e-Commerce shop page.

wpsc-single-product & wpsc-single-product-id
Included on single product pages. The wpsc-single-product-id class allows you to set css rules for a single product based on the product id.

wpsc-category & wpsc-category-id
Included on category and individual product pages. The wpsc-category-id class allows you to set css rules for different categories. As these classes are also applied to single product pages, if a product appears in more than one category you could style a product page differently depending on which category you click through from.

wpsc-group-id
Included on category and single product pages. The group id is set based on the group in which the current category resides.

wpsc-shopping-cart
Including on the shop cart checkout page.

wpsc-transaction-details
Including on the transaction details page displayed after a successful purchase.

wpsc-user-account
Including on the WP e-Commerce user account pages.

Ideas how to use these classes in your WP e-Commerce theme…

1. Style a special product differently using wpsc-single-product-id.
2. Style products in a sale category to display differently using wpsc-category-id.
3. Create a group for brands with brands as sub-categories and differentiate this view from your standard product categories using wpsc-group-id.

It’s a great e-commerce plugin for WordPress but there were a few visual things niggling me that I thought should be sorted out – mainly the way that the widget for showing categories was not styled the same way as the WordPress default widgets.

Fixing the issue was just a case of making a couple of tweaks to the HTML; changing some square brackets to normal brackets and removing some bold styling.

Nothing revolutionary there, but it should now look a whole lot better with your default WordPress theme without making any modifications…

The current version in development WP e-Commerce 3.7 is looking great, with an overhaul of the user interface to bring it into line with WordPress 2.7, a complete reorganisation of the code making it easier for us developers, and a new template engine which works along the same lines at the WordPress Loop so that theme authors can now get in on the act without having to delve too far into the plugin’s code.

The answer is Google Toolbar. If you have Google Toolbar installed and the AutoFill option enabled, Google will remember your personal information so that it can automatically populate form fields for you. Fields such as name, address and phone will all turn yellow if AutoFill is turned on – the default setting.

Although it is good useability for these fields to be highlighted in some way, as a web designer you may not want yellow form fields on your web page for aesthetic reasons.

So, how do you override it…?

For a while I was confused as changing the name of the form fields seems to have no effect – Google still thinks it can auto-complete that field. It turns out that Google actually ‘guesses’ which fields it can complete based on the form field name AND adjacent text which it presumes could be a label!

In the end I found two solutions:

Solution 1.

Create a style to change change the background colour of the field, using the css !important rule.

input { background-color:#FFFFFF !important; }

Solution 2.

Use javascript to remove or change the styles that the Toolbar adds after the page has loaded.

Using this method you can change the background colour of all the fields, or just change the highlighted fields to a different colour to be in-keeping with your design.

To find out how, see Outsmarting the Google Toolbar.

After searching around for a while I found a fair few fixes. However, none of these seemed to work for me. The only different I could find was that my list contained images where the other examples were purely text.

I fixed the bug by chance whilst implementing a fix by John Serris at www.phonophunk.com.

It turned out that when using the “vertical-align: bottom” fix applied to the list item tag, I also needed to apply it to the ‘a’ and ‘img’ tags as well:

#navsec a, #navsec img { vertical-align:bottom; }