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

Question

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

我在前端展示它，它看起来像上面 link 的源代码，但我想用里面的图标展示它，我也想改变文本，为 'products' 而不是 'items'

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

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

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

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

How to show woocommerce shopping cart with php but customize it by adding an icon and changing the text

php

wordpress

woocommerce

hook-woocommerce

woocommerce-theming