Woocommerce 更改购物车图标答案

【问题标题】：Woocommerce change shopping cart iconWoocommerce 更改购物车图标
【发布时间】：2018-10-31 11:09:03
【问题描述】：

如何更改 Woocommerce 购物车图标？我使用的是 Ellie 主题，他们的购物车图标很混乱，只有一个圆圈。那我该如何改变呢？

非常感谢任何帮助！

Cart icon

https://senjacosmetics.com/shop/

【问题讨论】：

标签： wordpress woocommerce

【解决方案1】：

在不使用图像的情况下使其更容易。添加一个伪类：之前像这样：

移除边框：

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

然后添加：

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

将此添加到您的子主题或转到您的定制器并将其添加到额外的 CSS 部分

【讨论】：

太棒了，我尝试了最后一个建议，它奏效了。 :) 也许稍后我会尝试更改图标。
很乐意提供帮助，但问题不是更改图标吗？

【解决方案2】：

希望以下代码对您有所帮助：请查看截图

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

【讨论】：

为什么要使用 :after 伪？然后添加额外的边距？
@Solomax，使用 before 将无法实现屏幕截图中显示的确切设计。你可以在 Stylebot 中使用我的代码来理解。有任何问题请告诉我。

【解决方案3】：

您可以通过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。

【讨论】：