我的網站中的自定義產品徽章有問題。我添加了一個新的產品徽章（“銷售”除外），但它的顯示位置不正確。
徽章必須在特色產品上顯示“選擇”，因此我在function.php子主題上添加了以下代碼：
// This adds "choice" product badge on product image
function wc_add_featured_product_flash() {
global $product;
if ( $product->is_featured() ) {
echo '<span >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/），但與產品頁面不同（https://www.modacapellishop.it/prodotto/milk -shake-volume-solution-volumizing-shampoo/）。我該如何解決這個問題？
uj5u.com熱心網友回復：
您可以在產品詳細資訊頁面中為銷售徽章設定不同的保證金值。
商品詳情頁的正文有自己的類（單商品）
例如：
.woocommerce.single-product span.onsale2{
margin: 0px !important;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/407980.html
標籤：
上一篇：嘗試更新到PHP7.4但在元素中出現此錯誤，警告：count():ParametermustbeanarrayoranobjectthatimplementsCountable
下一篇：如何設定輸入模式？