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