2017-06-28 53 views
1

我想获得上述车和结算在WordPress的一个过程吧像这样的画面:勾成woocommerce车和结算

enter image description here

为此我试图钩到上的functions.php两个页面 但也许我在做某事。显然是错误的(我是初学者),因为这个页面了,当我执行下面的代码:

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

哪些错误与代码?请帮我进入这个逻辑。谢谢! :-)

回答

2

我发现了一个解决方案:

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上车和结帐:

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

结束了这样 enter image description here