WooCommerce Front Page Template For Genesis

This template enables you to create a front page like this :

WooCommerce-Front-Page-Template-For-Genesis

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.

Download Folder

Requirements

  1. Requires the installation of both the WooCommerce and Genesis Connect WooCommerce plugins.

  2. 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 :


Comments

12 responses to “WooCommerce Front Page Template For Genesis”

  1. James Hahn II Avatar
    James Hahn II

    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.

    1. If its the shortcode attributes you’re referring to, it may be caching https://docs.woocommerce.com/document/woocommerce-shortcodes/#section-7

      1. James Hahn II Avatar
        James Hahn II

        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?

        [products limit="4" columns="4" orderby="rand" visibility="featured"]

        1. Try without visibility otherwise you may need to test it locally to see if its a problem with your live installation.

          1. James Hahn II Avatar
            James Hahn II

            Need them to be featured products, but no matter what seems it refuses to random sort. I’ll keep Googling.

          2. I would try the WooCommerce Facebook page because there’s a lot of people who would know how to troubleshoot common issues.

          3. James Hahn II Avatar
            James Hahn II

            Thanks, Brad. It works after adding this Gist.

            https://gist.github.com/bekarice/bac8b67064001ebc3bc2475424d99f87

          4. Cool. Thanks for posting the link. Did you add the shortcodes to a block or widget?

          5. James Hahn II Avatar
            James Hahn II

            Widget. I hate blocks. haha

  2. Chris Tredoux Avatar
    Chris Tredoux

    This is a great help for my little company

  3. Chris Tredoux Avatar
    Chris Tredoux

    certainly going to try it – very nice

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.