How to Display Woocommerce products in Table Format?

How to display Shop Products in a Table Format with Column Headings as Custom Attributes in WooCommerce WordPress

  • I have already entered my products along with their custom attributes into my WooCommerce system and am looking to customize the look and layout of the Shop page to display products in a tabular format. My Custom Attributes are: Shape, Carat, Cut, Color, Clarity, Polish, Price, Details I am basically trying to pull details and display the inventory from the MySQL database on the front end. The product is diamonds and the look I'm trying to achieve is as per the following image:

  • Answer:

    You will first want to use one of the shortcodes to display your project page, and set the columns to 1: [top_rated_products per_page="12" columns="1"] Then you need to copy files from wp-content/plugins/woocommerce/templates, probably archive-product.php and/or content-product.php to yourtheme/woocommerce/content-product.php etc. There you can make changes to the template files without them being overwritten when Woocommerce updates. You can then make the styling changes you are looking for in those two files. http://wordpress.org/support/topic/plugin-woocommerce-excelling-ecommerce-woocommerce-product-grid-view-vs-list-view#post-3743299 gives this code to get you started: <tr> <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> </tr> </thead> <tbody> <?php while ( have_posts() ) : the_post(); ?> <tr> <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"> <?php $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 ); ?> </td> <!-- 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 --> </tr></a>

user3200110 at WordPress Visit the source

Was this solution helpful to you?

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.