hook into woocommerce cart and checkout

Question

I am trying to get a process-bar above cart and checkout in Wordpress like in this picture:

Therefor I tried to hook into both pages on functions.php But maybe I am doing sth. obviously wrong (I am beginner), as this page is down, when I implement the following code:

add_action( 'woocommerce_before_cart', 'process_a');
function process_a() {
    echo '<span class="warenkorb">1. Warenkorb</span> <a href="https://www.example.de/checkout"><span class="kasse">2. Kasse</span></a>'
}

add_action( 'woocommerce_before_checkout_form', 'process_b');
function process_b() {
    echo '<a href="http://www.example.de/cart"><span class="warenkorb">1. Warenkorb</span></a> <span class="kasse">2. Kasse</span>'
}

Whats wrong with that code? Please help me getting into this logic. Thank you! :-)

Answer 1

I found a Solution:

 add_action( 'woocommerce_before_cart', 'process_a');
function process_a() {
echo '<ul class="breadcrumb-checkout"><li class="active"><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> <span class="breadcrumb_text">Warenkorb</span></a></li><li><a href="https://YOURSITE.com/kasse"><i class="fa fa-credit-card" aria-hidden="true"></i> <span class="breadcrumb_text">Kasse</span></a></li><li><a href="#"><i class="fa fa-check" aria-hidden="true"></i> <span class="breadcrumb_text">Bestellbestätigung</span></a></li></ul>';
}

add_action( 'woocommerce_before_checkout_form', 'process_b');
function process_b() {
echo '<ul class="breadcrumb-checkout"><li><a href="https://YOURSITE.com/warenkorb"><i class="fa fa-shopping-cart" aria-hidden="true"></i> <span class="breadcrumb_text">Warenkorb</span></a></li><li class="active"><a href="#"><i class="fa fa-credit-card" aria-hidden="true"></i> <span class="breadcrumb_text">Kasse</span></a></li><li><a href="#"><i class="fa fa-check" aria-hidden="true"></i> <span class="breadcrumb_text">Bestellbestätigung</span></a></li></ul>';
}

Custom CSS on Cart and Checkout:

ul.breadcrumb-checkout {
    margin: 0px 10px 20px;
}

ul.breadcrumb-checkout li {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    width: 200px;
    margin: 5px 10px 0 0;
    position: relative;
    text-align:center;
}

ul.breadcrumb-checkout li:before {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    left: -2px;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #fff;
    z-index: 0;
}

ul.breadcrumb-checkout li:first-child:before {
    border-color: transparent;
}

ul.breadcrumb-checkout li a:after {
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    right: -15px;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #F3F3F3;
    z-index: 10;
}

ul.breadcrumb-checkout li.active a {
    background: #009DD9;
    z-index: 100;
    color: white;
}

ul.breadcrumb-checkout li.active a:after {
    border-left-color: #009DD9;
}

ul.breadcrumb-checkout li a {
    display: block;
    background: #F3F3F3;
}

ul.breadcrumb-checkout li a:hover {
    background: #3CA6DE;
}

ul.breadcrumb-checkout li a:hover:after {
    border-color: transparent transparent transparent #3CA6DE; 
}

.breadcrumb-checkout a {
    text-decoration: none;
    color: #817D7D;
}

.breadcrumb-checkout{
    text-align:center;
}

@media (max-width:680px){
    .breadcrumb_text{
        display:none;
    }
    ul.breadcrumb-checkout li{
        width: 80px;
    }
}

Ends up like this