Using WooCommerce with Thesis theme

Using WooCommerce with Thesis Theme

by René Sejling on April 19, 2012

in Thesis, WooCommerce

I love Thesis. I use it for this website, and for most of my customers sites as well. It’s great. I love the framework and how you can build around it.

What I was looking for was a solution to use the new cool ecommerce shop from WooThemes called WooCommerce. It’s a great looking shop with some nice features, and it’s a nice break away from using WP eCommerce and all the problem that brings.

My headache was to get WooCommerce integrated with the Thesis framework. First time I tried, the shop pages looked like a big mess. It looked like the CSS styles from WooCommerce wasn’t being used.

How to make WooCommerce look great when using Thesis

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

  • First off you gotta 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 a file called WooCommerce.php and place the below code in it.
This is tested using WordPress 3.3.2, Thesis 1.8.3, WooCommerce 1.5.4 and running on a Windows 2008 Server, IIS 7.5 and latest PHP and MySQL versions.
If the below doesn’t work for you, please check out this post. WooCommerce Thesis Theme Solution
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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="woocommerce">

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

</div>
<?php echo thesis_sidebars(); ?>
</div>
</div>
</div>

<?php thesis_wrap_footer(); ?>

<!--[if lte IE 8]>
<div id="ie_clear"></div>
<![endif]-->
</body>
</html>
  • Upload the file you just created (WooCommerce.php) 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.
  • Select the WooCommerce custom template on your shop page (generated by WooCommerce when installing)

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.

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

  • Alex

    I just tried this with great expectations because everyone else said it was such a headache to get working.. but it didn’t work :( is there anything in your guide you could be missing?

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

      Thanks for the comment. I will have a look at this later today and then reply back. :)

      • Klintonb

        I noticed you edited the contents of WooCommerce.php which i updated, but it still doesn’t work. I’m using Thesis 1.8.4 and woocommerce 1.5.4 and wordpress 3.3.2. Do you think you could E-mail me or I could E-mail you and we could work on this together? My E-mail is klintonb@yahoo.com, let me know if you E-mail me because I rarely use this E-mail.

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

          Just emailed you.

          • Joe

             Rene, would you be so nice and also mail me more detailed instruction as to how integrate woocommerce into thesis

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

            Currently working on a solution for Linux/apache servers, should have something soon.

          • http://www.facebook.com/kevinorin Kevin Williams

            Hi,

            Have you found a fix for apache?

            Also your instructions say “Select the WooCommerce custom template on your shop page (generated by WooCommerce when installing)”

            Where can I make this selection if WooCommerce is already installed?

            Thanks

            KW

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

            Please try this, let me know if it works: http://rockinwp.com/wordpress-tutorials/woocommerce-thesis-theme-complete-solution/

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

          Please try this. Let me know if it works. http://rockinwp.com/wordpress-tutorials/woocommerce-thesis-theme-complete-solution/

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

      Edited the post a bit. Please try again. It works on my testing environment, as you can see in the post above.

  • Jim

    I’ve been trying to solve this for 2 weeks, on and off.  I just tried your solution on my Wamp server and it worked a treat.  The CSS needs a bit of tweaking for my site but thank you so much for this solution.
    However the last comment implies that this won’t work when I install on my apache server, so I look forward to that solution too.

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

      I’m very happy to hear that it worked for you. Will update the post when I got a working solution for apache.

  • http://www.facebook.com/profile.php?id=110902462 Amanda Lee

    Thanks for this. I have a question though, how/where is the Woocommerce custom theme option under the shop page? Thank you

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

      Glad you like it :) There should be an option to not use the WooCommerce style sheet in the options.

Previous post:

Next post: