Join Morten Rand-Hendriksen for an in-depth discussion in this video Setting up WordPress for ecommerce, part of WordPress Ecommerce: WooCommerce.
- View Offline
I like to say that you should always start with a clean slate whenever you start a new WordPress project. In many cases, this may seem like a lot of extra work, especially if you already have an existing site, and you just want to add e-commerce to it, but as you'll see, when you create an e-commerce site, your visitors will expect certain elements to be on that site, and those elements may conflict with existing elements on your site, making it difficult to get everything set up right. Throughout this course, I'll be building a site using the Stock 2012 theme in WordPress, and I'll be focusing mainly on how to use the WooCommerce plug-in, and set up the site so that it works well as an e-commerce site.
I can go to my toolbar here, and select New, and Page to create a new page, or I can go to the Admin panel, go down to Pages, and select Add New. Here I'm simply going to type Contact as my page title, and then I'll put in some information about my business. Now, if I had a visiting address for my business, I would put that here, along with maybe a mailing address, and a phone number, but what I want to do is add a contact form. The reason why I want to add a contact form instead of adding my e-mail address is that, first of all, if I add an e-mail address into a page on the Internet, there are spambots online that will search for the e-mail address, find it, and start sending garbage e-mail to me, and I don't want to manage that.
The second reason is I want to be able to control what kind of information I get from the people that submit questions to me. If I setup an e-mail address, people can send whatever they want, and I don't really have control of what information I gather from them, but if, for example, I want to get the phone number for everyone who contacts me, I can do that using an e-mail form. WordPress, out of the box, doesn't provide you with an e-mail form, but we can add one using a simple plug-in, so I'm going to save this page as a draft, then I'll go to Plugins, click Add New, and from here I'll search for grunion.
This gives me this plug-in here called Grunion Contact Form. I'll click Install Now, click OK, the plug-in is downloaded, and installed, and I can activate it. What I like about it is that it's easy to configure, and that any response that comes in through the plug-in gets stored here under this new menu item called Feedbacks. So, let's add the form into the page. I'll go back to Pages, select All Pages, find my Contact page, which is currently in Draft. I'll place my cursor on the next line, where I want the form to appear, and I'll simply click this new form button that's been added to my page.
Here I can create a new form, and as you see, there's a default form. It has Name, Email, Website, and Comment as standard questions. I want to add a new field, so click on Add a new field here. I'll call the new field Phone, I'll leave it as a text field, I'll check Required, click Save this field, and then I'll grab it, and move it up under Email. Now I have the form I want, and if you want to, you can also add other elements, like a question that says, where did you find us? And other kinds of information.
And if I want to, I can also go and set up Email notifications, so I can control where the e-mails are sent once the form is filled out. When I'm done, I scroll down, click Add this form to my post, and you'll see the form is actually entered as a group of short calls, so it's very easy to control, even if you don't want to use the graphic interface. Now that I have my form inserted, I'll click Publish to publish the page, and click View Page to see it. Now you can see I have a Contact page that has the information I typed in, I have a contact form, but when I scroll down to the bottom, you see I also have comments.
There are two more things I want to do here. If you go to the front page, you'll see my menu is alphabetical currently. I want to change that, so that the menu becomes easier to manage. For example, I want the Contact page to be at the very end of the menu. To do that, I need to create a new menu, so I'll go back up to the toolbar, and select Menus. Here I can create a new menu, so I'll call it Main Menu, click Create Menu, then I'll scroll down to Pages, click View All, select all the pages, click Add to Menu, and here I can re-organize the pages in any way I want, so I'm going to grab Contact, and pull it to the bottom.
The final thing I want to do before we get started is set up permalinks. You'll see right now if I click on About here, the URL to the page is question mark page_id=4. This makes sense for computers, but it doesn't really make sense for humans, so I want to change that, so that it says About instead. If I go to the Dashboard, and go down to Settings, and Permalinks, I'm going to change the settings from Default to Post name> Click Save Changes, go back to the front page, click About again, and now you see it says About, and if I went to Contact, you'll see it says Contact.
That way, we have human readable permalinks, and this will become very important when we set up our shop. By planning and setting up key elements for your e-commerce site before you start working on the e-commerce solution itself, you won't get distracted by, or forget key components of the site when you start working with the plug-in, because as you'll see shortly, once you get into the nitty-gritty of WooCommerce, everything else will start fading into the background.
Want to learn more about ecommerce with WordPress before jumping in? Check out the first course in this series where Morten explores other WordPress solutions, WordPress Ecommerce: Core Concepts.
- What is WooCommerce?
- Installing WooCommerce
- Setting up your store
- Configuring payment options
- Using the built-in shipping methods
- Adding product data
- Monitoring product reviews
- Configuring the front page
- Receiving and managing orders
- Creating reports and coupons