WooCommerce Thesis Theme Solution

Using WooCommerce with Thesis theme (complete solution)

by René Sejling on May 15, 2012

in Thesis, Tutorials

My first post on how to get WooCommerce to work with the Thesis theme seemed to only work for Windows hosting environments. Finally managed to come up with a solution thanks to my buddy Javier Carazo of: http://www.linuxhispano.net credit goes to him for this solution.

How to make WooCommerce look great when using Thesis on linux/apache/plesk servers

So after a lot of surfing around and looking in the forums, I found a solution. Here it is.

  • First off you got to have Thesis framework installed, and running on your site.
  • Download WooCommerce, get it here for free from WooThemes.
  • Upload the WooCommerce plugin to your WordPress site and install/activate the plugin.
  • Perhaps setup a couple test categories and products if you feel like it.
  • In your Thesis theme root folder. Create 3 files…
Create: header.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<?php echo thesis_head::build(); ?>
<body class="custom woocommerce">
<?php thesis_wrap_header(); ?>
<div id="content_area" class="full_width">
<div class="page">
<div id="content_box">
<div id="content" class="woohoo">

<?php if (function_exists ('woocommerce_content')){woocommerce_content(); } ?>
</div>
</div>

Create: sidebar.php

1
2
3
4
5
</div>
<?php echo thesis_sidebars(); ?>
</div>

 Create: footer.php

1
2
3
4
5
6
7
8
9
10
11
12
<?php thesis_wrap_footer(); ?>

<!--[if lte IE 8]>
<div id="ie_clear"></div>
<![endif]-->
</body>
</html>
  • Upload the files you just created to wp-content/themes/thesis_xxx/
  • Note: The code above is setup to use the Thesis Full width framework. Remember to activate this in Thesis design options.

Styling

Now that we have gotten WooCommerce workin using our Thesis Theme, it’s time to adjust the styling a little big.

Here’s what I did. Add the below styling to your custom.css file in the wp-content/themes/thesis_xxx/custom folder.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.custom .price {
padding-bottom: 9px;
}

.custom .amount {
font-size: 16px;
color: #111111;
}
.custom .products h3 {
font-size: 18px;
}
.custom h1.page-title {
margin-bottom: 20px;
}

This will add some nice margins and sizes to the titles and price of your shop.

Adjust the values or add your own as you see fit of course.

In order to control the width and center the content of your site you can add this code to your custom.css file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.custom #header_area {
width: 960px;
margin: 0 auto;
}

.custom #content_area {
width: 960px;
margin: 0 auto;
}

.custom #footer_area {
width: 960px;
margin: 0 auto;
}

If your sidebars are placed to the bottom of the site, use the below css code as well. Adjust the width accordingly.

1
2
3
4
5
.custom #content {
width:500px;
}

Enjoy :)

Post written by:

René has written 15 Rockin' articles for us.

I have designed websites since the early days in 1995. I'm from Denmark and run my own webdesign business. I started using WordPress a couple years ago, and I have been hooked ever since.


Visit the website of: René Sejling

  • Joe

    Hi,

    I checking your howto, I have a couple of problems

    The sidebar moves totally to the bottom and is detached from the main section, if I change the first div of the sidebar, then it still sitting on the bottom but it also is close to the main section (that a little css can do – no problem)

    B. Articles-page : for some strange reason the product is shown twice,
    product, with related products, then breadcrumb and the same product again, strange

    I keep setting up more products

    best regards

    Joe

    • http://rockinwp.com/ RockinWP.com

      Thanks for the comments. Fixed the CSS, and added a fix for the sitebar problem. Check the bottom of the post.

      • Joe

         only thing left is now the double articles that show up twice on a page

        • http://rockinwp.com/ RockinWP.com

          Great. I didn’t experience dublicate products on my test site. Tried adding a few and they all showed up once.

          • http://mikemonty.net/ Mike Montgomery

            Hey there, I’m still having this issue that Joe is having, the products page displays the product twice, I’m not sure why, have you found a fix for that issue yet? http://www.themarketinggoddess.com/factor55/product/winch-lock/ is an example of what’s going on :/ Any help is appreciated

  • Joe

    oh, aand in your css the second box with codes is included in the first box

  • Thehalostrike

    I just wanted to say that I followed your guide and it worked for me. Thank you so much. I spent 3 hours surfing the internet trying to figure this out! 

    For anyone who is having duplicate content issues like I was as well. Delete

    from the header.php

    • http://rockinwp.com/ RockinWP.com

      Glad to hear it worked for you :)

    • http://twitter.com/fajaarcom Fajar Firdaus

      Great man.. Im following your tuts because i have duplicate content.thanks man :)

    • ouds

      Worked well, the problem that I am still have is that it using full width

  • Thehalostrike
  • Thehalostrike

    php if (function_exists (‘woocommerce_content’)){woocommerce_content(); }

  • http://twitter.com/cesarabeid Cesar Abeid

    This sounds like it is going to work, but what if my website is NOT designed for full width framework?

    • http://rockinwp.com/ RockinWP.com

      You should be able to edit the code above with the code from your fixed width layout. Should be fairly easy to replace I think. Try it out :)

  • Lucas

    Thanks for the great tutorial! It worked for me as well. I was also having the duplicate product issue, but I removed the line suggested below and now it works.

    Question: Would it be possible to get the Thesis Page Template to apply to product page?

    Example: Regular Page Editor > Page Attributes > Template > Default (or Custom) (or No Sidebars)

    I’d like to be able to remove the Thesis sidebars from a product page, but not from the rest of my site/blog.

    Thanks again!

    • http://rockinwp.com/ RockinWP.com

      Glad to hear. I’m sure it possible, but unfornantly I don’t have a guide for that yet.

    • http://rockinwp.com/ RockinWP.com

      You need to setup your woocommerce.php file in order to have a custom page for the products page as far as I know.

  • drio_rachel

    I have followed your tutorial and I am getting 2 instances of the products, like someone else mentioned: http://iloveit.driostudio.com/shop/
    http://iloveit.driostudio.com/product/t-shirt/

    Also, my thesis sidebar had been pushed down and to the right.

    I looked at the code in my site and the products are appearing in the content area and in the container.

    Can you offer a suggestion?

    • http://rockinwp.com/ RockinWP.com

      You can fix your sidebar using CSS. try this and adjust the width:
      .custom #content { width: 500px; }

      No idea regarding the double products. I havn’t seen that before myself.

      • Rachel

        I found a better but of code posted in the DIY forums that took care of all of the problems for me :)

        • http://rockinwp.com/ RockinWP.com

          Good for you :)

        • ouds

          Can you please share the link. I have the double problem aslo

  • Joe

    Hi,
    have you taken a look at the new Thesis 2.03, do you have a solution for that ?

    • http://rockinwp.com/ RockinWP.com

      No not yet. I suspect it don’t work with the above solution then? I will have a look if time allows.

  • Surao

    Does this fix work with thesis 2.0?

    • http://rockinwp.com/ RockinWP.com

      This havn’t been tested yet.

      • dyuthi

        did you fix the woocommerce conflict with thesis 2?

  • Velocats

    Thanks for the great post! I was having a lot of problems with this and you saved me! So frustrating when you can’t get two great programs to work together-thanks for sharing your solution! Question though-It worked great EXCEPT in IE-I am having problems with the sidebar dropping beneath the content. Anyone else having this problem? (Chrome/Safari/FF are all fine). Tried playing with CSS and page width but doesn’t fix it. Also, is there a way to put the WooCommerce products within the content box-on mine at least the content box floats above?

    • http://rockinwp.com/ RockinWP.com

      Glad to help :) You should edit the #content width using CSS for the shop page. That should pull the sidebar backup. The products should be within the content_box. Check if your CSS is correct.

  • Victoria

    Any update on a fix for Thesis 2.0?

    • http://rockinwp.com/ RockinWP.com

      Not yet, hopefully in a near future.

  • KatyJoyAlice

    Hi. I just followed you handy tutorial to install WooC on Thesis 1.85 and I am also having the duplicate products issue. Can you point us to the fix. I can’t seem to decipher what to do from the comments here.

Previous post:

Next post: