Skip to content

Shop Archive Grid – Sidebar, featured, search [Standard]

Template Details

Use cases

Multi-column grid format – most common eCommerce shop layout. Use this layout on most stores with regular products that don’t specifically request for filterable functionality beyond categories and the AJAX search bar.

Component breakdown

  1. Products Grid – the template is using standard WooCommerce products module, default layout with the product image stacked above the product information. (The default WooCommerce products module is actually the standard posts module with additional settings and WooCommerce classes enabled)
    • The number of products that show on a page before pagination occurs is controlled by the WordPress reading settings – to change this, go to dashboard > settings > reading > and then change the blog feed value and save, this will automatically adjust on the products archive page
    • This layout template is made with the products (posts) module’s content source set to main query since it is made for themer layouts. If for any reason, this template is to be used on a static page, change the content source from main to custom query. If you are using it on an archive themer layout, make sure to keep the content source as main query only.
  2. WooCommerce Breadcrumb – template uses the default WooCommerce breadcrumb module aligned to the left
  3. Regular Sidebar – this template’s sidebar consists of the following elements:
    • Ajax Product Search – template uses the AJAX Product Search widget with its layout set to search bar only, taking up the space provided by the column its in.
    • Featured Products – template uses the default WordPress widget for featured products with a limit of 5
    • Product Categories – template uses the default WordPress widget for product categories, with product counts enabled and with empty categories hidden
    • Product Reviews – template uses the default WordPress widget for product reviews
      Feel free to rearrange or remove any of the items in the sidebar that don’t fit the store type or don’t have any contents 

Open Customizer > Content Tab > WooCommerce Tab

Some modules, even if you set the columns in the module to a certain number, get overridden sometimes by the settings in this tab. The only item in this tab to keep an eye on is “number of columns”. The default setting is usually 4. Make sure this number matches the column settings in your product grid module. For example, if you change it to 3 in the module, change it to 3 in the customizer as well.

If you’re experiencing weird column layout issues on a product archive page that has a product grid module set to a different number of columns than 4, it would be a good idea to check this area in the customizer and to change the number of columns to match the number being set in the product grid module. Once that is done, flush the cache, refresh the page, and the layout should correct itself.

Custom code

This layout does not make use of any custom HTML or CSS. All items have been styled within the modules or are using default styling from the customizer.

How to Use

Download & Import Templates

  1. Choose one of the available template packages to download from the sidebar to the right
  2. Click the button to download the .xml for the desired template package
  3. Go to the site you want to import the template on, once you've installed GD Core and set up all the required plugins
  4. Go to the dashboard > tools > import - then at the bottom, under WordPress click "install now" > then click "run importer"
  5. Select your downloaded template package .xml from the "choose file" button > then click "upload file and import"

Apply Templates to Layouts

Note:

Feel free to adjust the widths of the columns to work with whatever changes you make to the template's components.

Make sure to check these adjustments on tablet and mobile responsive views as well to make sure the layouts appear correct on all screen sizes.

Table of Contents
    Add a header to begin generating the table of contents

    View Demo Download Template

    Package Template Includes: Main Query: Product Archive Grid Regular, Singular Product | Custom Query: Featured Products Module, Product Categories Module

    Download Package
    Scroll To Top