Have you been wondering how to sell your products online without coding to mess up your website in one hot minute? There’s no need to recreate the wheel when there is a myriad of plugins to help you achieve this instantly.
Who knew that a humble free plugin could be so effective at changing any WordPress website into an online shop paradise? It’s possible, with WooCommerce!
Note that if you need more of a specific integration with WooCommerce then look no further than WooExperts. These companies are handpicked and verified by WooCommerce themselves to ensure that they know how to help you with design and development of a Woo site.
To demonstrate this I am going to use my fictitious Ada Design agency WordPress site that I created locally. Let’s get into this.
Login and install that plugin
Login to your WordPress account and navigate to the sidebar menu – Click Plugins > Add New.
Search for WooCommerce
Now enter ‘WooCoomerce‘ into the search box, it should come up as the first result. Click install > then Activate.
WooCommerce Setup Wizard
WooCommerce makes the setup really easy for you to install so that you can’t get it wrong! It’s time to follow the easy steps on the wizard which will take you step by step through the process. Fill in your address and currency details as I have done here.
In this example, I only want to sell digital products on my online store so I selected the plan to sell digital products option from the drop-down box. Select the best option for your store and click the button!
Payment Options – Stripe and PayPal
Select whichever payment option you like, the more the better I say :). I picked Stripe and Paypal for now, notice that you can pick additional payment options if you want to.
Click the Continue button.
Time for the Extras
You’ll need to install Jetpack to for your store to function! I tried to do this as part of the wizard but it did not work for me. It might not work for you so go back to Plugins > Add New and search for ‘Jetpack’. You can find more about the benefits of Jetpack here.
After clicking the button I received…
Go back to Plugins
Go back to plugins and you should find Jetpack waiting ready for you, it just takes one click – click Connect.
Jetpack in Dev mode
JetPack is smart enough to know I am not connected to the WordPress.com servers and some of the features are unavailable on my localhost.
However, the ones that are available can be activated by enabling Jetpack in Dev mode! Clicking on the Development mode link takes you to the Jetpack Dev mode page.
Editing your wp-config.php file
This does not have to be scary, luckily jetpack tells you exactly what to do. So open up that wp-config.php file using your text editor of choice and paste “define( ‘JETPACK_DEV_DEBUG’, true );” where I pasted it below.
Check out the Storefront
I’m sure you’ve had a sneak peek already, go to your site and see what it looks like! Boring right? You can easily style it up using the customiser but first, we need to add products.
Design your store
Head back to the Plugins Menu where you should see (taking up half of the page) WooCommerce’s design your store overlay.
If you accidentally cross this out you can access it via Plugins. Click on Plugins > WooCommerce > Settings then click the in the customiser link.
The customiser allows you to edit the appearance of the storefront and even customise it with CSS.
Notice the blue circle I put in the picture. it’s not immediately obvious but if you click the arrow it reveals more options for you to customise the theme!
I have no downloadable products showing on my storefront which will be resolved soon. To add products go back to your admin. Locate WooCommerce > All Products.
Create your first product
This looks suspiciously like another wizard that will guide you through the setup if you don’t know how! Click on Create your first product.
Follow the pop-up instructions :). I added information pertaining to my freelancer guide.
Choose a product type, I chose the default simple product.
Since my product is a digital non-tangible product I selected virtual and downloadable.
Pricing Product & images
For my freelancer guide, I want to charge £20, so I just entered that in.
Go ahead and enter a short product description, I stuck to one line.
Add a product image and add tags.
You can also add a category – I added ‘freelancer’.
Add the downloadable file
For demonstrable purposes, the file I added was my featured image. You can add a pdf file, word document – anything really.
Click the Publish button
At this point I was confused as to why my product was not showing when I went to visit my site – I had not clicked Publish! Take a look at your site now.
You can add the product to basket and proceed to checkout now! Woohoo you did it.
Naturally, there will be some payment setup issues given that I’m on my local WordPress. But doing this on your actual site would be a breeze since you really only need to link your payment services like Paypal and Stripe to WordPress.
The default free theme that comes with WooCommerce is the Storefront theme. If this does not meet your requirements (free themes generally are very limited) then you can pay for a theme. Go to your Admin > Appearance > Storefront
Explore the themes and extensions at your leisure or just stick with the free theme and customise it as best you can!