How to Create an Online Store and Shopping Cart With Thesis

by Nina Cross · 223 comments

If you’re trying to build a business online, creating an online store is one of your best bets. After all, that’s how Amazon.com and Zappos.com did it.

The problem is, to create a successful e-commerce site, you need to worry about design, functionality, and security…all of which can be quite expensive.

Luckily, there’s an easier way! When you combine the wonderful WP e-Commerce plugin by Instinct Entertainment with Thesis, you’ll get a stunning online store that is SEO optimized, feature-packed, and geared for sales.

Which Type of Online Store Do You Want to Create?

There are two key ways you can implement the WP e-Commerce plugin with the Thesis Theme for WordPress: gallery view or standard view. What’s the difference?

Quite simply, the only difference between the two is how the homepage looks. To see what I mean, keep reading.

1. The Gallery View Store

When you have a store with a Gallery View home page, you’ll see products arranged in a grid, with products spanning horizontally and vertically. Check out figure 1 for a demo:

Figure 1. To see what gallery view looks like on a live site, click here.

2. The Standard View Store

When you create a Standard View online store, your products will be listed vertically with product details right on the homepage. To see what I mean, check out figure 2:

Figure 2. To see what standard view looks like on a live site, click here.

Now let’s dive right in and I’ll show you how to set up both types of online stores. Oh, and don’t worry, I’m going to make this as easy and painless as possible!

Before We Get Started…

For this tutorial, I’m going to assume you have a fresh installation of WordPress, Thesis Theme for WordPress, and the WP e-Commerce plugin on your site. If so, let’s get started.

The Gallery View Online Store

Step 1: Make Your Permalinks Pretty

While this step isn’t 100% necessary for a functional e-Commerce store, it adds to the “believability” of your shop. Personally, I know I’m much more likely to buy from a site with URLs like this: www.website.com/tshirt/phillies, instead of like this: www.website.com/?p=2374.

Plus, it’s smart to configure your permalink structure prior to doing anything else because it’s quick, good for SEO, and can prevent headaches down the road!

I personally like my permalinks structured as www.mysite.com/category/postname, however, you can structure your permalinks anyway you like. I would only advise not to use the default setting. To find out more about permalinks, the WordPress Codex has some great information.

To change your permalink structure, go to Settings → Permalinks, choose “Custom Structure” and then insert your custom permalink structure. I use /%category%/%postname%/ since I like my permalinks to look like www.mysite.com/category/postname (click here for an image).

Lastly, click on the Save Changes button.

Step 2: Create a Custom Home Page in WordPress

Since we want our home page to include a Gallery for our online shop, we need to move our blog posts to another page, which is really simple with the latest WordPress backend (version 3.0+).

First, you’ll need to create two brand-new pages:

  1. Go to Pages → Add New. (click here for an image)
  2. Enter Blog as the title, and then Publish it.
  3. Go to Pages → Add New once again.
  4. Enter Home as the title, and then Publish it.

We now need to move our posts to the Blog page and set the Home page as the new home page.

  1. Go to Settings → Reading (click here for an image)
  2. Next to “Front page displays”, choose “A static page.” (click here for an image)
  3. From the dropbox next to “Front page,” choose Home.
  4. From the dropbox next to “Posts page,” choose Blog.
  5. Click on the Save Changes button.

Step 3: Enable the Navigation Menu

To enable the Thesis nav menu, go to Thesis → Site Options (click here for an image). Under “Navigation Menu,” choose “Thesis nav menu” and then under “Pages,” check off the pages you want to include in your menu (click here for an image).

Do not check the “Home” page. It is already included in your navigation menu since you set it as your home page in Step 2. If you do check it, the “Home” link will appear twice in your menu.

Finally, click on the Big Ass Save Button.

Step 4: Build Our Gallery Using the Custom Loop API – custom_functions.php

To create the Gallery View Online Store, you’ll need to use the Custom Loop API. To do this, navigate to your custom_functions.php and insert the following code at the bottom of the page:

$gallery = new homepage_gallery;
class homepage_gallery extends thesis_custom_loop {
function front() {
?>
<div class="galleryrow">
<a href="http://www.productlink1.com/"><img src="../wp-content/uploads/2010/09/product1.gif" width="150" height="150" alt="Product Name 1" /></a>
<a href="http://www.productlink2.com/"><img src="../wp-content/uploads/2010/09/product2.gif" width="150" height="150" alt="Product Name 2" /></a>
<a href="http://www.productlink3.com/"><img class="imgright"  src="../wp-content/uploads/2010/09/product3.gif" width="150" height="150" alt="Product Name 3" /></a>
</div>
<div class="galleryrow">
<a href="http://www.productlink4.com/"><img src="../wp-content/uploads/2010/09/product4.gif" width="150" height="150" alt="Product Name 4" /></a>
<a href="http://www.productlink5.com/"><img src="../wp-content/uploads/2010/09/product5.gif" width="150" height="150" alt="Product Name 5" /></a>
<a href="http://www.productlink6.com/"><img class="imgright" src="../wp-content/uploads/2010/09/product6.gif" width="150" height="150" alt="Product Name 6" /></a>
</div>
<div class="galleryrow">
<a href="http://www.productlink7.com/"><img src="../wp-content/uploads/2010/09/product7.gif" width="150" height="150" alt="Product Name 7" /></a>
<a href="http://www.productlink8.com/"><img src="../wp-content/uploads/2010/09/product8.gif" width="150" height="150" alt="Product Name 8" /></a>
<a href="http://www.productlink9.com/"><img class="imgright" src="../wp-content/uploads/2010/09/product9.gif" width="150" height="150" alt="Product Name 9" /></a>
</div>
<?php
}
}

Notice that the last image of each galleryrow has a CSS class of .imgright (click here for an image). I included this CSS class for the last item in each row so that in Step 6 we can set the right margin to 0 for these images. This will ensure proper alignment within the page.

Each gallery item has the following:

  • href – the link to the “Individual Product Page” (we will replace this in step 8 )
  • src – the file location of the image (we will replace this in step 5)
  • width – the width of the image
  • height – the height of the image
  • alt – the alternate text for the image

In the example above, we have 3 rows with 3 products in each row. If you wanted to change it up, all you’ll have to do is add/remove extra links between the </div> tags. To make it fit, you may have to tweak the sizing of the images as well.

Note: In the above code, you’ll need to replace productlink.com with the appropriate product link. You’ll also need to set the correct image url.

Step 5: Upload Your Gallery Images

Return to your Dashboard, and under Media → Add New (click here for an image) upload each image you want to use for your Gallery View. We set the width and height of our images to 150px in Step 4. Ideally, your images should be the same size.

After you upload each image, copy the File URL for that image (click here for an image). Then, return to your custom_functions.php file and replace the image source (src) with the File URL source you just copied (click here for an image). Repeat this for each product image.

Your home page should now look similar to Figure 3:

Figure 3.This is how your e-Commerce store will look with a default Thesis Theme install.

Step 6: Let’s Make It Look Good – custom.css

Assuming the Thesis default column widths are still intact and you chose the original 3 by 3 Gallery View structure from Step 4, you could use the following code in your custom.css file to style your Gallery images:

.custom .galleryrow {
padding: 3px 0; /* Adds padding to the top and bottom of each row */
}

.custom .galleryrow img {
margin-right: 6px; /* Adds a margin to the right of each image */
padding: 4px; /* Adds padding around each image */
border: solid 2px #B8B8B8; /* Adds a border around each image */
}

.custom .galleryrow .imgright {
margin-right: 0; /* Adds a margin of 0 to the right of the last image in each row */
}

This assumes that each Gallery image is 150px by 150px. Your images can be a different size; you will just need to adjust the width and height for each product in your custom_functions.php file and then tweak the styling in your custom.css file.

Step 7: Store Categories

Now you’ll want to set-up your shop’s categories. It’s especially important if you used the category in your permalinks in Step 1.

In your Dashboard, under Store → Categories (click here for an image), click on “Add new category to the ‘Categories’ group” (click here for an image). Do this for each category you would like to use.

Step 8: Add Your Products to the Store

Now it’s time for the meat and potatoes of your shop – your actual products…

Under Store → Products (click here for an image), add each of your products. There are many settings you can choose from, however, it’s important to include the Product Name, Price, Category, and Image. You can go back and configure the other options after your shop is set-up.

Please note: The image you used for your Gallery View in Step 5 will not display on its “Individual Product Page”. You will need to upload a new image for its “Individual Product Page”. It can be different than the image you used in your Gallery. For example, the Cross Brothers Apparel site has a different image on its home page than it does on its “Individual Product Page”.

Now, go to your website and navigate to the “Products Page”. Click on the title of a product. Once you are at the “Individual Product Page” for the product, copy its permalink from the top of your browser. Then, return to your custom_functions.php file and replace the href for the product with the permalink you just copied (click here for an image). Repeat this for each product in your shop.

Step 9: Check It Out!

Figure 4. Here’s how your Gallery View Online Store will look.

The Standard View Online Store

Step 1: Make Your Permalinks Pretty

While this step isn’t 100% necessary for a functional e-Commerce store, it adds to the “believability” of your shop. Personally, I know I’m much more likely to buy from a site with URLs like this: www.website.com/tshirt/phillies, instead of like this: www.website.com/?p=2374.

Plus, it’s smart to configure your permalink structure prior to doing anything else because it’s quick, good for SEO, and can prevent headaches down the road!

I personally like my permalinks structured as www.mysite.com/category/postname, however, you can structure your permalinks anyway you like. I would only advise not to use the default setting. To find out more about permalinks, the WordPress Codex has some great information.

To change your permalink structure, go to Settings → Permalinks, choose “Custom Structure” and then insert your custom permalink structure. I use /%category%/%postname%/ since I like my permalinks to look like www.mysite.com/category/postname (click here for an image).

Lastly, click on the Save Changes button.

Step 2: Create a Custom Home Page in WordPress

Since you want your home page to include our Standard View for your shop, you need to move our blog posts to another page.

First, you must make one new page:

  1. Go to Pages → Add New. (click here for an image)
  2. Enter Blog as the title, and then Publish it.

Then, you need to move your posts to the Blog page and set the Products Page as the new home page.

  1. Go to Settings → Reading. (click here for an image)
  2. Next to “Front page displays”, choose “A static page.” (click here for an image)
  3. From the dropbox next to “Front page,” choose Products Page.
  4. From the dropbox next to “Posts page,” choose Blog.
  5. Click on the Save Changes button.

To eliminate the “Comments on this entry are closed” text at the bottom of your home page, go to Thesis → Design Options → Display Options → Comments and uncheck “If comments are closed, display a message” (click here for an image).

Lastly, click on the Big Ass Save Button.

Step 3: Enable the Navigation Menu

It’s a good idea to enable your navigation menu so that you can check our progress later in the tutorial.

To enable the Thesis nav menu, go to Thesis → Site Options (click here for an image). Under “Navigation Menu,” choose “Thesis nav menu” and then under “Pages,” check off the pages you want to include in your menu (click here for an image).

Do not check the “Products Page.” It is already included in your navigation menu since you set it as your home page in Step 2. If you do check it, the “Products Page” link will appear twice in your menu.

Finally, click on the Big Ass Save Button.

Step 4: Store Categories

At this point, you’ll want to set up your shop’s categories. It is important if you used the category in your permalinks in Step 1.

Under Store → Categories (click here for an image), click on “Add new category to the ‘Categories’ group” (click here for an image). Do this for each category you would like to use.

Step 5: Add Your Products to the Store

Now it’s time for the meat and potatoes of your shop—your actual products.

Under Store → Products (click here for an image), add each of your products. There are many settings you can choose from, however, it’s important to include the Product Name, Price, Category, and Image. You can go back and configure the other options after your shop is set up.

By default, the WP e-Commerce plugin shows the P&P on the “Products Page.” To turn this off, go to Store → Settings → Presentation. Then, next to “Show Postage and Packaging,” choose “No.” Finally, click on the Update button.

Step 6: Check It Out!

Figure 5. Here’s how the Standard View Online Store Looks.

You’re Good to Go

Congratulations! You are now the proud owner of a killer Thesis e-commerce website to show off your awesome products. Now go on and make some money!

Additional Resources:

  • Adam Purcell from Hungry Dog Media did an awesome video tutorial which reviews all of the configurations in the WP e-Commerce’s Settings panel which is located under Store → Settings (click here for an image). I would advise you to view his tutorial and configure the plugin to fit your needs.

About the Author: Nina Cross is a WordPress + Thesis Web Designer who is also one of our featured designers here at DIYthemes. Not only does she specialize in creating clear, engaging websites for her clients, but she also strives to ensure every site she creates is eye-catching, unique, and just plain awesome. You should check out Nina's web design business over at Nina Cross Design. You can also connect with her on Twitter here.

If you enjoyed this article, enter your email below to get free updates!

{ 223 comments }

Willie Jackson

Yeah…this is pretty awesome. I turn down ecommerce projects 10 times out of 10 because I find them to be hopelessly complicated and a bear to deal with, but the wheels are a-turnin’ now :-D

Derek Halpern

Nina makes it sound so easy to set up, right? I always thought configuring shopping carts and online stores would be difficult. However, apparently, all you need to do is install a plugin and execute a few cut and pastes :-D

Nina

Thanks Willie! I hope it can help you out for future projects. Let me know whenever you do get around to using it – would love to hear how you made out.

Tracy

For a totally untechnical person – sorry :-( what does this mean please? – 1. fresh installation of WordPress – yes I have this though I am using the Twenty Ten theme and have only just started setting up! 2. Thesis Theme for WordPress – where do I find this – will it change all my settings and what I have already done? and 3. the WP e-Commerce plugin on your site – scary!
I so need an online store but I cannot do any coding unless really clearly mapped in a vid or with the kinds of examples you gave above. Should I just give up now! Tracy

Kay

yea, this looks awesome.

Just want to make sure but I’m guessing one could add to any page as long as they included the page ID somwhere here:

$gallery = new homepage_gallery;
class homepage_gallery extends thesis_custom_loop {
function front() {
?>

where would this go?
if (is_page(‘****PAGE ID****’)){
?>

Nina

What a great question, Kay! To insert the gallery on a specific page, you would use the following code:

$gallery = new homepage_gallery;

class homepage_gallery extends thesis_custom_loop {
    function page() { 
    if (is_page('PAGEID')) {
    ?>
    <div>
        <a href="http://www.productlink1.com/"><img src="../wp-content/uploads/2010/09/product1.gif" width="150" height="150" alt="Product Name 1" /></a>
        <a href="http://www.productlink2.com/"><img src="../wp-content/uploads/2010/09/product2.gif" width="150" height="150" alt="Product Name 2" /></a>
        <a href="http://www.productlink3.com/"><img class="imgright"  src="../wp-content/uploads/2010/09/product3.gif" width="150" height="150" alt="Product Name 3" /></a>
    </div>
    <div>
        <a href="http://www.productlink4.com/"><img src="../wp-content/uploads/2010/09/product4.gif" width="150" height="150" alt="Product Name 4" /></a>
        <a href="http://www.productlink5.com/"><img src="../wp-content/uploads/2010/09/product5.gif" width="150" height="150" alt="Product Name 5" /></a>
        <a href="http://www.productlink6.com/"><img class="imgright" src="../wp-content/uploads/2010/09/product6.gif" width="150" height="150" alt="Product Name 6" /></a>
    </div>
    <div>
        <a href="http://www.productlink7.com/"><img src="../wp-content/uploads/2010/09/product7.gif" width="150" height="150" alt="Product Name 7" /></a>
        <a href="http://www.productlink8.com/"><img src="../wp-content/uploads/2010/09/product8.gif" width="150" height="150" alt="Product Name 8" /></a>
        <a href="http://www.productlink9.com/"><img class="imgright" src="../wp-content/uploads/2010/09/product9.gif" width="150" height="150" alt="Product Name 9" /></a>
    </div>
    < ?php
    }
    else 
        thesis_loop::page();
    }
}

Be sure to change PAGEID to the page id where you want your gallery.

Darren

I am trying to setup my first stoe, and must be doing something wrong, I can not get any products to show on the products page.

I went to the forum, and lots of info in there about WPecommerce no being compatible with Thesis.

What am i doing wrong and ideas??

Annie Sisk (Stage Presence)

I’m having the same problem, Darren. Not sure what’s gone wrong where.

Jonathan Haywood

Hey Nina, First this is absolutely fantastic. Can’t thank you enough for putting this together. After running through the tutorial, everything worked, but then I added:
function page() {
if (is_page(‘PAGEID’)) {
?>
and I got a parse error when I tried the page id # and the url. What could I be doing wrong here?

Dan Milward

Nice post Nina!!! I’ll be linking to this from the getshopped.org website real soon :)

Nina

Thanks Dan! So glad it can help out your WP e-Commerce users. Don’t hesitate to contact me if you have any questions.

Thomas Griffin

This is an excellent tutorial! Bookmark = check! :)

Nina

Awesome! Thanks for dropping by!

Carlos Takemura

@Nina – Great article but rather spoilt by the advice on custom permalink structures starting with ‘category’. In the WP Codex they advise it’s NOT a good idea to start with category:

http://codex.wordpress.org/Using_Permalinks

Pay attention to the following snippet from the above link….

For performance reasons, it is not a good idea to start your permalink structure with the category, tag, author, or postname fields. The reason is that these are text fields, and using them at the beginning of your permalink structure it takes more time for WordPress to distinguish your Post URLs from Page URLs (which always use the text “page slug” as the URL), and to compensate, WordPress stores a lot of extra information in its database (so much that sites with lots of Pages have experienced difficulties). So, it is best to start your permalink structure with a numeric field, such as the year or post ID.

Willie Jackson

I’d love to see some actual performance testing around this. I have long since ignored this rule, as do most people I know.

Derek Halpern

Me too Willie. Including your category name in your URL is one of the best ways to create a hierarchy that makes sense from both a usability and SEO perspective.

Please note one key thing in that excerpt… They mention that a site with a lot of pages experienced difficulties. In my experience, most people don’t have a lot of pages. Instead they have a lot of posts. So if that’s the case, I think most people should be okay, right?

Adam Baird

This isn’t quite correct. When you start your permalinks with any word (post title, category, tag, “blog”, etc.) WP can’t figure out whether its a page or a post. Its response is to add a bunch of crap to each post in your DB. It creates bloat and is a bad idea if you plan on having more than a few hundred pages or posts.

If you only ever plan on having a few hundred posts and pages, the impact is minimal I wouldn’t worry about it. However, I’ve worked with clients who have several thousand posts and are experiencing major lagging in load time because they’ve done something similar.

As the link above recommends, you just need to use something numerical at the beginning of your perms. Then WP won’t add all that extemporaneous junk to your DB.

The easy solution to this is to add %post_id% to the beginning of your permalinks. Its not quite as pretty, but you can put whatever you want after that and WP will behave.

Nina

I would have to agree with both Willie and Derek. Like I said in the tutorial, I would recommend using the category in the permalink for added “believability” of your shop. It is extremely important to provide your customers with as much assurance as possible that you are a legit business. Yes, Amazon uses numbers in their permalink, but they’re Amazon! They do not need to assure their customers that they are legit. However, most small businesses do. Sometimes it’s more important to remember who you are building a website for rather than anything else.

Laura Sandy

Nina this is amazingly helpful. Great article and very easy to understand!!!!

Nina

Thanks Laura – I’m glad it was an easy read for you!

Heather Goff

I’m really glad you wrote this blog post, because I’d tried installing wp-ecommerce on a blog with thesis theme several weeks ago and it generated so many errors I assumed that the two weren’t compatible. I’m really happy to know that they are. Thank you!

Nina

So sorry to hear about your issues from before, but Thesis and the WP e-Commerce plugin are definitely compatible. Hope you can use this tutorial for a future project!

Ross

Super cool post! Boy, I could have used this about 3 months ago. I tried the Thesis + wp e-commerce combo and found it too convoluted, and instead went with WPA Storefront theme made specifically for wp e-commerce. My decision has more to do with my limited skill set, design vision, and comfort with theming Thesis. Maybe more posts like this will make the combo seem less intimidating.

Nina

Thanks Ross! Sounds like you are in the same boat as Heather – previous attempts didn’t work out for you. This tutorial should set you up for some great e-commerce websites in the future. Good luck!

Dennis

Hi Nina,

I have just come across your most excellent post and wanted to say thank you for en lighting me and giving me the confidence to apply this!!

Nina

No problem Dennis! It is painless to implement the WP e-Commerce plugin with Thesis – they are definitely a good match for one another.

Abraham

I am new to blog design and I will be testing this e-commerce for blogging. But based on the reviews, it looks that I will have much to comment on when I am done….thank you for the information!

Nina

You are welcome Abraham. Best of luck with tackling your next project!

Rex

@Nina – great article and thanks!

Any idea why the search widget doesn’t work with WP e-commerce? I’m going to check over on their support forums too, but thought you might have an idea.

Nina

Hey Rex – thanks for stopping by!

I am not sure why you cannot search products via the search widget. After a little research, I came across a product from Visser Labs which enables advanced search capabilities – Simple Unified Search for WP e-Commerce. I have never used it so I cannot recommend it but it may be worth your while to investigate it a bit more. Hope this helps!

Eric

Nina,
How easy you make it! Thanks for finally putting it all down for us. Keep up the hard work and great sites!!

Nina

You got it, Eric :)

Cooker Elements

Hi Nina

Outstanding work. Well thought out and written.
With your attention to detail you should write a book on how to design with thesis. I know I would buy a copy.
Why not write up an article on how you designed crossbrothersapparel. Pleaseeee!

Nina

I’m glad it was so easy to follow. Definitely thinking about pumping out some more tutorials in the future – stay tuned :)

Mark

Wow! I love cheese. And this is the tutorial I’ve been looking for.

Nina

Happy to hear!

Kasey

This is a great tutorial that got me on my way and also helped me pull the trigger on this great plugin. Thanks for taking the time to explain how easily this can all be done.

Nina

No problem, Kasey! Thesis and WP e-Commerce work extremely well together.

Bret

Nina,

Thanks for a great article. I am an absolute beginner with web sites, wordpress, etc. I am a veterinarian by education and the whole wordpress, thesis, wp-ecommerce thing is something I’ve only known about for literally 2 months. That said, I have been reading great posts like yours and many others to design and build my site, which for a beginner is not too bad. I have tons to learn but posts like yours which are so clearly written and documented make things so easy. PLEASE continue to write these great posts for all of us beginners!

Nina

Thanks Bret! I’m glad this tutorial was so beneficial for you. We ALL have tons to learn but everyone needs to start somewhere, right? The Thesis Theme Blog is a great resource for all levels of Thesis users.

jim

Nina, I am trying to figure out if this plug in allows for drop down pricing such as, by size of the product say 24 x 36, 30 x 40, with a different price for each product size drop down item, then product enhancement that can be added that has multiple choices with a name, or another identifier, for example 24 x 36, with “description” add on that adds to the base price of the 24 x 36 product item? I don’t do the development work so I hope you can understand what I am asking? Thank you very much. Jim

Nina

Thanks for your question, Jim! It sounds as though you need to set-up a variation for your products.

In your Dashboard, go to Store → Variations. Then, enter your information under “Add Variation Set”. Your Variation Values would be 24 x 36, 30 x 40, etc.

Next, add a new product (Store → Products). Scroll down until you see “Variation Control”. Check off the variation(s) you would like for that product and then a price box should appear next to each variation. This is where you can change the price for each one.

I hope this helps! Best of luck!

Glenn

I was wondering if it was possibly to move the “gallery view home page” to a different page?

i.e., I want to create my home page where there is 2 images: One, for “Guys” and one for “Girls”. When the customer clicks on either “guys” or “girls” it will then lead them to a gallery view page like explained in example one above.

Nina

Hi Glenn,

Thanks for your question! I think you are looking for the same thing that Kay asked about in a previous comment. If so, here is the code you would use in your custom_functions.php file:

$gallery = new homepage_gallery;

class homepage_gallery extends thesis_custom_loop {
    function page() {
    if (is_page('PAGEID')) {
    ?>
    <div>
        <a href="http://www.productlink1.com/"><img src="../wp-content/uploads/2010/09/product1.gif" width="150" height="150" alt="Product Name 1" /></a>
        <a href="http://www.productlink2.com/"><img src="../wp-content/uploads/2010/09/product2.gif" width="150" height="150" alt="Product Name 2" /></a>
        <a href="http://www.productlink3.com/"><img class="imgright"  src="../wp-content/uploads/2010/09/product3.gif" width="150" height="150" alt="Product Name 3" /></a>
    </div>
    <div>
        <a href="http://www.productlink4.com/"><img src="../wp-content/uploads/2010/09/product4.gif" width="150" height="150" alt="Product Name 4" /></a>
        <a href="http://www.productlink5.com/"><img src="../wp-content/uploads/2010/09/product5.gif" width="150" height="150" alt="Product Name 5" /></a>
        <a href="http://www.productlink6.com/"><img class="imgright" src="../wp-content/uploads/2010/09/product6.gif" width="150" height="150" alt="Product Name 6" /></a>
    </div>
    <div>
        <a href="http://www.productlink7.com/"><img src="../wp-content/uploads/2010/09/product7.gif" width="150" height="150" alt="Product Name 7" /></a>
        <a href="http://www.productlink8.com/"><img src="../wp-content/uploads/2010/09/product8.gif" width="150" height="150" alt="Product Name 8" /></a>
        <a href="http://www.productlink9.com/"><img class="imgright" src="../wp-content/uploads/2010/09/product9.gif" width="150" height="150" alt="Product Name 9" /></a>
    </div>
    < ?php
    }
    else
        thesis_loop::page();
    }
}

You need to replace PAGEID with the page ID where you want your gallery. Hope this can help you out with your shop!

Glenn

Ahh sorry, the comments didn’t show up for me at first, I think my page just didn’t load all the way. Sorry for the repeat question. Thanks for answering again though :)

Nina

No problem, Glenn! Glad you found what you needed :)

Glenn

Alright, one problem I’m running into is that I created a page called “Shop” and on that page I have 2 images “Guys Apparel” and “Girls Apparel” and each image is linking to the respective page ‘domain.com/shop/guys’ and ‘domain.com/shop/girls’

I entered the gallery code in the custom_functions.php for the guys page and the gallery works fine, however, when I enter the code again for the girls (this code is placed right under the guys gallery page):

// Shop Guys Page

$gallery = new homepage_gallery;
class homepage_gallery extends thesis_custom_loop {
function page() {
if (is_page(’54′)) {
?>





<?php
}
else
thesis_loop::page();
}
}

I get an error:

Fatal error: Cannot redeclare class homepage_gallery in /home/username/public_html/domain.com/wp-content/themes/thesis_18/custom/custom_functions.php on line 78

How would I be able to make 2 different galleries on 2 different pages? (i.e., a gallery on the guys page, and one on the girls page)

Nina

You need to change homepage_gallery to something different for the second one. Rather than using homepage_gallery at all, I would use guys_apparel for the guys gallery and girls_apparel for the girls gallery. Be sure to change it twice (notice how homepage_gallery is located on two lines).

Glenn

Once again thanks Nina. I knew it was probably something small that I was overlooking/missing.

Nina

Glad it was what you needed. I would love to see it when it’s up and running!

Brandlantern

One Word: A.W.E.S.O.M.E
Great Tips mate!!

Sherie

I’m having trouble with Categories and Groups. Do you use Groups instead of Categories or is a Group a breakdown under a Category?

Thanks,
Sherie

Nina

If I am following you correctly, categories are within a group. For example, the Cross Brothers Apparel site has a group called “Categories” and it lists each category under that group: t-shirts, sweatshirt, sweatpants, hats, etc. Groups are found under the Categories section from the Dashboard. Hope this helps!

Robert

I have no idea what im doing. still trying to learn web design.
I was trying to add a store using the code above (copy and paste) that is so far the extent of designing skills. I have been to this error before : Parse error: syntax error, unexpected $end in /home4/wearepat/public_html/wp-content/themes/thesis_18/thesis_18/custom/custom_functions.php on line 60.
My solution is to just delete my thesis upload and reinstall and just start over till i get it right. I know the problem is my awesome abilities as a web designer. I just keep getting frustrated. right where you said to put the PageID, I put http://www.wearepatriots.com/store-2/ and got the above error. is there parts to that code i should omit.

Nina

Hi Robert,

Rather than putting the URL where the PageID goes, you should put the PageID number for that page. To find the PageID number, log into your Dashboard. Then, go to Pages. Hover over the page link and in the bottom of your browser, you should see a URL. Within the URL, it will say post=#. For example, it will say post=5 which means the Page ID would be 5. You would then put 5 where it says PageID in the code.

Good luck with your shop!

Mitch

Gee, this doesn’t seem to lend itself to a large store with hundreds of products. How do you handle that situation?

Nina

Hi Mitch,

Visser Labs has developed a plugin that handles adding hundreds – even thousands – of products: http://www.visser.com.au/wp-ecommerce/plugins/product-importer-deluxe/

I have personally never used it but it may be worth looking into. Best of luck!

Sean

Are there any other implemantations of mass-product plugins like the aforementioned plugin from Visser.com?

Nic

Many thanks for this, Nina!
I am trying to figure out if the combination Thesis & WP E-Commerce works for me. Since I don’t know thesis yet: Is it possible to easily change for example product headings from h3 into h1 without having to recode something with every update?

Nina

Hi Nic,

It is recommended that you only use one H1 tag on your webpage. Having more than one can significantly decrease the SEO of your site. Thanks for dropping by!

Nic

thank you for your answer! I would rather have the product name as h1 instead of the title “shop” which is always the same – would I be able to do this within the template?

Nina

I’m not exactly sure. I would check over at the Support Forum for the WP e-Commerce plugin – http://getshopped.org/forums/

Herrin Larkan

So Wp_ecommerce works that well now? At least with Thesis you mean? I have had no end of hassles with the plugin. Needing a lot of customization and backend work as well.

Nina

I didn’t run into any trouble with it, however, this post is more about how to design Thesis and the WP c-Commerce plugin to best suit your needs.

Daniel C

Nina,
After we populated our products page, we can’t seem to get the checkout cart to show up. Any thoughts?

Nina

I would check the Support Forum for the WP e-Commerce plugin – you can find a lot of valuable information there.

You can find the forum at http://getshopped.org/forums/

Sherry

Nina,
Can this be used without the shopping cart? I am setting up an affiliate site and would like the products to be formatted the same as you discussed in your article. But instead of sending the customer to a shopping cart on my site, I would be sending them directly to the merchant.

If this won’t work for me, do you have another suggestion?

Thank you!

Nina

Hi Sherry,

I don’t see why not. You may need to make a few tweaks based on your specific needs, but it can be done. Good luck with it!

Henry

Hello Nina,
Great information.
My question is, can you have more than one page with products? I want a league page (as home page), individuals page, and a loser page all with their own products is this possible with WP e-c/Thesis. Any help would be greatly appreciated.
Thanks,
Henry

Nina

Hi Henry,

Yes, it is possible! Under Store -> Categories you can add the three categories (league, individuals, and loser) and then assign each trophy to one of the categories when you add the product. Lastly, link the menu tab to the specific category page. Best of luck :)

Thao

I am new to WP so this might be a stupid question. Does this only work with your own domain or will it work with wordpress.com site. I want to try this out but do not want to get a domain.

Nina

Hi Thao,

Yes, this only works for WordPress.org websites, not WordPress.com.

And there’s no such thing as a stupid question :)

Sharon

Hi Nina! First I want to say thanks for this very helpful tutorial. It is making my life MUCH easier! Kudos to you for the good work.

I am in the process of implementing your directions on a test blog, and one glitch I encountered… The CSS styling wasn’t being applied to the homepage gallery. So I added the to the Custom_Function.php code, that that did the trick.

However, I’m still learning how this all works, and I’m not sure if that was the proper way to fix it. If there is a better solution, would you let me know?

Nina

Thanks, Sharon! I’m glad you found it useful.

All CSS styling should go in the custom.css file. Send me the site’s address as well as copies of your custom.css and custom_functions.php files. You can contact me at http://ninacross.com/contact

Thanks!

Antoine

Hello,

First I would like to thank you for your post, I think it’s a very valuable help for newbies like me :)

I followed your steps for the The Gallery View Online Store, but I have a problem on step 5… could you please help me ?

The pictures of my products appears on the homepage but i dont have any information stripe at the bottom of the pictures… and it seems like the code in put in my custom.css file to style the Gallery images doesn’t change anything…
My website is : http://www.tondeusepourchien.info
Could you please help me ?

Regards,

Antoine

Nina

Hi Antoine,

The information strip is actually part of the image – it is not coming from any code.

I’m glad you found the tutorial useful – good luck with your site!

Ruby

Hi

Would you recommend using wordpress for an online store? i am looking to maybe start selling around 20 items with different sizes. This could get bigger if its successful.

Nina

Yes, Ruby. WordPress, Thesis, and the WP e-Commerce plugin are a great combination for a killer store. Good luck with it!

Rita

Hi Nina, even though you provided the CSS, I have not been able to add more spacing in between the products. I want a two column look with five products up & down in the right column which is approximately 900 px. I tried to just modify the padding but nothing changed. Any help would be wonderful.

Nina

Can you provide the url for your site so that I can check it out?

Rita
Nina

If you would like two columns, you can only put two images in each div. Right now you have five images in each div. If you are still having trouble, feel free to send me an email at ninacross.com.

Bob

Hi Nina,
so nice that u post this tutorial, not many to find this good n simple explained.

Can any WPtheme work with WPecommerce or must be WP ecommerce theme?
Is it nesesary to edit php code or just to configure plugin from WP control panel?

Nina Cross

To my knowledge, the WP e-Commerce plugin can work with any WordPress theme. You can configure the plugin right from the WordPress Dashboard – no PHP editing is necessary.

Bob

Can u please just tell me where to change text of money currency USD to dollar or something else?I had searched every code and cant find??I searched leanguage.php but nothing happens

Nina Cross

Sure thing, Bob. In your Dashboard on the left hand side, navigate to Store –> Settings –> Currency Settings. You will now see a dropdown to select the Currency Type.

Bob

Yes I know for that, but I need to change manually in some code to type whatever is need.Tnx Nina

Bob

Just to explain u better, I need to change text manually ‘USD’ to ‘POINTS’ so it must be changed in some code

Nina Cross

I’m not sure how it can be done but you can check the WP e-Commerce forum to see if your question is answered there – http://getshopped.org/forums/

Bob

Found it, it must be changed in sql base. Thx Nina

Spoiledkid01

Can i create an amazon store using this method , if so . What changes are necessary ?
I just want to create an affiliate site .

Nina Cross

No, this tutorial uses the WP e-Commerce plugin.

Spoiledkid01

Do you know a good tutorial on creating an affiliate site with thesis. Please share it. Thanks in advance.

Derek

Hi Nina this is a great tutorial! Thanks! I know you developed this with use with the Thesis template, my question is can I us the same coding / method for a wordpress template I built myself?

Derek

just realised i dont have custom functions.php in my template so cant procede with your gallery view store tutorial (non thesis template) is there a work around i can use or am i forced to get thesis tempate :)

Nina Cross

You will not be able to simply copy and paste it into your theme’s functions file, however, with some tweaking, you should be able to get it to work. If you would like for me to take a deeper look at it for you, send me an email over at ninacross.com.

Derek

thanks, will do

Jimmy

I am having an issue with WP e-Commerce. When I have the WP e-Commerce plugin activated on my Thesis site, everything in my two right-hand side-bars is pushed down to below the main page content. Has anyone seen this problem before? I would really appreciate some help figuring out what is going on. Thanks.

Jimmy

I found the solution here:

“WP e-Commerce is causing the problem. It’s putting CSS into your site thats causing the content column to stretch out and is messing up the layout. To fix you should edit the WP e-Commerce theme style and change where it says:

#content, #content input.wpsc_buy_button {
    font-size: 12px;
}

to:

#content input.wpsc_buy_button {
    font-size: 12px;
}

Nina Cross

So glad you found the answer, Jimmy. Best of luck with your site!

Jessica

Jimmy,

Thank you so much for finding this fix! I just swapped out the coding and NOW it’s working beautifully!

Nina,

Thank you to you, as well, for sharing this tutorial. I can’t wait to share the final product with the world. You’re genius!

Jessica

Nina Cross

No problem, Jessica. Glad I was able to help you out with your project!

Dhaval

Thank you Jimmy, appreciate the fix.

Mark Fisher

Hi, Firstly many thanks for your tutorial. It’s been great.
However, I’m hoping you can help with this.
I want sidebar/content sidebar in my thesis theme.
I can’t figure how to get the image gallery setup as per your tutorial to sit in the content frame as expected.
Can you help?
Cheers
MArk

Mark Fisher

Hi,
I emailed this morning with a red-herring.
Anyway, things are progressing but I cannot seem to get the custom.css code snippet to work…..the bit that puts borders and padding around the 9 gallery images on my front page (static).
I have followed ytour instructions but it seems to make no change.

Cheers
MArk

Nina Cross

Hey Mark,

I made a change to the PHP code in Step 4 of the tutorial. See if that works for you. If you are still having an issue, shoot me an email over at ninacross.com.

Abid Ali

I think that the Standard View online store is perfect, we can list our products vertically with product details right on the homepage.

Dave

I’m new at this and although I’ve been able to build a few Thesis sites so far I’m stuck on the Custom Loop API. Every time I try to copy it into the bottom of the custom_functions.php file I get an error message(Fatal error: Class ‘homepage_gallery’ not found in /home/content/05/7870605/html/funnyboxingtees.com/wp-content/themes/thesis_17/custom/custom_functions.php on line 32). I don’t think I’m understanding how I need to change the code itself to make it work.
Any help would be greatly appreciated.

Chris Pearson

Dave, go ahead and post this issue in our forums, and I’ll have the DIYthemes team take a look at the problem!

Based on your brief description, it looks like you simply need to declare your class like so:

$woohoo = new homepage_gallery;
class homepage_gallery {
function home() {
// Custom home page output goes here
}
}

TerjeMK

Hi, thanks for a great tutorial.

I am working on a thesis shite that wil include this plugin to run a smal shop but not as the front page. I want the page where products shows to be set to lets say a page called Shop. How do I target this page as the storefront?

Regards
TerjeMK

Nina Cross

You can set this up under Settings → Reading. Then, choose “A static page” under “Front page displays”. Finally, choose the Shop page from the dropdown.

Charmaine

Hi Nina,

Thanks for the awesome tutorial. It’s very useful for a new site I’m learning to build!

I’m wondering – for offsite product link, is it possible to change the add to cart button to a customised button that i created myself? For the moment I’m only able to change the word on the button, but not the design of the button.

Nina Cross

Yes, it is possible to change the button with a button that you designed. Email me via my website with the URL for your site and I will help you out.

Jonathan Bahr

Hi,

The remove and purchase buttons are being clipped in half on my checkout page regardless of the size of the content column and sidebar.

Any ideas?

Nina Cross

Email me via my contact form on my website and I will take a look at it. We’ll figure out what’s going on.

Krystyn

Do you think this is something to set a client up with that will want to change out the store easily? I worry about people accessing the php file and breaking things.

Thoughts?

Nina Cross

It really depends on how comfortable the client is with FTP and code. If you are able to walk them through it a few times, they should be good to go.

drum band

Hi Nina , i ‘m glad found your tutorial e-comerce, but i’m stress when i follow your step, my site not show like i want. exaple, widget not in right place. Please if don’t maind check this http://www.antzproducts.com/
thx

Nina Cross

Your website isn’t coming up for me at all. Is that the correct URL?

drum band

i’m sorry, my site is trobel. now is fix. but i still have problem with my sidebar. when i active the e-commerce plugin, my sidebar go to down side.
How to fix it?

thx

drum band

Everthing fix by godhammer.

Nina Cross

Glad to hear :)

Shane Arthur

Fantastic resource. Thank you for taking the time to do this post. I’m going to attempt this in the next week, so I’ll let you know how it goes.

I plan on coming up with a naming convention to make this process easier. Ex. coffee_lg for large image, coffee_sm for small images, and follow this convention for each product. Once all the graphics are created I can upload them at the same time. Doing so will put them all into the same month folder, so if I have to change pictures down the road via FTP, it will be easier. And if I have to add products to each line, the naming convention is key to the copy/paste process.

P.S. Did you happen to know the url of Adam Purcell’s customization video linked at the end of your post? That would be extremely helpful to me as I KNOW I’ll have to tweek some options.

Shane

Nina Cross

No problem. Glad to help :)

Here’s the link to the video – http://wordpress.tv/2009/03/16/getting-set-up-with-the-wp-e-commerce-plugin-settings-and-configuration/

Good luck!

Shane

Thank you once again. I was waiting to install this plugin and tinker until after I watched his video. I was hoping you could answer two questions I believe I have (until I can confirm them when I install this over the weekend).

1. The store I’m going to build is for a business that will give the products to the customers when they show up at their place of business (near a train station). So the customers would order their stuff and pick it up right before they board the train, so they don’t need any billing address information. I’m hoping this plugin works under this criteria, does it?

2. Have you done a regular install of this ecommerce plugin where you don’t tinker with the custom functions file? On initial viewing of Adam’s tutorial, it appeared that I could create a store without the need to customize.

Again, many thanks for what you’ve created here. As a fellow tutorial creator, I value the effort you put into this.

Nina Cross

Shane,

Here are the answers to your questions:

1) You can configure it so that shipping information is not needed and therefore not displayed.

2) There is absolutely no need to edit any PHP files (or any other files) when using the WP e-Commerce plugin. I only outlined editing custom_functions.php in this tutorial if you want a store front similar to the “Gallery View Store”. You will want to follow the “Standard View Store” steps if you wish not to edit custom_functions.php.

Shane Arthur

Excellent. I think I’ll try the out-of-the-box install first, just to see how it looks. Then, if I’m not happy with it, I’ll follow your method. Can’t wait to get this skill set under my belt. I’ve got a feeling, if I happen to face some issues, the section where I link up everything to PayPal will be it. I just have a feeling about it. Tomorrow is install/tinker day for me. Until then, anything I should look out for with PayPal that you’ve experienced?
Shane

Shane Arthur

UPDATE:

So, I finally installed the free WP e-commerce plugin and have some observations/questions.
1. Even though I’ve coded HTML and CSS in the past, it’s an intimidating beast to try and tame this storefront.
2. I installed the free version of the plugin and don’t see the part in Adam’s video where I get to choose where the storefront goes in the Admin tab. I don’t know if I have to buy one of the List View or Grid View options to see this, so for now the store goes to a /product-pages/ sub directory which throws off my Thesis navigation CSS color coding options.
3. The free standard install seems to not cooperate with a Thesis layout with a sidebar. It appears that the purchase and checkout buttons don’t have enough real estate to show all the letters in the words. This forces me to believe that I may need to do a one-column install for the site I’m working on.
Any experience with any of these observations?If you can give it, thank you in advance for your time.

Shane Arthur

UPDATE #2:
With the use of Firebug, I was able to tweak the css to make the proceed to checkout text show on the button, therefore I won’t have to go with a one column layout. I’ll have to mess with other buttons that are odd. This layout issue is a big flaw to this plugin that I hope they address. (In my opinion)

Khaled Allen

Thank you for posting this. I just joined the Thesis community after trying Headway. Not only have I found Thesis much more user-friendly, I’ve found the community much more helpful and approachable, thanks to people like you Nina.

Nina Cross

Thanks, Khaled! It truly is an awesome community!

vadkins

I have an existing WP installation at the root directory of my website and use the Thesis theme. In the root directory are the pages of the website. Can I install the e-commerce plugin in a /store sub directory in this WP installation?

Nina Cross

It’s a plugin so you are going to want to make sure you upload it to your plugins folder. Instructions can be found here – http://wordpress.org/extend/plugins/wp-e-commerce/installation/

Once it is uploaded and activated, you can set up where the pages will be located.

vadkins

Thank you, Nina.

Louise

I’m having trouble with the products page. I’m using the Gallery View Store and redirected everything to my /shop page instead of the homepage. The gallery view works until I get to my individual product pages – which is blank except for the description text. There is no picture (even though I added one as a thumbnail), there is no add to cart or buy now button, and there is no price displayed. Help!
http://louandesi.com/?wpsc-product=mixer-test-page

I can’t seem to get the product information to show up. When I manually insert the [add_to_cart=201] shortcode, an add to cart button displays but it is not linked to anything.

If I manually insert the add product page shortcode, the entire page is just completely blank, including headers and sidebars.

Nina Cross

This question is more about the functionality of the plugin rather than the design. You’re going to want to head on over to the WP e-Commerce forums to see if someone can help you out there → http://getshopped.org/forums/

Kandi

erm, silly question – where do I find my custom_functions.php

I went so appearance -> edit and there’s a whole list on the right, but I can’t see this file.

Sorry if I’m being stupid!

Nina Cross

The file is located within the backend of your site. You will need to use FTP access to locate it. You can obtain your FTP login information via your hosting company.

Tom

Hi Nina
Great article. I have seen on some of your pages and checkout page is displayed as separate page not respecting default layout. To be more specific..lets say default is 2 column layout but when going to checkout page I want checkout page to be displayed as whole page without 2 column layout. Any direction how to achieve that will be appreciated.Thanks

Nina Cross

You can use the “No Sidebars” template on your Checkout page.

Brooke

Copying and pasting the initial code results in a parse error… not sure exactly what the problem is since I’m just copying and pasting!

Nina Cross

Make sure you are pasting it under the <?php line.

Layla A.

I just tried to use your code for the gallery and I am now locked out of my admin wordpress page & my website is down. This is what comes up when I go to my website: Fatal error: Class ‘homepage_gallery’ not found in /home1/poshsurf/public_html/wp-content/themes/thesis_182/custom/custom_functions.php on line 68
Can you help please? I am locked out, I’ve tried .php. I’m at a loss.
Thank you

Nina Cross

I would recommend using FTP access to make the changes rather than the Custom File Editor.

Lisa

Hi, I recently installed WP eCommerce on my Thesis Theme website. For some odd reason, my individual product images won’t display. I’ve uploaded them manually on each product and nothing happens. If I deactivate Thesis and try a different theme, the product image shows. I can’t find anything online; do you perhaps have a solution?

Nina Cross

Hmmm, not exactly sure why that is happening. Are you running the latest version of WP e-Commerce? And what do you mean by “I’ve uploaded them manually”?

Britt Malka

@Lisa – I had same problem as you, plus the “Add to Cart” button only shows a “Add to C” – the field is simply too short.

I spend a while searching for a solution, until I found out that version 3.8 of WP e-Commerce is not very compatible with Thesis Theme. They promised to correct the problem in version 3.9.

Dan

I’m stuck in the very same place.

I used this code:

function wpsc_gallery_css_mods2() {
print ‘
td.savesend input.button {
display:block !important;
}
‘;
}
add_action(‘admin_head’, ‘wpsc_gallery_css_mods2′);

But it’s not a perfect solution since it gives an invalid argument later on.

David

Excellent training Nina! Though I don’t need the online store right now, I bookmarked this page. Thank you!

Jay

Hi,
Just came across this theme. I am ready to consider this theme if it can allow me to just use google checkout as the only option for the checkout. I am an individual and I want to just sell a few products, so just list products, when added to cart, i want to take the customer to finish it google checkout. Is this possible? Please clarify me!! Thanks in advance.

Jay

Also, is this out of the regular thesis theme converted to a shopping cart site? Or do you have a different theme for this ecommerce/shopping?

Nina Cross

This tutorial is for the Thesis Theme paired with the WP e-Commerce plugin. The WP e-Commerce plugin does offer a Google Checkout capability.

Aaron

Nina,

thanks for a great tutorial. I had the grid up and running, but as soon as I tried to move it to another page, I got this parse error message:

Parse error: syntax error, unexpected $end in /home4/desigqg8/public_html/wp-content/themes/thesis_182/custom/custom_functions.php on line 40

I used the site ID number, but it still gives me this error. When I remove the code and replaced it with the code for the home page, it still gives me the error. So, now I can’t put the grid on my site at all.

Do you have a recommendation?

thanks!

Nina Cross

Check out the code I gave Glenn in the comment above.

Aaron

Thanks Nina. I was using that, and for some reason it wasn’t working, but after retrying the same thing 20 times (i know that is the definition of stupidity) it actually worked!

At least I was persistent.

Thanks.

www-sextoytrc-com

Thank you. I was wondering build up a store using wordpress

Jean Layton

Newbie alert:
I would love to put up a store on my site but am concerned about one thing. If I change the permalinks structure to read %category%/%postname%/ what happens to all my older posts? Do all the permalinks go dead?

I write monthly for a rally that posts a list of live links at the end and would just hate to create chaos.
Thank you so much for all this help

Jean Layton

Sorry for the prior question, I just did it anyway and found that they just redirect. Thanks

Nina Cross

Great to hear!

Mac

Hey Nina! Great tutorial. Is there anyway to add the gallery to seperate pages? So for example I want one gallery on my homepage and another on my page for women’s products?

Nina Cross

Yes. You will just need to duplicate the code and then use the Thesis Custom Loop API for each page.

dan luther

excellent post there Nina. I always used wp-ecommerce plugin for my e-commerce projects.

Nina Cross

Glad to hear WP e-Commerce is a great solution for you!

amanda

How do I make mine like the gallery view demo @ top? you know with more rows/boxes? TYVM

amanda

Nifty I just figured it out. LOVE it!

Nina Cross

Awesome! :)

Mehwish Khan

thnxs :-) its really nice…. :-) thnxs again

Steve

Hi Nina,

First off, let me just say that you did a fine job with this. You truly are a thesis ninja!

I have been playing around with this and cannot seem to get it. I want to put the standard view store on a shop page (not the home page.) Additionally, I have a blog page that is not on the home screen.

So, my pages are Home | Shop | Blog | Info

What I have tried
- I tried to link the categories to the shop page and post up the products to the category…doesn’t work.
- I seem to have some image problems also. If I check just one of my made up categories, the image does not show…If I check both the products and made up categories, the images show in (view – from the back end) but it does not link to the shop page on the front end.

I hope you can help. Also, this part of my site needs to be fully functional as it is the most important aspect of my site. Do you charge to set up a fully functional e-commerce store? If so, can contact me with a price?

Thanks
Steve

Nina Cross

It’s hard to say what is going on without seeing the site. What’s the URL?

Noreen

Hi Nina,
Thank you for the nice tutorial.
Could I mention that you should perhaps bring to the attention of users that when you set up the permalink don’t just save and leave it at that. Scroll to just after the safe button and obey the instructions .. otherwise things will not work.

I followed your instructions for the standard view store to a T .. but when I am prompted to update my changes to my theme folder this is what I get …No Theme files have been moved to your WordPress Theme Folder…
I am getting this distorted oversized view with a warning message… wpsc-includes/theme.functions php line 155… and nothing is appearing when I go to check out the store on line..
That tutorial of yours made it all seem so easy and straightforward… Are they your real brothers who run the apparel site??
Thank you for your reply..

Noreen

Sorry, left incorrect web address first time…

Noreen

Lo and behold.. things move fast.. went to make a cup of tea and on return the bigcartel site is gone and the new wp/thesis has made its way into the world !! http://www.dargledesign.ie It is still distorted and falling off the screen .. but hey it is there!!

Noreen

Warning: rename(/home/dargle/public_html/wp-content/themes/thesis_182//wpsc-single_product.php,/home/dargle/public_html/wp-content/themes/thesis_182//wpsc-single_product.php) [function.rename]: No such file or directory in /home/dargle/public_html/wp-content/plugins/wp-e-commerce/wpsc-includes/theming.class.php on line 170

Ok, So, this is the message I get when I try to update my theme file… thesis..
I know newborns are misshapen and take time to adjust to their new surroundings.. but this one is pushing it a bit.. http://www.dargledesign.ie
The text is bloated and hanging over the edge and pushing everyone else about .. everything is too big..
Some bright spark out there must have a fix for this new born…

Nina Cross

Did you install the WP e-Commerce plugin in the “Plugins” folder? It looks as though you may have installed it in the “Themes” folder.

Rose

Hi Nina,

I’m using Estore Theme from Elegantthemes and WP-Ecommerce and something is not working out: I’ve got two shopping carts (one from the theme and one from the plugin, I guess), and the plugin’s one is working but not the theme one. In fact I do want the theme one to work, but I can’t do it. Can you please help me? I don’t know what to do.

Thank you.

Nina Cross

This tutorial uses the Thesis Theme.

Dwayne Peyser

I am really impressed with your writing skills as well as with the layout on your weblog. Is this a paid theme or did you modify it yourself? Either way keep up the excellent quality writing, it’s rare to see a great blog like this one today..

Nina Cross

Thanks so much! This blog uses the Thesis Theme.

Simone Jaschko

I love Thesis and think its just The Best. I agree it was fast and easy to setup the catalog and the cart and it was really fun and I thought this will be a keeper. Until I hit snag, that unfortunately I was not able to resolve and had to switch themes due to time constrains. Here was my problem: When in the checkout processes it validates the fields that the customer did not fill in and trows them back as validation errors, unfortunately they did not show up. They will though in one of those free themes without doing anything.

I posted something on the getshopped forum and one of the “resident experts” told me: “Ok so you don’t have a session issue. It’s just theme compatibility issue. Thesis has known to have problems with WPEC. If switching themes is an option, I would suggest looking into WPEC compatible themes.”

Not sure how likely I will try another of those in the next future. Just something to consider.

Bree

Hi Nina,

Thanks so much for this. Hoping you can help….at my wit’s end!

I keep getting an error message of:

Warning: Cannot modify header information – headers already sent by (output started at /home/tghair/public_html/beautyandhairsupplies.com/wp-includes/general-template.php:2101) in /home/tghair/public_html/beautyandhairsupplies.com/wp-includes/functions.php on line 861

Warning: Cannot modify header information – headers already sent by (output started at /home/tghair/public_html/beautyandhairsupplies.com/wp-includes/general-template.php:2101) in /home/tghair/public_html/beautyandhairsupplies.com/wp-includes/functions.php on line 862

I have trawled through every forum and tried everything but to no avail.

Hence, anything I do in the backend is not showing in the live site.

Please help! :)

Nina Cross

Are you using the Thesis Theme and the WP e-Commerce plugin?

Alexis

Thank you for this tutorial, it’s clear and easy to understand and has great links to other resources. I am looking into setting up an online store and was afraid of the headache but this looks like a much easier way to go about it.

Nina Cross

Awesome! Happy to help :)

Alyssa

Hi!

I have a wordpress.com free site but I own my own domain. I wanted to build an online store for my handmade jewelry and link it to my blog (using the same url). I know that I will have to purchase a different version of wordpress to follow your guide – which one? If I upgrade to custom design in wordpress.com for $30 a year will that work since I can then edit the css? Or do I need to switch to wordpress.org. Let me know please! and thank you!!

Nina Cross

This tutorial only works with WordPress.org sites and the Thesis Theme

knev

Thanks Nina for this post.

Will you please write up a post to setup a amazon store.
which iam looking for?

Abdoorahman

Really amazing post, i’m so glad find this tutorial, thank you. Two thumbs….

Nina Cross

Thanks! Glad you found it useful :)

johno

Hi Nina
I’m assisting a friend of mine with her business website using WP and Thesis. I am trying to create product pages for display only, not for sale, thus no WP e-Commerce plugin needed. I want to make it user friendly so that she can easily select the images of the products and not have to
go into the custom_functions.php file and change the image links each time she wishes to display a new product. I found the Custom Field Matrix plugin (Elliot Condon) and tried to ‘cobble’ this together with your Gallery View Store solution. I am not a PHP programmer, more of a ‘cut, paste and try to get it to work’ kind of guy.I h ave it almost working. With the Matrix plugin, I created a photo gallery of images for products (Cake Images), and
assigned it to the ‘Cakes’ page. When I ‘Edit’ this page, the matrix shows up and I can add the 3 photos, with captions. Then I insert the associated PHP code in your code and replace the image links. Now this code
should loop through the matrix and pull out each image and display all 3 in 1 row on the Cakes page. However it only pulls out the last image and displays it 1 time. That’s because there’s one line of code missing, to make it loop
and end (I think?), but when I include it (), the custom_functions.php file blows up with the dreaded

Parse error: syntax error, unexpected T_ENDFOREACH in ../custom_functions.php on line 57

I don’t understand why it blows up. I want to ultimately end up with X rows of 3 images, if I add for example X times 3 photos.

I include my code below with the place where I think this line
of code should go .

<img src="url_image; ?>”width=”150″ height=”150″ alt=”Product Name 1″/>
url_caption; ?>

<?php
}
else
thesis_loop::page();
}
}
/*** CUSTOM PRODUCT PAGES END***/

I also include a link to my 'Cakes' product page

http://50.116.66.214/~joncindy/products/cakes

Any help, suggestions would be greatly appreciated. This would be a great user friendly solution for my friend if I could get it to work (and potentially others too).

johno

Hi Nina.

My PHP code didn’t submit properly, missing from my previous post.

johno

Nina.
I’m trying to submit my code again.

It’s line ****** ************** that’s causing custom_functions.php to blow up with the error above. Suggestions welcome.

*************************************************

<img src="url_image; ?>”width=”150″ height=”150″ alt=”Product Name 1″/>
url_caption; ?>

<?php

}
else
thesis_loop::page();
}
}

*************************************************

johno

Nina.

The code won’t submit completely. Is there anyway I could email it to you so you can take a look? I’m stuck.

Cheers,
Johno

johno

Can anyone explain to me how I can post php code on this blog? Maybe someone out there could help me with my code issue if they could see it :-)

Thanks,
Johno

johno

No worries. I figured it out through trial and error. I incorrectly used a ; at the end of the foreach statement instead of a : After I fixed that, the endforeach statement ran and now my images display from the custom field matrix. With this solution, you have the ability to add/change images through the custom field matrix plugin, and use the foreach loop to display them, This way you don’t need to add/change the links to the images every time in the custom_functions.php file, making it way more user friendly/maintainable for the website owner.

Nina Cross

Glad to hear everything is squared away :)

senthilvel

Hi Nina,

Thanks.

Now a days people are found of browsing through mobile fones.

is there any theme supports ecommerce web site for mobiles?

Regards,
Senthilvel

Bob Brandis

Thanks Nina,

You help is invaluable. Is there any way the shopfront can be on another page OTHER than the Home page. I would prefer people didn’t jump straight into my shop but it becomes an integral part of my site.

Bob

Nina Cross

Sure thing. Here you go – diythemes.com/thesis/create-online-store/#comment-2643

Kathlene Frauenkron

I’m a long time watcher and I just thought I’d drop by and say hi there for the quite initially time.

ohsuszanna

Dear Nina:

Thanks for making it look easy. I am going to give it a try, but would like to feature a single product on my home page, and have it click to a product page with multiple items. Is this possible, and if yes, how?

Thanks again.

Suzanne

Nina Cross

This can be done. Rather than linking to the individual product, you will just need to link to the product page.

D Scott Angle

Nina,

Thanks so much for this info. I’m about to create an on-line shop and have been worried about how much of a pain it is going to be. Fears officially laid to rest then…

Thanks,

Scott

Nina Cross

No problem!

Gabe Mott

Thanks for the thorough post and responsiveness to the comments!
My question is this– it looks like if I use your code for the custom_functions.php file, I will need to edit the URLs for each image in that file each time I add a new product, is that true? Takes a little of the ease of use out of using wp-ecommerce eh?

I haven’t tried your solution but in conversation with WP-ecommerce, they say they are incompatible right now with Thesis. So, congrats on the workaround but will it work for folks like me that MUST have the ability to bypass custom_functions.php once the site is built? (I’m handing this off to clients and they will be adding future products, they’ll kill me if they have to look at css let alone php).

Thanks, Gabe

Nina Cross

You won’t be able to use Gallery View without needing to access custom_functions.php

However, you can set-up Standard View for your client.

Ken

Awesome and simple tutorial but if I may ask, where are the security implementations? The most important thing about an online-store is the security behind it.

Nina Cross

This tutorial addresses the design set-up of an e-commerce site.

Lance Clancy

I am thinking of starting a blog about ms-access and offering apps built by ms access 2007. Just thinking if the free version of WP-ecommerce would serve the purpose of me selling microsoft access apps. I hope someone who have used the free version can tell me about its performance.

Marre

Hi Nina,

I was just reading your tutorial and am wondering if this will work with a wordpress nav menu as well – since the thesis menu will be depreciated….
thanks, Marre

Marre

Hi Nina,

Thanks again for this tutorial. I have a question: as soon as I add my page id to make sure the shop is show in the page I want to on the website – my whole site goes blank and I have to download, rewrite and upload my custom-functions file…. Not sure what I am doing wrong here, because without the page ID the shop turnes up on the home page fine…

Any idea what might be happening?

Thanks! Marre

Nina Cross

Hi Marre,

Would love to take a closer look. Feel free to shoot me an email via the contact form on my website.

Sam Marvin

I don’t get what I have done wrong but no matter how many tutorials I read or videos I watch I can’t get it to work. I have even hired a wordpress “PRO” and 5 hours into it they haven’t fixed it all. My login pages and register pages show “Registration Page Content” and nothing more. He finally got stuff to show up on the products page but thats it. Someone please help. I want to use the wp e-commerce plugin specifically cause it offers the option to for users to personalize the item by uploading an image. I need this so badly it hurts!

Nina Cross

Hey Sam,

I’d be happy to take a quick look to see if I can help. Feel free to email me over at my site.

fiona lynne

This is really useful. I’m looking for a solution that would work when I just have one product to sell, but with multiple optional “add-ons” when you purchase the initial product. The add-ons would need their own photos too. I wonder if this plugin would work then too or if I should try to create my own solution or find another plugin?

Nina Cross

I don’t see why it wouldn’t work, Fiona.

You may want to check out the GetShopped.org Showcase to see if you can find a site similar in functionality to what you envision. I know it always helps me to have a frame of reference :)

Annie Sisk (Stage Presence)

Nina, this is very helpful but I’m having a problem installing this plugin at http://imgourmet.com – the product pages are loading as blanks – truly blanks – no HTML beyond the doctype and tag in view source mode. I’ve followed your instructions pretty specifically, and while I’m sure it’s user error, I can’t figure out where the error lies. Anyone with a few minutes who’s willing to take a look will be gratefully appreciated and I will definitely owe you one!

Nina Cross

Hey Annie,

Did you implement the tutorial and ran into the issue? Or did you have the issue even before you got around to the tutorial?

bhuwan

Hello, Nina
Can you tell me how to convert a psd or html to thesis running child theme, Also can you tell me whethere I need to convert a psd into html to create a thesis child theme or I can directly work using the psd .
I understand php, css, html, div very well I just need a kick to get going, your little help will be greatly appreciable.
Thanks
Bhuwan

sergio

I Put the Thesis in my Shop. When the customer goes to the product page the add to cart button does not appear. And the categorys doesn’t showing the products images. The wp-e-commerce was instaled with other themes
vou revisar, peraí
I put the Thesis in my Shop. When the customer goes to the product page the add to cart button does not appear. And the categories doesn’t showing the products images. The wp-e-commerce was instaled with other themes

Tracy

For a totally untechnical person – sorry what does this mean please? – 1. fresh installation of WordPress – yes I have this though I am using the Twenty Ten theme and have only just started setting up! 2. Thesis Theme for WordPress – where do I find this – will it change all my settings and what I have already done? and 3. the WP e-Commerce plugin on your site – scary!
I so need an online store but I cannot do any coding unless really clearly mapped in a vid or with the kinds of examples you gave above. Should I just give up now! Tracy

Eddie Gear

Nina, Do you know of a way I can contact someone at Instinct Entertainment? I am not able to find a contact form there. I need to set up a WP theme store where I can sell themes and also set up a support forum. Please let me know if you know someone there.

Kat

Hello all,
I am brand new to anything close to developing, and unfortunately first block in my way: I downloaded the wordpress.org and Thesis theme files, and not sure how to even start using it as a website. How do i even upload the files to server(I don’t have a server), and how do I start making a site. I have a e commerce with Yahoo, and wanted to leave them(no profits, $fees), to create awesome Wordpress based site, because it sounds easy, but how do I even start?

John Elkins

Just purchased Thesis 2.0, where do I get step by step instructions on the install similar to the ones above for 1.8.5