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: