A A A
Avatar

Please consider registering
guest

sp_LogInOut Log In sp_Registration Register

Register | Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 4 characters - maximum search word length is 84 characters

sp_Feed Topic RSS sp_TopicIcon
How to Display a Grid View on your Category pages.
September 14, 2011
7:38 pm
Avatar
Admin
Forum Posts: 5862
Member Since:
March 16, 2008
sp_UserOfflineSmall Offline

This post will help you modify the "category.php" page so that it shows your products in a grid view format, versus the current horizontal format it currently displays products in.

 

FYI: Another method for presenting your products in a grid view with navigation bar pages is covered in the thread here:

http://www.markettheme.com/for.....categories

 

So, again this post will explain the code modifications to change your standard category page from the current horizontal display with product description excerpts, to a basic grid-view display without product description excerpts.

 

Remember…  Make a backup of your files before modifying them, in case you need to revert back.

 

Here's how to make the changes:

1. Open up the Market Theme "category.php" file for editing.

2. On or around line #80 you'll find the line:

<div class="new">

Change it to this:

<div class="new" style="float: left; width: <?php echo $mkt_options['mkt_thumbnail_width']+25; ?>px; height: <?php echo $mkt_options['mkt_thumbnail_height']+55; ?>px;">

(the "+25" in the line above, adds a 25 pixel padding to the side of the image thumbnail.  the "55" adds padding to the bottom of the image to account for lines of text.  Both can be changed if needed.)

3. Next, on or around line #95 you'll see the line:

<div class="itemdesc">

Change it to this:

<div class="itemdesc" style="width: <?php echo $mkt_options['mkt_thumbnail_width']; ?>px;">

4. Next, locate on or around line #101 the word "&ndash;" at the beginning of the line.

Change "&ndash;" to "<br>"  (without the quotes)

5. Next, you'll need to remove the long text descriptions — because they will skew your grid pattern.  Do this by locating on or around line

#105 where it says:

if(($mkt_outstock == 1)) { 
                echo '<span class="sold">'.mkt_THEME_SINGLE_SOLDOUT.'</span>'; 
            } ?></h2>
    <?php     the_excerpt(); ?>

Change the last line of this section so it looks like this:

if(($mkt_outstock == 1)) { 
                echo '<span class="sold">'.mkt_THEME_SINGLE_SOLDOUT.'</span>'; 
            } ?></h2>
    <?php  //   the_excerpt(); ?>

6. Scroll down to around line #127 and locate the line:

<div class="navigation">

Immediately BEFORE that line, enter this new line:

<div style="clear:both;"></div>

 

7.  Save the file.

That should do it.

September 15, 2011
6:35 am
Avatar
GeneralGadget5
Member
Members
Forum Posts: 10
Member Since:
July 16, 2011
sp_UserOfflineSmall Offline

THANK YOU! LaughTHANK YOU! LaughTHANK YOU! Laugh

You solved my problem that I wanted to ask a solution to!

This is a crucial element to my store that will allow me to have multiple different products in my authority store that won't seem out of place.

 

Once again, THANK YOU!Laugh

 

Edit: You can have a look at my site now that I implemented the php code change: http://electric-snow-blowers.org/

 

See how clean it looks. Just to make a short point, this is not my multi-product store I've mentioned earlier. This is one of my smaller niche affiliate stores I put together.

September 15, 2011
8:22 pm
Avatar
Admin
Forum Posts: 5862
Member Since:
March 16, 2008
sp_UserOfflineSmall Offline

You're welcome.  Glad to help.

October 27, 2011
9:14 pm
Avatar
Member
Members
Forum Posts: 156
Member Since:
February 27, 2011
sp_UserOfflineSmall Offline

Hi - I love this idea and implemented it on my website.  However, I'm getting holes on most of my pages where a product should be but isn't.  Any idea how to fix it?

October 27, 2011
9:52 pm
Avatar
Admin
Forum Posts: 5862
Member Since:
March 16, 2008
sp_UserOfflineSmall Offline

Can you provide a link to your site?

October 27, 2011
10:12 pm
Avatar
Member
Members
Forum Posts: 156
Member Since:
February 27, 2011
sp_UserOfflineSmall Offline

oh sure, sorry, should have thought of that - I actually contacted you since for some reason I wasn't able until now to post to the forum - anyway, you did respond (THANKS!) - I think I checked the things you listed but the e-mail was deleted so looking again for a solution.

 

I'm pasting the URL to a category that has 3 pages and you'll see that on each page different spaces are empty.

 

http://www.boutiqueelliette.com/?cat=148

October 28, 2011
6:01 pm
Avatar
Admin
Forum Posts: 5862
Member Since:
March 16, 2008
sp_UserOfflineSmall Offline

The reason you are getting "holes" is due to some of the product titles being 3 lines, while others are 2.  This is causing the heights to be slightly different, and it throws things off.

 

What you'll need to do, is increase the height of your boxes. 

Look up in the very first post of this thread, for the area containing:

the "55" adds padding to the bottom of the image

Basically, you'll need to alter that "55" value to something like "70".  If that's not enough, then go "75".

 

Also, you'll probably want to go into your Wordpress settings area under "Reading" and change the number of posts to show from 10 to either 9 or 12.

This is because you have 3 per row showing.  Having this value set to "10" is making the last row only have 1 picture.  It'd look better to have a consistent row.

October 28, 2011
7:28 pm
Avatar
Member
Members
Forum Posts: 156
Member Since:
February 27, 2011
sp_UserOfflineSmall Offline

Thanks!  Actually this whole part was totally missing:

 

?>px; height: <?php echo $mkt_options['mkt_thumbnail_height']+55; ?>px;">

 

so I put it in and saved it.  Everything is lined up good now!!  Smile

March 22, 2012
3:49 am
Avatar
denyfibrata
Member
Members
Forum Posts: 3
Member Since:
September 17, 2011
sp_UserOfflineSmall Offline

Hi,

at http://electric-snow-blowers.org/, i can see that new products can also shown as grid view.. haw can u do that? can u give me the step by step code, or just show me the links refer to that step.

 

Regards,

Deny

March 22, 2012
10:24 pm
Avatar
Admin
Forum Posts: 5862
Member Since:
March 16, 2008
sp_UserOfflineSmall Offline

Hi Deny,

I see that you currently have them in grid view format, so you must've found your solution.

March 23, 2012
12:17 am
Avatar
denyfibrata
Member
Members
Forum Posts: 3
Member Since:
September 17, 2011
sp_UserOfflineSmall Offline

Hi admin,

No, i mean, http://electric-snow-blowers.org/ is not mine.. i have another website... can u help me? i want to make my new product shown as gridview just like shown at http://electric-snow-blowers.org/

 

thanks,

March 23, 2012
10:26 pm
Avatar
Admin
Forum Posts: 5862
Member Since:
March 16, 2008
sp_UserOfflineSmall Offline

Check out this post for your front page:

http://www.markettheme.com/for.....-grid-view

 

and this post for your category pages:

http://www.markettheme.com/for.....gory-pages

March 24, 2012
2:26 am
Avatar
denyfibrata
Member
Members
Forum Posts: 3
Member Since:
September 17, 2011
sp_UserOfflineSmall Offline

thank you.. it works like a charm..

September 14, 2012
7:17 pm
Avatar
veronicap
Member
Members
Forum Posts: 5
Member Since:
October 8, 2010
sp_UserOfflineSmall Offline

This post helped a 100% however for some reason now the More Information posts are also showing up in a grid view. Since I did not create a page for more information i cannot select the template to apply and all the posts default to what I am assuming to be the "categories" page that I changed. Did I do something wrong.

Here is the products link http://www.radiosplendor.net/a...../products/

Here is a link to one of the more information pages

http://www.radiosplendor.net/a.....ducts-faq/

Thanks for your help

September 17, 2012
6:26 pm
Avatar
Admin
Forum Posts: 5862
Member Since:
March 16, 2008
sp_UserOfflineSmall Offline

I think it's an issue with your categorization structure.

All non-product posts must be in a category OUTSIDE your main top level products category. Make sure the offending post is NOT within the product categorization.

Then, in your Market Theme settings area-- the first drop-down box should be set to the main top level product category.

I'd verify those first.

December 16, 2012
10:35 pm
Avatar
quotealex
Member
Members
Forum Posts: 5
Member Since:
December 2, 2012
sp_UserOfflineSmall Offline

Is it me or is this modification doesn't quite come out as nice as  the Grid-view Template one!

April 1, 2013
8:18 am
Avatar
Member
Members
Forum Posts: 40
Member Since:
December 13, 2008
sp_UserOfflineSmall Offline

I'd like to work on the following:

 

1) The subcategories thumbs displayed vertically in the left column. 

2) All products displayed in grid format in the main column. This is the nearest effect: http://www.rosewoodhouse.com/sale/

But you have to scroll past the thumbnails first. To add to confusion, when clicking "View All Products", it goes to: http://www.rosewoodhouse.com/c...../products/

... and shows only 3 products at a time, after you scroll past the thumbnails. I'd like all products to display in a grid format.

3) Can grid format be on the main page, with the product categories displayed in the left column, and I intend on making a navigation button to access the blog (news).

April 3, 2013
10:43 pm
Avatar
Admin
Forum Posts: 5862
Member Since:
March 16, 2008
sp_UserOfflineSmall Offline

This could probably all be done, but I don't have the code for you.  You'd have to get a PHP coder with Wordpress experience to help you with that.

Forum Timezone: UTC 0

Most Users Ever Online: 213

Currently Online:
2 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

icy1: 2636

wreed06: 175

laurie390: 169

boutiqueelliette: 156

StitchTek Services, LLC: 144

yiorgos: 127

Member Stats:

Guest Posters: 457

Members: 2471

Moderators: 1

Admins: 1

Forum Stats:

Groups: 1

Forums: 4

Topics: 4078

Posts: 18978

Newest Members: teddy1, raycrean, tseibt55, aceman, peteryoung320@gmail.com, JdsCentral

Moderators: Market Admin: 5862

Administrators: Market Admin: 5862

Market takes ecommerce to the next level with an easy to use, quick setup platform. Learn more or take the tour.