Change layout and row items of Product Category page

ThemeBurn SupportForumsOpenCart ThemesShoppica OpenCart ThemeChange layout and row items of Product Category page

This topic has been marked as resolved.

Hi

Would like to change the Product Category page to display 5 products instead of 4 products in a row, and also reduce the width of the div s_listing s_grid_view size_1 clearfix, so that the list of products are displayed closer to each other.

Can you please give me advise on doing this without completely stuffing up the theme?

Basically i want to be able to display 5 products per row

Many thanks

Handre van der Merwe

October 4, 2012 at 1:02 am #13946

Guys any reply please?

October 8, 2012 at 4:10 pm #14089

Hello Handre,

What setting have you chosen from the admin panel? 3(4 on the home page) or 4(6 on the home page)?

Do you have side column in your category page?

Also, can we take a look at your website? You can use hidepost to share private information with the support staff.

Best,
ThemeBurn team

October 9, 2012 at 4:51 pm #14144

Hey ThemeBurn team

Thanks for getting back to me..

I have chosen the 4(6 on the home page) option, and changed the width of the content container in the stylesheet.

The site is currently under construction so not viewable but please login with these details to get access.

Thanks in advance

  • This reply was modified 4233 days ago by  libertad.
  • This reply was modified 4233 days ago by  libertad.
October 9, 2012 at 4:55 pm #14145
You will need to register in order to post topics and read replies in the ThemeBurn.com support forums!
October 11, 2012 at 12:06 pm #14230

brilliant, worked

thanks a mil

October 11, 2012 at 1:44 pm #14250

You are welcome, Handre :)

Best,
ThemeBurn team

October 16, 2012 at 11:57 am #14373

Hi ThemeBurn team,

I have a new request :)

I have used the page with the 5 products per row, which works great.

I would now however like to create another page, which only shows 1 item per row which shows the stock quantity and allows you to checkout.

I have managed to get the stock quantity to show but struggling to change the Layout without changing the rest of the site.

As far as I can tell you need to create a custom layout and assign it to the category, but there is very little documentation and guidelines online.

Can you help??

Many thanks

November 11, 2012 at 5:22 pm #15116

Hi,

New layouts are meant to use same templates. You cannot use custom template for “Category – list view” e.g.

Layouts are used as module groups. E.g. if you have specific requirement for specific modules for a product, category or page, you can create a new layout and assign these modules to it.

This is the whole deal with layouts :)

We don’t know what page exactly you want to create. Maybe, if you explain a bit more, we could give some advice.

Best,
ThemeBurn team

November 16, 2012 at 9:21 am #15223

Hi ThemeBurn,

I would like to have a different layout for a specific category page.

So my latest products are showing in a grid with 5 product per row.
My favourite products I would like to show in a single row, so 1 product per row.

But changing the layout CSS changes it for all product listings, so looking for a way to
set a layout style for latest products (which is done) and set a “1 product per row ” style on another product listing.

- 5 products per row layout
- 1 product per row layout

Have added 2 screenshots, many thanks!

  • This reply was modified 4195 days ago by  libertad.
November 16, 2012 at 9:52 am #15225
You will need to register in order to post topics and read replies in the ThemeBurn.com support forums!
November 19, 2012 at 9:55 am #15311

Hi guys, the code etc all worked great.

Sorry to be a pain the ass, but the 5 row code does not work for IE8, unfortunately alot of users are still using this outdated browser.

I added the code below to the ie,css.php but no luck. Can you guys please help?

.s_single_col .s_grid_view.size_2 .s_item {
width: 172px;
}
.s_single_col .s_grid_view.size_2 .s_item:nth-of-type(6n+1){
clear: none;
}
.s_single_col .s_grid_view.size_2 .s_item:nth-of-type(5n+1){
clear: left;
}

Many thanks
Handre

December 13, 2012 at 6:28 pm #15994
You will need to register in order to post topics and read replies in the ThemeBurn.com support forums!
December 21, 2012 at 11:13 am #16212
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.