The WooCommerce plugin has only one interface for displaying products by default. While the grid view is acceptable, it is very standard, and you may want to switch things up. Switch your WooCommerce shop page to list view if you’re going to create an online store that is both useful and attractive.

For eCommerce firms wishing to establish an online store, Divi and WooCommerce are a successful mix. Unlike other WooCommerce themes, you may experience levels of site customization thanks to the tried-and-true combination of WordPress and WooCommerce, as well as the ultra-powerful Divi Builder.

However, some aspects of the theme, such as the usual grid display for WooCommerce products, cannot be modified. While some WooCommerce list view plugins are available, they each serve a specific purpose and aren’t always compatible with Divi.

We built the Divi Shop Builder for Divi users who wish to develop unique online stores, which incorporates the Woo Shop Plus module. One of the many features of this plugin is the ability to construct a WooCommerce product list view quickly.

You may create a one-of-a-kind list view presentation for your WooCommerce products with the Divi Shop Builder in your development toolbox, like this:

IMAGE

Isn’t it stunning?

Prepare for a full tour of the Divi Shop Builder plugin, which will include:

• An explanation of why your WooCommerce store should have a list view display.
• The Divi Shop Builder plugin installation guide,
• This tutorial will show you how to utilize the plugin to make a list view display.
• How to use the above demo on your online store to save time.

Why Should You Use a ListView for WooCommerce Products?

The default WooCommerce shop layout display is a simple grid, as previously stated. The title, price, and featured image are displayed in this grid, often a few columns wide.

From the Divi WooCommerce Store child theme, here’s a screenshot of the WooCommerce product view in grid style.

IMAGE

In a grid layout, products will automatically display with a huge image. This reduces the amount of space available. Because the image takes center stage, there isn’t much room for additional information like a product description, stock quantity, or anything else.

This grid pattern is generally delicate; there are no significant flaws, although it is severely constrained. Due to this constraint, the grid style does not always suit every site design, business, industry, or client preference.

• The grid view will be difficult for restaurants, spas, and other service firms that sell treatments. Menus feature a relatively typical display of a list view of products, maybe containing a short description of the product and the price, whether you’re selling food or medicine. It’s challenging to make an online menu with a grid.
• Brands that sell “build-your-own” items are similarly scarce. Scrolling forever to get to each product piece will irritate your consumer if they need to select numerous things at once to make a product to their specifications.
• Some products don’t even require photos. The grid view is a waste of space for many online retailers, and without graphics, the grid will appear weird.

Our Divi Shop Builder plugin alleviates these concerns. You’ll be able to build a list view for your WooCommerce products with our plugin.

Are you ready to learn how to create the internet-store of your dreams? Let’s have a look at how Divi Shop Builder works.

How to Make a WooCommerce Product List View

The Divi Shop Builder plugin is installed.

First and foremost, you must acquire the Divi Space plugin from their store. After you’ve purchased the plugin, go to My Account and download it. The plugin should then be installed and activated on your website. To complete your plugin purchase, you’ll be required to input your license key.

You’ll find the plugin in the Divi menu once it’s installed, activated, and ready to use.

IMAGE

Divi Shop Builder works by incorporating some modules into the Divi Builder. The plugin does not have any configuration options or setup processes; instead, it serves as a reminder of the plugin’s features. If you get stuck or need assistance,  go to the plugin dashboard page for assistance.

IMAGE

Make sure you’ve added a few products to your WooCommerce store before you start messing around with the Divi Shop builder plugin. You can begin using the plugin once you’ve uploaded a few products. Add the Woo Shop Plus module after creating a row and section as usual.

Using WooCommerce to create a product list view

IMAGE

Your products will appear in the typical grid format once you’ve added the module.

IMAGE

By default, the Woo Shop Plus uses the same settings as Divi, including the Open Sans font and the blue theme accent. Various product elements, including badges, the featured image, title, ratings, price, product quantity, the Add to Cart button, categories, stock count, and a product description, are also automatically shown.

Like any other Divi module, every aspect in the Woo Shop Plus module may be customized using the Design tab. For now, let’s shake up this typical grid format. We’ll get to decorating the module later.

To convert this to a list view, go to the Product tab, open the module, scroll down until you see the Layout option, click on the drop-down menu, and pick List. You could have constructed a WooCommerce product list view display for your online business in a matter of seconds.

IMAGE

Can’t decide whether you want to see your data in a grid or a list? When you choose Grid / List View Switch from the Layout drop-down menu, an icon will appear toggle between the two views.

IMAGE

Regardless of whether the Woo Shop Plus module is in Grid or List view mode when you add it to a page or post layout, it will automatically display a product description. By default, the length of this product description is limited to 55 characters. You have the option of capping the product description copy at any altitude when customizing your design.

To do so, go to the Product Description Length option and customize the length.

IMAGE

You can customize the length of your product descriptions for each device view (desktop, tablet, and mobile) to ensure that they look good on all screens.

IMAGE

You can choose where the plugin gets the description content from when defining the product description. This could come from one of the following sources:

• The product description, or the short description provided into the product listing
• The text snippet in the product’s backend

When determining which of the two alternatives you’d like to show, go to the Product Description drop-down menu and choose the one you want.

IMAGE

When List view is enabled, the plugin will display the product listing’s Short Description content by default.

Remember to keep the language exciting and engaging while writing product copy for the Divi Shop Builder, whether you display the Short Description or Custom Product Description text. You only have a few characters to urge your store visitor to investigate a product further, along with the product featured image. You may find it challenging to write copy that uniquely describes each product if you have pretty similar things. Work with a copywriter if you’re having trouble writing product copy.

Getting to know the Divi Shop Builder plugin’s options

After you’ve established the List layout, you can experiment with the Woo Shop Plus module’s other settings.

IMAGE

• Type of product view: You can choose which products to display here, such as all products, featured products, on-sale products, and so on.
• Product count: After that, you can choose how many products you want to show in this Woo Shop Plus module.
• Then you can choose which order to display the products in, such as by popularity, rating, date, or price.
• Set a character limit for the length of the product description display, as well as unique limits for desktop, tablet, and mobile.
• Layout: Choose whether you want a grid or a list-based presentation or if you want to set up a toggle that flips between the two views.
• To describe the product, choose between using a brief description or a custom description.
• Display product count results: If you want to display the whole product count text, such as “Showing 1 – 12 of 24 results,” you can choose whether it should appear above, below, in both spots, or nowhere.
• Sorting products for display: If at all, decide where you want the product sorting drop-down menu to appear.
• Display pagination: Here, you can choose whether you want the pagination count to appear at the top, bottom, both, or neither of the shop displays.
• Flashes of a display sale: To show flashing sale badges, turn this option on or off.
• Set whether or not the badges should cover the image, and if so, in which position.

Some toggles allow you to choose whether or not you want to:

• The button to add to the cart should be visible.
• Show the quantity field in the shopping cart.
• Set the quantity field’s default value.
• Showcase the product’s picture
• Show the product’s price.
• Show the product’s star rating.
• Showcase your categories
• Show the number of products in stock.
• Showcase the New! Badge.

The Divi Shop Builder plugin is being styled.

You can configure your product view to reflect your brand design once you’ve set it up to appear as you wish. Each element in the Woo Shop Plus module may be customized using the Divi Builder, much like the rest of the Divi theme’s modules. This is a game-changer, as this level of customization previously required complex programming and CSS.

You’ll discover a plethora of options for styling the: on the Design tab.

• Button for adding to cart
• The badge has been updated.
• Drop-down menus can be sorted in a variety of ways.
• Each text element has been carefully considered, from the product title text to the stock text.
• Image
• That’s not everything.

IMAGE

Everything is editable, including the amount field, pagination, and results count elements, which can all be designed from the Divi Builder’s Design tab.

The View Cart button, which appears instantly as a product is added to the cart, is an additional fantastic feature that significantly enhances the online store’s user experience. The Design tab allows you to change the appearance of this button.

IMAGE

Divi Shop Builder plugin has advanced customizability.

Finally, the Advanced tab has all of the typical advanced module customization parameters, such as CSS classes and IDs, device visibility settings, placement choices, and so on.

IMAGE

That’s it! You might create a divine list view for your WooCommerce products in a matter of seconds with only a few clicks. Your online store will stand out from the competition!

Using our JSON Layouts, you can create product list views.

This short presentation will show you how to build various layouts and designs. As previously stated, each element in the Woo Shop Plus module is changeable using the Divi Builder and can be modified with a few clicks, allowing you to match your brand colors effortlessly.

Use one of our skillfully created layouts, like the one shown at the top of this piece or the following, to skip the module setup and styling process:

IMAGE

Create a user-friendly page design that toggles between grid and list view using the toggle function.

IMAGE

When you buy the Divi Shop Builder plugin, you get these fantastic templates for free, along with a slew of others. These layouts are available in JSON format and can be quickly imported into the Divi Library and added to a page. These layouts can be used on as many sites as you want.

Divi Shop Builder Layouts can be downloaded for free.

Go to this demo showcase page and click Download All Layouts once you’ve purchased the plugin. When the download is finished, you’ll find a.zip file named Woo-Shop-Demos-UNPACKAGE-THIS-FILE in your downloads folder. Double-click the file to unzip it, as suggested by the name. You’ll find the layouts inside after it’s all finished.

Divi Shop Builder Layouts need to be installed first.

Go to your website’s Divi menu and select the Divi Library.

Click the Import & Export button inside the Divi Library to bring up a pop-up window. Select the Woo Shop + demo layout you want from your computer by clicking the Import option.

IMAGE

This lesson features two different layouts:

• Demo 5 for Woo Shop and Module (mug and t-shirt example, displayed at the beginning of this post)
• Demo 7 of the Woo Shop Plus Module (vegetable example, displayed at the beginning of this section)

Allow enough time for the installation to finish. When you’re done, you’ll notice that all of the layouts have been put into your Divi Library and are ready to use!

IMAGE

Layouts for the Divi Shop Builder

Make a new page and enable the Divi Builder to use the Divi Shop Builder templates. These two WooCommerce product list view demonstrations are both sections; click the Add from Library tab when creating a new team to see the two list view modules.

IMAGE

These two free demonstrations will help you save a lot of time in the development process. You can adjust the choices in the Product tab once they’ve been installed to select your preferred configurations. You can go to the Design tab and experiment with the various stylistic options for each element to alter a few design aspects.

Thoughts to end

Look no further than the Divi Shop Builder plugin if you want to build a really one-of-a-kind product view for your online store. Creating a unique list view for your WooCommerce products is simple, fast, and code-free, as you’ve just seen.

This is only one of the plugin’s several features. Style the cart page, create a bespoke checkout experience, and much more!

We hope you had fun creating a lovely WooCommerce product list display. Please post any queries you have about the Divi Shop Builder plugin in the comments section below. If you have a feature request, don’t hesitate to get in touch with our support team.

If you bought the plugin and used it to create a list view, feel free to include a link to your WooCommerce products in the list view; we’d love to see what you come up with!