How one can Design a WooCommerce Cart Float Timeline for Your Divi

by | Jan 31, 2023 | Etcetera | 0 comments

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

Divi Toy Store Cart with Cart Flow Timeline - Cart Template

Tablet and Mobile View

WooCommerce Cart Page Timeline Tablet and Mobile View

Checkout Internet web page Template

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

Tablet and Mobile View

Divi Toy Store Checkout Page in tablet and mobile

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.

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !very important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !very important; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:previous to { border-top-color: #ffffff !very important; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:previous to, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:previous to { border-top-color: transparent !very important; border-left-color: #ffffff !very important; }
@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 Free

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.

Open Divi Theme Builder

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.

Import the template into the Divi Theme Builder

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.

Finish importing the template into the Divi Theme Builder

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.

See also  New Starter Site For Plumbers (Quick Install)

Save Theme Builder Changes for WooCommerce Templates

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

WooCommerce cart timeline on the cart page

Checkout Internet web page

WooCommerce cart timeline on the checkout page

This Woocommerce cart timeline for Divi could also be mobile responsive. It stays as a horizontal timeline on mobile gadgets:

WooCommerce timeline on mobile

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.

Open Divi Theme Builder

Create Cart Template

Click on on on the plus icon throughout the Add New Template card.

Create Cart Template

Next, make a choice Assemble New Template.

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

Finish Create Cart Template

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.

Create Cart Template

Over again, make a choice Assemble New Template.

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

Save Templates and Assignments

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.

Add Body to Cart Page Template

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 Body to Cart Page Template

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 a new row with five columns

Add Blurb Modules

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

Add Blurb Modules to columns

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:

The WooCommerce cart timeline without styling

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.

Adding Links to Shop Blurb

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.

Add links to the Blurb Modules in the checkout timeline process

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.

See also  Upload Drop Caps in WordPress Posts

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

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.

Add link to Cart Blurb Module

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.

Add link to the WooCommerce standard Checkout Page link

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

Blurb Icon Color

  • Title Text:
    • Title Heading Text: H4
    • Title Font: Baskerville
    • Title Font Weight: Bold
    • Title Text Color: #354e7c

Blurb title text styling

Develop into:

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

Blurb Transform Settings

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.

Extending Blurb Module styling to all the blurbs in our section

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.

Extending Blurb Module styling to all the blurbs in our section

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.

Updating current page Blurb Module color

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.

Add dividers to WooCommerce cart timeline

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

Settings for the Divider Modules

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!

Copy and paste module styles for the Divider Modules

Together with Custom designed CSS

That’s what our WooCommerce cart timeline turns out like presently:

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 as a way to upload some CSS to our row.

WooCommerce Cart Timeline row with custom CSS

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.

Editing padding, margin and CSS for columns

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.

Add a bottom margin to your Blurb Module

In spite of everything, we’re going as a way to upload a bottom margin of 21px for mobile gadgets.

Add a bottom margin to your Blurb Module for mobile devices

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!

See also  Tips on how to To find Royalty Loose Pictures for Your WordPress Weblog Posts

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.

Prepare the cart body for the checkout page

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.

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

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.

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

Save changes for the body template of the checkout page

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.

Edit checkout custom body module

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.

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

Update checkout icon color

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.

Update the cart icon color on the checkout page template

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. 

Updated cart icon color on the checkout page template

Take into accout to save your settings and your entire exhausting art work upon getting exited the Divi Builder.

Save all changes

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

Overview of the cart pages with the other Woo modules

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

Overview of the checkout pages with the other Woo modules

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.

WordPress Web Design

[ continue ]

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!