WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. groo600
    Member
    Posted 1 year ago #

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

    http://halliefriedman.com/shop/

    Does anyone have any suggestions?

  2. alchymyth
    The Sweeper & Moderator
    Posted 1 year 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
    Member
    Posted 1 year 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:
    http://classichawaiidesigns.com/

    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. alchymyth
    The Sweeper & Moderator
    Posted 1 year 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

    example:

    page template with file name product-grid-page.php
    http://pastebin.com/Z6sG8YRS

    addendum to functions.php of the child theme:

    add_filter('body_class','twentytwelvechild_body_classes',20);
    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
    Member
    Posted 1 year ago #

    Thanks a lot alchymyth. I appreciate your help.

  6. ModDish
    Member
    Posted 9 months ago #

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.