Woocommerce Product List Template

Posted onby admin

The standard WooCommerce product pages are pretty functional, and good looking as well! But we can do better, especially by coupling WooCommerce and Elementor!

In this guide, we show you how to build custom (and beautiful) WooCommerce product pages to “WOW” your customers and generate more sales.

Give consideration to WooCommerce product list templates. Designed by the squad of trained web developers, these web page layouts have exquisite design and a multitude of great features. Both website design specialists and beginners can use supplied options. I’ve created a visual HTML hook guide for the WooCommerce Archive Page (which is the same page for the Shop, Category, Tag pages). This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can also copy/paste). The default WooCommerce product page template is a great fit for many online stores, but you may want something that reflects your products’ individual style and benefits. You don’t have to be a developer to put your own stamp on product pages thanks to a few extensions from WooCommerce (and one core WooCommerce feature).

What you need

Add the Products List element to your template by clicking +Add - WooCommerce - Products List.

Apart from what you already have – a working WordPress installation and WooCommerce added on top of that – you need the Elementor page builder plugin.

Elementor comes in two flavors – free and paid. While there are some customizations available in Elementor free that can be used for WooCommerce, to get to the real good stuff, you need to upgrade to the pro version. This is going to cost you $49 for one site.

Note; Elementor is not the only page builder that works with WooCommerce and lets you build custom WooCommerce product pages. Here are some alternatives if you’d like to explore what else is out there. That said, Elementor is our favorite solution for WooCommerce customizations.

Before you can get to work, you have to install both the Elementor free and Elementor pro plugins on your site:

  • Installing Elementor free is simple. Just go to Plugins → Add New and enter Elementor into the search box. Install and activate.
  • To install Elementor pro, you first have to complete your purchase on Elementor.com. You’ll be able to download the Elementor pro package from your user profile – it’s a ZIP file. Go to Plugins → Add New and click on the Upload Plugin button. Select the Elementor ZIP from your desktop and upload it to your site. Activate the plugin.

Elementor will ask you to validate your license before everything becomes operational.

Create a new WooCommerce product page with Elementor

To begin, go to Templates and click on Add New.

From the list, select Single Product.

Elementor will show some ready-made WooCommerce product pages templates that you can start with. Picking one that looks the closest to what you want is the best path to take for most users. Creating a product template from scratch will generally take a lot more time. It’s just easier to modify an existing template. Click on Insert to get the template fetched.

You’ll see your template added onto the Elementor canvas. You can now customize the template however you see fit – add new elements to the page, customize the current ones, remove the stuff you don’t need, etc.

In the left sidebar, you’ll notice a range of WooCommerce elements, such as Product Title, Product Images, Product Price, and every other piece of data that WooCommerce displays about your products.

You can take each of these elements and drag them onto the canvas in the exact spot where you need them.

Here are some customizations you can do first:

Add your branding and colors

The stock Elementor product templates look nice, but they probably don’t match your brand perfectly. One quick change we can do to fix that is to adjust the background colors, font colors, and various typography settings in general.

To adjust any block that’s on the page, click on the pencil icon in the top right corner of the block.

Then, in the left sidebar, switch to the Style tab. This is where you can perform all styling- and looks-related customizations. For example, for the Product Title block, you can change the color of the text, the typography, and the shadows.

Let’s click on Typography. This will show another box where you can change the font and all the parameters of it.

Proceed through all the texts one by one and edit them until they look like you want them to. Pay special attention to what the price block looks like – it needs to be clearly visible so that it doesn’t confuse the customer.

Realign/move the product description

WooCommerce displays your product descriptions in a handful of places. We don’t need to get into all the specifics right now, but let’s just focus on two things:

  • the short description
  • your product data tabs

The short description is just what it sounds. WooCommerce takes this text from the Short Description box (one of the fields you fill out when creating a new product). It’s a good idea to have the short description displayed somewhere near the top of the product page.

You can take Elementor’s Short Description block and drag and drop it where you need it.

The product data tabs is effectively the block that houses the main information about the product. Make sure it’s in a visible spot in your new WooCommerce product page template.

Don’t forget to style the colors and typography of those blocks as well.

Tweak your “add to cart” button

The “add to cart” button is the single most important button on any eCommerce site. You really want it to stand out and catch the eye of your customer.

You can use two different block types for the “add to cart” button in Elementor. There’s the Add to Cart block, and the Custom Add to Cart block.

Experiment with both of them to see which is better in your case. Click on the pencil icon and see what’s available in the sidebar when it comes to the given block’s settings.

With a couple of clicks, you can get your button looking much better.

Add/remove product ratings

Displaying product ratings can be a great way to give your customers that final nudge to buy your stuff. The only problem is that you need to have some ratings in the first place. 🤷‍♂️

When your store is brand new, and you don’t have any ratings yet, it’s better not to have the ratings block on the page. Right click on the Product Rating element and delete it.

Later on, you can add that block back in and even customize how it looks. Some of the things you can change are the colors of the stars and the spacing of things.

Tweak the mobile and tablet views

These days, more people access the web from their smartphones than from desktop computers and laptops. For that reason, your store must be optimized for mobile viewing, or you will lose sales!

WooCommerce is already mobile-optimized out the gate, but since we are creating a custom product page, we need to make sure that your new product template looks good as well.

In the bottom left corner of the Elementor interface there’s a button labeled Responsive Mode.

When you click on it, you will be able to switch between the Desktop, Tablet, and Mobile views. Pick one of them and tweak the design if needed.

What’s cool here is that you can change the display settings of your blocks in a way that they take effect only on mobile or tablet. For example, if you think that the price should be bigger on mobile, click on the pencil icon in the price block, then click to edit the typography, and lastly switch to Mobile next to font size:

If you change the font size now, only the mobile view will be affected.

Go through your template element by element until you have the whole thing configured for mobile and tablet viewers.

Publish custom WooCommerce product pages

When your new product template is ready, click on the Publish button in the bottom left corner of the Elementor interface.

Elementor will ask you to add a condition for when the template should be used.

To have the template used for all products, simply select “Products” from the list, like so:

Click on SAVE & CLOSE to finalize everything.

That is it! 🍾 With this done, your custom WooCommerce product page has been saved and replaced the default product page.

You can see your product page in action when you visit any of the products in your store.

Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Description

  • Create beautiful, responsive WooCommerce product table layout with ease!
  • Great for online spare parts shops, audio store, restaurant / takeaway menu, etc.
  • Powerful, intuitive editor to achieve professional results based on your needs!

Home Demo Tutorial Docs FAQs Support Get PRO

Important

Woocommerce Product List Template Microsoft

  • This plugin requires at least WooCommerce 3.4.4
  • In case of any issues please contact [support]
  • The shortcode attributes will save you time and effort [reference image]. For example use category=”Category 1, Category 2″ limit=”10″
  • To fix search issue go to wp-admin > product tables > settings and click on save settings. This will be fixed in the next version.
  • To fix the Avada slider conflict, please delete WCPT Lite and re-download from the WordPress repo.
View

WCPT vs Other WooCommerce Table Plugins

No other WooCommerce table editor comes even close to competing!

  • Powerful table editor that is intuitive and easy to get started
  • Allows rows within columns — capable of creating more complex layouts than other plugins
  • Massive set of elements and options to create a fine tuned user experience for your customers
  • Much larger repository of well crafted tutorials — video and text to help you at each step [visit tutorials]

WCPT PRO

The most powerful WooCommerce product table plugin available on the market

Offers a larger, more comprehensive set of [facilities] to create you perfect product tables. More facilities and potential than any other product table plugin.

  • Available at a discount right now — only $49 / license [Buy here]
  • License provides 1 year of updates and support for 1 site
  • Your Lite version product tables continue to work with PRO
  • Keep the plugin with all facilities forever after license expires
  • Money back guarantee if you are not satisfied

Woocommerce Product Layout

Features list Buy here

WCPT PRO vs Lite

Take your product tables to the next level and boost sales with better user experience

  • See top 20 chief features exclusive to WCPT PRO [view list]
  • More 3rd party compatible plugins [view list]
  • Far larger pool of table elements to achieve the results you need
  • More shortcode attributes to save you work
  • More frequent and powerful updates

WCPT PRO Application Demos

Note: all these PRO demos are importable so you download and use them right away!

  • Audio shop
    • Demo 1 (audio tracks shop)
    • Demo 2 (single album view)
  • Restaurant menu / online takeaway

    • Demo 1 (compact menu)
    • Demo 2 (coffee chart with variations)
    • Demo 3 (wide table 1)
    • Demo 4 (wide table 2 with images & variations)
  • These PRO version demos are downloadable.

  • You can fully customise these demos for your site. See [tutorials].

WooCommerce Product Table vs Product Grid View

Woocommerce product list template download

Tables help connect customers to desired products much faster and more surely that grids

See [this example] of table vs grid presentation of the same catalog. You will note that:

  • A table view offers a quicker bird’s eye view of the products than a grid layout. The information is easier to absorb in table format.
  • Tables allow customers to quickly sort and compare along columns which helps with easier judgement and decision making.
  • This leads to better chance of landing a sale with the table UI. Also an advantage over competitors.
  • A table view of products can also supplement a grid view where appropriate.

Displaying product variations in the table

List
  • WCPT Lite offers a popup form to select product variations when a user tried to add a variable product to cart.
  • WCPT PRO offers a ‘Select variation’ element that can display variation option in dropdown or radio buttons inside the table anywhere you choose [see documentation]
  • WCPT PRO also offers a ‘Cart form’ element which displays the product variation form within the table wherever you choose.

Product add-ons / product extra options

WCPT PRO supports the official [WooCommerce Product Addons] plugin. This is the only supported product add on plugin right now.

Audio shop

  • WCPT PRO audio shop [2 downloadable demos]
  • WCPT PRO also includes:
    • Option to download the preview file [see example]
    • Smart mixed search, e.g. search through Track + Artist + Genre
    • Compact audio player that can be placed anywhere on table

Online restaurant / takeaway menu

  • WCPT PRO online food menus [4 downloadable demos]
  • Highly customisable, edit based on your own requirements

Wholesale / Request a quote / Min-Max price

  • WCPT PRO is compatible with several 3rd party plugins that offer such facilities [see list]
  • In case a popular plugin you need to use is not compatible, please [contact support]

Translation

  • WPCT PRO is compatible with the WPML translation plugin.
  • First, use WPML to translate all your products to a different language.
  • Then test to see if the products show up in correct language across your site.
  • Now WooCommerce content in your table will show up as translated as well.
  • For non-WooCommerce text in your table use [wcpt_translate default=“text” en_US=“English text” fr_FR=“French text”] in the input fields to add translations.

Replace shop grid with table

Use the Archive Override facility available in WCPT PRO. This facility lets you conveniently replace default WooCommerce grids with product tables on all your product archive pages — shop, category, tag, attribute, search. The facility is located in WP Dashboard > Product Tables > Settings > Archive Override.

Installation

Automatic installation

Automatic installation is the easiest option as WordPress handles the file transfers itself and you don’t need to leave your web browser. To do an automatic install of WCPT, log in to your WordPress dashboard, navigate to the Plugins menu and click Add New.

In the search field type “WooCommerce Product Table” and click Search Plugins. Once you’ve found the plugin you can view details about it such as the point release, rating and description. Most importantly of course, you can install it by simply clicking “Install Now”.

Manual installation

The manual installation method involves downloading the plugin and uploading it to your web server via your favourite FTP application. The WordPress codex contains instructions on how to do this here.

FAQ

How to fix the Search – No Results issue?

For a quick fix just go to wp-admin > product tables > settings (main settings page of the plugin) and click on save settings. This will permanently resolve the issue on your site.

How do I replace my default WooCommerce shop grid with a product table?

Use the Archive Override facility available in WCPT PRO. This facility lets you conveniently replace default WooCommerce grids with product tables on all your product archive pages — shop, category, tag, attribute, search. The facility is located in WP Dashboard > Product Tables > Settings > Archive Override.

How do I create a new table?

You can find full step-by-step tutorials on creating different kinds of tables along with video and annotated screenshots at the WooCommerce Product Table tutorial page. The process is simple and convenient. Absolutely anyone can follow along with the tutorials.

If you have any issue at all in creating your product table, please feel free to reach out for support and I will bet happy to help! 🙂

Woocommerce Product List Template

Do I have to setup separate columns for laptop, tablet and phone?

Only Laptop Columns are ‘required’. Tablet and Phone Columns are completely optional. Using the Tablet and Phone Columns you can fine-tune the table design for smaller devices. If you leave them empty, they will simply use the same column structure as the device above them ( Laptop > Tablet > Phone ).

How do I unlock the PRO features?

Woocommerce Custom Product List Template

You can purchase a license for WooCommerce Product Table PRO here. It provides several powerful features to create tables with fantastic user experience. It is available at an introductory price for now, so get it soon!
WooCommerce Product Table

Free Woocommerce Templates

Reviews