eCommerce

How to Design Your WooCommerce Product Listing Better? And Keep Changing It!

WooCommerce is one of the most popular and powerful tools to create an eCommerce website. It comes with some great features that can turn any WordPress website into a fully functional online store. More than that, it is an open-source and supports different extensions to enhance its functionalities.

One of such extensions is Woo product showcase. It allows you to design and customize the listing of your products and display them in an eye-catchy way. By doing so, you can provide a better experience to your visitors while viewing your Woo products and increase the chances of turning them into leads.

WP Buffs

Here, in this article, we will use a premium Woo extension – WOO Product Grid/List Design to show you how to design an attractive WooCommerce product list on your online store.

Great Features of Woo Product Grid/List Design:

  • 40+ Ready to Use Templates.
  • Showcase Detailed View of Product.
  • Showcase Variable Product Attribute and Pricing.
  • Lots of Configuration Options.
  • Filter Product From All Possible WP Queries Conditions.
  • 8 Stunning Ribbon Templates.
  • 5 Stunning Image Filter Templates.
  • Different Social Media Share Link Supported.

Live Preview | Details | Purchase | Support

Let’s Get Started and Create a Beautiful Product View for Your Online Shop

Step 1: Installation

Purchase WOO Product Grid/List Design from the CodeCanyon marketplace. Then, install it on your WordPress website.

Purchase WOO Product Grid/List Design from the CodeCanyon marketplace.

The installation of WOO Product Grid/List Design is the same as the installation of other premium WordPress plugin. So, if you have any difficulties while installing the plugin, you can check out to its documentation.

After you complete install the plugin, activate it.

Step 2: Add New Product Grid/List Design

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

You will land on the listing page where all the product designs you have created will get stored.

Copy the shortcode available.

You can copy the shortcode available to add the existing product designs on your WordPress website.

To create new product design, click on “Add New” button.

Step 3: Customization

You will land to the settings page of the plugin. It contains all the options required to create a new product design for your WooCommerce shop.

Customize your new product list.

But before going through the option, give a suitable title to your new product list. Also, if you have any confusion about any features. You can always refer to its documentation.

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

Post Settings: This settings section allows you to configure the taxonomies/categories. Custom field, search keyword, and popular post.

In this section you can configure the taxonomies and categories.

You can enable them on your posts and set their order as per your preference.

Layout Settings: This settings section lets you choose layouts and templates for the product list. You can either choose the grid or list layout.

If you choose the grid layout, select any of the 30+ templates available and set its columns for desktop, tablet/Ipad and mobile.

In this settings section you can choose layouts and templates for the product list.

If you choose list layout, select any of the 10+ available list templates and set the position for the images.

You can select any of the 10+ available list templates.

General Settings: Here, you can configure the general options of the product design. You can enable/disable the display of title. Product excerpt, post categories,/taxonomy. Product link on the title, and product link on the image. Also, you can set the image size and image type.

In this tab you can configure the general options of the product design.

Product Settings: From here, you can configure the options available for the WooCommerce products. You can enable/disable the display of price, wishlist button, and ratings.

In this tab you can configure the options available for the products.

Besides, you can add up to 2 Call to Action button to make your WooCommerce products more engaging.

Ribbon/Banners Settings: This settings section allows you to set the ribbons on your products to highlight any sale, discounts, off, etc. on your products.

In this section you can set the ribbons on your products.

You can enable any of the six available ribbon position. Choose the ribbon type, add ribbon text, and select any of the eight ribbon templates available.

Pagination Settings: Here, you can set the pagination for the product page to divide your products into multiple pages.

You can set the pagination for the product page.

You can set the number of posts that you want to display on a page and use the paginations to separate other posts.

Social Share: This section allows you to enable the social share of your eCommerce products into different social media networks.

In this section you can enable the social share of your eCommerce products.

Filter Settings: This section allows you to filter the eCommerce products as per the selected taxonomy/category. You can add a custom label. Set the term type and choose the five pre-designed templates available.

In this section you can filter the products as per the selected taxonomy/category.

Lightbox Settings: Here, you can enable the lightbox for the products to display the product detail upon clicking or hovering them. You can add a custom label for the lightbox and select any of the four lightbox templates available.

In this section you can enable the lightbox for the products.

Step 4: Making your WooCommerce Product Design Live

After you complete the configuration of your product list. Click on the “Preview” button to get a quick view of your product list.

Publish to make the product list live.

If everything is alright, click on the “Publish” button to make the product list live. Or “Save Draft” to draft the product list.

Step 5: Adding Product Design via Shortcode

After you have published the product design. Copy the generated shortcode from Product Grid/List Design Usage. Paste it on the desired page/post to display your product list.

Copy the generated shortcode from Product Grid/List Design Usage.

How Does the Product List Look Like?

When you are done designing the product list as mentioned above, you can see the following result on the product page of your online store:

See the result on the product page of your online store.

Author

Samriddha is a Content Writer/Blogger at WP HowToPress - Your How to guide on WordPress. He loves researching new stuff, playing games, traveling, and music. You can find him on Twitter, and Linkedin.

Write A Comment

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