This template enables you to create a front page like this :
The template includes 4 widget areas for displaying WooCommerce products using the products shortcode
In this case, shortcodes are added to a custom HTML widget in each widget area like this :
The shortcodes enable you to set the amount of products, number of columns and the category the products are assigned to. There are many other product attributes you can use to control which products are displayed in each widget area.
Watch the following demo video to see how it works :
Demo Video #
Shows products displaying in 3 columns by category in each widget area on the front page of the Genesis Sample child theme by StudioPress.
Code Installation #
The code comes pre-installed in the Genesis Sample child theme included in the following download folder for logged in users. To use this theme as is, install the zip folder named genesis-sample.zip from the download as a new theme.
Instructions are also included to use the template in other child themes.
Requirements
- Requires the installation of both the WooCommerce and Genesis Connect WooCommerce plugins.
-
Once you setup WooCommerce and create your products, you can then add shortcodes to custom HTML widgets in any of the Product Category widget areas.
Usage In Other Themes
The download folder includes a zip file named genesis-sample.zip which you can install as a child theme withe template pre-installed. If you want to use the code in another theme, following these instructions :
Step 1 – Upload the front-page.php file to your child themes root directory.
Step 2 – Copy and paste the PHP code from the functions.php file to the end of your child themes functions file.
Step 3 – In the config > menus.php file, rename the secondary menu to Category Menu or any other name you want to use.
Step 4 – Copy and paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.
Product Category Menu
Is made like this :
James Hahn II says
Hey Brad, any reason orderby=”rand” wouldn’t work here? Trying to use the shortcodes to display random featured products and can’t seem to find the right combination.
Brad Dalton says
If its the shortcode attributes you’re referring to, it may be caching https://docs.woocommerce.com/document/woocommerce-shortcodes/#section-7
James Hahn II says
Was hoping that might be it. But even after clearing histories, restarting browsers, trying all incognito, clearing WPEngine cache each time, etc. the same 4 products always pop up. Am I doing it wrong?
Brad Dalton says
Try without visibility otherwise you may need to test it locally to see if its a problem with your live installation.
James Hahn II says
Need them to be featured products, but no matter what seems it refuses to random sort. I’ll keep Googling.
Brad Dalton says
I would try the WooCommerce Facebook page because there’s a lot of people who would know how to troubleshoot common issues.
James Hahn II says
Thanks, Brad. It works after adding this Gist.
https://gist.github.com/bekarice/bac8b67064001ebc3bc2475424d99f87
Brad Dalton says
Cool. Thanks for posting the link. Did you add the shortcodes to a block or widget?
James Hahn II says
Widget. I hate blocks. haha
Brad Dalton says
The problem might have been caused by this https://github.com/skyverge/woocommerce-extra-product-sorting-options/issues/17#issuecomment-535062408
Chris Tredoux says
This is a great help for my little company
Chris Tredoux says
certainly going to try it – very nice