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.

However, what is crucial is also providing the best shopping experience for your customers and visitors. Therefore, Direct Checkout for WooCommerce – Skip Cart with Buy Buttons is the plugin you will want to add to your arsenal.

Direct Checkout for WooCommerce

This plugin will save your customers from the cart and immediately bring them to the checkout. It will not only optimize the whole process but will also make it quick and easy. With it, you can add Buy Buttons anywhere on your site. When clicked, the button adds the product to the cart and automatically being the customer to the checkout. Moreover, the buttons can be put anywhere, even blog posts and widgets.

Aside from bypassing the cart, an important part of carefree shopping is knowing the shipping rate. For that, Table Rate Shipping for WooCommerce is the plugin you want to install.

 

Table Rate Shipping for WooCommerce will allow you to calculate shipping price depending on the total weight or price. In addition, you also have the ability to include or exclude tax. This plugin also has a premium version. With it, you can also handle shipping fees for each order, guide rates by certain countries, add estimated delivery dates, and much more. Also, you can set up unlimited shipping services and base shipping on the number of items.

Furthermore, we can’t forget about exporting WooCommerce orders data. It’s important to do it when you want to get more insight. Thankfully, there is just the plugin for it, Order Export for WooCommerce.

Order Export for WooCommerce

Order Export for WooCommerce allows you to effortlessly export any data you may need from your orders in different formats, such as Excel and CSV. You can also filter the data you want, so you can export just tidbits of it. The plugin itself it’s super easy to install and rocks a clean interface that anybody can use.

It allows you to download the WooCommerce data in a single click and is equipped with a drag and drop sorter for the columns. If these features are not enough for you, there is also a premium version that has these and many more, such as additional fields, export tags, and exports delivered via email. In addition, a handy feature is the scheduled exports that you can set up according to your needs.

Without further ado, let’s get into 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.

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 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.

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 accessible 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 the 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.

Product Grid widget by Crocoblock

The Product Grid widget allow you to creating layouts.

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.
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.