The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

[resolved] Woocommerce product grid view VS list view (39 posts)

  1. Frederik
    Posted 4 years ago #

    Dear All,

    I think Woocommerce is a great ecommerce solution for WordPress, but there is just one thing that is bothering me and that I can't seem to resolve (before I start buying extensions I need to make sure the layout I have in mind is possible and works flawlessly).
    I searched around but could not find the answer to my question :-(

    I would like to have a product list view in the shop instead of a grid view (with pictures).
    I'm starting a sandwich shop and there is no need for me to have large images etc in a grid view, but I would like to have all my products (sandwiches, salads and soups) listed on my page in 1 long list.

    Basically, I want to do the following in my horizontal product list:
    1 - 2 - 3 - 4 - 5 - 6 - 7
    1. A really small thumbnail/icon of the product (50x50)
    2. Product Name (clickable to single product page)
    3. Category (Bread / Salad / Soup)
    4. Option to choose quantity of product (like in the single product page)
    5. Select variations (type of bread + size of sandwich)
    6. Price (variable to selected options in 4.)
    7. Add to cart button

    So each product has one single line/row in a big table with the option to add each product in the correct amount / variation to the shopping cart.

    Does anyone know how I can achieve this (if this is possible) or point me in the right direction?
    I looked around (please note that I don't want to promote this link in any way, it's just to give an idea of the direction I want to go) and found something similar http://producto.syncthemes.com/products/?layout=list&order=latest&show=12 where you have the option to show the products in a list view.

    Any help would be highly appreciated!

    Best Regards,


  2. Mike Jolley
    Plugin Author

    Posted 4 years ago #

    You can restyle with CSS. If you need to change the HTML for products, you can override the templates


  3. zarwell
    Posted 4 years ago #

    cpt_copcyat, did you ever find a good solution to this? I'm really surprised alternative product views aren't a core part of woocommerce, given all the features it does have.

  4. Jason Jensen
    Posted 3 years ago #

    I'd like to echo this need! I would like to:

    1) List "Related Products" in a list view similar to described by cpt_copycat.

    2) Add an "Add to Cart" button to each related product in the list view

    I can imagine this would be useful to so many others. Seems like CSS can take care of #1, but I'm definitely struggling with adding add to cart buttons to each related product on a single product page.

  5. menardmam
    Posted 3 years ago #

    cpt_copcyat : I need exactly the same "all product lister" how did you manage to do it ? can you give me some code, to try and test it myself ? thanks in advance

  6. Benbodhi
    Posted 3 years ago #

    Oh, this is exactly what ive been looking at doing...
    ive just started playing with the css... but to get the quantity option, i will have to do a template override.

    If anyone has a clear solution that is already working, please let us know.


  7. garryhoudini
    Posted 3 years ago #

    Hey guys!
    I was looking exactly the same as you and I thought I would have to code a little. But I found this Woocommerce Grid/List Toggle plugin @ WP repository! http://wordpress.org/extend/plugins/woocommerce-grid-list-toggle/
    It's not an exact solution at all, but it's still sonething more than a default grid view and it can be rewritten as you want according to GPL.

  8. soumya12345
    Posted 3 years ago #

    hi , I'm new in WordPress as well as WooCommerce.
    I have overloaded the "content-product.php" and put a table structure.
    but the file is called from somewhere that I cant found.

    so all the table heading are appearing multiple times and the table is also broken into parts.

    any solution please..

  9. The-Croupier
    Posted 3 years ago #


    I am very interested on the same thing as well, i have been looking around for at least 3 days now, for something that could help on the view...

    The grid/list view is far from it for various reasons.
    1. There is no way you can add anything to it, very very limited on the options, see above the mentioned grid list...shows only whatever is there.

    Why is this marked as resolved?
    Maybe we are a little slow, but could someone provide of a more accurate or understandable solution to this?

    Thank you
    ps: i have been looking for table view, list view, product view, woocommerce.. various themes, various css styles, plugins additions/extensions and all sorts of documentations. :(

    I hope someone that has actually achieved this sees this in time.

    Thank you again,


  10. soumya12345
    Posted 3 years ago #

    ok I've done it just.

    override the following code in "archive-product.php".
    [Large code excerpt removed by moderator per forum rules. Please use the pastebin for all large code excerpts. It works better anyway.]

    But now facing the next problem.. The "Quantity" field is not working..
    whatever input i'm giving there, at the CART page its showing just 1 item.. tell me if u get the solution.. And if it help u..

  11. The-Croupier
    Posted 3 years ago #

    I am trying it on right now, thanks for the great/quick response.
    hope this works and i havent messed up anything or i will be here for the rest of the night :(


  12. The-Croupier
    Posted 3 years ago #

    i have been trying to add the sku number or and description of the product.. :(

  13. The-Croupier
    Posted 3 years ago #

    <div <?php post_class(); ?>>

    <?php if ( $woo_options[ 'woo_post_content' ] != "content" ) woo_image( 'width='.$woo_options[ 'woo_thumb_w' ].'&height='.$woo_options[ 'woo_thumb_h' ].'&class=thumbnail '.$woo_options[ 'woo_thumb_align' ]); ?>

    <h2 class="title">" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></h2>

    <?php woo_post_meta(); ?>

    <div class="entry">
    <?php if ( $woo_options[ 'woo_post_content' ] == "content" ) the_content(__( 'Read More...', 'woothemes' )); else the_excerpt(); ?>
    </div><!-- /.entry -->

    i was trying from here... but maybe i am in the wrong direction completely :(
    please advice....

  14. The-Croupier
    Posted 3 years ago #

    i think somewhere on the way... the picture- does not link to the product page anymore... :(

  15. Perfect Circle
    Posted 3 years ago #

    Hi. I recently figured out how to change the grid in my wootheme. The post is http://wordpress.org/support/topic/product-item-grid-options-for-woothemes?
    If you want a list i assume change the variable to 1 would do it.

  16. Perfect Circle
    Posted 3 years ago #

    Where did you find the archive-product.php file?

  17. Perfect Circle
    Posted 3 years ago #

    Also note, in this same file just below this code line 173, is a "Remove add to cart button on archives" action. Comment this out and the "add to cart button will appear".

  18. soumya12345
    Posted 3 years ago #


    The "Add to cart" button comes from
    <?php do_action( 'woocommerce_after_shop_loop_item' ); ?>

  19. Perfect Circle
    Posted 3 years ago #

    Ok, thanks. I was looking in my theme files. Is it save to edit these woocommerce template files - that is, when woocommerce is undated, will they be overridden?

  20. The-Croupier
    Posted 3 years ago #


    This worked for me ;)

    <th >Thumbnail</th>
    <th ><?php echo('Model'); ?></th>
    <th ><?php echo('Price'); ?></th>
    <th ><?php echo('Quantity'); ?></th>
    <th ><?php echo('Cosmetics'); ?></th>
    <th ><?php echo('Description'); ?> </th>
    <th ><?php echo('Item#'); ?></th>
    <th > </th>
    <th > </th>
    <th > </th>
    <tbody>	<?php while ( have_posts() ) : the_post(); ?>
    <td ><h3><?php	do_action( 'woocommerce_before_shop_loop_item_title' );?></td>
    <td> <a>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></td>
    <td><?php	do_action( 'woocommerce_after_shop_loop_item_title' );?></td>
    <td class="product-quantity">
    $product_quantity = sprintf( '<div class="quantity"><input name="cart[%s][qty]" data-min="%s" data-max="%s" value="0" size="4" title="Qty" class="input-text qty text" maxlength="12" /></div>', $cart_item_key, $data_min, $data_max, esc_attr( $values['quantity'] ) );
    echo apply_filters( 'woocommerce_cart_item_quantity', $product_quantity, $cart_item_key );
    <!-- Description -->
    <td> <?php if ( $woo_options[ 'woo_post_content' ] == "content" ) the_content(__( 'Read More...', 'woothemes' )); else the_excerpt(); ?> </td>
    <!-- End of Description -->
    <!-- Top Description -->
    <td> <?php the_content(); ?> </td>
    <!-- End of Top Description -->
    <td> <?php echo('Item#'); ?> </td>
    <!-- Add here the Add to Cart Button -->
    <td colspan="6"><?php do_action( 'woocommerce_after_shop_loop_item' ); ?></td>
    <!-- End of CART -->

    [Moderator Note: Please post code or markup snippets between backticks or use the code button. As it stands, your posted code has been permanently damaged/corrupted by the forum's parser.]

  21. soumya12345
    Posted 3 years ago #

    Product quantity working properly for multiple product??

    is it adding in cart page?

  22. The-Croupier
    Posted 3 years ago #


    I did this...


    Sorry admin, that was my mistake i did not read the post at the top :(

    PerfectCircle, this worked for me i just need to find a way to get SKU and the Tags somehow... still looking into it...

    Hope this helps somehow...

  23. The-Croupier
    Posted 3 years ago #

    I do not need to add anything atm i just need to show the quantity left..and other parts of the shop in the page... :( that is what im looking for....

  24. The-Croupier
    Posted 3 years ago #

    but yes, if you do not take that part out.. everything works fine.. :)

  25. soumya12345
    Posted 3 years ago #

    i tried this but this wuantity input is not working for me in case of multiple item..
    whenever I added product, it added only one item.

  26. The-Croupier
    Posted 3 years ago #

    I have not had the time to look into that... :( yet... i need to get the visual working first :( ....

  27. The-Croupier
    Posted 3 years ago #

    The quantity does not work for me too.... but i think i am taking that off completely for now... i might just show the how many left in there...

    I guess another function from the shop might need to be imported or added.... try to add the same thing as in the cart.php i would imagine...

    I have not managed to get the sku and/or any tags .... it would be great if we could somehow just target specific things to show ...

    Sorry for the late response...

  28. emw8
    Posted 3 years ago #


    I am looking to do something very similar and you guys seem to have made a lot of progress! I've tried my best to follow what you've done, and located some of the key files but I'm having real trouble getting things going. You're help would really be appreciated.

    I would like to have a list. I'd like to have about 30 rows appear on each page. In each row, for now anyway, I just need to show 1) The product title and 2) the tag. Later on I may wish to add quantity, add to cart and possibly the 'custom fields meta'- but we can leave that for now.

    So far I have found archive-product.php and duplicated it into the correct folder of my theme. I've also found content-product.php, and have tried changing the number of columns to 1 but it seems to do a row of 3, then 1, then 3 etc. (first and last problem?). That's about it.
    I can't really see where I would add the table, and unfortunately the code that you have previously posted has been removed/corrupted, and the pastebin link isn't working.
    Please help if you can.

    Best regards, Chris

  29. Draba82
    Posted 3 years ago #

    Dear All,

    I am also looking to make my product/category page just like names with add to cart. Wow did not know it was this difficult.

    hope someone does have a good guide to do this. Cant figure it out with the broken info up here.

  30. mattprice1707
    Posted 3 years ago #

    @ thebrakelights - Did you manage to do what you wanted to do as I'm looking to do the exact same thing and I am just lost.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WooCommerce
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic