Grow your CSS skills. Land your dream job.

CSS/PHP WordPress – 3 Column Ecommerce Search Results

  • # September 23, 2009 at 6:36 am

    Hey Everyone!

    I am creating a ecommerce website using WordPress for a school store (selling clothing and other spirit wear for their school).

    Now I ran into a little issue with the search results page. The school would like the results page to have results in a 3 column layout sort of like (http://oldnavy.gap.com/browse/search.do … submit.y=8).

    Any ideas on how I could do this?

    # September 24, 2009 at 4:47 pm

    Do you mean three search results side by side? just give the results entries a fixed width and let them float. the smaller the width the more are shown side by side.

    # September 24, 2009 at 5:00 pm

    So do I just repeat the search result code for WordPress side by side?

    If you could give me an example of WP site that does this or show me an example of the code, that would be nice.

    # September 24, 2009 at 7:27 pm

    goto your search.php within your theme directory and edit the following line

    Code:
    >

    to

    Code:
    >

    this way you add another class (with the predefined classes for posts) to your search results.
    now you can define a new class, something like this:

    Code:
    .boxed-search-result {
    width: 150px;
    height: 150px;
    float: left;
    }

    within the default kubrick theme, this way, 3 results are shown side by side. sure you should include like only the title, an image and the price instead of the "comments" and "posted in" links and the creation date, but thats up to you =)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".