WP (WordPress) eCommerce Plugin Customization

Recently we had a web development assignment for an eCommerce website.

Due to some circumstances not interesting to others, we decided to develop the website using WordPress 2.8.4 using WhiteSpace theme by Brian Gardner and Zen Cart. After some research WP eCommerce 3.7.4 by Instinct was looking a good choice, if we had to move away from ZC. It was always kept in mind to integrate Zen Cart with WordPress as for some reasons and articles I read online, integration of ZC and WP was easier than configuration of ZC for a static website.
WP eCommerce comes in different flavors – free version that comes with a lot of goodies, and the Gold Cart version with some additional features like Grid View for products.
Our challenges were:

  1. Our shopping cart wasn’t working as it should.
    • None of the gateways worked for any Indian Billing or Shipping address.
    • PayPal gateway worked fine for a non-Indian shipping address, while the Manual gateway worked at its own whim.
    • When the “Make Purchase” button was clicked, all it did was refresh the Check Out page. On Local installation everything worked fine.
  2. Split the categories between the Left Sidebar and Top Navigation bar. Exclude the Top Products category from the Left Sidebar along with other categories.
  3. Display images in the list of Top Products.

Let’s see how each issue was tackled one-by-one:

What you need – download WPStore theme by WPFeed.com. We are going to use functions from this theme for our purpose.

WP eCommerce is a very helpful plugin for creating WordPress based small shops. The plugin comes with great in-built functionality, however, one wishes there were more customizations available for no price.

1. WP eCommerce Shopping Cart fix -

Since the local installation was working as smooth as possible, there was definitely something fishy on the live server side. The issue was found at the most unusual place – the Shipping address (unusual because one, shipping address was not mandatory and two, often when shipping address was selected to be same as billing address the problem would not appear).

The STATE field in the shipping address was mandatory in the eCommerce Shipping Info. configuration. However for some weird reason, this field was not appearing on the front-end screen. So when the ‘Make Purchase’ button was clicked, the Java Script gave “Fill all the required fields” error. It would become confusing for the user because the input field ‘STATE’ was not on the screen at all.

2. Display Product Categories at Different Locations -
We split the Product Categories in two Groups – Categories and Header Nav categories.
If you look in functions.php, the Show_cats function is displayed by the Group Id. This Group ID for the Header Nav group was ‘3′, as the default installation had used 1 and 2 for categories and brands. We created a new function, show_tagline_cat using the same code of show_Cats but with hard-coded group_id 3. The same function was added in the header file to display desired categories links.
During this we also tackled another challenge – sorting the categories. Right now categories are sorted by as-added basis. We have changed this to display them in descending order but it can be changed to display alphabetically as well.

3. Display images in Top Products list -
Adding the code from function display_latest_products to function display_top_products – both from the function.php of WPStore theme. The Latest Products function is set to display product images and the same code can be recycled to display images along with the Top Products as well. You can add a loop in the new function to limit the number of displayed Top Products.
The website looks like this – http://www.highchoicelowprice.com . We have some tidying up to do in the CSS, but it is functional and our client wants to continue with that for now.
Feel free to comment or send questions if you have any.

PS: A super thanks to Jigar Pandya for his untiring help during this entire mission.

34 Comment(s)

  1. Guillaume on ,

    Hello, and thanks a lot for all this useful information.
    You sure did an outstanding work at adapting this plugin to your needs.

    Can you tell me how to change the WP Store on the left hand corner and to replace it with the name of my site.
    I guess it is something to change in the header.php but I’m not sure what exactly.

    Thanks,
    Guillaume

  2. whitehats on ,

    Guillaume,

    Thanks for the kind words.

    ‘WP Store’ on the left top corner is a logo.gif in your image folder.

    In style.css of WP Store theme, look for this line -
    #logo h1 a {background:transparent url(img/logo.gif) no-repeat scroll left top;float:left;height:32px;width:136px;}

    Replace logo.gif with your own image.

    Does that help?

    -Tejas

  3. Guillaume on ,

    Thanks a lot Tejas,

    Yes it solved this problem.

    I’m still having a lot of trouble with this theme especially because it looks different in Firefox and IE. Did you have trouble with that as well? How did you solve that problem?

    Guillaume

  4. whitehats on ,

    Guillaume,

    Glad I could help.

    I am not using WPStore theme for the website I developed. I only used some of the functions from that theme, and corresponding CSS changes.

    What exactly are your issues?

    Regards,
    -Tejas

  5. Guillaume on ,

    Hello Tejas ,

    I understand why I thought you modified so much this WPStore template so.
    I don’t know if you’ll be able to help though because I am not sure weither my problem comes from WPStore template or from WP e-commerce plugin itself.

    Anyway my issue is the following :
    _ In the ‘latest products’, ‘Product page’ and ‘More product’ sections, not all product images load on the same time (only 2 or 1 load at a time, for exemple)
    _ The problem seems intermitent as it is not every time the same image not loading
    _ It appears only with Firefox and the website is fine with IE

    This issue is definitely weird to me and does not seem to make sense.
    Would you have any idea of the possible cause for that?

    The website I’m trying to set-up is : http://jewellerybijou.com/
    If you open it with Firefox and IE you will be able to see what kind of problem I’m facing.

    Thanks in advance for your help, it will be very appreciated.
    Regards

    Guillaume

  6. whitehats on ,

    I am opening the website and I can see all the images on the home page, but on the other pages the images still load up sometimes, not the other times.

    Anyways, this seems to be a problem with either the theme or the functions in the theme and the eCommerce plugin. For the site I developed, I was having this issue initially, but once the site was cached it started showing up fine.

    Let me know how your tryst goes,

    Regards,
    -Tejas

  7. Miranda on ,

    Tejas, thanks for this info – and thanks for alerting me to your blog.

    Being a woman and liking their jewelry, I have a couple of small non-tech suggestions for that site… if they send worldwide then it would be good to say that clearly as soon as visitors enter.

    Second, where they put the price in INR, to put the approximate us$ price as well. I for one have no idea of the exchange rate without having to go and look it up and most people won’t be bothered to do that.

    I also have a question about the ecommerce plugin – is it unsupported by the creators? It seems that many questions in the forum go unanswered and those that are answered appear to be so by other users…

    All the best to you.

  8. whitehats on ,

    Thanks Miranda for your suggestions. The front-end of the site is managed by the client currently but I will sure pass on the points. Ideally I would want the price to be in USD because their major selling market is not in India and USD can work as a global currency.

    As far as eCommerce plugin goes – the creators have clearly mentioned somewhere that their job is let people use this as a freeware and not provide any support on the free version; the forums are a venue for others to discuss and resolve without any necessary participation of the creators. If you want more, buy their support or pay for an upgrade. It probably makes sense from their perspective.

    However, as the existing documentation on the plugin is practically naught, I want to use this blog as a platform to resolve the hacks and glitches for which you shouldn’t be paying for support.

    Thanks for visiting, looking forward to learn about your experience customizing the plugin for your requirements.

    -Tejas

  9. Miranda on ,

    Hi Tejas,
    I’ve looked for where you can contact them to pay for support, to see how much it is, but couldn’t find it – you say it is there though? And yes, of course no one would blame them for charging for their time – it’s logical!

    The two things that held me up were:
    1. getting the product category widget in the sidebar to work – it showed the 2 product categories I had installed, but when clicked on, neither of them came up …just bringing up every time the main products page. Evidently many people found this problem but someone answered it in the forum, and you just have to go to ‘Permalinks’ and do a simple ’save’ and hey-presto! it seems to do the trick.

    2. The other problem I had was with the same Product Categories widget. The links in the sidebar were dropping down into the next widget below. I do not know if this is just something to do with the theme I’m using (Brian Gardners paid theme, Magazine – just love his themes, and how they work :) – but some super person told me to change a little bit of code in the: wp-e-commerce – widgets – category_widget.28.php, around line 50 , from:
    echo $after_widget;
    to :
    echo ”;
    echo $after_widget;
    and it did the trick.

    Hope this helps someone as much as it helped me :)

  10. Miranda on ,

    Tejas, I’ve just realised that our links are to this page – that is not very friendly of you!!

  11. whitehats on ,

    I am not sure what you are saying. If you mean that your links are going back to a page on my blog, you are correct – from that landing page there are outgoing links to your website.

    I am trying this SEO Super Comments plugin hence this arrangement. Do you suggest anything different otherwise?

  12. whitehats on ,

    Actually if you go to this page – http://www.whitehatsweb.com/blog/wp-ecommerce-plugin-customization/comment-page-1/?cid=12 – you will see your page linked there. This is also helpful in finding your other posts.

  13. I_Am_Beginner on ,

    Hi, as I am quite new, can I please ask for a little help to get a bit more on wp ecommerce theme.
    1. i want the images in Latest Products section to be like a slideshow style, rather than sitting alone. as i think it would become more lively and attractive.
    2. i want to highlight with a little darker or different colour in the backgound of final Checkout page
    3. i want to highlight with a little darker or different colour in the backgound of Shopping Cart section in the sidebar.

    If somone can help, much appreciated. Thanks M

  14. whitehats on ,

    I_am_beginner –

    Try these two URLs.
    The first one is – http://codex.wordpress.org/Conditional_Tags
    Second is a WP Plugin – http://www.featuredcontentgallery.com/
    Also see if you can integrate – http://smoothgallery.jondesign.net/

    You may have to modify the plugin to fit your requirements. Follow the guide here – http://www.instinct.co.nz/blog/2009/07/solution-to-featured-content-gallery-wp-ecommerce-conflict/

    In the mean time if I have another solution, I will post it here again. If you find something that works, I will appreciate if you add it here as well.

  15. Guillaume on ,

    Hi Tejas,

    Thanks for your answer. If caching can solve this issue I can defintely give it a try.

    Did you use some wordpress plugin as wp-supercache to cache your website?
    I was initially thinking about using that. But the problem is that an e-commerce website is a dynamic one. Wouldn’t using such a plugin interfere with the dynamic parts of my website?
    I mean that users could not have their shopping Cart updated after clicking on ‘Add to Cart’ because they are anyway served html static (I guess there is a workaround for that as there is one for post comments)

    Thanks by the way for taking the time to answer our questions. This is much appreciated

    Guillaume

  16. whitehats on ,

    Guillaume,

    Unfortunately I do not have an answer for you. In fact this is the first time we have used eCommerce plugin for an eComm website.

    http://ocaoimh.ie/wp-super-cache-087/

    I am just hoping that WP eCommerce takes care of this. So far we haven’t had much issue with the load times and display.

    I will keep looking for what can be done, and post here again.

    Good luck,
    -Tejas

  17. Guillaume on ,

    Thanks anyway Tejas.
    Actually, I realized that this problem does not occur if I remove the latest products section in the header. So I guess it has something to do with the same image being requested twice on the same time in the database (just a guess, I’m not sure about it …).
    Anyway, it is sonething that has to do with the coding in the function ‘display_latest_products’ in functions.php. You are saying that you recycled this code to display the top products. As it displays fine in your case with no display issue, I was wondering if yu changed anything in this code or if you have any idea about what I could try to change to solve my display problem?

  18. whitehats on ,

    Hmm, strange! I don’t believe that could be true because when I look at the Top Products in the main content area, by that theory I should be facing some problems with the loading of images. That I am not.

    Anyways, here is the code I used for display_top_products:

     PHP |  copy code |? 
    01
    function display_top_products(){
    02
    global $wpdb;
    03
    $top_products_ids = $wpdb->get_results("SELECT * FROM `".WPSC_TABLE_PRODUCT_CATEGORIES."` WHERE name = 'top products'  LIMIT 0 , 30" ,ARRAY_A);
    04
    	if($top_products_ids != null){
    05
    	foreach($top_products_ids as $top_products_id) {
    06
    	$id = $top_products_id['id'];
    07
    	}
    08
    	}else{
    09
    	$id = '';	
    10
    	}
    11
    $top_products = $wpdb->get_results("SELECT `".WPSC_TABLE_PRODUCT_LIST."`.id AS Pid, `".WPSC_TABLE_PRODUCT_LIST."`.name AS Pname, `".WPSC_TABLE_PRODUCT_LIST."`.price AS Pprice,`".WPSC_TABLE_PRODUCT_LIST."`.special_price AS Pspecial_price,`".WPSC_TABLE_PRODUCT_LIST."`.notax AS Pnotax  FROM `".WPSC_TABLE_PRODUCT_LIST."` INNER JOIN `".WPSC_TABLE_ITEM_CATEGORY_ASSOC."` ON `".WPSC_TABLE_PRODUCT_LIST."`.id = `".WPSC_TABLE_ITEM_CATEGORY_ASSOC."`.product_id AND `".WPSC_TABLE_ITEM_CATEGORY_ASSOC."`.category_id = ".$id." And `".WPSC_TABLE_PRODUCT_LIST."`.active = 1 LIMIT 4",ARRAY_A);
    12
    if(get_option('permalink_structure') != '') {
    13
        $seperator ="?";
    14
    	} else {
    15
    		$seperator ="&";
    16
    	}
    17
        $output = "";
    18
       $i = 1 ;
    19
       if($top_products != null){
    20
       foreach($top_products as $top_product) {
    21
    if ($i <= 3) {
    22
      	$product_image_id = $wpdb->get_row("SELECT id FROM `".WPSC_TABLE_PRODUCT_IMAGES."` WHERE product_id = ".$top_product['Pid']." order by id desc LIMIT 1 " ,ARRAY_A);
    23
        	$image_id = $product_image_id['id'];
    24
        	$output .= "<li class='top_product'>";
    25
           $output .= "<a href='".wpsc_product_url($top_product['Pid'])."' / rel="nofollow"><img class='product_image' src='index.php?image_id=".$image_id."&width=128&height=135' title='".$top_products ['Pname']."' alt='".$top_products ['Pname']."' /></a><br />\n\r";
    26
            $output .= "<div class='product_info'><a href='".wpsc_product_url($top_product['Pid'])."' / rel="nofollow">".$top_product['Pname']."</a><br />";
    27
    	    $output .= "</li>";
    28
    	$i++;
    29
    	   }
    30
           }
    31
          }
    32
         echo $output;
    33
        }

    ******************************************
    I am running a loop to limit the displayed results to 3.

    Have you tried using a different theme? This may look like a stupid question, but I noticed a significant difference between my theme and your theme on how these images “miss out” from displaying!!

  19. whitehats on ,

    I_am_beginner –

    I think this is exactly what you are looking for -
    http://codex.wordpress.org/The_Loop_in_Action#Different_CSS_For_Different_Categories

    You should be able to change the is_category to is_page’(insert desired page number here)’.
    Good luck!

  20. whitehats on ,
  21. kramero on ,

    Hi Tejas,

    Could you please give me a hint why does my products page doesn’t show the latest products?
    looks like the products being displayed descending. But, if i navigate to each categories, it was displayed correctly (ascending a.k.a latest products first)

  22. whitehats on ,

    Kramero,

    Can you give me a link to your website?

    Thanks,
    -tejas

  23. roger on ,

    Hi Tejaz

    i found your blog interesting and help full

    i am looking for theme function help

    i am using wpstore theme (http://wpfeed.com/2009/07/wpstore-free-wordpress-e-commerce-theme/)

    in the home page i want to display product description also

    here is the function for home page product (function page available in theme also )
    `
    function display_homepage_products(){
    global $wpdb;

    $homepage_products_ids = $wpdb->get_results(“SELECT * FROM ".WPSC_TABLE_PRODUCT_CATEGORIES." WHERE name = ‘homepage products’ LIMIT 0 , 30″ ,ARRAY_A);

    if($homepage_products_ids != null){
    foreach($homepage_products_ids as $homepage_products_id) {
    $id = $homepage_products_id['id'];
    }
    }else{
    $id = ”;
    }

    $homepage_products = $wpdb->get_results(“SELECT ".WPSC_TABLE_PRODUCT_LIST.".id AS Pid, ".WPSC_TABLE_PRODUCT_LIST.".name AS Pname, ".WPSC_TABLE_PRODUCT_LIST.".price AS Pprice,".WPSC_TABLE_PRODUCT_LIST.".special_price AS Pspecial_price,".WPSC_TABLE_PRODUCT_LIST.".notax AS Pnotax FROM ".WPSC_TABLE_PRODUCT_LIST." INNER JOIN ".WPSC_TABLE_ITEM_CATEGORY_ASSOC." ON ".WPSC_TABLE_PRODUCT_LIST.".id = ".WPSC_TABLE_ITEM_CATEGORY_ASSOC.".product_id AND ".WPSC_TABLE_ITEM_CATEGORY_ASSOC.".category_id = “.$id.” And ".WPSC_TABLE_PRODUCT_LIST.".active = 1 ORDER BY RAND() LIMIT 12″,ARRAY_A);

    if(get_option(‘permalink_structure’) != ”) {
    $seperator =”?”;
    } else {
    $seperator =”&”;
    }

    $output = “”;

    if($homepage_products != null){

    foreach($homepage_products as $homepage_product) {
    $Pid = $homepage_product['Pid'];
    $product_image_id = $wpdb->get_row(“SELECT id FROM ".WPSC_TABLE_PRODUCT_IMAGES." WHERE product_id = “.$homepage_product['Pid'].” order by id desc LIMIT 1 ” ,ARRAY_A);

    $image_id = $product_image_id['id'];

    $output .= “”;
    $output .= “”;
    $output .= ”
    “;
    $output .= “”;
    $output .= “\n\r”;
    $output .= ““.$homepage_product['Pname'].”“;
    $output .= nzshpcrt_currency_display(($homepage_product['Pprice'] – $homepage_product['Pspecial_price']), $homepage_product['Pnotax'],false,$homepage_product['Pid']);
    $output .= “”;

    $output .= “”;

    }
    }
    echo $output;
    }
    `

    if you need more info let me know

  24. whitehats on ,

    Roger,
    You’d be making following two changes to your code. Modify Code 1 in your function.php and add code 2 along with other outputs.

     PHP |  copy code |? 
    1
    2
    $homepage_products = $wpdb->get_results("SELECT `".WPSC_TABLE_PRODUCT_LIST."`.id AS Pid, `".WPSC_TABLE_PRODUCT_LIST."`.name AS Pname, `".WPSC_TABLE_PRODUCT_LIST."`.description AS Pdescription, `".WPSC_TABLE_PRODUCT_LIST."`.price AS Pprice,`".WPSC_TABLE_PRODUCT_LIST."`.special_price AS Pspecial_price,`".WPSC_TABLE_PRODUCT_LIST."`.notax AS Pnotax  FROM `".WPSC_TABLE_PRODUCT_LIST."` INNER JOIN `".WPSC_TABLE_ITEM_CATEGORY_ASSOC."` ON `".WPSC_TABLE_PRODUCT_LIST."`.id = `".WPSC_TABLE_ITEM_CATEGORY_ASSOC."`.product_id AND `".WPSC_TABLE_ITEM_CATEGORY_ASSOC."`.category_id = ".$id." And `".WPSC_TABLE_PRODUCT_LIST."`.active = 1  ORDER BY RAND() LIMIT 12",ARRAY_A);
    3

     PHP |  copy code |? 
    1
    2
    $output .= "<p class='wpsc_description'>".nl2br(stripslashes($homepage_product['Pdescription'])) . "</p>";
    3

    Hope that works for you. Similarly you can display the additional description too.

  25. roger on ,

    Hey Tejaz

    thank you so much for your help now i can see the product description

    but i am not able to see the additional description do i need to add any code ?

    if so can you place the code

    Thank you again

  26. whitehats on ,

     PHP |  copy code |? 
    1
    $homepage_products = $wpdb->get_results("SELECT `".WPSC_TABLE_PRODUCT_LIST."`.id AS Pid, `".WPSC_TABLE_PRODUCT_LIST."`.name AS Pname, `".WPSC_TABLE_PRODUCT_LIST."`.description AS Pdescription, 
    2
    `".WPSC_TABLE_PRODUCT_LIST."`.additional_description AS Padditionaldescription, 
    3
    `".WPSC_TABLE_PRODUCT_LIST."`.price AS Pprice,`".WPSC_TABLE_PRODUCT_LIST."`.special_price AS Pspecial_price,`".WPSC_TABLE_PRODUCT_LIST."`.notax AS Pnotax  FROM `".WPSC_TABLE_PRODUCT_LIST."` INNER JOIN `".WPSC_TABLE_ITEM_CATEGORY_ASSOC."` ON `".WPSC_TABLE_PRODUCT_LIST."`.id = `".WPSC_TABLE_ITEM_CATEGORY_ASSOC."`.product_id AND `".WPSC_TABLE_ITEM_CATEGORY_ASSOC."`.category_id = ".$id." And `".WPSC_TABLE_PRODUCT_LIST."`.active = 1  ORDER BY RAND() LIMIT 12",ARRAY_A); 

     PHP |  copy code |? 
    1
     
    2
    $output .= "<p class='wpsc_description'>".nl2br(stripslashes($homepage_product['Padditionaldescription'])) . "</p>";
    3
     
    4

  27. Kios Pintar on ,

    Thanks for all the tips and tricks.

    Now I have customized my online store and preety like the way it looks now.

    Once again, thank you!

  28. custom wine labels on ,

    I enjoyed reading your work! GREAT post! I looked around for this… but I found you! :) Anyway, would you mind if I threw up a backlink from my site to your site?

  29. whitehats on ,

    Please do. Thanks!

  30. katenok_tweet on ,

    I want to quote your post in my blog. It can?
    And you et an account on Twitter?

  31. whitehats on ,

    Yes, you can. Our Twitter account is @whitehats_web

  32. seo company on ,

    I should harmonise with your point. You stated it down so well. I just bookmarked your post. thanks

  33. Marc Scheff on ,

    Hi,

    I’m experiencing the issue where I:

    * Add items to cart
    * Go to checkout and fill in all info
    * Select Google Checkout
    * Hit Make Payment
    * Page just refreshes….

    It works using paypal. any advice? I’m chomping at the bit to release my store.

    If you need to see this in action, I can provide a url.

  34. whitehats on ,

    Mark,
    Make sure all your fields in the admin panel are showing up on the checkout page. That is one major thing I can think of. And yes, a URL would definitely help.
    Thanks,
    -Tejas
    PS: you have some very nice illustration work there..

Please leave your comments.

Asterisk (*) items are required.

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>