du13520157325 2017-06-28 05:20
浏览 90
已采纳

挂入woocommerce购物车和结帐

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

enter image description here

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! :-)

  • 写回答

1条回答 默认 最新

  • douping1993 2017-08-08 23:49
    关注

    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 enter image description here

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀