连接到 woocommerce 购物车并结帐

Question

我正在尝试在 Wordpress 中的购物车和结帐上方设置一个流程栏，如下图所示：

因此我尝试在 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>'
}

这段代码有什么问题吗？请帮助我进入这个逻辑。谢谢！ :-)

Answer 1

我找到了解决方案：

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

结局是这样的

连接到 woocommerce 购物车并结帐

hook into woocommerce cart and checkout

php

wordpress

hook

woocommerce

hook-woocommerce