解决自定义产品徽章显示

Question

我的站点中的自定义产品徽章有问题。我添加了一个新的产品徽章（“促销”除外），但它显示的位置不正确。

徽章必须在特色产品上显示“选择”，所以我在 function.php 子主题上添加了这段代码：

// This adds "choice" product badge on product image

function wc_add_featured_product_flash() {
global $product;

  if ( $product->is_featured() ) {
      echo '<span class="onsale2">Choice</span>';
  }
}
add_action( 'woocommerce_before_shop_loop_item_title', 'wc_add_featured_product_flash', 10 );

add_action( 'woocommerce_before_single_product_summary', 'wc_add_featured_product_flash', 10 );

然后在 CSS 文件中添加了显示徽章的代码：

/* Adjust how "Choice" badge appears on different screen sizes */

@media only screen and (max-width: 600px) {
.woocommerce span.onsale2 {
margin: -120px 0;
top: 0px;
left: 0% !important;
}
}
@media only screen and (min-width: 601px) and (max-width: 1023px) {
.woocommerce span.onsale2 {
margin: -200px 0;
top: 0px;
left: 0% !important;
}
}
@media only screen and (min-width: 1024px) {
.woocommerce span.onsale2 {
margin:-228px 0 ;
top: 0px;
left: 0% !important;
}
}
/* "Featured" badge which has class .onsale2 */

.woocommerce span.onsale2 {
position: absolute;
min-width: 10px !important;
background-color: #232f3d;
color: #ffd700;
padding: 16px 12px;
font-size: 16px;
line-height: 1;
font-weight: 1000;
z-index: 9;
text-align: center;
top: 20px;
left: 0px;
background: #232f3d;
color: #ffd700;
}
.woocommerce ul.products li.product .onsale2 {
top: 20px;
left: 0;
min-width: 100px !important;
}

结果是徽章在主页上的位置正确 (https://www.modacapellishop.it/) but is not the same with the product page (https://www.modacapellishop.it/prodotto/milk-shake-volume-solution-volumizing-shampoo/)。我该如何解决？

Answer 1

您可以在产品详细信息页面中为销售徽章设置不同的利润值。

产品详情页面的正文有自己的class（单品）

例如：

.woocommerce.single-product span.onsale2{
    margin: 0px !important;
}

解决自定义产品徽章显示

Solve custom product badge display

html

css

php

wordpress

woocommerce