如何使用php显示woocommerce购物车，但如何通过添加图标并更改文本来对其进行自定义

问题描述

请帮助我，我想在我的WordPress网站上显示带有自定义文本和图标的woocommerce购物车。我正在使用此源代码作为参考：https://docs.woocommerce.com/document/show-cart-contents-total/

我正在前端上显示它，它看起来像上面链接中的源代码，但是我想在其中使用图标显示它，并且我也想将文本更改为'products而不是“项目”

这是我尝试显示该图标和更改的文本的代码，请帮助我：

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

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

解决方法

这是标记的简单示例。您需要使用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);
                }
            }
        }
    }
}