Woo Essential is a third-party plugin that gives 8 new Woo Industry Modules to the Divi Builder. It moreover supplies quite a few choices to streamline the purchasing groceries process, allowing you to turn products and categories in a couple of layouts and quite a lot of serve as alternatives. In this publish, we’ll take a look on the modules and features of Woo Essential to be in agreement you make a decision if it’s the correct product to your needs.
Woo Essential Divi Modules
Woo Essential supplies 8 modules to the Divi Builder. Some of the choices require YITH WooCommerce Read about and YITH WooCommerce Wishlist plugins. The unfastened permutations are effective for this. You’ll see a notification must you don’t have the ones installed. Simply click on at the notification to position in and activate them after activating the Woo Essential plugin.
You received’t see the entire modules throughout the Divi Builder at first. As a substitute, you’ll see one module referred to as Woo Essential. Click on in this module.
All of the Woo Essential Modules will then display throughout the modal. You’ll be capable of now add the modules to any Divi layout to turn WooCommerce products.
Let’s take a closer take a look at each and every of the Woo Essential Modules. I’ll show the default settings and then show an example of one of the vital a very powerful design choices.
Woo Elegance Accordion
The Woo Elegance Accordion Module displays the pictures for the product categories. The images lengthen on hover to show an summary of the category and the choice of items in that elegance. It’ll show the category image if if you have one organize.
You’ll have entire keep watch over over the design for every element. In this example, I’ve added a box shadow, rounded the corners, and altered the font colors and sizes for the category identify, rely, and description. I’ve moreover added padding and line most sensible to the description.
Woo Elegance Carousel
The Woo Elegance Carousel creates a slider entire with navigation and automatic sliding. It has quite a lot of settings to keep watch over the carousel.
Woo Elegance Grid
The Woo Elegance Grid displays the categories as taking part in playing cards in a grid. The grid is adjustable, so that you’ll change the choice of columns.
For this one, I’ve added a border, rounded the corners, adjusted the fonts, and altered the grid rely and hollow settings.
Woo Elegance Masonry
The Woo Elegance Masonry Module places the categories within a masonry grid.
In this example, I’ve adjusted the grid amount and hollow, and altered the fonts.
Woo Product Accordion
The Woo Product Accordion works similar to the Woo Elegance Accordion aside from it displays the products themselves. It expands on hover to show the product wisdom. Select which elements to turn from the Add to Cart button, worth, superstar rating, description, Featured Product Badge, Sale Badge kind, and Sale Badge text. You’ll be capable of moreover keep watch over how the accordion works. All of the product modules show the featured image by the use of default.
In this example, I’ve adjusted the content material subject material background, changed the font colors, changed the badge color, upper the product identify font size, and altered the add to cart button color.
Woo Product Carousel
The Woo Product Carousel displays the products in surely one among six layout alternatives. Each includes a different hover affect for the buttons. You’ll be capable of moreover select which elements to turn, modify the carousel settings, and so on.
You’ll be capable of modify every element independently. I’ve adjusted quite a lot of the colors, borders, and fonts in this example. I’ve moreover added arrow navigation. This is Construction 3, which places the cart and other links at the bottom of the image on hover.
Woo Product Filter
The Woo Product Filter supplies a WooCommerce product grid with a customizable clear out. You’ll be capable of select which of the elements to turn.
You’ll have entire keep watch over over every element at the side of the clear out, grid, fonts, colors, and so on. I’ve changed quite a few of the colors, the font sizes, and adjusted the grid rely on this example. I’ve moreover added a box shadow to every the clear out and the product grid.
Woo Product Grid
The Woo Product Grid Module displays the products in a grid with a banner that displays the product counts. It has 8 layout alternatives for the grid that changes the scale of the image and places the buttons in a large number of puts on hover. You’ll be ready to select the elements that display. This displays layout 8, which places the icons at the correct of the image and the Add to Cart button at the bottom of the image on hover.
You’ll be capable of add pagination with buttons to each and every internet web page or a Load Further button. I’ve added the Load Further button in this example and styled it. This is layout 3, which places the establish and price beneath the image and gives the icons with regards to the bottom of the image on hover.
Further Woo Essential Choices
There are lots of choices, most integrated all through the modules, that add capacity to the WooCommerce listings. Proper right here’s a quick take a look at quite a few of those choices.
Woo Essential Woo Mini Cart
The Mini Cart serve as supplies a popup menu to the purchasing groceries cart. It’s mechanically added to the default WordPress header. It very best works with the default header, in order that you received’t be capable to add it to headers created with the Divi Builder. This means it’s not as versatile as the other choices of this plugin. You’ll be capable of customize all 3 of its elements independently with the Theme Customizer.
It contains 4 sections of settings for the main cart settings, cart design, view cart button, and checkout button.
Regulate how it works and change the scale, shape, colors, fonts, icons, and so on. Have it open on hover, on click on on, or slide from the correct or left.
The Mini Cart opens a small modal showing the contents of your cart. It will in truth moreover open a window to the correct or left, depending to your settings. This situation displays the modal opening on hover. The Fly-In chance, which slides from the correct or left, gives the modal all of the most sensible of the show.
Woo Essential Quickview Popup
You’ll be capable of view the article details without leaving the prevailing internet web page. The quick view icon is added to quite a few of the modules. Clicking this icon opens the details in a modal. The popup is fast and makes it easy to appear the details of the product without loading each and every different internet web page.
The details include the entire product wisdom related to the description, gallery, Add to Cart button, elegance, and so on.
Woo Essential Read about Products
You’ll be capable of read about a couple of products by the use of settling at the comparison icon. This process can be a little difficult at first, such a large amount of consumers won’t have in mind they are able to read about products.
To do the comparison, view the products individually that you want to check. Then, click on at the read about icon on one of the products. The comparison modal with open with the products compared in a table. This does artwork, but it surely isn’t as intuitive as I truly like. It did take just a bit artwork to decide. The tips I needed was once as soon as throughout the documentation. You’ll be capable of scroll all the way through the comparison and close the modal while you’re able.
Woo Essential Settings
Woo Essential supplies a link to the WordPress dashboard. Select this link to open the settings. The principle internet web page, Space, contains links to the Knowledge Base, Make stronger and Feedback, Serve as Request, and the DiviNext YouTube Chanel.
Select Modules to appear the second internet web page. Proper right here, you’ll disable or permit any of the Woo Essential Modules. That is very good if you want to prohibit the design to only a few modules. All are enabled by the use of default.
Woo Essential Templates
The creator’s site incorporates 8 unfastened starter layouts to help you get started at the side of your designs. As well as they require each and every different Divi plugin to artwork, so their usability is restricted to those with every plugins. They look great and provide quite a lot of sections to use.
Gain Woo Essential
Wii Essential is to be had within the Divi Market for $79. It contains infinite usage, a 30-day money-back be certain, and 365 days of fortify and updates.
That’s our take a look at Woo Necessities for Divi. The ones 8 Divi Modules provide quite a lot of alternatives for product grids and accordions. Display individual products and categories very easily and magnificence them with the Divi Builder. Merely see the content material subject material throughout the cart, the product details, and read about products. I want to see the Mini Cart as a Divi Module so it can be added to headers created with the Divi Builder. It does artwork well, even though, must you’re using the default WordPress header. If you’re desirous about expanding your WooCommerce product pages with quite a lot of interesting grids, Woo Prerequisites is worth a look.
We want to pay attention from you. Have you ever ever tried Divi Prerequisites? Let us know what you think about it throughout the comments.
The publish Divi Plugin Spotlight: Woo Very important appeared first on Sublime Issues Weblog.