AeroCheckout- Custom WooCommerce Checkout Pages

  1. Home
  2. Docs
  3. AeroCheckout- Custom WooCommerce Checkout Pages
  4. Forms
  5. How to display Steps bar on Mobile view

How to display Steps bar on Mobile view

By default, the steps bar on ShopCheckout template is hidden due to keep the checkout form with less elements and distraction.
But you can add this custom CSS Snippet to display the Steps bar on mobile view like this –
For this  follow these easy steps
Step 1: Open the Custom CSS panel of your theme or a specific checkout template
Step 2: Paste this CSS in Custom CSS Panel
@media (max-width: 767px){
.wfacp_custom_breadcrumb {    display: block !important;}
.wfacp_custom_breadcrumb .wfacp_steps_sec ul li {padding-top:0px;}
.wfacp_custom_breadcrumb .wfacp_steps_sec ul{align-items:inherit;}
.wfacp_custom_breadcrumb .wfacp_steps_sec ul li:before {margin-top:4px;}
.wfacp_steps_sec ul li a{line-height:1.5}
}
Let us know if you stuck anywhere while doing this or any confusion.

How can we help?