Above is a screenshot of widgets in different widgets areas to create “Store Layout” in the Sunshine Pro theme.
Note: Creating a different homepage layout does NOT involve selecting a post template. A simple drag and drop of widgets should do the trick.
Essential plugins
You would need to install following plugins to get started:
1. WooCommerce plugin.
2. Genesis Connect for WooCommerce plugin.
Header Area
1. Before Header widget area contains a text box with the following code:
2. Nav Extras widget contain “Simple Pro Sliding Panel Right” widget with “Latest Offers” title. It is followed by Login button, created using following code in a text box.
3. Sliding Panel Right widget area display WooCommerce products and categories using shortcodes.
Latest Products
[recent_products per_page=”2″ columns=”1″]
Product Categories
[product_categories number=”4″ columns=”2″]
Body Area
1. Home Top Full Width widget area contains a “Simple Pro Banner” widget with the following code. Settings: background image selected, transparent content option selected, height set to 400px.
2. Home Middle Left widget area contains a “Simple Pro Banner” widget with the following code. Settings: background image selected, transparent content option selected, height set to 600px.
3. Home Middle Right widget area contain two “Simple Pro Banner” widgets.
First widget settings: background image, transparent content option selected, height 300px as seen in screenshot below.
Second widget settings: background color, transparent content option selected, height 270px with following code in content box.
4. Home Middle Full Width widget area contains a “Simple Pro Banner” widget with settings: background image, transparent content option selected, height 200px, button 2 box is used for the button.
5. Home Bottom widget area has eNews extended widget at the start. It is followed by two text widgets using WooCommerce shortcodes.
New Arrivals
[recent_products per_page=”4″ columns=”4″]
Shop by Category
[product_categories number=”6″ columns=”6″]
Also refer – https://docs.woothemes.com/document/woocommerce-shortcodes/
Then we have “Simple Pro Featured Posts” widget with 4 columns layout and active pagination option.
5. Home Bottom Full Width widget area contains a “Simple Pro Banner” widget with settings: background image, transparent content option selected, height 150px and following code.
Footer Area
1. Footer Widgets section has 3 active footer widgets.
Footer Widgets 1 has a text box and a simple social icons widget.
Footer Widgets 2 contain a search box, followed by a text box displaying links using the following code.
Footer Widgets 3 has a text box with text contents wrapped with italics tag.
2. Footer Credits information can be edited from the Customizer.