How to Display WooCommerce Products in a Beautiful Way?

0
MyThemeShop-wordpress-themes

If you are looking to create a visually appealing product page for your online store then, you are in the right place. In this article, we will discuss a short tutorial to show you how to display your WooCommerce products in a beautiful way by using a premium Woo addon.

The extension that we will use is WOO Product Grid/List Design. It is one of the feature-rich Woo product designer extension that comes with beautifully designed grid/list templates and tons of customization and configuration options to create a design beautiful product pages for your online store.

Creating a WooComerce Product Page by Using Woo Product Grid/List Design:

Now let’s get this how-to tutorial started and create a visually appealing product design for WordPress powered eCommerce shop in 5 easy steps:

Step 1:

WOO Product Grid/List Design - Responsive WordPress Product Showcase Extension for WooCommerce

Purchase WOO Product Grid/List Design from the CodeCanyon marketplace at a reasonable price of $16. Then, install it on your WordPress website.

The installation process of WOO Product Grid/List Design is same as the installation of other premium WordPress plugins. So, if you have any difficulties regarding the installation, you can refer to its documentation or go through the article: How to install a new plugin in WordPress website?

After you have completed the installation, activate it.

Step 2:

Upon the activation of the plugin, you can see “Product Grid/List Design” on the left menu of your admin area. Click on it continue.

You will land to the “All Product Grid/List Design” page. It contains the listing of all product grid/list designs that you have created to date.

WOO Product Grid/List Design: Landing Page

You can copy the shortcodes available for the design to add the existing product design on your website.

In order to create new product design, click on “Add New”.

Step 3:

You will land to the “Add New Product Grid/List Design” page of the plugin. It contains all the settings required for creating the new design to showcase your WooCommerce product.

WOO Product Grid/List Design: Builder Page

But before going to the settings, give the title for new product design.

The plugin is divided into 9 different settings sections. They are:

Post Settings:

Here, you can enable/disable the filter for taxonomies/categories, custom field, search keywords and popular posts and order them as per your preference. Also, you can set the post status for each field.

WOO Product Grid/List Design: Post Settings

Layout Settings:

This settings section allows you to choose the layout for your product design. You can choose either grid or list layout.

If you have chosen grid layout then, select any of the 30+ available gird templates and set the number of columns for displaying your products on desktop, tablet/Ipad and mobile.

WOO Product Grid/List Design: Grid Layout Settings

If you have selected list layout then, choose any of the 10+ available list templates and select the position to display the product image.

WOO Product Grid/List Design: List Layout Settings

General Settings:

Here, you can enable/disable the display of title, product excerpt, post categories/taxonomy, product link on title, and product link on the image.

WOO Product Grid/List Design: General Settings

You can also choose the image size and type.

Product Settings:

Here, you can enable/disable the display of price, wishlist button, and ratings on your WooCommerce products.

WOO Product Grid/List Design: Product Settings

Also, you can add up to 2 call to action button to make the products more engaging.

Ribbon/Banner Settings:

Here, you can enable/disable any of the 6 ribbon positions available on the plugin to display the ribbons on your product.

WOO Product Grid/List Design: Ribbon Settings

If you that enabled the ribbon then, select the ribbon type – text or icon and any of the 8 pre-available ribbon templates available.

Pagination Settings:

Here, you can set the number of post that you want to display on your product list.

WOO Product Grid/List Design: Pagination Settings

You can also enable the pagination for the product list in order to make it easier to navigate product pages. The plugin provides you with 3 different pagination options with each of them containing various templates. So, choose the most suitable type of pagination for your product list.

Social Share:

You can enable the social share to allow your visitors to share your products on Facebook, Twitter, Google Plus, Linkedin, Email, Pinterest or VK.

WOO Product Grid/List Design: Social Share Settings

Filter Settings:

This section allows you to filter your products as per the category/taxonomies. Also, you can choose any of the 5 pre-designed templates for product filtration.

WOO Product Grid/List Design: Filter Settings

Lightbox Settings:

Here, you can choose the lightbox display for the products to display its detail while clicking/hovering them.

WOO Product Grid/List Design: Lightbox Settings

You can add custom lightbox label to display the lightbox quick view and choose any of the 4 lightbox templates available.

Step 4:

After you have completed the configuration and customization of the plugin, click on “Preview” button to a quick view for your product list, “Save Draft” button to draft your product list and “Publish” button to make your product list live for your website.

WOO Product Grid/List Design:Publish

Step 5:

Then, copy the generated shortcode from Product Grid/List Design Usage and paste it on the desired page/post to display your product list.

WOO Product Grid/List Design: Shortcode Usage


Wrapping Up

In this way, you can display your WooCommerce products in a beautiful way. A visually appealing product page can play a major role to keep your visitors for a longer period of time and also persuade them to make the purchase. So, if you want to design your WooCommerce product page and give it an awesome look then, you can purchase the plugin at a reasonable price and follow this step by step tutorial.

You can also check out the collection of:


LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.