如何使用 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' ); ?>">&nbsp; &nbsp; <span class="basketicon__icon"></span>&nbsp; &nbsp; <span class="basketicon__total">&nbsp; &nbsp; &nbsp; &nbsp; <?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(); ?>&nbsp; &nbsp; </span></a>CSS/SASS.basketicon{&nbsp; &nbsp; margin: 0 30px 0 0;&nbsp; &nbsp; padding: 0 30px 0 0;&nbsp; &nbsp; display: inline-flex;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; @media (min-width: $lg){&nbsp; &nbsp; &nbsp; &nbsp; margin: 0 30px 0 0;&nbsp; &nbsp; &nbsp; &nbsp; padding: 0 30px 0 0;&nbsp; &nbsp; }&nbsp; &nbsp; &::before{&nbsp; &nbsp; &nbsp; &nbsp; @media (min-width: $lg){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right: -10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 1px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #fff;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; &__icon{&nbsp; &nbsp; &nbsp; &nbsp; &::before{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: url(../images/basket.svg);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; &__total{&nbsp; &nbsp; &nbsp; &nbsp; display: none;&nbsp; &nbsp; &nbsp; &nbsp; color: #fff;&nbsp; &nbsp; &nbsp; &nbsp; font-size: rem(16);&nbsp; &nbsp; &nbsp; &nbsp; margin: 0 0 0 10px;&nbsp; &nbsp; &nbsp; &nbsp; @media (min-width: $lg){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: rem(12);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @media (min-width: $xl){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: rem(14);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @media (min-width: $xxxl){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: rem(15);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; &:hover,&nbsp; &nbsp; &:focus{&nbsp; &nbsp; &nbsp; &nbsp; .basketicon{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &__icon{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &::before{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: scale(0.8);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}