Support » Plugin: WooCommerce » [Plugin: WooCommerce – excelling eCommerce] Woocommerce product grid view VS list view

  • Resolved Frederik


    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 (50×50)
    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 where you have the option to show the products in a list view.

    Any help would be highly appreciated!

    Best Regards,

Viewing 15 replies - 16 through 30 (of 38 total)
  • 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”.


    The “Add to cart” button comes from
    <?php do_action( ‘woocommerce_after_shop_loop_item’ ); ?>

    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?


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

    Product quantity working properly for multiple product??

    is it adding in cart page?


    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…

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

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

    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.

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

    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…


    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

    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.

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

    Hi MattPrice1707 –

    I did create a little bit of a no-code-required hack for this for my client using Abundance theme. Wonderful theme, not responsive at this time though.

    In that theme, and probably many/most others as well, you can use the Grouped Products feature to display a list of products with an Add to Cart button next to each product, on a Single Product page.

    The manual parts are:

    1) Manually grouping desired products on the master Single Product page (the page you want to display that shows the grouped products in the view I originally described)

    2) Hiding the individual single products from the Catalog using “Hidden” from the “Visibility” field which is conveniently available on the Products quick edit view. If you don’t hide these products, they display WITHOUT the grouping.

    Hope that helps point you in the right direction. I’d share the result but my client has their site in maintenance mode. Should be live soon. I will post a link when they launch the site.


Viewing 15 replies - 16 through 30 (of 38 total)
  • The topic ‘[Plugin: WooCommerce – excelling eCommerce] Woocommerce product grid view VS list view’ is closed to new replies.