The next thing we’re going to do is install WooCommerce on a Genesis site. Now, as I said earlier, you sort of expect that installing plugins is pretty much the same, regardless of what theme you’re using but it’s not the case with WooCommerce.
The ClipCart Child Theme, A Responsive Genesis Theme
The first one that we’re going to install it with is with the child theme ClipCart by Themedy. ClipCart is a very nicely styled responsive child theme for Genesis 2. Actually, I think it’s my favorite eCommerce child theme for Genesis which is why we’re teaching it. But it’s also by guys who have a very good reputation for creating very high quality programming and high quality skins and child themes, both for Thesis and Genesis.
If you’re already a Studio Press user, you can purchase it at Studio Press or you can purchase it from Themedy, whichever way you want. I have the full Pro Plus version of Genesis so it was actually inexpensive for me to purchase this separately, which was like $18 from Studio Press. So, very inexpensive.
Install the WooCommerce Plugin
In any case, we’re going to go ahead and just start there. Right now this is the 2013 version of WordPress and Genesis is not currently installed. The first thing we’re going to do is install WooCommerce and then we’re going to install some default data so we have something to look at. So, add new.
I didn’t want to install the default data on the Thesis site because I want you to be able to see that in its raw state. Installing WooCommerce is simple. Just a raw installation part of it but there are steps with Genesis.
So, it says install WooCommerce pages which we’ll do. The next thing we’re going to do is come over here to Tools and Import, and use the WordPress importer and choose the file. If you download WooCommerce and then unzip it, you’ll get a folder like this with the WooCommerce plugin stuff in it. Inside of that is this dummy_data_xml and that’s what you’ll use to import.
Populate the Store with Sample Products
We’re going to upload the file and import. This will give you a bunch of dummy products essentially. So, we’re going to assign the posts to me and we’re going to download and import the file attachments and hit submit. This will populate our store with products so we have something to look at.
Okay, while we’re waiting here, somebody asked me if I’d do a quick comparison between Genesis child themes and Thesis Social Triggers theme. Well, unfortunately I haven’t had a chance to play with Social Triggers, so I can’t really make that comparison. Child themes have their pluses and their minuses. And the child themes I’m teaching at the moment both have special stuff associated with them for WooCommerce, which is one of the reasons why I’ve chosen to teach them. I’m guessing that Social Triggers doesn’t have anything quite like that. I don’t think it’s specifically designed as an eCommerce skin.
So we’ve installed that and then we’ll come back over and look at the site now. I should add the store, at the very least. I’m going to add My Account, Checkout and Shop to the menu. I think we’ll put My Account and Checkout as children of Shop. So at least that way, we can go look at our store quickly, so come to the shop and that’s what it looks like.
Click on this, that’s what a product looks like. Here are related products. Notice how those images are fuzzy. We talked about how to fix fuzzy images and those kinds of things because it’s a very common problem in this context.
So anyway, that’s what it looks like without Genesis. Next thing we want to do then is install Genesis. We’ll go to Appearance and Themes. We’re installing Genesis 2. So upload, choose the file and Genesis 2.0.1. We’re not going to activate it though, what we’re going to do is return to the Themes page because you don’t need to activate Genesis since we’re activating its child theme.
Review ClipCart Layout
So we upload again, choose the file and this time we’re going to upload ClipCart. I forgot, I was going to show you what ClipCart looks like. ClipCart from Themedy. So this is what it looks like in its native format.
It has a header area, a menu, a little welcome message, a slider, latest products, widget areas and that kind of stuff. If you click on the latest product, this is what a page layout looks like. This is the page layout with the sidebar on the left, instead of on the right which I think is clever and interesting. That’s something that we will do ourselves. In any case, this is potentially, what you can do with it. It’s a fairly attractive looking site. I have a couple of members who have a ClipCart sites that are very nicely customized too.
Anyway, we’re going to go ahead and activate ClipCart. Then we’ll just come over and take a look at it. There’s going to be lots of room for us to put stuff in here but you can see what this looks like at the moment. The primary sidebars are on the right now. We need to assign the menu here and interestingly menus in 3.6 are different than they used to be.
Under menus, you have this Manage Locations. This is where you set where the menus go. I don’t know why they did that but they did it. So if we refresh this page, we’ll have our menu now.
Somebody asked me what’s the version of WooCommerce I’m using at this very moment. It’s the most recent version which is, at the moment, 2.0.13.
Add Themedy Visual Designer
We want the Themedy visual designer so we’re going to install it here and this gives you some additional controls. We’ll activate it. Sometimes, it happens from this place and I’m not sure why. It doesn’t always happen but if you just come over to the Plugins menu, Installed Plugins and activate it directly from the plugins, you won’t get that error message from over here. It doesn’t happen every time to me so maybe it didn’t happen in 3.5.1 and it happens in 3.6 or something I’m not sure.
If you look at the Themedy settings now, you have a choice of colors, you can add a custom style sheet. You can change the message at the front. You can affect some of the outcomes of these things. You can add specific product IDs or category IDs for the homepage products. You can organize the number of products that will show up.
I’m going to teach a Quickstart seminar on ClipCart and we’ll talk about this extensively in a separate seminar. So we won’t take up a whole lot of time on talking about styling it and setting it up in this WooCommerce class but nevertheless, there’s a whole bunch of specific things you can use inside of ClipCart to change the style. The same thing cannot be said for the Agency child theme.
And that’s ClipCart installed. We’re going to come back and talk about the settings in ClipCart and questions about image sizes and and stuff like that here in a later lesson.