List products in your home page in grid format

A typical question is how to make a list/grid of products visible on the homepage.
Eg. Products of a certain category, a particular supplier products, products with a particular tag, best sellers, latest products viewed, etc.

TheCartPress is closely integrated with WordPress and you have as much chance as wordpress offers.
My favorite is to use the TCP Custom Post Type widget included in TheCartPress in a custom homepage with widgetized areas. The TCP Custom Post Type widget  allows you to create lists of products, posts, and any other post type you have. Used in combination with the TCP Loops becomes a super powerful tool.

But this article focuses on the easiest way that not require to edit your templates.

It’s about creating a page with many shortcodes as you need and set it as home page in WordPress. You can see a basic example in demo.thecartpress.com

Requeriments

Now you can use the internal loop called “default”, but you can also use your custom loops from your theme. The template loops name in your theme must begin with “loop-” eg: “loop-products-grid.php”

Instructions

  • Create a shortcode in the shortcode generator with the products you want to display (TheCartPress > shortcodes). Make sure you select a configurable loop in the settings.  eg: “default”
  • Create a page. In its content type the  shortcode previosly created. You can use as many shortcodes as you need.
  • In the WordPress Settings->Reading, change the first setting called ‘Front page displays’. Set it to ‘A static page (select below) ‘ and select in the Front Page combo your new page.

The Shortcode Generator in action

Tcp Loop in shortcode generator

Tcp Loop in shortcode generator

Did not work?

Be sure your theme has thumbnails support.
In your function:

/ / This theme uses thumbnails post
add_theme_support (‘post-thumbnails’);

Make sure you have integrated the loop-tcp-grid.php in your theme:
Use TCP loops
Make sure you have TheCartPress + 1.1.0

Make sure you are calling the loop-tcp-grid.php from your shortcode:
Shortcode>Loop:loop-tcp-grid.php
Make sure you are calling the default from your shortcode:
Shortcode>Loop:default

Make sure that your Shortcode shows the image:
Shortcode>Advanced options>See image option: “checked”.
And choose the image size in combo.

When editing the product make sure there is a featured picture on each product.