Customize the Thesis Theme for Shopp

by Lorenzo Orlando Caum on April 1, 2013

In this post, we’ll learn how to set up the Thesis theme with Shopp. For this tutorial we’ll be using Thesis 1.85 which powers this website.

When Thesis is activated on a WordPress site with Shopp, the product pages will appear with extra elements. Below is an example:

Screen-Shot-2013-04-01-at-6.25.37-PM

We can see that there are certain elements that appear such as the author, date, comments, and more. This makes the product page look like a blog post. We’ll continue this tutorial to remove those elements.

Setup Shopp content templates

First you’ll need to set up Shopp content templates. You can do so via the WordPress admin –> Shopp Setup –> Presentation

Specifically, you’ll need to login to your site with a FTP client. A free option is FileZilla. We recommend Transmit (if you are on a Mac).

Next browse to your theme folder and create a shopp subfolder in it. Once setup, you’ll see that you now have a set of Shopp files in the new Shopp subfolder similar to this location:

wp-content/themes/thesis_185/shopp/

Add CSS styling, Functions, and Filters

Now we need to add some CSS styling.

1) Login to your site with your FTP client and go to wp-content/themes/thesis_185/custom/custom.css.

2) Then open the custom.css file and add the following code:

.hide_meta .headline_meta { display: none }
.hide_meta #comments { display: none }
.hide_meta .prev_next { display: none }

3) Then save changes.

We’ll now add some code to our custom_functions.php file. It is also in wp-content/themes/thesis_185/custom/custom_functions.php.

1) Open the functions.php file for editing.

2) Then add the following code:

function custom_body_class($classes) {
if (function_exists('is_shopp_page') & is_shopp_product()) {
$classes[] .= 'hide_meta';
}
if (function_exists('is_shopp_page') & is_cart_page()) {
$classes[] .= 'hide_meta2';
}
if (function_exists('is_shopp_page') & is_checkout_page()) {
$classes[] .= 'hide_meta2';
}
if (function_exists('is_shopp_page') & is_confirm_page()) {
$classes[] .= 'hide_meta2';
}
return $classes;
}
add_filter('thesis_body_classes', 'custom_body_class');

3) Then save changes to the file.

Now take a look at one of your Shopp product pages and they should be free of the author, date, comments, and previous / next post links.

The code snippet works by instructing Thesis to load a custom body class on certain Shopp pages including product pages, cart, checkout, and confirm order pages. Then it says to use CSS to “hide” the elements that we don’t want to appear. This is done by using display: none on those elements.

Here is a screenshot of the product page afterwards:

Screen-Shot-2013-04-01-at-6.55.12-PM

Notes: You can buy Thesis for your WordPress site.

Related Posts Plugin for WordPress, Blogger...
  • Was this post helpful to you?
    Join our newsletter to receive updates!
  • Author: Lorenzo Orlando Caum

    Lorenzo Orlando Caum is the founder of Enzo12 LLC, a web engineering firm in Tampa, FL.

    Lorenzo contributes to the Shopp project as a member of the support team. He has written several WordPress extensions for Shopp.

    If you would like to know more about Lorenzo, you can follow @lorenzocaum on Twitter or check out his blog.

    Previous post:

    Next post: