[resolved] I want to make a product grid (6 posts)

  1. groo600
    Posted 3 years ago #

    I want to make a product grid like the one shown on this page:


    Does anyone have any suggestions?

  2. Michael
    Part-Time Forum Moderator
    Posted 3 years ago #

    your question is too generic to be answered;

    try yo break the problem down ito steps.

    please provide some information first:
    - what theme are you using?
    - what shop plugin are you using?
    - do you have a link to your site?
    - how is your knowledge level with html/css/php?

  3. groo600
    Posted 3 years ago #

    Fair enough, here is some more information:

    I'm using 2012
    I'm not using a shop plugin as of now, but I'm not averse to using one. I'm just using paypal buttons at the moment.

    Here is a link to the site:

    As you can see, I just used a table for a product gallery, but it's just static, and I figure that's probably the wrong approach if I end up needing to add a lot of products in the future.

    I figure I should probably put products in posts instead of pages, and then they could be sorted and displayed in a grid fashion based on post categories and/or tags. That's what I want to do, but I don't know how. If there is a plugin that does it, that would be fine.

    I'm relatively comfortable working with html and css, but not php.

  4. Michael
    Part-Time Forum Moderator
    Posted 3 years ago #

    you could use posts (one post per product) in a certain category for your products;

    and a page with a page template to list those posts; http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates


    page template with file name product-grid-page.php

    addendum to functions.php of the child theme:

    function twentytwelvechild_body_classes( $classes ) {
    	if ( is_page_template( 'product-grid-page.php' ) )
    		$classes[] = 'full-width';
    	return $classes;

    some minimal styles (two columns on narrow screens, 3 columns on wider screens):

    .grid { width: 47%; margin-right: 3%; float: left; background:#CC6666; }
    @media screen and (min-width: 600px) {
    	.grid { width: 32%; margin-right: 1%; }
  5. groo600
    Posted 3 years ago #

    Thanks a lot alchymyth. I appreciate your help.

  6. ModDish
    Posted 2 years ago #

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.