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.
- 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
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.
Install and activate Code Snippets plugin.
Go to Snippets > Add New.
Title: Shop and Product archive pages
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.