Customize the Thesis Theme for Shopp

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.

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:

Customize the Thesis Theme for Shopp

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:

Customize the Thesis Theme for Shopp

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.

Notes: You can buy Thesis for your WordPress site.

Was this post helpful to you?
Join our newsletter to receive updates!  

 

Customize the Thesis Theme for Shopp