crochet dans WooCommerce panier et la caisse

Question

Je suis en train d'obtenir un processus barre au-dessus et panier dans la caisse Wordpress comme dans cette image:

J'ai essayé de marché avoisinant accrocher dans les deux pages sur functions.php Mais peut-être que je fais ça. de toute évidence mal (je suis débutant), comme cette page est en baisse, quand je mets en œuvre le code suivant:

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>' 
} 

Quel est le problème avec ce code? S'il vous plaît aidez-moi à entrer dans cette logique. Je vous remercie! :-)

Answer 1

J'ai trouvé une 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>'; 
} 

CSS personnalisée sur valider mon panier:

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; 
    } 
} 

finit comme ça