Product Category Page List View vs Grid View « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Abundance

closed

resolved

Product Category Page List View vs Grid View

9 posts from 2 voices

Started 6 months ago by EdgeWP
Latest reply from Devin
This topic is closed
This topic is resolved

Tags:

No tags yet.

EdgeWP
Member

I realize this one might be beyond what you will support, but I've seen the question about modifying the shop or categories page to a single column list view vs the default grid view asked many times here, and thought I take a chance..

I'd like to change the product categories page from grid view, to List View, or single column. Actually I don't really want it one way or the other, but would like to give my users the choice.

I've found this plugin, that is suppose to do just that.

http://wordpress.org/extend/plugins/woocommerce-grid-list-toggle/

and it actually does, although there must be a styling issue with the abundance theme..

When installed and activated, it looks like this in grid view.. which is perfect for what I am wanting.. it does remove the descriptions, but you could also display them if you like by commenting out lines 1 thru 6 in the styles.css of the plugin, located in /wp-content/plugins/woocommerce-grid-list-toggle/assets/css/

http://screencast.com/t/k5VO3WiV

but.. when you click to go into list view, there must be something conficting between the plugin and the abundance theme vs the way he has supposably written it for wootheems.. the default list view looks like this.. and the pic of the item is full page width.. with the name, price, and description all off centered below..

http://screencast.com/t/JvpM51LlL2V

now if you change line 9 of that same style sheet from above... from "width: 100%" to "width: width: 100% !important;" the image is now what it is suppose to be, or at least the authors indention I believe, as in this example..

http://screencast.com/t/DhRnNnL70zXz

Now I'm at a point where I've tried all kinds of guess work combinations to try and get h3, price, and the description to be possitioned to the right of the image, and I just can't figure it out.. but then I really don't know what I'm doing, so that's really no suprise..

Would anyone here be willing to take a look?.. This is probably a rather simple fix for someone that knows what they are doing.. and I'm pretty sure there are several that would benifit for it working properly for us..

Thanks So Much!

Posted 6 months ago #
Devin
Moderator

Hi EdgeWP,

If you have the site live where we can inspect it with that plugin active we can certainly take a look. As to if it would be simple or quick I can't say but it my guess it would take a good bit of time to clean everything up.

Regards,

Devin

Posted 6 months ago #
EdgeWP
Member

Well, I've been using the "private only" plugin as this is definately a work in progress.. But I've deactivated it for the moment to open the site up up for the few questions I have in the forum.. This particular grid/list view can be viewed here:

http://www.htech.net/?product_cat=indicators

Thanks

Posted 6 months ago #
Devin
Moderator
I think this would do it:
```
ul.products.list li.product .thumbnail_container {
width: 200px;
float: left;
}
```
I'm not sure if its exactly what you had in mind but its the most direct way to get a list view that I can think of without distorting the images and causing lots of changes.

Regards,

Devin
Posted 6 months ago #
EdgeWP
Member

Please excuse my ignorance here, but where would this code go..

ul.products.list li.product .thumbnail_container { width: 200px; float: left; }

I've tried to insert under, and even replace this code it into the plugin style.css

ul.products.list li.product img { width: 30.75%; float: left; margin-bottom: 1.5em; -webkit-transition: none !important; }

with no success..

without the new code you gave.. changing line 9 of the plugins style.css to

width: width: 100% !important;

actually seems to have fixed the pic size.. the problem I'm having is getting the description to display properly formated to the right of the pic, instead of below it..

Thanks..

Posted 6 months ago #
EdgeWP
Member

Please Disregaurd.. It was that change in line 9 that cause your fix not to work.. Just inserting that below the ul.producst.list li.product img{} section looks like it worked just great...

Thank You Very Much!

Posted 6 months ago #
Devin
Moderator

I apologize, I thought you had already been working with either custom.css or the Quick CSS field in the styling tab of the theme settings. Do not add the css directly to the style.css file of theme. You will lose any updates you do to this when you update the theme so either add it into the custom.css file in your css folder of the theme files via FTP or drop it into the Quick CSS filed in your Styling tab.

Regards,

Devin

Posted 6 months ago #
EdgeWP
Member

No worries.. it's more my ignorance at the moment.. Whole new learning curve for me. I'm catch'n on a bit, but it's comming rather slowly.. Yes, I have been working with the custom.css and quick css.. when I mentioned modify'n the style.css, I was actually refering to the plugins style.css and not the themes.. Didn't realize I could stick that code you gave me in the theme's custom/quick and have it work.. but just added your code to the custom.css and put the plugin back to it's orignal state, and that worked great!.. even better actually, as your right, now if there are any updates to the plugin, I won't have to worry about updating it.. although, if it's not broke, I probably won't be messing with it.. heh..

I do what to thank you for your help.. I realize that this being a plugin was a bit out of what might be supported.. but that little bit of code seems to have it working just fine.. Although I'm still not sure if it's this darn plugin causing the descriptions to show up under the related products on all my single product pages. Nick mentioned those descriptions were not part of the theme, and this is the only plugin I have installed that might cause that to happen.. Not sure, I've played quite a bit with no success, wish I knew what I was doing.. :) .. dunno, just might have to live with it the way it is..

Can't thank you enough for your assistance!

Thanks Again!

Posted 6 months ago #
Devin
Moderator

Glad we were able to help. Some things are easier done than others and in this case I was able to come up with a solution pretty quickly just looking at the site live.

Regards,

Devin

Posted 6 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top