You can integrate online shopping features by using one of the most popular shop WordPress plugin “Woocommerce”. In order to use it, you can download Woocommerce plugin for free from Woothemes.. Then follow below steps to install Woocommerce.
- Log into your WordPress Admin area.
- Look down the left hand column for “Plugins” and then click on the word “Plugins”.
- Just to the right of the title “(Manage) Plugins” in the image above, you can see a button marked “Add New”, click this button.
- The image above shows the option to upload the plugin from your own PC, Select the woocommerce.zip you had previously downloaded from Woothemes. Install the zip and click on “Activate Plugin”.
Then please find full documentation of “Woocommerce” plugin here
Woocommerce Page Setup
You should see a nice magenta banner “Welcome to WooCommerce – You’re almost ready to start selling :)”. WooCommerce needs some pages to be created for it to function, it can do this automatically for you by simply clicking “Install WooCommerce Pages”. (You can change these page names later if you want to).
Woocommerce General Settings
The first thing we need to do is setup where we are and our currency. These are simple dropdowns and you also get a third dropdown to allow you to limit which countries you are willing to ship to.
Next we get some Checkout and account options. Here you can configure things like enabling guest checkouts (so they don’t need to register an account with your site), you can force SSL on checkout pages (particularly useful if your payment gateway requires this), if you want to enable coupons (more on this later). You can also set some account functions like allow user registration without an order, whether to use email addresses for usernames and if you want to hide the WordPress Admin from customers.
You also get a couple of UI options including quite a nice Lightbox effect which I usually enable. Finally on this page we see our digital downloads options. With WooCommerce you can easily sell virtual and downloadable products these options allow you to define how they should be handled and how to grant access. The options are pretty self explanatory as with most of the WooCommerce setup.
Woocommerce Recommended Image Size
In Woocommerce settings. You can change product’s images size. From your WordPress admin dashboard. Go to Woocommerce > Settings > Products > Product Image Sizes. Below are recommended image size. After changing these settings you may need to regenerate your thumbnails.
Alright now you should have Woocommerce basic settings and ready to be used. However you can also configure other advacned settings ex. tax, shipping etc too. These are some more in-dept tutorials about how you can configure that options.
Shop Page Background Header Image
Once you setup Woocommerce shop and other pages. You can customise header background image of shop pages. Go to edit shop page, upload background image you want to display via “set featured image” option at the bottom right of edit shop page.
Customise Shop Page Layout
Open Appearance > Customize > Shop > Layout and you can customise shop page layout from fullwidth or with sidebar. Also can change number of products display per page option.
Customise Single Product Options
Open Appearance > Customize > Shop > Single Product and you can customise product color scheme and option to displays related products.
Customise Product add-on options
Our theme included a plugin “Advanced Product Fields (Product Addons) for WooCommerce” so you can customise product add-on for your food menu options. We included free version of the plugin but if you want to unlock all advanced features of the plugin. You can purchase it from here.
First please make sure you install required plugin “Advanced Product Fields (Product Addons) for WooCommerce” from Appearance > Install Plugins.
Add a new product
Go to WordPress Dashboard > Products > Add New
Enter product title and description. You can use any shortcode or HTML to editing field.
Assign this product to category using categories box on the right side. Add tags to this product. Type tag name in to the field in Tags box on the right side.
Upload product featured image using set featured box on the bottom right side. All pages will use this image for post preview image and thumbnail.
You can set product meta data including price, sale price, shipping info, inventory etc. There are many options there and they are optional.
Once you finish, click Update.
Adding product add-on
Go to WordPress Dashboard > WooCommerce > Product Fields > Add News
Enter product field title and you can click on “Add a Field” button to add a new product add-on field.
Next you can customise product field. For example you can change its type to radio buttons and add options there. Please see above screenshot.
You can also add rules for example displays add-on fields only for certain products. Once you finish, click Update.