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.
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.
Significant 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.
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.
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.
You can copy the shortcode available to add the existing product designs on your WordPress website.
To create new product design, click on the “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.
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 accessible post.
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.
If you choose the list layout, select any of the 10+ available list templates and set the position for the images.
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.
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.
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.
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 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.
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.
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.
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.
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.
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:
Product Grid widget by Crocoblock
You can also create a WooCommerce shop on WordPress with the help of the Elementor page builder. To make your work even easier, address to plugins that extend Elementor functionality and help create sites for e-commerce. JetWooBuilder plugin by Crocoblock is among them.
It includes 40 widgets for building WooCommerce shops coding-free. In particular, its Product Grid widget allows creating layouts, and there are 5 to choose from, displaying products in carousels, adding descriptions, and prices. Check the Product Grid Knowledge Base page and learn how to handle all the required WordPress settings.
The key features:
- Detailed documentation and video tutorials on product usage.
- No coding skills needed.
- Clear and simple settings.
- Versatile customization options.