• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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 :

WooCommerce

Reader Interactions

Comments

  1. James Hahn II says

    October 1, 2020 at 6:51 pm

    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.

    Log in to Reply
    • Brad Dalton says

      October 2, 2020 at 1:50 am

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

      Log in to Reply
      • James Hahn II says

        October 2, 2020 at 12:33 pm

        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?

        Log in to Reply
        • Brad Dalton says

          October 2, 2020 at 12:41 pm

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

          Log in to Reply
          • James Hahn II says

            October 2, 2020 at 1:54 pm

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

          • Brad Dalton says

            October 2, 2020 at 2:07 pm

            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

            October 2, 2020 at 2:35 pm

            Thanks, Brad. It works after adding this Gist.

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

          • Brad Dalton says

            October 2, 2020 at 3:00 pm

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

          • James Hahn II says

            October 2, 2020 at 3:02 pm

            Widget. I hate blocks. haha

          • Brad Dalton says

            October 2, 2020 at 3:32 pm

            The problem might have been caused by this https://github.com/skyverge/woocommerce-extra-product-sorting-options/issues/17#issuecomment-535062408

  2. Chris Tredoux says

    March 7, 2019 at 10:52 am

    This is a great help for my little company

    Log in to Reply
  3. Chris Tredoux says

    March 4, 2019 at 9:00 am

    certainly going to try it – very nice

    Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.