Simple WooCommerce Product Table

This premium tutorial provides the steps to customize the HTML output of WooCommerce' [products] shortcode used by Oxygen's Products List component so that the products on the Shop page and product archives appear in a tabular format instead of the usual grid.

We shall

• wrap the entire output of [products] shortcode in a custom div so it can be centered (if needed)
• remove the link that surrounds the product image and title by default
• wrap the product image in a URL that links to the single product
• wrap the product title in a URL that links to the single product
• add product short description below the title if present, otherwise the standard except
• wrap certain elements in custom divs so they can be grouped and separated as needed for the design we are trying to accomplish

Step 1

Let us change the products per row from the default 4 to 1.

Go to Customizer > WooCommerce > Product Catalog > Products per row: 1.

While there change the number of Rows per page if you want.

Go to Customizer > WooCommerce > Product images > Thumbnail width: 100.

Publish your changes.

Step 2

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Shop and Product archive pages

Code: