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:
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.
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.
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”.
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.
But before going to the settings, give the title for new product design.
The plugin is divided into 9 different settings sections. They are:
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.
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.
If you have selected list layout then, choose any of the 10+ available list templates and select the position to display the product image.
Here, you can enable/disable the display of title, product excerpt, post categories/taxonomy, product link on title, and product link on the image.
You can also choose the image size and type.
Here, you can enable/disable the display of price, wishlist button, and ratings on your WooCommerce products.
Also, you can add up to 2 call to action button to make the products more engaging.
Here, you can enable/disable any of the 6 ribbon positions available on the plugin to display the ribbons on your product.
If you that enabled the ribbon then, select the ribbon type – text or icon and any of the 8 pre-available ribbon templates available.
Here, you can set the number of post that you want to display on your product list.
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.
You can enable the social share to allow your visitors to share your products on Facebook, Twitter, Google Plus, Linkedin, Email, Pinterest or VK.
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.
Here, you can choose the lightbox display for the products to display its detail while clicking/hovering them.
You can add custom lightbox label to display the lightbox quick view and choose any of the 4 lightbox templates available.
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.
Then, copy the generated shortcode from Product Grid/List Design Usage and paste it on the desired page/post to display your product list.
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:
- 500+ Best Free WordPress Plugins Collection 2019
- 500+ Best Premium WordPress Plugins Collection – 2019