WooCommerce is one in every of WordPress’ maximum loved eCommerce plugins. To enhance this, Divi got here out with a number of new Woo-centric modules that let you bigger regulate over designing your default WooCommerce pages. In as of late’s put up, we can paintings via growing a WooCommerce cart timeline for Divi. For this timeline, we’ll be growing a visible illustration of the consumer adventure. We need to visually display the consumer how they transfer from store to checkout.
Cart Web page Template
Desktop View
Pill and Cellular View
Checkout Web page Template
Pill and Cellular View
Obtain The Cart & Checkout Template for FREE
To put your fingers at the loose cart & checkout template, you’re going to first want to obtain them the use of the button underneath. To achieve get entry to to the obtain it is very important subscribe to our publication by way of the use of the shape underneath. As a brand new subscriber, you’re going to obtain much more Divi goodness and a loose Divi Structure pack each Monday! In case you’re already at the listing, merely input your e mail deal with underneath and click on obtain. You are going to now not be “resubscribed” or obtain further emails.
@media best display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of { border-top-color: #ffffff !essential; border-left-color: clear !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { shade: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:ahead of { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .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 robust { 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 robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}

Obtain For Loose
Sign up for the Divi E-newsletter and we can e mail you a replica of without equal Divi Touchdown Web page Structure Pack, plus heaps of alternative wonderful and loose Divi assets, pointers and methods. Apply alongside and you’re going to be a Divi grasp very quickly. If you’re already subscribed merely kind for your e mail deal with underneath and click on obtain to get entry to the format pack.
You’ve effectively subscribed. Please test your e mail deal with to substantiate your subscription and get get entry to to loose weekly Divi format packs!
The way to Obtain & Set up the Cart & Checkout Templates
Pass to Divi Theme Builder
To add the template, navigate to the Divi Theme Builder within the backend of your WordPress site.
Add International Default Web site Template
Then, within the height correct nook, you’ll see an icon with two arrows. Click on at the icon.
Navigate to the import tab, add the JSON record which you have been in a position to obtain on this put up, and click on on ‘Import Divi Theme Builder Templates.
Save Divi Theme Builder Adjustments
While you’ve uploaded the record, you’ll understand a brand new cart, checkout, and store template. Save the Divi Theme Builder adjustments once you need the templates to be activated.
The way to Create the WooCommerce Cart Timeline from Scratch
If you need somewhat extra of a problem, the following a part of our weblog put up will display you how one can recreate the WooCommerce cart timeline for Divi. You’ll use the stairs on this educational to customise your individual cart timeline. Use it as inspiration on your subsequent WooCommerce and Divi undertaking! The WooCommerce cart timeline that we’ll be growing looks as if this:
Cart Web page
Checkout Web page
This Woocommerce cart timeline for Divi may be cellular responsive. It remains as a horizontal timeline on cellular gadgets:
Now that we’ve got a visible information as to what we’ll be construction, let’s get began!
Setup the Divi Theme Builder
We can be growing those templates to have an effect on the cart and checkout pages of WooCommerce. As such, we commence our job within the Divi Theme Builder.
Create Cart Template
Click on at the plus icon throughout the Upload New Template card.
Subsequent, make a selection Construct New Template.
After, you’ll be introduced with a modal field of the entire quite a lot of assignments that you’ll be able to connect to the brand new template that you simply’re growing. In our case, we’ll be making a template for the cart web page of our WooCommerce retailer. So, scroll down the modal field, and make a selection Cart beneath the WooCommerce heading. As soon as, decided on, click on Create Template. Once we do that, we’re assigning the newly created template to the cart web page.
Create Checkout Template
We can be going via the similar steps to create the checkout template. Click on at the plus icon throughout the Upload New Template card.
Once more, make a selection Construct New Template.
For the checkout web page, we’ll want to scroll down the modal field, and make a selection Checkout beneath the WooCommerce heading. As soon as, decided on, click on Create Template.
Save Templates and Assignments
Now that our cart and checkout templates were created, we will save them. Click on at the inexperienced Save Adjustments button on the height of the Divi Theme Builder.
Let’s Get started Construction the WooCommerce Cart Go with the flow Timeline
Atmosphere Up the Cart Web page Template
Now the thrill starts! We’re going to start out growing our cart waft timeline for the cart web page. To do that, we click on at the Upload Customized Frame button throughout the Cart template that we simply created.
Very similar to after we create those templates and their assignments, we’re going to click on at the Construct Customized Frame button that looks within the modal field.
Upload a New Phase and Row
Now that we’re within the Divi Builder, we’re going so as to add a brand new row. This row could have 5 columns.
Upload Blurb Modules
Upload 3 Blurb Modules to columns 1, 3, and 5 of your new row.
Here’s the content material for every Blurb Module that we can be the use of:
First Blurb (Column 1)
- Identify: Store
- Frame: Go away empty
- Use Icon: Sure
- Icon: See screenshot underneath
- Module Hyperlink URL: /store (Or your customized hyperlink for your store web page)
2d Blurb (Column 3)
- Identify: Overview
- Frame: Go away empty
- Use Icon: Sure
- Icon: See screenshot underneath
- Module Hyperlink URL: /cart (Or your customized hyperlink for your cart web page)
3rd Blurb (Column 5)
- Identify: Checkout
- Frame: Go away empty
- Use Icon: Sure
- Icon: See screenshot underneath
- Module Hyperlink URL: /checkout (Or your customized hyperlink for your checkout web page)
Now, our WooCommerce timeline will appear to be this at this level:
Including Hyperlinks to Blurbs
As we’re growing templates for the cart and checkout web page, we’d like our Blurb Modules to be simple to get entry to regardless of which pages buyer land on. A core function of the WooCommerce timeline is that the tip consumer – your buyer – will be capable of simply navigate between the quite a lot of levels of the checkout procedure. So as to add the hyperlink to the default store, cart, and checkout pages of our website, we can first input the module settings of the primary blurb, store.
As soon as the module’s settings field seems, we’re going to scroll right down to the Hyperlink heading. We’ll be including the hyperlink to the Module Hyperlink URL field as a result of this may increasingly make certain that without reference to the place your customized clicks – whether or not it’s the Blurb Identify or the icon itself – they’re going to be directed to the web page that they want to navigate to.
We’ll be including the hyperlinks to the usual WooCommerce pages to every Blurb Module. When you’ve got created customized hyperlinks for those pages for your WooCommerce set up, alter the hyperlinks accordingly. First, we commence with the Store Blurb Module. For the Module Hyperlink URL, we input /store. That is the default URL for the store web page in WooCommerce. Bear in mind, if in case you have modified this URL, input your customized URL right here as a substitute.
Click on the golf green checkmark button to save lots of your adjustments. Subsequent, we transfer to the Overview Blurb Module. This module serves because the hyperlink to the cart web page. Once more, we navigate to the Hyperlink tab, after which we upload the Module Hyperlink URL /cart, to the Module URL.
For the ultimate Blurb Module, the Checkout Blurb Module, we can be linking to the default WooCommerce checkout web page hyperlink which is /checkout.
Taste Blurb Modules
Subsequent, we can start to taste our added Blurb Modules. We can be the use of hover kinds at the modules. This is helping with the consumer revel in (UX) of the WooCommerce cart timeline. We wish the Blurb Module that represents the web page that we’re these days directly to be a distinct shade. And, we additionally need the icon to magnify after we hover over it and alter shade.
Blurb Module Styling
- Icon Colour: #eac989
- Hover Icon Colour: #9fa2ce
- Textual content Alignment: Middle
- Identify Textual content:
- Identify Heading Textual content: H4
- Identify Font: Baskerville
- Identify Font Weight: Daring
- Identify Textual content Colour: #354e7c
Turn into:
- Turn into Scale (Desktop): 100%
- Turn into Scale (Hover): 115%
Once we’ve set the design settings for the primary Blurb Module, we’re going to increase them to the opposite Blurb Modules in our row.
We need to lengthen our kinds best to Blurb Modules inside our phase. That is essential to notice particularly if you’re running on a web page that already has content material inside.
Styling the Cart Blurb Module
To indicate the other levels of the checkout procedure, we’re going to present a distinct icon shade to the present level that our consumer is on. As an example, if they’re at the cart web page, we’ll trade the colour of the Blurb Module referencing the cart level of the method.
Cart Web page Blurb Module:
- Icon Colour (Desktop): #f6c6c5
- Icon Colour (Hover): #9fa2ce
Upload Timeline Dividers
As soon as we’ve got created and styled our Blurb Module, we can start including and styling our Divider Modules. We use the Divider Module in columns two and 4 of our row.
Taste Timeline Dividers
Subsequent, we can upload our styling to our Divider Modules.
Divider Settings
Visibility:
- Display Divider: Sure
Line:
- Line Colour: #354e7c
- Line Taste: Dotted
- Line Place: Vertically Targeted
Sizing
- Divider Weight: 5px
Let’s use another really cool Divi feature to copy and paste the styles of this Divider Module to the opposite module inside our row. First, we’re going to right-click on our finished Divider Module. Secondly, we’re going to click on Replica Module Settings. Subsequent, we right-click at the Divider Module this is these days unstyled. In any case, we click on Paste Module Settings. Time stored is time earned!
Including Customized CSS
That is what our WooCommerce cart timeline looks as if at this time:
To make certain that our Divider Modules are aligned as it should be and to make our timeline module mobile-responsive, we’re going so as to add some CSS to our row.
So as to add our Customized CSS, we first want to input the Row Settings for our WooCommerce Cart Timeline. Subsequent, we make a selection the Complicated Tab. In any case, we can upload the next CSS to the Primary Part:
Customized CSS:
show:flex; align-items: heart; justify-content: heart; flex-wrap: nowrap;
After we’ve added this to the Row Settings, we click on the golf green checkmark to save lots of our settings.
Ultimate Customization for Cellular Responsiveness
One wonderful good thing about Divi is the truth that you’ll be able to customise quite a lot of components relatively deeply. We want to make one ultimate edit to the ultimate Blurb Module within the ultimate column in our row. This modification will assist it glance higher on cellular and smaller displays. The truth that Divi lets in us to get granular with our styling guarantees that our paintings appears to be like excellent for our shoppers in addition to our personal web pages.
Understand how the ultimate column, on cellular, is fairly less than the opposite Blurb Modules. We’re going to modify that! To do that, we’re going to input the settings for the 3rd and ultimate module. Subsequent, we’re going to visit Spacing > Margin. We’re going to go away the margin for the desktop view. On the other hand, we’re going to upload a backside margin of 15px for drugs.
In any case, we’re going so as to add a backside margin of 21px for cellular gadgets.
Now, we’ve got a actually cellular responsive Woocommerce cart timeline that we will use to lead customers from store to checkout.
Atmosphere Up the Checkout Web page
We now have set the root for our WooCommerce cart waft timeline on our cart web page. On the other hand, we want to whole our timeline by way of including the paintings that we’ve accomplished to our checkout web page template. We’ll be the use of Divi’s OG function, the Right-Click Menu to help in making our procedure for the checkout web page more uncomplicated. Let’s get began!
Replica WooCommerce Cart Go with the flow Timeline from Cart Web page
We’ll be going again to the cart web page. On the other hand, we gained’t be coming into into the Divi Builder for the frame.
Proper-click at the Customized Frame of the cart template. Subsequent, click on at the Replica choice from the right-click menu.
Now that we’ve got copied the paintings that we did throughout the cart template, we can now paste this into the checkout template. To do that, we right-click at the Upload Customized Frame button throughout the checkout web page template. Upon getting accomplished this, the menu will display the solution to Paste. Click on on Paste to duplicate the Customized Frame from the cart web page template to the checkout web page template.
Now, you’ll see that each the cart and the checkout web page templates have a customized frame. This may increasingly assist us save time on our web design process. Thank you, Divi 🙂 To avoid wasting our adjustments throughout the checkout template, we’ll click on the golf green Save Adjustments button on the height of the builder.
Replace Checkout Web page Template
Now that we’ve shaved some break day of our design procedure, let’s do the overall edits to the checkout web page to make certain that it really works neatly with the remainder of our undertaking. First, click on the pencil icon to edit the Customized Frame of the checkout web page template.
Taste Checkout Icon
Let’s start styling our checkout icon. Click on at the tools icon which is able to open the Module Settings of the checkout icon.
Transfer to the Design tab of the Module Settings module. Click on at the Symbol & Icon name. We can be modifying the icon shade. As such, click on at the eyedropper icon and input the hex code #f6c6c5. This may increasingly make the icon the purple shade that we’re the use of to indicate the present web page.
Replace Cart Icon
We can want to return and replace the icon shade of the cart icon. To do that, we’re going to return to the module settings of the module. Subsequent, we click on the tools icon of the cart icon.
Once more, we can transfer to the Design tab of the module settings. Subsequent, beneath the Symbol & Icon name, click on at the eyedropper software. Subsequent, upload the hex code #eac989.
Bear in mind to save your settings and your entire onerous paintings after you have exited the Divi Builder.
Placing it All In combination
Whilst we’ve got centered this educational on construction the cart timeline, there are other WooCommerce modules used to finish the template. For this educational, we used the FREE Divi Toy Store Layout Pack as the muse for the styling. Listed below are the opposite WooCommerce modules that you simply’ll want to upload to every template web page to finish your retailer.
Cart Web page Template
- Woo Cart Merchandise: This may increasingly show the WooCommerce cart
- Woo Cart Totals: Exhibit the subtotal, taxes, and extra with this module
Checkout Web page Template
- Woo Understand Module: We use this module to turn any mistakes, knowledge or notices that relate to trying out
- Woo Checkout Billing: This module will shade the billing main points of your shoppers
- Woo Checkout Main points: In contrast to the cart totals, this module will display the true product names, amount, and extra
- Woo Checkout Billing: To turn to be had fee strategies, we’ve got this module added to the checkout web page
In Conclusion
Having a cart timeline provides a visible illustration of the method that your shoppers take for your retailer. With Divi, you’ve the ability to customise and create an added piece for your WooCommerce retailer. Divi will give you the gear as a way to take what you’ve discovered right here for your personal shopper and private web pages. I’d love to listen to from you for those who use this educational within the wild!
The put up How to Design a WooCommerce Cart Flow Timeline for Your Divi gave the impression first on Elegant Themes Blog.
Contents
- 1 Obtain The Cart & Checkout Template for FREE
- 2 Obtain For Loose
- 3 You’ve effectively subscribed. Please test your e mail deal with to substantiate your subscription and get get entry to to loose weekly Divi format packs!
- 4 The way to Obtain & Set up the Cart & Checkout Templates
- 5 The way to Create the WooCommerce Cart Timeline from Scratch
- 6 Let’s Get started Construction the WooCommerce Cart Go with the flow Timeline
- 7 Atmosphere Up the Checkout Web page
- 8 Placing it All In combination
- 9 In Conclusion
- 10 Laravel Eloquent Relationships: An Complex Information
- 11 The way to Cover a Folder on Mac
- 12 search engine marketing Matter Clusters — Tips on how to Construct a Content material Cluster Techni...
0 Comments