The Divi Shop Builder provides 14 new modules to the Divi Builder that assist you to customise the design of default WooCommerce pages with Divi. The plugin additionally comes with some premade store layouts to come up with a bounce birth on customizing your website online. When you run a web-based retailer the use of WooCommerce and need so as to customise WooCommerce similar to you might some other Divi Module, this can be a nice plugin for you! On this plugin spotlight, we’ll take an in depth take a look at the options that include Divi Store Builder to come up with an concept of what you’ll be able to accomplish with this plugin.
Let’s get began!
Putting in Divi Store Builder
Divi Store Builder may also be put in similar to some other WordPress plugin. Open the plugins web page within the WordPress dashboard and click on Upload New. Click on Add Plugin on the best, then choose the .zip plugin report out of your pc.
As soon as the plugin is put in, turn on the plugin.
Divi Store Builder
So as to add the Divi Store Builder modules on your site open a web page with the Divi Builder. Upload a brand new segment and row, then click on the gray plus button so as to add a brand new module. You are going to see 14 new modules added to the insert module segment, which you’re going to use to construct the store. Let’s check out each and every module underneath.
Woo Store + Module
Get started by means of including the Woo Store + module on your store web page.
Here’s how the store module appears to be like when it’s first loaded.
Content material Tab
Let’s check out the Woo Store + module settings.
The primary segment below the content material tab is the place you’ll be able to select and reorder the elements displayed within the store module. You’ll upload an element by means of clicking the Upload New Merchandise button underneath.
There are 11 elements to choose from: Sale Badge, New Badge, Featured Symbol, Identify, Scores, Value, Upload to Cart Amount, Upload to Cart, Classes, Inventory, and Description. Those choices come up with general keep an eye on over what components to show within the store module, what order they’re positioned in, and extra. Once we get into the design settings, you’ll see how simple it’s to fully customise the design of each and every of those elements as smartly.
Right here I’ve reordered the product elements in order that the brand new badge seems underneath the featured symbol.
Subsequent within the subsequent phase, you’ll be able to in finding the product view sort environment. This lets you exchange the sort and order of goods displayed within the module. You’ll choose from Default (Menu ordering + title), Newest Merchandise, Featured Merchandise, Sale Merchandise, Perfect Promoting Merchandise, Most sensible Rated Merchandise, and Product Class.
Underneath this, you’ll be able to regulate the collection of merchandise displayed within the module and alter the order of goods.
Right here I changed the product description duration to ten. You’ll additionally permit or disable Ajax, permit filtering with the Woo Merchandise Filters module, exchange the format, and alter the collection of product columns. That is the record view the use of the Grid/Listing View Transfer format, which provides a button to the highest the place you’ll be able to transfer between grid and record view.
The outline content material environment permits you to show a brief description or a customized description. Following this, you’ll be able to select to show the product depend effects, product sorting, and pagination both above, underneath, above and underneath, or disguise them totally. You’ll additionally permit or disable sale flashes.
You’ll exchange the location of the brand new badge with the badge place settings. The default choice is don’t overlay on product symbol, which provides a banner that spans the width of the featured symbol. On the other hand, you’ll be able to choose an overlay place (best left, best proper, backside left, backside proper) which provides a small badge over the picture. You’ll additionally exchange the textual content for the brand new badge. Following this are the very same settings for the sale badge.
Remaining on this segment are some show choices. You’ll select to show the upload to cart button, the upload to cart amount box, exchange the default upload to cart amount, the product symbol, costs, rankings, classes, inventory, and new badge.
No Merchandise Discovered
Right here you’ll be able to exchange the heading and message textual content for the No Merchandise Discovered web page.
Default Content material Tab Settings
The Woo Store + module additionally options the default content material tab settings akin to Hyperlink, Background, and Admin Label.
The design tab is the place you’ll be able to totally customise each side of the Woo Store + module.
First up, overlay settings. That is the place you’ll be able to customise the overlay that looks over the featured symbol on hover. On this instance, I added a depressing overlay and a white icon.
With the picture settings, you’ll be able to exchange the padding and margin, upload rounded corners, customise the border, and regulate the picture with any of the clear out settings akin to hue, saturation, brightness, and extra.
Right here you’ll be able to customise the design of the megastar ranking. You’ll exchange the non-active and lively megastar ranking colour in addition to the alignment, measurement, and spacing.
Subsequent is the brand new badge settings. You’ll customise the padding and margin, set what number of days the brand new tab remains, and fully customise the design with the entire background, font, and border choices.
The button settings team has the entire default button customization choices akin to background, font, border, icon, and field shadow settings. Right here I custom designed the textual content colour, background, font, and border radius.
With the volume box choices you’ll be able to exchange the background colour, textual content colour, focal point background colour, focal point textual content colour, spacing, font, border, and shadow. I changed the spacing choices so as to add house between the volume box and the button. I additionally modified the font and border radius.
Right here you’ll be able to exchange the design of the product container, which surrounds each and every person product indexed. You’ll exchange the padding, margin, background, rounded corners, border, and shadow. I added a grey background to the segment and adjusted the grid columns to three, then added a white background to the product container. I additionally added rounded corners and a shadow to succeed in this design.
That is the place you’ll be able to customise the product description textual content. It comprises settings for the outline padding and margin in addition to the entire default font choices.
Subsequent, on this segment you’ll be able to customise the design of the sorting dropdown for the store module. You’ll exchange the background colour, textual content colour, focal point background and textual content colour, set the dropdown margin and padding, regulate the font choices, and customise the border. For this case, I saved it easy by means of converting the font and including a grey border.
The effects depend choices assist you to customise the font settings for this article. Right here I modified the font.
You’ll customise the design of the pagination right here. There are alternatives for the present web page textual content colour, present web page textual content background, pagination colour background, pagination textual content colour, pagination font, and pagination border. On this instance, I changed the present web page textual content colour, pagination textual content colour, pagination font, pagination textual content measurement, and pagination wrapper rounded corners.
View Cart Button
The view cart button seems as soon as a consumer provides a product to their cart. I enabled customized types for the button and adjusted the textual content measurement, colour, button background, border radius, font, icon, margin, and padding.
Grid/Listing View Button
The grid/record view button choices assist you to exchange the icons, regulate the icon and background colours, modify the padding and margin, and customise the border and field shadow. I left the choices default for this case.
No Merchandise Discovered
On this settings team you’ll be able to exchange the textual content and heading font, the spacing, the border, and the colours for the no merchandise discovered message. I changed the textual content and heading font and added some backside padding to the segment.
Right here you’ll be able to exchange the textual content alignment and upload a textual content shadow.
Identify Textual content
Subsequent is the name textual content settings, the place you’ll be able to customise the product name font. For this case, I modified the font and the textual content measurement.
Value Textual content
All the font choices are to be had for the associated fee textual content as smartly. Once more, I modified the font and the textual content measurement for the associated fee.
Previous Value Textual content
The previous worth textual content seems with a strikethrough impact each time a product is on sale. You’ll customise the font choices right here. I modified the font and greater the textual content measurement to check the common worth font.
Class Textual content
For the class textual content, I used the font choices to modify the font and textual content colour.
In Inventory Textual content
You’ll customise the in inventory textual content with the entire font choices as smartly. I modified the font and textual content colour.
Out of Inventory Textual content
Subsequent is the out of inventory textual content. I saved it easy and adjusted the font for this case.
To be had On Backorder Textual content
Right here I modified the to be had on backorder font and adjusted the textual content colour to orange.
Sale Badge Textual content
Right here you’ll be able to customise the design of the sale badge. I modified the font and the background colour.
Sale Value Textual content
After all, I adjusted the font for the sale worth textual content with the font choices to be had.
Default Design Tab Settings
That’s it for the brand new settings added to the design tab. The module additionally comes with a number of of the default design tab choices akin to sizing, spacing, border, field shadow, filters, change into, and animation. You’ll use those design choices to additional make stronger your Woo Store + module.
The complicated tab is quite same old and springs with the entire sections you might look forward to finding with a view to customise your module with CSS and extra. Underneath the Customized CSS segment, you’ll be able to upload CSS to in my opinion customise sides of the store module, akin to product, onsale, new badge, symbol, and extra.
Woo Merchandise Clear out Module
Now that we’ve taken an in depth take a look at the store module, let’s check out the Woo Merchandise Clear out module. This module provides a clear out on your web page that you’ll be able to use to switch your store effects. Click on the gray plus button to insert a module and choose the Woo Merchandise Filters module.
When you upload the module, you may even see this mistake message about enabling filtering.
Open your Woo Store + module and choose the approach to permit filtering with the Woo Merchandise Filters module. This may increasingly assist attach the clear out module and the store module in order that the store pieces will exchange relying at the filters you choose.
Content material Tab
Underneath the content material tab, you’ll be able to upload a brand new merchandise on your clear out module.
When you upload a brand new merchandise it is going to open up in a person settings window the place you’ll be able to choose the kind of clear out and customise many sides of the clear out. There are person design choices for each and every clear out which you’ll be able to use to in my opinion genre the glance of the clear out. Every of those choices also are to be had within the clear out module design tab, the place you’ll be able to customise the entire design of each and every clear out sort.
There are 8 varieties of filters you’ll be able to upload: Class, Tag, Characteristic, Seek, Score, Value, Inventory Standing, and Sale. Right here I added a column to the row in order that the clear out may also be positioned to the facet of the store module.
Underneath the clear out settings for the person clear out, you’ll be able to choose the clear out sort, select to show or disguise the clear out name, and upload customized clear out name textual content.
Class Clear out
The complicated clear out settings for the person clear out exchange relying on the kind of clear out you may have decided on. For the class clear out, you’ll be able to select to turn guardian classes handiest, guardian classes and subcategories non-hierarchical, or guardian classes and subcategories hierarchical. You’ll additionally exchange how the clear out is displayed: checkboxes record, radio buttons record, dropdown unmarried choose, dropdown multi choose, or tag cloud. For this case, I decided on the dropdown multi choose. Additionally on this segment, you’ll be able to permit or disable show as toggle, select to turn or disguise the collection of merchandise, and alter the “please choose” textual content.
Tag Clear out
For the tag clear out, I’m enabling the tag cloud show and disabling the toggle show.
Seek Clear out
Listed here are the quest clear out settings. As soon as once more I’ve disabled the toggle view.
Score Clear out
The ranking clear out has a number of show choices: unmarried line stars (decided on ranking and up), unmarried line stars (handiest decided on ranking), radio buttons stars, radio buttons textual content, checkboxes stars, checkboxes textual content, dropdown stars, dropdown textual content. I’ve decided on the one line stars (decided on ranking and up) choice.
Value Clear out
Subsequent is the associated fee clear out. You’ll make a choice from a from-to slider, a from-to quantity enter, or a from-to slider and quantity enter. For this case I decided on the from-to slider and changed the utmost quantity.
Inventory Clear out
You’ll show the inventory clear out as a checkbox record, a radio button record, a dropdown unmarried choose, a dropdown multi choose, or a tag cloud. I decided on the radio buttons record for this clear out and decided on to show the collection of merchandise.
Sale Clear out
The sale clear out choices are lovely easy – you’ll be able to permit or disable the toggle show and alter the on sale textual content.
Characteristic Clear out
After all, we have now the characteristic clear out. I’ve selected to make use of colours for the characteristic instance, and I’ve decided on the checkboxes record show choice.
Content material Tab Filters Settings
Again within the content material tab of the clear out module settings, there are some further choices indexed below the filters settings team.
First, you’ll be able to choose to show decided on filters on the best or backside, or disguise them totally. I selected to show them on the best. You’ll additionally select to show or disguise the chosen filters name and alter the name textual content.
Additionally on this segment are choices for the practice filters and transparent filters buttons. You’ll select to show them prior to or after the filters, or in no way. You’ll additionally exchange the button textual content. I selected to show each buttons after the filters.
The content material tab additionally has a piece for background settings and admin label settings.
The design tab for the clear out module has an in depth quantity of design choices so that you can totally customise the clear out designs. You’ll customise the font, spacing, border, and background for each and every of the clear out sorts. You’ll additionally customise the buttons, decided on filters, sizing, spacing, border, field shadow, filters, change into, and animation choices. We received’t move into a lot element right here, however simply know that you’ll be able to regulate almost about any side of the clear out module on your liking.
For this case, I changed the font, added rounded corners to the chosen filters, diminished the ground margin between filters, added a border to the dropdown clear out, modified the colour of the lively tag, worth clear out, inventory standing, and checkmarks to check the colour scheme, custom designed the button design, and added a rounded nook and field shadow to the clear out module. Here’s the overall design with the clear out module and store module.
Cart Listing Module
Now let’s transfer over to the cart web page. First, the cart record module. This module will show the contents of your cart.
Content material Tab
Throughout the module settings, you’ll be able to exchange the content material this is displayed. You’ll select to turn or disguise sure columns such because the take away product column, the product column, the thumbnail, the product title, the associated fee, the volume, the subtotal, and the coupon code.
You’ll additionally rename any of the columns with customized textual content.
Moreover, you’ll be able to customise the empty cart textual content, button textual content, and button URL.
The content material tab additionally options the default background and admin label settings.
Right here you’ll be able to totally customise the design of the cart module. Each and every side of the cart module may also be modified, together with the buttons, the textual content, the desk, and extra.
I’ve custom designed the design by means of including a white background and rounded corners, converting the font, expanding the picture thumbnail measurement, and customizing the buttons.
Cart Totals Module
The cart totals module will have to even be added to the cart web page. It’ll show the subtotal and general for the cart pieces and has a button to continue to checkout.
Content material Tab
Throughout the module settings, you’ll be able to exchange the textual content such because the name, subtotal textual content, general textual content, and continue to checkout button textual content. You’ll additionally upload a background and alter the admin label.
With the design settings, you’ll be able to customise each side of the cart totals module. For this case, I added a background, a field shadow, and rounded corners to the module. I modified the font to check the remainder of the design, and in addition custom designed the continue to checkout button.
WooCommerce Notices Module
The WooCommerce Notices module will also be positioned at the cart web page. This module will show any error messages or notices that can arise. I’m including it to the highest of the cart web page, above the cart record module.
Content material Tab
Underneath the content material tab you’ll be able to permit take a look at mode, which is able to show the entire notices at the entrance finish whilst you take a look at the design. Here’s what the 3 other notices appear to be by means of default.
Right here you’ll be able to regulate the design of the notices. I modified the background colours to correspond with the kind of understand, and adjusted the styling to check the remainder of the design.
Checkout Billing Module
Shifting directly to the checkout web page, first up is the billing module. That is the place you’ll be able to acquire billing main points to finish the transaction.
Content material Tab
Underneath the content material tab, you’ll be able to exchange the billing name textual content in addition to any of the sector labels. You’ll additionally upload a hyperlink or background and alter the admin label. Right here I added a background colour to the format.
The design tab has choices to customise the whole thing from the heading and labels to the fields and borders. For this case, I saved the design in alignment with the opposite modules and added a rounded border and a field shadow, modified the spacing, and changed the font.
Checkout Coupon Module
Subsequent, we will be able to upload the checkout coupon module to the checkout web page.
Content material Tab
Within the content material tab, you’ll be able to select to turn the coupon segment by the use of toggle or to have it at all times displayed. I selected to have it displayed. Right here you’ll be able to additionally exchange the textual content for any of the coupon module components.
Here’s the designed coupon module. I added a background, field shadow, and rounded corners. I additionally modified the font and custom designed the button.
Checkout Order Module
Now let’s transfer directly to the checkout order module. That is some other module for the checkout web page and it shows the client’s order knowledge akin to the chosen merchandise, the subtotal, transport, the entire price, cost choices, and a privateness coverage checkbox.
Content material Tab
Within the content material tab you’ll be able to exchange the heading textual content and where order button textual content. You’ll additionally select to turn or disguise the privateness coverage and phrases and prerequisites. In fact, you’ll be able to additionally upload a background and alter the admin label right here as smartly.
Similar to the opposite modules, the checkout order module will also be totally custom designed. Right here I modified the font, added a background and rounded corners, and custom designed the button.
Checkout Delivery Module
The closing module for the checkout web page is the checkout transport module.
Content material Tab
Within the content material tab, you’ll be able to exchange the name textual content, select to have the name toggle, and display or disguise order notes. You’ll additionally exchange any of the sector labels.
Here’s the custom designed design. Once more, I added a background, rounded borders, a field shadow, and adjusted the font.
And this is the whole design for the checkout web page.
Account Content material Module
Divi store builder additionally comes with some modules to customise the account web page. Let’s check out the account content material module first. There are other components you’ll be able to upload to the web page and you’ll be able to rearrange them on the other hand you desire to. Those components come with dashboard, orders, subscriptions, downloads, addresses, account main points, login, sign up, and misplaced password sections. Every component has its personal settings web page the place you’ll be able to customise the person component’s design. The account content material module additionally has design choices the place you’ll be able to customise the entire design.
Here’s the styled default dashboard view, together with the awareness messages on the best.
That is the styled orders web page, the place shoppers can see all in their finished and pending orders.
That is an instance of a downloads web page.
As you’ll be able to see, this plugin will provide you with general keep an eye on over the design of the account web page as smartly. Let’s check out a pair extra modules that paintings with the account web page.
Account Navigation Module
This module provides a navigation menu to the web page in order that customers can view the other pages of their account. Similar to the account content material module, you’ll be able to upload and take away any of the pages from the menu and alter their order. Here’s the styled navigation module.
Account Consumer Symbol Module
The account consumer symbol module provides the consumer’s profile symbol to the web page. Right here it’s in motion.
Account Consumer Title Module
In a similar fashion, the account consumer title module provides the consumer’s username to the web page. You’ll then again choose to show the primary title, closing title, complete title, or show title.
Here’s the whole account interface at the entrance finish. That is the account main points web page.
Thank You Module
The general module we’ll duvet is the thanks module. This may increasingly seem after an order has been finished. You’ll exchange any of the labels the use of the content material tab settings, and naturally all of the module may also be custom designed with its design settings. Here’s the styled thanks web page.
Divi Store Builder Layouts
Divi Store Builder additionally comes with a number of premade store layouts that you’ll be able to use to jump-start the design procedure. Let’s check out a few the designs.
Woo Store + Module Demo 1
This is without doubt one of the store demo layouts. It has a card-style design and includes a inexperienced border that looks on hover.
Espresso Cart and Checkout Layouts
The espresso format comes with a cart format and a checkout format. Here’s the cart format.
And this is the checkout format.
Woo Store + Meals Format
That is some other store module format with an inventive “candy or salty” break up format. This format includes a spherical product symbol with a coloured border.
Acquire Divi Store Builder
Divi Store Builder is to be had within the Divi Marketplace. It prices $109 for limitless site utilization and 1 yr of make stronger and updates. The associated fee additionally features a 30-day money-back ensure.
That was once our take a look at Divi Store Builder. As you’ll be able to see, this plugin is jam-packed with modules and design choices that come up with entire keep an eye on over the design of your store, cart, checkout, account, and thanks pages. As complete as this plugin is, additionally it is really easy to make use of and customise. The plugin creator additionally has extensive documentation for the product, which may be very useful. In case you are on the lookout for a technique to customise your WooCommerce store with Divi, it is a nice choice. We would like to listen to from you! Have you ever attempted Divi Store Builder? Tell us what you consider it within the feedback!