WooCommerce Plugin Tutorial


Hi there! And welcome to our WooCommerce Plugin video. If you haven’t done so already, please watch our System Overview Video first before continuing. It lays down all of the plugin basics you’ll need for this video.

Before we move on in the video, I’d like to point out that this is a more advanced plugin; you must have a WordPress hosted website and a WordPress plugin integrated into it. For more information on how to do this, please see these links in the plugin here. If you are looking for a more simple ecommerce solution, please feel free to check out our Shopify Plugin video.

Now, onto the basics of the WooCommerce Plugin. It’s one of the most customizable eCommerce platforms out there. On your WordPress dashboard, you’ll be able to track orders, create coupons, generate reports, and of course put up sale listings. All the changes you make to the WordPress Plugin will update on your app’s plugin in real time. If you’re looking for a more advanced version of our Shopify Plugin, then you’ll find it here.

To add a WooCommerce plugin to your app, go to Plugins and Add Plugin. Find the WooCommerce Plugin by searching for it, clicking add, then naming it. If you’d like to also add this plugin to your Side Menu, you can simply check this box. If not, no worries, we’ll go over how to add it to the Side Menu later on in the video.

Now you’ll three sections here: Content, Design, and Settings.

Content is where you’ll be controlling the actual content in your shop, such as images, text, and item listings.

Design is where you decide on how to display your content.

And Settings is where you can change the currency that shows when users visit your WooCommerce shop.

Let’s start with Content. There’s Image Carousel, Text, Store URL, Consumer Key, and Consumer Secret.

Under Image Carousel, just click Add Image. This will give you access to your Media Library. If you already have images uploaded, just select some, and click Insert Image(s).

You can also click on Upload Image(s) to upload any images from your desktop to your Media Library. If you’d like to learn more about using the Media Library, just click here.

The Text box is powered by our Text WYSIWYG plugin, which you can learn more about here. You can put a brief introduction to your store here and use this space to highlight any sales or special offers you are running that day. To learn more, check out our Text WYSIWYG video here.

Now for Store URL, Consumer Key, and Consumer Secret, we’ll be moving over to WordPress to get that information. To get your URL, just click on the little Home icon in the top left corner. This should take you to your wordpress. Copy this link here and paste it back into the field in your control panel.

Now for the Consumer Key and Consumer Secret, you have to navigate to your WordPress dashboard, then go to the Settings section of the WooCommerce Plugin. Here, click on the API tab at the top then navigate to Keys/Apps. Now, I’ll show you how to create a new key.

Click Add Key. Give it a description, assign it to a user, then select the Read/Write permissions. On this next screen, you should be given the Consumer Key and Consumer Secret. Make sure you copy and paste these codes into your control panel now, you won’t be able to access them again. Don’t forget to click Done.

You should see your store populate in the emulator. I’ll show you in a bit how making changes in the WordPress dashboard will make changes in real time, but first let’s finish going through Design and Settings. Under Design you can control how the sections and item listings are laid out. Under background, you can access your Media Library again to insert a background into your Plugin. Be careful to choose one that won’t overpower the text in your Plugin. You still want your users to be able to read the names of your listings.

And again, Settings is where you can control the currency at which your store operates.

Now that your store is set up the way you want it, I’ll quickly show you how to create a new product and see it populate on your emulator in real time. Go to the WordPress dashboard and click on Product in the sidebar. Then click on Add Product. On the next page, start filling out the information for your product. Give it a name, description, category. Below that, put in the price. Then under Product Image, give it a picture. That’s good enough for our demonstration now, so I’m just going to go back up here and click Publish. Now if you go back to the emulator, you should see your item listed there now.

For more information on using WooCommerce as a whole, please check out their support page support.woothemes.com. If you’d like to talk to their support team, just click on “Submit a Ticket” in the header.

Congratulations! It’s that simple. Your WooCommerce plugin has been created. However, if you didn’t add it to your side menu or create it within a Folder, it is not yet accessible to your users. You will need to add it to the app on the Home Plugin, in a Folder Plugin, and/or to the Side Menu. If you already know how to do this, feel free to skip this next section.

If you have the Launcher or Folder Plugin selected for your Home Plugin, you can add it to the Home Plugin by clicking on Home Plugin. Once you’re there, scroll down and click “Add Plugin Instance”. Now find the Plugin you created by searching for the title you gave it, selecting it, and clicking “Apply” at the bottom.

To add it to a Folder Plugin, navigate to any Folder Plugin you’ve created and click on “Add Plugin Instance”, then search for the title you gave it, select it, and click “Apply” at the bottom.

To add it to the Side Menu, go to Plugins then Side Menu, click on “Select Plugin Instance” and, you guessed it, search for the title you gave it, select it, and click “Apply” at the bottom

Your WooCommerce Plugin is now accessible within your app. Thank you so much for watching. Be sure to check out our other Help Videos and we’ll see you next time!

#WooCommerce #OnlineStore #Shopping

Featured Posts
Recent Posts
Search By Tags
No tags yet.
Follow Us
  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square
  • Facebook Social Icon