Add State Drop Down List to WPEC

The plugin WP eCommerce (WPEC) by default provides regions such as states or provinces for only a few countries, for example Canada and the US. This means that for countries like Australia which have no regions in WPEC, the user has to manually type in their state or territory name at checkout.

WPEC Checkout Without State Dropdown

Checkout form without drop down list

The follwing post describes how we added regions for a country not provided for by the WPEC plugin. After these changes have been made we can select the state or territory name from a drop down list at checkout. It also appears to now be possible to set individual state or territory taxes – although we did not explicitly test this as it’s not applicable to the country we are configuring here.

In the example below, we’re adding the eight state and territory regions for Australia to the WPEC plugin. All database queries and updates were performed by logging into our web hosting cPanel and using the phpMyAdmin application to access the database.

(1) The first step is to make a backup of the website database.
The changes below include manual updates to the WPEC database tables so we need to ensure there’s a regression path if something goes wrong.

(2) Find the two digit region codes for the country to be updated.
Some countries have two digit region codes and some don’t seem to. We couldn’t find on the internet any for Australia so we used the 6 digit codes we found eg AUS-NS for New South Wales and just dropped the leading ‘AUS-‘ part.

Using this approach our two character region codes are :-

Australian Capital Territory = CT
New South Wales = NS
Northern Territory = NT
Queensland = QL
South Australia = SA
Tasmania = TS
Victoria = VI
Western Australia = WA

(3) Find out the ‘country ID’ for the country being updated.
Using phpMyAdmin to look in the table wp_wpsc_currency_list shows that the country ID for Australia is 137.

(4) Add the states and territories to the database.
Using phpMyAdmin the table wp_wpsc_region_tax needs to be appended to with 1 new row per state or territory. The table structure is:-

id – an incremental counter (in our installation was currently up to row 64)
country_id – the unique number allocated to each country in WPEC
name – the state name
code – a two digit region code
tax – defaults to 0

We entered data for the 8 new rows manually in alphabetical order (just in case WPEC doesn’t sort the table on selection). Here’s the sql that was generated by phpMyAdmin to add the Australian states and territories to the table.

INSERT INTO `enter-your-database-name-here`.`wp_wpsc_region_tax` (`id`, `country_id`, `name`, `code`, `tax`) VALUES (’65’, ‘137’, ‘Australian Capital Territory’, ‘CT’, ‘0’), (’66’, ‘137’, ‘New South Wales’, ‘NS’, ‘0’), (’67’, ‘137’, ‘Northern Territory’, ‘NT’, ‘0’), (’68’, ‘137’, ‘Queensland’, ‘QL’, ‘0’), (’69’, ‘137’, ‘South Australia’, ‘SA’, ‘0’), (’70’, ‘137’, ‘Tasmania’, ‘TS’, ‘0’), (’71’, ‘137’, ‘Victoria’, ‘VI’, ‘0’), (’72’, ‘137’, ‘Western Australia’, ‘WA’, ‘0’);

(5) Set two flags in the region table so WPEC knows to use the regions.
The wp_wpsc_currency_list table was updated so WPEC will use the new regions.
Changed the field `has_regions` to 1 (was 0)
Changed the field `visible` to 0 (was 1)

(6) Change the layout of the checkout forms so country comes before state.
On the checkout page the billing and shipping addresses usually (by default) show State followed by Country. However, state drop down selection is only available after a country is selected so we reversed those fields. In the WPEC back end (WP Admin, Settings –> Store –> Checkout) we moved the country field up above the state field and saved the change.

(7) Set the tax regions for the updated country.
In Australia the GST tax rate is the same in every state and territory so no region changes were needed in the tax settings. We just needed to save the Tax rate as 10% for ‘All Markets’ in the WPEC backend (WP Admin, Settings –> Store –> Taxes).

After the above changes were made Australian shoppers can now select their state or territory from a dop down list.

WPEC Checkout With State Dropdown

Checkout form with drop down list and Country moved above State

When we first made these changes they didn’t seem to work. Looking at the tables it seems that somehow the `visible` field in table wp_wpsc_currency_list was still set to the old value of 1 (i.e. don’t display). We changed that back to 0 and this time it all worked ok.

Like any change, we didn’t make this to a live system. We created a staging site where the changes were made and tested. They worked for us but that’s no guarantee they’ll work ‘as is’ for everyone. The changes were made and tested on a system running WordPress 4.2.2 and WP eCommerce (WPEC) 3.9.4.

It’s potentially possible our database updates might conflict with a WPEC upgrade at some later point if they (WPEC) decide to add regions for the country we’ve configured. We always test WPEC upgrades in a staging service so any problem should become apparent there and the manual updates removed if necessary.

WordPress SEO and WPEC Blank Products Page

In the process of upgrading a test e-Commerce website I came across a small issue with the WordPress SEO Plugin by Joost de Valk and the WP e-Commerce Plugin by Instinct Entertainment / GetShopped.

The site was running with the following software versions, WordPress 3.5.52 (http://wordpress.org), shopping cart WP e-Commerce 3.8.8.5 (http://getshopped.org/), SEO plugin WordPress SEO 1.2.8.7 (http://yoast.com/wordpress/seo/), and the Elegance Theme 1.4.5 (http://storefrontthemes.com/) in a custom grid view.

After updating to WordPress SEO 1.4.13 the WP e-Commerce Products Page on the website was blank / empty except for the header (with menus/navigation), the footer and sidebar. No products were displayed and no “Products Page” banner was displayed – the Products Page was effectively empty.

All the WP e-Commerce category pages, and individual product pages were correctly showing the products. We had a look for differences between the working pages and the non-working Products Page and saw that there was one apparent difference.

It appears that the WPEC blank Products Page was occurring on our test site because the Products Page in WordPress did not have a meta description set by us.

After entering a meta description and publishing the update the Products Page on the website correctly displayed the sites product grid view. I don’t know if the root cause of this issue lies with the WordPress SEO plugin, the WPEC plugin or the Elegance theme but the circumvention is thankfully nice and easy.

WP e-Commerce Migration Off Thesis

How we migrated off the Thesis WordPress Theme on a site using the WP e-Commerce Plugin.

Start point: Thesis 1.8, WPEC 3.7.8, WordPress 3.2.1
End Point: Elegance 1.4.5 , WPEC 3.8.8.3, WordPress 3.4.1

The Thesis theme and the WP-eCommerce plugin do not tend to work well together. As a result we’ve been unable to upgrade a clients ecommerce site using WPEC because of various issues encountered due to the incompatibilty of Thesis and WPEC.

In order to uprgrade we needed to select a replacement theme for Thesis to run the store. The essential requirement was that it is WPEC compliant. After looking at several themes we chose Elegance from Storefront Themes.

After upgrading the development site in the ‘normal’ manner we encountered problems where some CSS was being loaded from several places causing inconsistant page layouts (the page would be part old style part new style). This was particularily noticeable on the checkout page.

After investigating the problems we restored the service to its previous state and started again. The following process was followed and resolved all our issues (not all steps below are mandatory and there’s probably some flexibilty in the order)

(1) Activate theme 2010.
(2) In the WPEC settngs under the Presentation tab ensure the (WPEC) Theme is set to “Default Theme”.
(3) Remove Thesis theme and any Thesis specific plugins (eg. Thesis OpenHook)
(4) Flush theme cache and basic site check.
(5) Upgrade WPEC (decativate current version, ftp up latest version and activate)
(6) In webhosting (or using ftp) rename folder /uploads/wpsc/themes to another name (eg. themes-hide)
(7) Flush theme cache and basic site check.
(8) Install and activate new theme (Elegance 1.4.5 in our case).
(9) Flush theme cache and basic site check.
(10) Configure new theme.
(11) Upgrade to the latest WP release.

We tested this process twice and didn’t encounter any issues. If you find any broken links you should try re-saving your Permalinks settings (twice). The key steps for us seemed to be (2) and (6) – without those we were getting some CSS loaded by the theme and some loaded (iShop) by WPEC . After following the process above all CSS was loading from the correct locations. This worked for us but may or may not work for you. As always, before making updates take backups and test it first in a development service.

SEO Smart Links Corrupts HTML

Problem: SEO Smart Links Corrupts HTML.

There appears to be a problem when using SEO Smart Links and WP eCommerce together where the H3 class statement formating the product names becomes corrupted on the Products Page. Instead of the class being defined as class=”product-name” with SEO Smart Lnks installed it becomes class=”\"product-name\"”. I tested the three themes below and the corruption appears in all of them.

WordPress Version: 3.3.1
SEO Smart Links Version: 1.1.7 (http://www.prelovac.com/vladimir/wordpress-plugins/seo-smart-links)
WP eCommerce Version: 3.8.7.6.2 (http://getshopped.org/)
Theme: Mazine 1.5.0 (http://transparentideas.com/)
Theme: Storefront Elegance 1.4.5 (http://www.storefrontthemes.com/)
Theme: Twenty Ten 1.4 (http://wordpress.org/)

Depending on the theme in use this corruption can cause the product names to appear styled incorrectly for the theme style. In Mazine for example it causes the product names to be displayed in large font and all in upper case. The problem does not appear on product category pages or on individual product pages.

The following screen shot shows the effect of this problem while using the Mazine theme. The product on the left has had its HTML edited using Firebug to restore the correct formating while the product on the right has been left as is showing the impact of SEO Smart Links on the product name.

SEO Smart Links Corrupts HTML

SEO Smart Links Corrupts HTML

Circumvention:
Adding your WP eCommerce products page (usually “products-page”) to the Ignore Posts and Pages setting in SEO Smart Links circumvents this problem.

We will query this issue with the SEO Smart Links developer and update the post with their reply when available.

WP-eCommerce Transaction Results

WordPress Version: 3.3.1
WP-eCommerce Version: 3.8.7.6.2
Plugin Author: GetShopped / Instinct

WPEC Transaction Results Layout

When using WPEC 3.8.7.6.2 the Transaction Results Page is built from three different parts of WPEC – two from with-in WPEC configuration settings and one from WPEC code.

The following screen capture shows the three areas of the tranasaction results page and where the content for those areas is sourced from.

WPEC Transaction Results Layout

WPEC Transaction Results Layout

Having used WPEC on a number of sites I find that the way the layout of the transaction results is built to lack flexibility.

Issue 1: As the top section of the transaction results layout is hard coded in a php program it’s always present and its content is fixed. Given this content could simply be supplied by the user in either the gateway settings under the Payments tab or in the purchase receipt settings under the Admin tab I fail to see what possible use it serves and why the authors of WPEC would bother setting it up. It also tells the customer they will be receiving an email once the order clears but orders don’t clear, payments clear. It also assumes we will be emailing our customer at that time but that might not necessarily be the case.

Issue 2: The bottom section of the transaction results page is also somewhat of an issue because the content is set once and it then applies to all the payment gateways. It would be very useful if each payment gateway could have its own purchase receipt content. How would this be helpful? One example would be: a number of WPEC users (myself included) have wanted to use WPEC to allow users to request quotes for some products. Having unqiue settings would allow a ‘quote’ payment gateway to be setup which does nothing but send the site admin and customer an email.

Issue 3: Another issue I’ve run into is that sometimes you want the content to only be displayed on the WPEC transaction results page but presently the content is displayed on that page and also emailed to the customer.

These are pretty straight forward changes (especially the first one) so hopefully the WPEC team will look into implementing them in a future release.

WP-eCommerce Checkout Page

WordPress Version: 3.3.1
WP-eCommerce Version: 3.8.7.6.2
Plugin Author: GetShopped / Instinct

Problem:

WPEC Checkout Page “Review and Purchase”

When using WPEC 3.8.7.6.2 the checkout page has a section at the bottom titled “Review and Purchase”. Unfortunately however the WPEC developers have chosen not to show the customer the complete details of the transaction to review.

The WPEC default presentation is to show the Total Shipping, Discounts and the grand Total. The product total and tax are not given and to see those you need to scroll back to the top of the page.

Wilst WPEC is a great plugin there are many issues with it – you only need to look in the support forum to see that. My main problem with WPEC is the simple things they either take a long time to fix or don’t fix – and this is one of the latter.

If you’d like to add the product total and tax amounts to the review section then the following code will do that. It works for me but please check it carefully on your development/test site before using it live and be sure to take a backup of the code before making changes.

You can add these two snippets in whatever order you like to the wpsc-shopping_cart_page.php file after line 451 within the <table class=’wpsc_checkout_table table-4′> section.

WPEC Checkout – Put Product Total in Review and Purchase Section

<tr class="total_price total_shipping">
<td class=’wpsc_totals’>
<?php _e(‘Products’,’wpsc’); ?>:
</td>
<td class=’wpsc_totals’>
<?php echo wpsc_cart_total_widget(false,false,false);?>
</td>
</tr>

WPEC Checkout – Put Tax Total in Review and Purchase Section

<?php if($wpec_taxes_controller->wpec_taxes_isenabled()): ?>
<tr class="total_price total_shipping">
<td class=’wpsc_totals’>
<?php _e(‘Tax’, ‘wpsc’); ?>:
</td>
<td class=’wpsc_totals’>
<?php echo wpsc_cart_tax(); ?>
</td>
</tr>
<?php endif; ?>
(the php if statement might be optional, without it you’d probably just see 0 as the tax amount??)

Checkout Page Before Changes

Checkout Page Before Changes

Checkout Page After Changes

Checkout Page After Changes

You can see a working example at USANA Canada but as this is a live site please don’t click on the Purchase button and empty your cart before you leave the site. If anyone can improve the code so it lines up tidily and make the subtotals unbold that’d be great. For now however it’s just so much more professional to have all the numbers available for the customer to see.