Woocommerce更改购物车图标

Question

如何更改Woocommerce购物车图标？我正在使用主题Ellie，并且他们的购物车图标令人困惑，只有一个圆圈。那我该怎么改变呢？

非常感谢您的帮助！

Cart icon

https://senjacosmetics.com/shop/

Answer 1

您可以通过CSS中的以下代码通过CSS更改购物车图标

.site-header-cart .cart-toggler .cart-contents {
	content: '';
	background: url('URL_TO_YOUR_CART_IMAGE') no-repeat center center;
	background-size: contain;
	width: 20px;
	height: 20px;
	margin: -2px -4px;
	display: inline-block;
}

将URL_TO_YOUR_CART_IMAGE替换为购物车图标的URL。

Answer 2

使它更容易使用而不使用图像。在此之前添加一个伪类：

删除边框：

.site-header-cart .cart-toggler .cart-contents {border:0px;}    

然后添加：

.site-header-cart .cart-toggler .cart-contents:before { 
content: "\f07a";
font-family: FontAwesome!important;
}

将此添加到您的Child主题中，或转到“定制器”并将其添加到Extra CSS部分

Answer 3

希望以下代码会有所帮助：请检查屏幕截图

.site-header-cart .cart-toggler .cart-contents:after {
    content: "";
    font-family: FontAwesome;
    margin-left: 14px;
}

.site-header-cart .cart-toggler .cart-contents .count {
    line-height: 15px;
    text-align: center;
    font-size: 12px;
    display: block;
    width: 100%;
    height: 100%;
    font-weight: normal;
    position: absolute;