如何使用 php 显示 woocommerce 购物车，但通过添加图标和更改文本来自定义它

Question

请帮助我，我想在我的 WordPress 网站上显示带有自定义文本和图标的 woocommerce 购物车。我使用此源代码作为参考：https ://docs.woocommerce.com/document/show-cart-contents-total/我在前端显示它，它看起来像上面链接中的源代码，但我想用里面的图标显示它，我还想更改文本，将其更改为“产品”而不是'项目'这是我尝试显示该图标和更改后的文本的代码，请帮助我：<a class="cart-customlocation" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php echo sprintf ( _n( '<i class="fa fa-cart"></i>Cart  %d product', '<i class="fa fa-cart"></i>Cart  %d products s', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> - <?php echo WC()->cart->get_cart_total(); ?></a>function.php 中的代码：add_filter( 'woocommerce_add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment'  );function woocommerce_header_add_to_cart_fragment( $fragments ) {global $woocommerce;ob_start();?><a class="cart-customlocation" href="<?php echo esc_url(wc_get_cart_url()); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a><?php$fragments['a.cart-customlocation'] = ob_get_clean();return $fragments; }

Answer 1

这是标记的快速示例。您需要使用 css 进行样式设置。

html/php

<a href="<?php echo wc_get_cart_url(); ?>" class="basketicon" title="<?php _e( 'View your shopping cart' ); ?>">

    <span class="basketicon__icon"></span>

    <span class="basketicon__total">

        <?php echo sprintf ( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> - <?php echo WC()->cart->get_cart_total(); ?>

    </span>

</a>

CSS/SASS

.basketicon{

    margin: 0 30px 0 0;

    padding: 0 30px 0 0;

    display: inline-flex;

    align-items: center;

    position: relative;

    @media (min-width: $lg){

        margin: 0 30px 0 0;

        padding: 0 30px 0 0;

    }

    &::before{

        @media (min-width: $lg){

            content: '';

            position: absolute;

            right: -10px;

            width: 20px;

            height: 1px;

            background: #fff;

        }

    }

    &__icon{

        &::before{

            content: url(../images/basket.svg);

            height: 10px;

            width: 10px;

            display: block;

        }

    }

    &__total{

        display: none;

        color: #fff;

        font-size: rem(16);

        margin: 0 0 0 10px;

        @media (min-width: $lg){

            font-size: rem(12);

            display: inline-block;

        }

        @media (min-width: $xl){

            font-size: rem(14);

        }

        @media (min-width: $xxxl){

            font-size: rem(15);

        }

    }

    &:hover,

    &:focus{

        .basketicon{

            &__icon{

                &::before{

                    transform: scale(0.8);

                }

            }

        }

    }

}