WooCommerce原始价格的html结构(如果存在销售价格)是这样的。
<del>
<span class="woocommerce-Price-amount amount">
<bdi>
<span class="woocommerce-Price-currencySymbol">₪</span>49.90
</bdi>
</span>
</del>
现在,如果我在没有代码格式化程序的情况下粘贴下面的代码
49.90
你可以看到价格已经有了底线。
您想添加不同的设计还是<del>
price没有线路通过?
如果你有一个精确的html结构,但是你缺少了这一行,你可以将它添加到css中,如下所示。
.woocommerce .price del {
text-decoration: line-through; /* add !important if its still not showong */
}
如果你想添加对角线,你可以这样做
.woocommerce .price del {
position: relative;
text-decoration: none;
}
.woocommerce .price del:after {
content: \'\';
position: absolute;
display: block;
width: 100%;
height: 1px;
background-color: #000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-15deg);
}