WooCommerce单品页：无配送类商品添加免运费徽章代码修改咨询

要在WooCommerce单品页的标题下方和价格下方显示Free Shipping徽章（仅针对无配送类别的商品），需对原代码做以下调整：

核心修改点 #

原代码用的是商品列表页的钩子，要替换为单品页的对应钩子，同时通过优先级控制徽章的显示位置：

• 标题下方：用woocommerce_single_product_summary钩子，优先级设为15（在标题之后、评分之前）
• 价格下方：同样用woocommerce_single_product_summary钩子，优先级设为35（在价格之后、商品简介之前）

修改后的完整代码 #

// 在单品页标题下方显示免费配送徽章
add_action( 'woocommerce_single_product_summary', 'free_shipping_below_title', 15 );
function free_shipping_below_title() {
    global $product;
    if ( empty( $product->get_shipping_class() ) ) {
        echo '<span class="freedel">Free Shipping</span>';
    }
}

// 在单品页价格下方显示免费配送徽章
add_action( 'woocommerce_single_product_summary', 'free_shipping_below_price', 35 );
function free_shipping_below_price() {
    global $product;
    if ( empty( $product->get_shipping_class() ) ) {
        echo '<span class="freedel">Free Shipping</span>';
    }
}

样式优化（可选） #

如果需要让徽章和示例图样式一致，可将以下CSS添加到主题的自定义CSS区域：

.freedel {
    display: inline-block;
    background-color: #2ecc71;
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    margin: 8px 0;
}

内容的提问来源于stack exchange，提问作者J_A