This tutorial is kindly provided by the plugin developer. You can access the full plugin's documentation on this URL: https://docs.woocommerce.com/documentation/plugins/woocommerce/
The theme is compatible with WooCommerce and includes full design integration as well as custom shortcodes.
If you don't need Woocommerce simply don't install it and all the features, codes and anything required for WooCommerce will not be loaded. Vice versa, if you need to set up WooCommerce just install it as you do with other plugins - WooCommerce Plugin. Once installed and activated, the WooCommerce menu will be added in the WordPress main navigation menu on the left.
Please take a look at the important links below that have additional information about using WooCommerce
- WooCommerce Plugin Page – This is the official WooCommerce plugin page
- WooCommerce Documentation: This is the WooCommerce Online documentation created by WooThemes
- WooComerce Community Forums: This is the community forum for WooCommerce plugin created by WooThemes
- WooComerce Built-In Shortcodes: These are the included shortcodes for WooCommerce, our custom shortcodes are not included in this.
1. How To Install WooCommerce And Setup The Default Shop Pages
- Go to your Plugin section of your WordPress admin
- Click on the Add New button at the top of the page.
- Then enter WooCommerce in the search field
- Choose the first one called WooCommerce – excelling eCommerce and click on Install Now
- WooCommerce will install, then click the link that says Activate Plugin
- You will then see a WooCommerce Purple Notification Bar at the top of the plugin page.
- Click the Install WooCommerce Pages button in the purple bar to install all the default pages
Please Note: Once you are done installing WooCommerce and the default pages, you can go to the Appearance > Menu section of your admin and choose to add all the WooCommerce pages to your menu. They will be listed at the top under the most recent pages
2. How To Create Your Products
- Click on the Products sidebar menu
- Click on Add Product button at the top of the page.
- Enter a name for your product at the top of the page
- Enter all the product description text into the post content field, this will be all the product information
- The Product Data box is where you enter all the product details (price, SKU, shipping, and more)
- The Product Short Description box which will be the short intro copy that shows next to your images
- Set your main Featured Image in the right sidebar Featured Image box.
- To use a gallery of images, insert more images in the Product Gallery box.
- Enter your categories in the Product Categories box
- Enter your tags in the Product Tags box
- When all your data is entered, click Publish and the item will now show on your main shop page
Please see below for a visual description of the product page.
3. How To Use WooCommerce Shortcodes And Have The Graphics Extend The Full Width of The Column
WooComerce shortcodes can be used with your theme and the graphics will extend out the full width of the column size. But this will only happen once you have a large enough Catalog image size and you might possibly need to regenerate thumbnails using the Regenerate Thumbnails plugin. This is very important in having a consistent design/layout for all your pages.
- Click on the WooCommerce sidebar menu item and find Settings area
- Click on Catalog tab at the top of the page.
- Scroll to the bottom of the Catalog tab and find the Image Options section
- There is a Catalog, Single Product & Product Thumbnail image size
- Catalogue Image is for your images on the shop page and for shortcodes.
- Single Product Image is for your images on the single product pages
- Product Thumbnail is for your smaller product thumbnails for widgets
- If you want your image to not be cropped leave the height field blank and only enter a width
- Enter a large enough Catalog Image Width to fit the corresponding column size.
- When you make changes to the 3 various images sizes and save it, you may need to regenerate thumbnails using the Regenerate Thumbnails plugin
- Install the Regenerate Thumbnails plugin and go to your media section and choose to regenerate your image thumbnails so the larger size will be created
Please Note: Your catalogue image size and single product image size need to be large enough to fit the size column you want to use. And you also need to make sure your product images are the size you need. For example: if you want to use a shortcode in an one_half column and have it fill the full space, then you need to have a Catalog Image size of about 500px in width, and your product image needs to be at least 500px.