WooCommerce is one amongst WordPress’ most favored eCommerce plugins. To support this, Divi were given right here out with quite a lot of new Woo-centric modules that allow you larger keep an eye on over designing your default WooCommerce pages. In at the moment’s put up, we will art work by means of making a WooCommerce cart timeline for Divi. For this timeline, we’ll be rising a visual representation of the shopper journey. We need to visually show the shopper how they switch from retailer to checkout.
Cart Internet web page Template
Desktop View
Tablet and Mobile View
Checkout Internet web page Template
Tablet and Mobile View
Download The Cart & Checkout Template for FREE
To place your palms on the loose cart & checkout template, you will first need to download them using the button beneath. To understand get right to use to the download it is very important subscribe to our newsletter by the use of using the form beneath. As a brand spanking new subscriber, you will download a lot more Divi goodness and a loose Divi Layout pack every Monday! While you’re already on the report, simply enter your electronic mail take care of beneath and click on on download. You’re going to no longer be “resubscribed” or download additional emails.
@media easiest show and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:previous to { border-top-color: #ffffff !very important; border-left-color: transparent !very important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !very important; border-left-color: transparent !very important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:previous to { background: #f92c8b !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !very important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 tough { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p tough, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !very important;}

Download For Unfastened
Join the Divi Newsletter and we will electronic mail you a reproduction of the ultimate Divi Landing Internet web page Layout Pack, plus numerous other excellent and loose Divi property, pointers and strategies. Observe along and you will be a Divi seize in no time. Should you’re already subscribed simply kind on your electronic mail take care of beneath and click on on download to get right to use the structure pack.
You have to have successfully subscribed. Please check your electronic mail take care of to verify your subscription and get get right to use to loose weekly Divi structure packs!
How you can Download & Arrange the Cart & Checkout Templates
Move to Divi Theme Builder
So as to add the template, navigate to the Divi Theme Builder inside the backend of your WordPress site.
Upload Global Default Web site Template
Then, inside the height suitable corner, you’ll see an icon with two arrows. Click on on on the icon.
Navigate to the import tab, upload the JSON report which you’ve been ready to procure in this put up, and click on on on ‘Import Divi Theme Builder Templates.
Save Divi Theme Builder Changes
While you’ve uploaded the report, you’ll notice a brand spanking new cart, checkout, and retailer template. Save the Divi Theme Builder changes as soon as you wish to have the templates to be activated.
How you can Create the WooCommerce Cart Timeline from Scratch
If you wish to have reasonably further of an issue, the next part of our blog put up will show you learn the way to recreate the WooCommerce cart timeline for Divi. You’ll use the steps in this instructional to customize your personal cart timeline. Use it as inspiration for your next WooCommerce and Divi problem! The WooCommerce cart timeline that we’ll be rising turns out like this:
Cart Internet web page
Checkout Internet web page
This Woocommerce cart timeline for Divi could also be mobile responsive. It stays as a horizontal timeline on mobile gadgets:
Now that we have a visual knowledge as to what we’ll be building, let’s get started!
Setup the Divi Theme Builder
We will be rising the ones templates to affect the cart and checkout pages of WooCommerce. As such, we begin our procedure inside the Divi Theme Builder.
Create Cart Template
Click on on on the plus icon throughout the Add New Template card.
Next, make a choice Assemble New Template.
After, you’ll be offered with a modal box of all of the various assignments that you just’ll be capable to hook up with the new template that you simply’re rising. In our case, we’ll be creating a template for the cart internet web page of our WooCommerce store. So, scroll down the modal box, and make a choice Cart underneath the WooCommerce heading. Once, made up our minds on, click on on Create Template. When we do this, we’re assigning the newly created template to the cart internet web page.
Create Checkout Template
We will be going by means of the equivalent steps to create the checkout template. Click on on on the plus icon throughout the Add New Template card.
Over again, make a choice Assemble New Template.
For the checkout internet web page, we’ll need to scroll down the modal box, and make a choice Checkout underneath the WooCommerce heading. Once, made up our minds on, click on on Create Template.
Save Templates and Assignments
Now that our cart and checkout templates have been created, we will save them. Click on on on the green Save Changes button at the height of the Divi Theme Builder.
Let’s Get began Development the WooCommerce Cart Drift Timeline
Atmosphere Up the Cart Internet web page Template
Now the fun begins! We’re going to begin out rising our cart waft timeline for the cart internet web page. To try this, we click on on on the Add Custom designed Body button throughout the Cart template that we merely created.
Similar to when we create the ones templates and their assignments, we’re going to click on on on the Assemble Custom designed Body button that appears inside the modal box.
Add a New Segment and Row
Now that we’re inside the Divi Builder, we’re going as a way to upload a brand spanking new row. This row could have 5 columns.
Add Blurb Modules
Add 3 Blurb Modules to columns 1, 3, and 5 of your new row.
That is the content material subject material for each Blurb Module that we will be using:
First Blurb (Column 1)
- Title: Retailer
- Body: Leave empty
- Use Icon: Positive
- Icon: See screenshot beneath
- Module Link URL: /retailer (Or your custom designed link to your retailer internet web page)
second Blurb (Column 3)
- Title: Evaluation
- Body: Leave empty
- Use Icon: Positive
- Icon: See screenshot beneath
- Module Link URL: /cart (Or your custom designed link to your cart internet web page)
third Blurb (Column 5)
- Title: Checkout
- Body: Leave empty
- Use Icon: Positive
- Icon: See screenshot beneath
- Module Link URL: /checkout (Or your custom designed link to your checkout internet web page)
Now, our WooCommerce timeline will appear to be this at this stage:
Together with Links to Blurbs
As we’re rising templates for the cart and checkout internet web page, we would like our Blurb Modules to be easy to get right to use irrespective of which pages purchaser land on. A core feature of the WooCommerce timeline is that the top shopper – your purchaser – will be capable to merely navigate between the various ranges of the checkout process. To be able to upload the link to the default retailer, cart, and checkout pages of our site, we will first enter the module settings of the main blurb, retailer.
As quickly because the module’s settings box turns out, we’re going to scroll correct all the way down to the Link heading. We’ll be together with the link to the Module Link URL box because of this may increasingly an increasing number of make certain that irrespective of where your custom designed clicks – whether or not or now not it’s the Blurb Title or the icon itself – they’re going to be directed to the internet web page that they need to navigate to.
We’ll be together with the links to the standard WooCommerce pages to each Blurb Module. You probably have created custom designed links for the ones pages on your WooCommerce arrange, keep an eye on the links accordingly. First, we begin with the Retailer Blurb Module. For the Module Link URL, we enter /retailer. That’s the default URL for the shop internet web page in WooCommerce. Take into accout, while you’ve were given changed this URL, enter your custom designed URL correct right here as a substitute.
Click on at the golfing inexperienced checkmark button to save some your changes. Next, we switch to the Evaluation Blurb Module. This module serves for the reason that link to the cart internet web page. Over again, we navigate to the Link tab, and then we add the Module Link URL /cart, to the Module URL.
For the final Blurb Module, the Checkout Blurb Module, we will be linking to the default WooCommerce checkout internet web page link which is /checkout.
Style Blurb Modules
Next, we will begin to style our added Blurb Modules. We will be using hover sorts on the modules. That is serving to with the shopper experience (UX) of the WooCommerce cart timeline. We want the Blurb Module that represents the internet web page that we’re not too long ago at once to be a definite color. And, we moreover want the icon to enlarge when we hover over it and change color.
Blurb Module Styling
- Icon Color: #eac989
- Hover Icon Color: #9fa2ce
- Text Alignment: Center
- Title Text:
- Title Heading Text: H4
- Title Font: Baskerville
- Title Font Weight: Bold
- Title Text Color: #354e7c
Develop into:
- Develop into Scale (Desktop): 100%
- Develop into Scale (Hover): 115%
When we’ve set the design settings for the main Blurb Module, we’re going to extend them to the other Blurb Modules in our row.
We need to prolong our sorts easiest to Blurb Modules inside of our segment. That is very important to note specifically in case you’re working on a internet web page that already has content material subject material inside of.
Styling the Cart Blurb Module
To signify the opposite ranges of the checkout process, we’re going to supply a definite icon color to the current stage that our shopper is on. For example, in the event that they’re on the cart internet web page, we’ll alternate the color of the Blurb Module referencing the cart stage of the process.
Cart Internet web page Blurb Module:
- Icon Color (Desktop): #f6c6c5
- Icon Color (Hover): #9fa2ce
Add Timeline Dividers
Once we’ve created and styled our Blurb Module, we will get started together with and styling our Divider Modules. We use the Divider Module in columns two and four of our row.
Style Timeline Dividers
Next, we will add our styling to our Divider Modules.
Divider Settings
Visibility:
- Show Divider: Positive
Line:
- Line Color: #354e7c
- Line Style: Dotted
- Line Position: Vertically Centered
Sizing
- Divider Weight: 5px
Let’s use every other actually cool Divi characteristic to reproduction and paste the types of this Divider Module to the other module inside of our row. First, we’re going to right-click on our completed Divider Module. Secondly, we’re going to click on on Copy Module Settings. Next, we right-click on the Divider Module that is not too long ago unstyled. In spite of everything, we click on on Paste Module Settings. Time saved is time earned!
Together with Custom designed CSS
That’s what our WooCommerce cart timeline turns out like presently:
To make certain that our Divider Modules are aligned as it should be and to make our timeline module mobile-responsive, we’re going as a way to upload some CSS to our row.
To be able to upload our Custom designed CSS, we first need to enter the Row Settings for our WooCommerce Cart Timeline. Next, we make a choice the Complicated Tab. In spite of everything, we will add the following CSS to the Main Phase:
Custom designed CSS:
display:flex; align-items: heart; justify-content: heart; flex-wrap: nowrap;
Once we’ve added this to the Row Settings, we click on at the golfing inexperienced checkmark to save some our settings.
Final Customization for Mobile Responsiveness
One excellent advantage of Divi is the fact that you’ll be capable to customize various portions relatively deeply. We need to make one final edit to the final Blurb Module inside the final column in our row. This modification will lend a hand it look upper on mobile and smaller screens. The fact that Divi allows us to get granular with our styling promises that our art work seems good for our customers along with our private web websites.
Know the way the final column, on mobile, is quite less than the other Blurb Modules. We’re going to change that! To try this, we’re going to enter the settings for the third and supreme module. Next, we’re going to seek advice from Spacing > Margin. We’re going to depart the margin for the desktop view. Alternatively, we’re going to add a bottom margin of 15px for pills.
In spite of everything, we’re going as a way to upload a bottom margin of 21px for mobile gadgets.
Now, we’ve a in reality mobile responsive Woocommerce cart timeline that we will use to guide shoppers from retailer to checkout.
Atmosphere Up the Checkout Internet web page
We’ve got set the foundation for our WooCommerce cart waft timeline on our cart internet web page. Alternatively, we need to entire our timeline by the use of together with the art work that we’ve finished to our checkout internet web page template. We’ll be using Divi’s OG feature, the Proper-Click on Menu to help make our process for the checkout internet web page easier. Let’s get started!
Copy WooCommerce Cart Drift Timeline from Cart Internet web page
We’ll be going once more to the cart internet web page. Alternatively, we won’t be coming into into the Divi Builder for the body.
Right kind-click on the Custom designed Body of the cart template. Next, click on on on the Copy selection from the right-click menu.
Now that we have copied the art work that we did throughout the cart template, we will now paste this into the checkout template. To try this, we right-click on the Add Custom designed Body button throughout the checkout internet web page template. After you have finished this, the menu will show the strategy to Paste. Click on on on Paste to copy the Custom designed Body from the cart internet web page template to the checkout internet web page template.
Now, you’ll see that each and every the cart and the checkout internet web page templates have a custom designed body. This will every so often lend a hand us save time on our internet design procedure. Thanks, Divi 🙂 To avoid wasting numerous our changes throughout the checkout template, we’ll click on at the golfing inexperienced Save Changes button at the height of the builder.
Substitute Checkout Internet web page Template
Now that we’ve shaved some time off of our design process, let’s do the overall edits to the checkout internet web page to make certain that it actually works well with the rest of our problem. First, click on at the pencil icon to edit the Custom designed Body of the checkout internet web page template.
Style Checkout Icon
Let’s get started styling our checkout icon. Click on on on the gear icon which is in a position to open the Module Settings of the checkout icon.
Switch to the Design tab of the Module Settings module. Click on on on the Image & Icon title. We will be bettering the icon color. As such, click on on on the eyedropper icon and enter the hex code #f6c6c5. This will every so often make the icon the pink color that we’re using to suggest the existing internet web page.
Substitute Cart Icon
We will need to go back and exchange the icon color of the cart icon. To try this, we’re going to go back to the module settings of the module. Next, we click on at the gear icon of the cart icon.
Over again, we will switch to the Design tab of the module settings. Next, underneath the Image & Icon title, click on on on the eyedropper device. Next, add the hex code #eac989.
Take into accout to save your settings and your entire exhausting art work upon getting exited the Divi Builder.
Putting it All Together
While we’ve focused this instructional on building the cart timeline, there are different WooCommerce modules used to complete the template. For this instructional, we used the FREE Divi Toy Retailer Format Pack as the root for the styling. Listed below are the other WooCommerce modules that you simply’ll need to add to each template internet web page to complete your store.
Cart Internet web page Template
- Woo Cart Products: This will every so often display the WooCommerce cart
- Woo Cart Totals: Show off the subtotal, taxes, and further with this module
Checkout Internet web page Template
- Woo Perceive Module: We use this module to show any errors, wisdom or notices that relate to checking out
- Woo Checkout Billing: This module will color the billing details of your customers
- Woo Checkout Details: Against this to the cart totals, this module will show the real product names, quantity, and further
- Woo Checkout Billing: To show available price methods, we’ve this module added to the checkout internet web page
In Conclusion
Having a cart timeline supplies a visual representation of the process that your customers take on your store. With Divi, you will have the facility to customize and create an added piece to your WooCommerce store. Divi will give you the apparatus so to take what you’ve found out correct right here to your private consumer and personal web websites. I’d love to hear from you for many who use this instructional inside the wild!
The put up How one can Design a WooCommerce Cart Float Timeline for Your Divi appeared first on Sublime Topics Weblog.
Contents
- 1 Download The Cart & Checkout Template for FREE
- 2 Download For Unfastened
- 3 You have to have successfully subscribed. Please check your electronic mail take care of to verify your subscription and get get right to use to loose weekly Divi structure packs!
- 4 How you can Download & Arrange the Cart & Checkout Templates
- 5 How you can Create the WooCommerce Cart Timeline from Scratch
- 6 Let’s Get began Development the WooCommerce Cart Drift Timeline
- 7 Atmosphere Up the Checkout Internet web page
- 8 Putting it All Together
- 9 In Conclusion
- 10 5 Techniques to Set up More than one Variations of PHP
- 11 PHP orkers vs PHP reminiscence prohibit: perceive the adaptation
- 12 Learn how to Arrange a New Divi Web site on Cloudways in Mins
0 Comments