Published on August 11, 2020

Simple WooCommerce Product Table

Sridhar Katakam

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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right