Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #17759

    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!

    #96720

    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

    #96721

    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

    #96722

    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

    #96723

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

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

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

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

    with no success..

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

    [CODE] width: width: 100% !important; [/CODE]

    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..

    [CODE]ul.products.list li.product .thumbnail_container {

    width: 200px;

    float: left;

    }[/CODE]

    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;
    }[/CODE]

    with no success..

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

    [CODE] width: width: 100% !important; [/CODE]

    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..

    [CODE]ul.products.list li.product img {

    width: 30.75%;

    float: left;

    margin-bottom: 1.5em;

    -webkit-transition: none !important;

    }[/CODE]

    with no success..

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

    width: width: 100% !important; [/CODE]

    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..

    [CODE] width: width: 100% !important; [/CODE]

    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..

    #96724

    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!

    #96725

    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

    #96726

    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!

    #96727

    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

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

The topic ‘Product Category Page List View vs Grid View’ is closed to new replies.