<div> 使用 WordPress 函数在元素内部添加 HTML.php

Question

我想在WordPress/Woocommerce中的现有元素中添加一个带有类的div。我想把售价提高一点：)让我们从我现在拥有的开始：在此处输入图像描述

代码：

<ins>
<span class="woocommerce-Price-amount amount">
<bdi>
<span class="woocommerce-Price-currencySymbol">$</span>200.00
</bdi>
</span>
</ins>

这就是我正在努力实现的目标：在此处输入图像描述

代码：

<ins>
<span class="woocommerce-Price-amount amount">
<div class="vh-badge-ears"></div>
<bdi>
<span class="woocommerce-Price-currencySymbol">$</span>200.00
</bdi>
</span>
</ins>

我最接近的是将此代码添加到我的函数中。hp:

function bd_sale_price_html( $price, $product ) {
if ( $product->is_on_sale() ) :
$return_string = str_replace( '<ins><span class="woocommerce-Price-amount amount">', '<ins><span class="woocommerce-Price-amount amount"><div class="vh-badge-ears"></div>', $price);
return $return_string;
else :
return $price;
endif;
}
add_filter( 'woocommerce_get_price_html', 'bd_sale_price_html', 100, 2 );

但通过使用此代码，它看起来是这样的：在此处输入图像描述

我希望这里有人能帮我。

谨致问候！

Answer 1

@ChrisHaas 的全部学分

他建议在css中使用：：before，而不是在元素内部添加div。

因此，帮助我实现我想要的最终代码是：

.price > ins > .amount {
position: relative;
background-color: #28a745;
color: #ffffff;
padding-left: 5px;
padding-right: 5px;
border-radius: 5px;
}
.price > ins > .amount > bdi::before {
content: "";
position: absolute;
background-image: url(./ears.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
top: -80%;
}