So you’ve purchased a brand new theme to showcase your products but you’d like the opportunity to sell them directly from your site. How can I sell my products online without using a site like Etsy or Big Cartel? It’s easy when you pair your Restored 316 theme with WooCommerce!
Adding a shop that you can manage on your own from your WordPress site is quick and easy!
Let’s Get Started…
- First, you’ll need to download and install the WooCommerce plugin.
- Next you’ll want to grab and install the Genesis Connect for WooCommerce plugin. You can do this by grabbing it directly through the WordPress.org plugin site or by searching for it directly through your WordPress Dashboard. You can do this by going to
PLUGINS > ADD NEW > Then search for “Genesis Connect for WooCommerce.”
- When you have these installed, you’ll need to do a little bit of editing to your Theme Functions file.
NOTE: Whenever you are editing the CSS or the Functions.php file of your WordPress Theme, you will want to ensure that you have a backup copy of your current file saved. You can do this via FTP or by simply copying the code and pasting it into a Text/Notepad document for safe keeping. This is just for safe keeping in the off chance that you make a mistake and need to fix it.
- Head over to your WordPress Dashboard and click on APPEARANCE > EDITOR. You should then see a list of file options to the right. WordPress will automatically open the CSS file by default. You’re wanting to edit the Theme Functions file (functions.php).
- Once you’ve got that file open, it’s time to add a bit of code. Copy and paste the following code and add it to the VERY BOTTOM of the Theme Functions file:
//* Add support for WooCommerce add_theme_support( 'genesis-connect-woocommerce' );
- Once you’ve added that, hit updated. Now your Genesis Based WordPress theme and WooCommerce should play together nicely!
Well, that’s great! You’ve shown me how to install WooCommerce to my site…but how do I use it?
We’re glad you asked!
Now that WooCommerce is installed, it’s time to start adding new items to your shop. Head back to your WordPress Dashboard, and you should now see two new tabs. A “WooCommerce” tab and a “Products” tab. You’ll also see a pretty purple box asking you to install WooCommerce Pages. This is an optional add-on that will automatically set up your Shop, Cart, and Checkout pages. If you’d prefer to create and name your own pages, you can do that as well.
First, you’ll want to head over to the WOOCOMMERCE > SETTINGS tab to configure your location, time zone, tax, etc. Once that is setup you can begin to add your products.
Adding a Product to your WooCommerce site
Visit that WordPress Dashboard again and this time you’ll want to go to PRODUCTS > ADD PRODUCT.
- Now you can enter the name of your product in the TITLE section and a description of your product. There are TWO different options for choosing where to position the description of your product. You can use the post section, where you normally add your content when writing a blog post. This will display your content in a tab immediately below the product image. Or you can scroll down to the bottom of the page where it says product short description, which will display the description to the RIGHT of the product image.
- Once you’ve added your product, you’ll see below the post section a variety of options you can choose to edit, including your shipping options and options for maintaining inventory. Once you’ve got your product ready to go, be sure that you add a featured image so that your products photo displays correctly on the SHOP page.
- Now you’re ready to publish! As you add items to your shop, they will display on the SHOP page, or the page you’ve selected to be the storefront of your products.
How to Edit the Shop Button Color
Now that your shop is all set up and you have added all of your products, you may want to change the colors of the buttons in your shop. This is a super easy and quick fix, one that will allow you to change your colors without messing with any code while allowing you to change them as frequently as you would like!
Simply navigation back to the WOOCOMMERCE > SETTINGS option in your Dashboard. On the first screen of your Settings page, you will see the “Styles and Scripts” area. You will see a few different color boxes with the option to change the color codes. The PRIMARY box is going to control the background color of your shop buttons. Simply input the color code that corresponds with your color scheme and you are set!
Did you find this article helpful? Share it with others!