請(qǐng)幫助我，我想在我的 WordPress 網(wǎng)站上顯示帶有自定義文本和圖標(biāo)的 woocommerce 購(gòu)物車。我使用此源代碼作為參考：https ://docs.woocommerce.com/document/show-cart-contents-total/我在前端顯示它，它看起來(lái)像上面鏈接中的源代碼，但我想用里面的圖標(biāo)顯示它，我還想更改文本，將其更改為“產(chǎn)品”而不是'項(xiàng)目'這是我嘗試顯示該圖標(biāo)和更改后的文本的代碼，請(qǐng)幫助我：<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; }
1 回答
搖曳的薔薇
TA貢獻(xiàn)1793條經(jīng)驗(yàn) 獲得超6個(gè)贊
這是標(biāo)記的快速示例。您需要使用 css 進(jìn)行樣式設(shè)置。
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);
}
}
}
}
}
- 1 回答
- 0 關(guān)注
- 176 瀏覽
添加回答
舉報(bào)
0/150
提交
取消