The Divi Store Builder supplies 14 new modules to the Divi Builder that imply you’ll customize the design of default WooCommerce pages with Divi. The plugin moreover comes with some premade retailer layouts to come up with a soar beginning on customizing your internet web page. For individuals who run an web store using WooCommerce and need so as to customize WooCommerce very similar to it’s good to any other Divi Module, this is a great plugin for you! In this plugin highlight, we’ll take an extensive check out the choices that come with Divi Retailer Builder to come up with an idea of what you’ll be capable to accomplish with this plugin.

Let’s get started!

Setting up Divi Retailer Builder

Divi Retailer Builder can also be installed very similar to any other WordPress plugin. Open the plugins internet web page inside the WordPress dashboard and click on on Add New. Click on on Upload Plugin on the most efficient, then make a selection the .zip plugin file from your pc.

As quickly because the plugin is installed, flip at the plugin.

Divi Retailer Builder

So that you can upload the Divi Retailer Builder modules to your website online open a internet web page with the Divi Builder. Add a brand spanking new section and row, then click on at the grey plus button with the intention to upload a brand spanking new module. You’re going to look 14 new modules added to the insert module section, which you’ll use to build the shop. Let’s take a look at each and every module beneath.

Woo Retailer + Module

Get began by way of together with the Woo Retailer + module to your retailer internet web page.

That is how the shop module appears to be when it’s first loaded.

Content material subject matter Tab

Let’s take a look at the Woo Retailer + module settings.

Products

The principle section underneath the content material subject matter tab is where you’ll be ready to make a choice and reorder the weather displayed inside the retailer module. You’ll add a component by way of clicking the Add New Products button beneath.

There are 11 parts to make a choice from: Sale Badge, New Badge, Featured Image, Title, Scores, Worth, Add to Cart Quantity, Add to Cart, Categories, Stock, and Description. The ones possible choices come up with basic control over what elements to turn inside the retailer module, what order they’re situated in, and additional. When we get into the design settings, you’ll see how easy it’s to totally customize the design of each and every of the ones parts as smartly.

Proper right here I’ve reordered the product parts so that the new badge turns out beneath the featured image.

Next inside the next segment, you’ll be capable to find the product view sort atmosphere. This allows you to exchange the kind and order of products displayed inside the module. You’ll make a choice from Default (Menu ordering + establish), Latest Products, Featured Products, Sale Products, Easiest Selling Products, Top Rated Products, and Product Elegance.

Beneath this, you’ll be capable to modify the choice of products displayed inside the module and change the order of products.

Proper right here I modified the product description duration to 10. You’ll moreover permit or disable Ajax, permit filtering with the Woo Products Filters module, exchange the layout, and change the choice of product columns. That’s the list view using the Grid/File View Switch layout, which gives a button to the perfect where you’ll be capable to switch between grid and list view.

The description content material subject matter atmosphere means that you can display a short lived description or a custom designed description. Following this, you’ll be ready to make a choice to turn the product rely results, product sorting, and pagination each above, beneath, above and beneath, or quilt them absolutely. You’ll moreover permit or disable sale flashes.

You’ll exchange the location of the new badge with the badge position settings. The default chance is don’t overlay on product image, which gives a banner that spans the width of the featured image. However, you’ll be ready to make a choice an overlay position (absolute best left, absolute best correct, bottom left, bottom correct) which gives a small badge over the image. You’ll moreover exchange the text for the new badge. Following this are the exact same settings for the sale badge.

Final in this section are some display possible choices. You’ll choose to turn the add to cart button, the add to cart quantity field, exchange the default add to cart quantity, the product image, prices, scores, categories, stock, and new badge.

No Products Found out

Proper right here you’ll be capable to exchange the heading and message text for the No Products Found out internet web page.

Default Content material subject matter Tab Settings

The Woo Retailer + module moreover choices the default content material subject matter tab settings an identical to Link, Background, and Admin Label.

Design Tab

The design tab is where you’ll be capable to completely customize every facet of the Woo Retailer + module.

Overlay

First up, overlay settings. That’s the position you’ll be capable to customize the overlay that appears over the featured image on hover. In this example, I added a dark overlay and a white icon.

Image

With the image settings, you’ll be capable to exchange the padding and margin, add rounded corners, customize the border, and modify the image with any of the clear out settings an identical to hue, saturation, brightness, and additional.

Superstar Ranking

Proper right here you’ll be capable to customize the design of the celebrity ranking. You’ll exchange the non-active and vigorous celebrity ranking color along with the alignment, size, and spacing.

New Badge

Next is the new badge settings. You’ll customize the padding and margin, set what choice of days the new tab stays, and fully customize the design with all the background, font, and border possible choices.

Button

The button settings workforce has all the default button customization possible choices an identical to background, font, border, icon, and box shadow settings. Proper right here I customized the text color, background, font, and border radius.

Quantity Field

With the quantity field possible choices you’ll be capable to exchange the background color, text color, focus background color, focus text color, spacing, font, border, and shadow. I modified the spacing possible choices with the intention to upload space between the quantity field and the button. I moreover changed the font and border radius.

Product Container

Proper right here you’ll be capable to exchange the design of the product container, which surrounds each and every specific particular person product listed. You’ll exchange the padding, margin, background, rounded corners, border, and shadow. I added a gray background to the section and adjusted the grid columns to a couple of, then added a white background to the product container. I moreover added rounded corners and a shadow to succeed in this design.

Product Description

That’s the position you’ll be capable to customize the product description text. It accommodates settings for the description padding and margin along with all the default font possible choices.

Sorting Dropdown

Next, in this section you’ll be capable to customize the design of the sorting dropdown for the shop module. You’ll exchange the background color, text color, focus background and text color, set the dropdown margin and padding, modify the font possible choices, and customize the border. For this case, I stored it simple by way of changing the font and together with a gray border.

Results Rely

The effects rely possible choices imply you’ll customize the font settings for this text. Proper right here I changed the font.

Pagination

You’ll customize the design of the pagination proper right here. There are options for the existing internet web page text color, provide internet web page text background, pagination color background, pagination text color, pagination font, and pagination border. In this example, I modified the existing internet web page text color, pagination text color, pagination font, pagination text size, and pagination wrapper rounded corners.

View Cart Button

The view cart button turns out once a client supplies a product to their cart. I enabled custom designed sorts for the button and adjusted the text size, color, button background, border radius, font, icon, margin, and padding.

Grid/File View Button

The grid/list view button possible choices imply you’ll exchange the icons, modify the icon and background colors, regulate the padding and margin, and customize the border and box shadow. I left the decisions default for this case.

No Products Found out

In this settings workforce you’ll be capable to exchange the text and heading font, the spacing, the border, and the colors for the no products found out message. I modified the text and heading font and added some bottom padding to the section.

Text

Proper right here you’ll be capable to exchange the text alignment and add a text shadow.

Title Text

Next is the identify text settings, where you’ll be capable to customize the product identify font. For this case, I changed the font and the text size.

Worth Text

The entire font possible choices are available for the price text as smartly. Yet again, I changed the font and the text size for the price.

Out of date Worth Text

The former price text turns out with a strikethrough have an effect on each and every time a product is on sale. You’ll customize the font possible choices proper right here. I changed the font and better the text size to check the typical price font.

Elegance Text

For the category text, I used the font possible choices to switch the font and text color.

In Stock Text

You’ll customize the in stock text with all the font possible choices as smartly. I changed the font and text color.

Out of Stock Text

Next is the out of stock text. I stored it simple and adjusted the font for this case.

Available On Backorder Text

Proper right here I changed the available on backorder font and adjusted the text color to orange.

Sale Badge Text

Proper right here you’ll be capable to customize the design of the sale badge. I changed the font and the background color.

Sale Worth Text

Finally, I adjusted the font for the sale price text with the font possible choices available.

Default Design Tab Settings

That’s it for the new settings added to the design tab. The module moreover comes with quite a lot of of the default design tab possible choices an identical to sizing, spacing, border, box shadow, filters, become, and animation. You’ll use the ones design possible choices to further fortify your Woo Retailer + module.

Advanced Tab

The complicated tab is rather same old and comes with all the sections it’s good to anticipate finding so as to customize your module with CSS and additional. Under the Custom designed CSS section, you’ll be capable to add CSS to personally customize aspects of the shop module, an identical to product, onsale, new badge, image, and additional.

Woo Products Filter Module

Now that we’ve taken an extensive check out the shop module, let’s take a look at the Woo Products Filter module. This module supplies a clear out to your internet web page that you just’ll be capable to use to change your retailer results. Click on at the grey plus button to insert a module and make a selection the Woo Products Filters module.

While you add the module, you may even see this error message about enabling filtering.

Open your Woo Retailer + module and make a selection find out how to permit filtering with the Woo Products Filters module. This may increasingly help connect the clear out module and the shop module so that the shop items will exchange depending on the filters you select.

Content material subject matter Tab

Under the content material subject matter tab, you’ll be capable to add a brand spanking new products to your clear out module.

While you add a brand spanking new products it’s going to open up in an individual settings window where you’ll be ready to make a choice the type of clear out and customize many aspects of the clear out. There are specific particular person design possible choices for each and every clear out which you’ll be capable to use to personally style the look of the clear out. Each of the ones possible choices are also available inside the clear out module design tab, where you’ll be capable to customize the entire design of each and every clear out sort.

There are 8 varieties of filters you’ll be capable to add: Elegance, Tag, Function, Search, Ranking, Worth, Stock Status, and Sale. Proper right here I added a column to the row so that the clear out can also be situated to the aspect of the shop module.

Under the clear out settings for the individual clear out, you’ll be ready to make a choice the clear out sort, choose to turn or quilt the clear out identify, and add custom designed clear out identify text.

Elegance Filter

The complicated clear out settings for the individual clear out exchange depending on the type of clear out you’ve gotten determined on. For the category clear out, you’ll be ready to make a choice to show mom or father categories best, mom or father categories and subcategories non-hierarchical, or mom or father categories and subcategories hierarchical. You’ll moreover exchange how the clear out is displayed: checkboxes list, radio buttons list, dropdown single make a selection, dropdown multi make a selection, or tag cloud. For this case, I determined at the dropdown multi make a selection. Moreover in this section, you’ll be capable to permit or disable display as toggle, choose to show or quilt the choice of products, and change the “please make a selection” text.

Tag Filter

For the tag clear out, I’m enabling the tag cloud display and disabling the toggle display.

Search Filter

Listed below are the hunt clear out settings. Once yet again I’ve disabled the toggle view.

Ranking Filter

The ranking clear out has quite a lot of display possible choices: single line stars (determined on ranking and up), single line stars (best determined on ranking), radio buttons stars, radio buttons text, checkboxes stars, checkboxes text, dropdown stars, dropdown text. I’ve determined at the one line stars (determined on ranking and up) chance.

Worth Filter

Next is the price clear out. You’ll make a choice from a from-to slider, a from-to amount input, or a from-to slider and amount input. For this case I determined at the from-to slider and adjusted the maximum amount.

Stock Filter

You’ll display the stock clear out as a checkbox list, a radio button list, a dropdown single make a selection, a dropdown multi make a selection, or a tag cloud. I determined at the radio buttons list for this clear out and determined on to turn the choice of products.

Sale Filter

The sale clear out possible choices are gorgeous simple – you’ll be capable to permit or disable the toggle display and change the on sale text.

Function Filter

Finally, we’ve the feature clear out. I’ve decided on to use colors for the feature example, and I’ve determined at the checkboxes list display chance.

Content material subject matter Tab Filters Settings

Once more inside the content material subject matter tab of the clear out module settings, there are some additional possible choices listed underneath the filters settings workforce.

First, you’ll be ready to make a choice to turn determined on filters on the most efficient or bottom, or quilt them absolutely. I decided on to turn them on the most efficient. You’ll moreover choose to turn or quilt the selected filters identify and change the identify text.

Moreover in this section are possible choices for the practice filters and clear filters buttons. You’ll choose to turn them forward of or after the filters, or certainly not. You’ll moreover exchange the button text. I decided on to turn each and every buttons after the filters.

The content material subject matter tab moreover has just a little for background settings and admin label settings.

Design Tab

The design tab for the clear out module has an extensive amount of design possible choices with the intention to completely customize the clear out designs. You’ll customize the font, spacing, border, and background for each and every of the clear out varieties. You’ll moreover customize the buttons, determined on filters, sizing, spacing, border, box shadow, filters, become, and animation possible choices. We won’t cross into so much part proper right here, then again merely know that you just’ll be capable to modify as regards to any facet of the clear out module to your liking.

For this case, I modified the font, added rounded corners to the selected filters, decreased the bottom margin between filters, added a border to the dropdown clear out, changed the color of the vigorous tag, price clear out, stock status, and checkmarks to check the color scheme, customized the button design, and added a rounded corner and box shadow to the clear out module. That is the overall design with the clear out module and retailer module.

Cart File Module

Now let’s switch over to the cart internet web page. First, the cart list module. This module will display the contents of your cart.

Content material subject matter Tab

All over the module settings, you’ll be capable to exchange the content material subject matter that is displayed. You’ll choose to show or quilt sure columns such since the remove product column, the product column, the thumbnail, the product establish, the price, the quantity, the subtotal, and the coupon code.

You’ll moreover rename any of the columns with custom designed text.

Additionally, you’ll be capable to customize the empty cart text, button text, and button URL.

The content material subject matter tab moreover choices the default background and admin label settings.

Design Tab

Proper right here you’ll be capable to completely customize the design of the cart module. Each facet of the cart module can also be changed, at the side of the buttons, the text, the table, and additional.

I’ve customized the design by way of together with a white background and rounded corners, changing the font, increasing the image thumbnail size, and customizing the buttons.

Cart Totals Module

The cart totals module should also be added to the cart internet web page. It’ll display the subtotal and basic for the cart items and has a button to proceed to checkout.

Content material subject matter Tab

All over the module settings, you’ll be capable to exchange the text such since the identify, subtotal text, basic text, and proceed to checkout button text. You’ll moreover add a background and change the admin label.

Design Tab

With the design settings, you’ll be capable to customize every facet of the cart totals module. For this case, I added a background, a box shadow, and rounded corners to the module. I changed the font to check the rest of the design, and as well as customized the proceed to checkout button.

WooCommerce Notices Module

The WooCommerce Notices module can be situated on the cart internet web page. This module will display any error messages or notices that may get up. I’m together with it to the perfect of the cart internet web page, above the cart list module.

Content material subject matter Tab

Under the content material subject matter tab you’ll be capable to permit check out mode, which is in a position to display all the notices on the front end while you check out the design. Right here’s what the three different notices look like by way of default.

Design Tab

Proper right here you’ll be capable to modify the design of the notices. I changed the background colors to correspond with the type of perceive, and adjusted the styling to check the rest of the design.

Checkout Billing Module

Moving at once to the checkout internet web page, first up is the billing module. That’s the position you’ll be capable to accumulate billing details to complete the transaction.

Content material subject matter Tab

Under the content material subject matter tab, you’ll be capable to exchange the billing identify text along with any of the sphere labels. You’ll moreover add a link or background and change the admin label. Proper right here I added a background color to the layout.

Design Tab

The design tab has possible choices to customize the entire thing from the heading and labels to the fields and borders. For this case, I stored the design in alignment with the other modules and added a rounded border and a box shadow, changed the spacing, and adjusted the font.

Checkout Coupon Module

Next, we can add the checkout coupon module to the checkout internet web page.

Content material subject matter Tab

Throughout the content material subject matter tab, you’ll be ready to make a choice to show the coupon section by way of toggle or to have it always displayed. I decided on to have it displayed. Proper right here you’ll be capable to moreover exchange the text for any of the coupon module elements.

Design Tab

That is the designed coupon module. I added a background, box shadow, and rounded corners. I moreover changed the font and customized the button.

Checkout Order Module

Now let’s switch at once to the checkout order module. This is another module for the checkout internet web page and it displays the consumer’s order information an identical to the selected products, the subtotal, delivery, the total value, charge possible choices, and a privacy protection checkbox.

Content material subject matter Tab

Throughout the content material subject matter tab you’ll be capable to exchange the heading text and the place order button text. You’ll moreover choose to show or quilt the privacy protection and words and must haves. In any case, you’ll be capable to moreover add a background and change the admin label proper right here as smartly.

Design Tab

Very similar to the other modules, the checkout order module can be completely customized. Proper right here I changed the font, added a background and rounded corners, and customized the button.

Checkout Supply Module

Without equal module for the checkout internet web page is the checkout delivery module.

Content material subject matter Tab

Throughout the content material subject matter tab, you’ll be capable to exchange the identify text, choose to have the identify toggle, and show or quilt order notes. You’ll moreover exchange any of the sphere labels.

Design Tab

That is the customized design. Yet again, I added a background, rounded borders, a box shadow, and adjusted the font.

And right here’s the entire design for the checkout internet web page.

Account Content material subject matter Module

Divi retailer builder moreover comes with some modules to customize the account internet web page. Let’s take a look at the account content material subject matter module first. There are different elements you’ll be capable to add to the internet web page and also you’ll be capable to rearrange them then again you wish to have to. The ones elements include dashboard, orders, subscriptions, downloads, addresses, account details, login, check in, and out of place password sections. Each phase has its non-public settings internet web page where you’ll be capable to customize the individual phase’s design. The account content material subject matter module moreover has design possible choices where you’ll be capable to customize the entire design.

That is the styled default dashboard view, along with the notice messages on the most efficient.

That’s the styled orders internet web page, where customers can see all of their completed and pending orders.

This is an example of a downloads internet web page.

As you’ll be capable to see, this plugin will give you basic control over the design of the account internet web page as smartly. Let’s take a look at a couple additional modules that art work with the account internet web page.

Account Navigation Module

This module supplies a navigation menu to the internet web page so that shoppers can view the opposite pages in their account. Very similar to the account content material subject matter module, you’ll be capable to add and remove any of the pages from the menu and change their order. That is the styled navigation module.

Account Client Image Module

The account client image module supplies the shopper’s profile image to the internet web page. Proper right here it’s in movement.

Account Client Name Module

Similarly, the account client establish module supplies the shopper’s username to the internet web page. You’ll then again make a selection to turn the principle establish, final establish, whole establish, or display establish.

That is the entire account interface on the front end. That’s the account details internet web page.

Thank You Module

The total module we’ll quilt is the thank you module. This may increasingly appear after an order has been completed. You’ll exchange any of the labels using the content material subject matter tab settings, and of course all of the module can also be customized with its design settings. That is the styled thank you internet web page.

Divi Retailer Builder Layouts

Divi Retailer Builder moreover comes with quite a lot of premade retailer layouts that you just’ll be capable to use to jump-start the design process. Let’s take a look at a couple of the designs.

Woo Retailer + Module Demo 1

This is one of the retailer demo layouts. It has a card-style design and features a green border that appears on hover.

Coffee Cart and Checkout Layouts

The coffee layout comes with a cart layout and a checkout layout. That is the cart layout.

And right here’s the checkout layout.

Woo Retailer + Foods Layout

This is another retailer module layout with a creative “sweet or salty” lower up layout. This layout features a round product image with a colored border.

Achieve Divi Retailer Builder

Divi Retailer Builder is available inside the Divi Market. It costs $109 for countless website online usage and 1 twelve months of enhance and updates. The associated fee moreover includes a 30-day money-back be sure.

Final Concepts

That used to be as soon as our check out Divi Retailer Builder. As you’ll be capable to see, this plugin is jam-packed with modules and design possible choices that come up with complete control over the design of your retailer, cart, checkout, account, and thank you pages. As whole as this plugin is, it’s also truly simple to use and customize. The plugin author moreover has intensive documentation for the product, that could be very helpful. In case you’re on the lookout for a method to customize your WooCommerce retailer with Divi, this is a great chance. We’d truly like to hear from you! Have you ever ever tried Divi Retailer Builder? Let us know what you take into consideration it inside the comments!

The publish Divi Plugin Spotlight: Divi Store Builder gave the impression first on Sublime Topics Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more