How to Design a WooCommerce Cart Flow Timeline for Your Divi

by | Jan 31, 2023 | Etcetera | 0 comments

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

Divi Toy Store Cart with Cart Flow Timeline - Cart Template

Pill and Cellular View

WooCommerce Cart Page Timeline Tablet and Mobile View

Checkout Web page Template

Divi Toy Store Checkout Page with Cart Flow Timeline - Checkout Template

Pill and Cellular View

Divi Toy Store Checkout Page in tablet and mobile

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.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:ahead of { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:ahead of, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:ahead of { border-top-color: clear !essential; border-left-color: #ffffff !essential; }
@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;}

Download For Free

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.

Open Divi Theme Builder

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.

Import the template into the Divi Theme Builder

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.

Finish importing the template into the Divi Theme Builder

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.

Save Theme Builder Changes for WooCommerce Templates

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:

See also  How you can Use chown in Linux

Cart Web page

WooCommerce cart timeline on the cart page

Checkout Web page

WooCommerce cart timeline on the checkout page

This Woocommerce cart timeline for Divi may be cellular responsive. It remains as a horizontal timeline on cellular gadgets:

WooCommerce timeline on mobile

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.

Open Divi Theme Builder

Create Cart Template

Click on at the plus icon throughout the Upload New Template card.

Create Cart Template

Subsequent, make a selection Construct New Template.

Select Build 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.

Finish Create Cart Template

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.

Create Cart Template

Once more, make a selection Construct New Template.

Select Build 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.

Save Templates and Assignments

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.

Add Body to Cart Page Template

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.

Add Body to Cart Page Template

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.

Add a new row with five columns

Upload Blurb Modules

Upload 3 Blurb Modules to columns 1, 3, and 5 of your new row.

Add Blurb Modules to columns

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:

The WooCommerce cart timeline without styling

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.

Adding Links to Shop Blurb

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.

Add links to the Blurb Modules in the checkout timeline process

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.

See also  WordPress applications.php Document: The Final Information + Useful Code Snippets

Add /shop link to link to the default WooCommerce Shop page link

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.

Add link to Cart Blurb Module

For the ultimate Blurb Module, the Checkout Blurb Module, we can be linking to the default WooCommerce checkout web page hyperlink which is /checkout.

Add link to the WooCommerce standard Checkout Page link

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

Blurb Icon Color

  • Identify Textual content:
    • Identify Heading Textual content: H4
    • Identify Font: Baskerville
    • Identify Font Weight: Daring
    • Identify Textual content Colour: #354e7c

Blurb title text styling

Turn into:

  • Turn into Scale (Desktop): 100%
  • Turn into Scale (Hover): 115%

Blurb Transform Settings

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.

Extending Blurb Module styling to all the blurbs in our section

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.

Extending Blurb Module styling to all the blurbs in our section

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.

Updating current page Blurb Module color

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.

Add dividers to WooCommerce cart timeline

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

Settings for the Divider Modules

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!

Copy and paste module styles for the Divider Modules

Including Customized CSS

That is what our WooCommerce cart timeline looks as if at this time:

WooCommerce Cart Checkout Timeline

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.

WooCommerce Cart Timeline row with custom CSS

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.

Editing padding, margin and CSS for columns

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.

Add a bottom margin to your Blurb Module

In any case, we’re going so as to add a backside margin of 21px for cellular gadgets.

Add a bottom margin to your Blurb Module for mobile devices

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!

See also  What’s a Flash Sale in Ecommerce? 6 of Our Favourite Examples

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.

Prepare the cart body for the checkout page

Proper-click at the Customized Frame of the cart template. Subsequent, click on at the Replica choice from the right-click menu.

Right click, copy the body template from the cart template, to the checkout template

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.

Right click to paste the body content of the cart 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.

Save changes for the body template of the checkout page

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.

Edit checkout custom body module

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.

Edit 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.

Update checkout icon color

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.

Update the cart icon color on the checkout page template

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. 

Updated cart icon color on the checkout page template

Bear in mind to save your settings and your entire onerous paintings after you have exited the Divi Builder.

Save all changes

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

Overview of the cart pages with the other Woo modules

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

Overview of the checkout pages with the other Woo modules

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.

WordPress Maintenance Plans | WordPress Hosting

Contents

read more

0 Comments

Submit a Comment

DON'T LET YOUR WEBSITE GET DESTROYED BY HACKERS!

Get your FREE copy of our Cyber Security for WordPress® whitepaper.

You'll also get exclusive access to discounts that are only found at the bottom of our WP CyberSec whitepaper.

You have Successfully Subscribed!