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 $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: