We’re going to start off by looking at our General WooCommerce settings for setting up our online store for physical and downloadable products. You can get to the settings just from the settings section here on the menu.
Set Up WooCommerce General Options
We start off by setting up our General Options. We’re in the United States and in this is actually New Jersey. The currency is in US dollars and at the moment, we’re going to say specific countries and we’re going to say Canada, the UK, I don’t think we have to pick United States but we may as well, and then Mexico. Let’s see, I should just get Laura to chime in here. Laura what are the countries should we add to this list that you want to sell to?
Rick: You did some European touring, didn’t you? or is it just the UK?
Laura: Yeah, I did Amsterdam, England, Scotland, France, Italy…but, there will be more. I expect to get to Australia.
Laura: Australia would be good. Actually, Estonia. I’m going to go there. Do they have that one?
Rick: I’m sure they do. Okay, well, we can obviously add more here. I think that Ireland and Scotland would be included in the UK but we’ll just take the Republic of Ireland..
Rick: Anyway, I’m not wishing to offend anyone. Yeah, okay, Republic of Ireland and the UK.
We can revisit this list. This isn’t the last time we can set this but we may as well, because we’re going to be configuring international shipping when we do the shipping section. It’ll be useful for us to have some of these places to configure. We’ll add France and Italy. So we’ve got specific countries.
We’re going to enable the use of coupons at the moment. We will enable guest checkout. We don’t need a customer note field on checkout so we’re just going to turn that off. We don’t need a secure checkout since we’re using PayPal. We will allow registration and checkout page. We’ll allow registration on the My Account page and we’re going to let them choose their own username.
If you wanted to make sure or you can always choose this but I don’t let them choose their own usernames. We’re going to prevent customers from accessing the WordPress admin. We’re not going to clear the cart when logging out and we are going to allow customers to repurchase orders from their account page. We’ll go ahead and enable WooCommerce CSS. We’re going to enable the lightbox and we’re going to enable the enhance country select boxes.
The file download method is going to be forced downloads. Although guest purchases aren’t going to be affected by that and this really, we’re going to keep grant access to downloadable products after payment. This isn’t really as big a deal for PayPal and so it would be safe for one of those systems that have a two-step process; authorization first and then a collection, second. Some of them do that instead. Save the changes.
WooCommerce Catalog Settings
Then we’ll come over to Catalog. At the moment, we’re just going to leave some of these things alone like the Shop Page Displays, Show Products. It could show subcategories but we’re just going to show all of our products. If you had a hundred products, you might very well want to just display categories instead of products. At that point, you’ve sort created a department page, we’re not going to do that here though. Default category display is going to show product instead of subcategories.
We are not going to redirect to the cart after a successful addition, we’re going to let them add to cart and keep on shopping rather than every time they add something being sent automatically to the cart. We will enable the SKU field because that is useful in particular for keeping track of stock.
We’ll enable the weight field and dimension field on products. We are going to choose our weight though as ounces and our dimensional unit as inches because we have small products. If you are selling engine parts, you might choose pounds instead of ounces, but we’re selling small products so ounces and inches works well here.
We’ll enable ratings and reviews for the moment, the ratings required to leave a review and show verified owner label for customer reviews. That’s fine.
Then under Pricing Options, we’re going to put the currency on the left. We have comma for a thousand numbers separator, we have a period for the decimal separator. We’ll have two decimals and we are not going to remove trailing zeros. We’re going to leave trailing zeros in place so $10 does not look like this, it looks like that.
Product Image Sizes
Now, here’s what we come to the interesting question. This question of image options and we’re going to talk about this more in other contexts. But in our current context, this is going to be different depending upon what theme to choose. The whole reason why these images look fuzzy in some themes, like in Agency, is because the images have not been sized properly to fit the application.
So we’re going to talk about the correct image sizes for each of these elements but we’re going to start off by looking at the correct image size for Carta and for Agility. For size where the content area is 640 pixels wide, essentially. The image size in this case then, the main product image wants to be 300×300.
The small product images, I think are 90×90 and then the catalog images, that’s what these are called, are 150×150. So, when we’re looking at our page here, catalog images are 150×150, single product images are 300×300 and product thumbnails are 90×90 and that’s already setup correctly. That’s the way, Agility, Carta and the Thesis Integrator plugin work out of the box. So that works just fine for us here.
However, in ClipCart, you can see these are really fuzzy looking but these really want to be 336 pixels and then this wants to be 103 pixels and then the main image in this case, is 336×336. So, if you’re working in ClipCart, which you’re going to want to do. Come over to the WooCommerce and Settings, and go to the Catalog. Come down here and change Catalog Images, both singular product image.
Catalog images are just to be the same height, 336. 336, 336, and 336. And then the product thumbnails are actually 103. Now, the tricky bit about this is that, we’ve already created all of our product images, right? We imported our product images already so they’re not actually created at this size.
So now what we have to do is install a plugin that resizes the images that essentially takes the full WordPress sized image and creates a catalog image, a singular product image and product thumbnail images at our new media sizes.
Setup Custom Media Sizes
Before we do that, actually, we’re going to come over to Settings and Media and we’re going to setup our other custom size here because, in fact, the regular blog page or content size should be 700 pixels in ClipCart. So, we’re going to set that to 700 pixel max width and a max height of 1024. The medium size then, I believe should be half, so it should be 350×350 and then we’re going to leave 150×150 for the thumbnail size. We’re going to save those changes.
Use Regenerate Thumbnails Plugin
Now we’re going to install a plugin called, Regenerate Thumbnails and we’re going to let it recreate all of these WordPress image sizes based on the new settings.
So, Regenerate Thumbnails is the name of the plugin. Any time you change image sizes, you want to use this Regenerate Thumbnails. We’ll install now, activate the plugin and then under Tools now, you Regenerate Thumbnails. We click Regenerate All thumbnails, and what it’s going to do is create all of the WordPress sizes from the images that are inside the Media Library.
It turns out we probably want to do that over here as well. We’ve got these image sizes setup correctly but we may not have our main setting setup correctly. So if we come over to our Media settings here. Well, actually, it is setup correctly.
Carta’s standard thumbnail size is 200 pixels. Its medium size is half the width of the column which is 320 pixels and its large size is 640 pixels. So, those sizes are already set up correctly before we installed Carta so we don’t really have to worry about that here. Although it might be interesting to see what that situation is here. Because it’s nice to be able to regenerate all the images all at the same time, rather than doing them one set at one time and another set at another time.
Once you get the images sizes set correctly, you never have to worry about it again. Yeah, this definitely wants a 640. 320×1024 and then 200×200. I am going to regenerate the thumbnail on this one as well so that we’ll get the right size. Okay, not quite finished. You’ll see it takes a little bit of time to regenerate a whole bunch of images.
What to Consider if Your Images Don’t Look Right
Most often, the answer to the question “how come my images don’t look right?” has to do with either not having set the image sizes correctly or has to do with not having regenerated thumbnails after you set them.
If you do a little bit of searching on the web, you’ll find that lots of people ask this question, “how come my images looks fuzzy? My images should be nice and sharp”. It’s just because they haven’t set the image sizes correctly to start with and once they do set the image sizes, they haven’t regenerated their thumbnails.
Then let’s see, Plugins, Add New. Just activate that plugin. And then we go back over to Tools, regenerate thumbnails. Then we’ll come take a look at the result of the thumbnail regeneration in the ClipCart child theme. In a couple of weeks, when we talk about styling Agency we’ll talk about how that shows up in Agency as well. So we’ll just regenerate all thumbnails.
You can see this looks fuzzy right now, right? Well, once we reload this in ClipCart, now it’s nice and crisp and sharp looking because we reset the image sizes so that they were appropriate for the spaces available. And then we resized all those images. Okay, I think I’d beat that dead horse.
Page Settings in WooCommerce
So we’re just going to let that do its thing. Then we come back over here to our WooCommerce settings. And that was Catalog. It’s all set up the way we want it. Now if we come over to Pages, the pages section just talks about the typical pages that are being used here. We can change the name of the base page. We could put this on any page we want it to be. It doesn’t have to be on this generated Shop page.
If you’re putting WooCommerce on a site that had a store once upon a time, you don’t have to regenerate the WooCommerce pages, you can always just choose existing pages if that’s what you’d like to do. That’s essentially what happens here, each of these things gives you a chance to select a page for each of these pages to be used. In our case, we’re starting from scratch so we don’t have any of these existing pages, there’s no need for us to change this but you always can change this.
While we’re here, we may as well look at our product permalinks because that is something else that’s going on here with this question of what’s our Base Page. Right now, our permalinks aren’t set up at all, what we really want to do is set up our permalink with the category post name over here. So we’ve got /%category%/%postname%/ as a typical one.
Then under our Product one, what I would do is say product instead of products. I would probably just say /shop/%product_cat%/ but instead of shop, I would say products and then product category and then it will have the name of the product afterwards so this is the one I would use, /products/%product_cat%/.
Next, we’re going to come back to the settings and we’re going to take a look at inventory taxes and shipping settings.