如何修改WooCommerce代码实现购买后隐藏/显示Elementor制作的区块？

当然可以修改现有代码来实现需求——核心逻辑就是复用原代码里的用户是否已购买当前商品的判断，以此为条件控制不同区块的显示与隐藏。下面提供几种实用的实现方案：

原代码作用回顾 #

你现有的代码通过woocommerce_is_purchasable过滤器，检测当前用户是否已购买目标商品，若已购买则禁用加入购物车按钮：

add_filter( 'woocommerce_is_purchasable', 'bbloomer_hide_add_cart_if_already_purchased', 9999, 2 ); 
function bbloomer_hide_add_cart_if_already_purchased( $is_purchasable, $product ) {
   if ( wc_customer_bought_product( '', get_current_user_id(), $product->get_id() ) ) {
      $is_purchasable = false;
   }
   return $is_purchasable;
}

我们可以基于其中的wc_customer_bought_product()判断逻辑，扩展出区块切换功能。

方案1：直接在模板中添加判断（最直观） #

如果你有权限修改商品页面模板（比如single-product.php或自定义区块模板），可以直接插入条件判断代码，控制不同区块的显示：

<?php
global $product;
// 检查当前用户是否已购买该商品
$has_purchased = wc_customer_bought_product( '', get_current_user_id(), $product->get_id() );
?>

<!-- 未购买时显示的区块 -->
<?php if ( !$has_purchased ) : ?>
<div class="before-purchase-section">
    <!-- 这里放未购买时要展示的内容：比如商品详情、加入购物车按钮等 -->
</div>
<?php endif; ?>

<!-- 已购买时显示的区块 -->
<?php if ( $has_purchased ) : ?>
<div class="after-purchase-section">
    <!-- 这里放购买后要展示的内容：比如下载链接、专属福利、售后入口等 -->
</div>
<?php endif; ?>

方案2：扩展函数+短代码（无需修改模板） #

如果不想改动模板，可以扩展原代码，添加全局函数和短代码，直接在WordPress编辑器中调用：

第一步：添加扩展代码到主题functions.php #

// 保留原有的加入购物车按钮控制代码
add_filter( 'woocommerce_is_purchasable', 'bbloomer_hide_add_cart_if_already_purchased', 9999, 2 ); 
function bbloomer_hide_add_cart_if_already_purchased( $is_purchasable, $product ) {
   if ( wc_customer_bought_product( '', get_current_user_id(), $product->get_id() ) ) {
      $is_purchasable = false;
   }
   return $is_purchasable;
}

// 新增全局判断函数：检查用户是否已购买指定商品
function custom_check_purchased_status( $product_id = null ) {
    if ( !$product_id ) {
        global $product;
        $product_id = $product->get_id();
    }
    // 复用核心判断逻辑
    return wc_customer_bought_product( '', get_current_user_id(), $product_id );
}

// 新增短代码：在编辑器中快速插入条件区块
add_shortcode( 'purchase_conditional_block', 'custom_purchase_conditional_shortcode' );
function custom_purchase_conditional_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'product_id' => get_the_ID(), // 默认取当前页面商品ID
        'before_content' => '请先购买商品查看专属内容',
        'after_content' => '感谢购买！这里是你的专属内容'
    ), $atts );
    
    $has_purchased = custom_check_purchased_status( $atts['product_id'] );
    return $has_purchased ? $atts['after_content'] : $atts['before_content'];
}

第二步：在编辑器中使用短代码 #

比如在商品详情页的编辑器中插入：

[purchase_conditional_block product_id="123" before_content="<div class='buy-first'>点击下方按钮购买后即可查看教程</div>" after_content="<div class='purchased'>教程链接：<a href='xxx'>下载地址</a></div>"]

方案3：CSS配合Body类（适合前端控制） #

如果需要纯前端控制显示，可以给页面Body添加状态类，再用CSS切换区块：

第一步：添加Body类代码到functions.php #

add_filter( 'body_class', 'custom_add_purchase_status_body_class' );
function custom_add_purchase_status_body_class( $classes ) {
    // 仅在商品详情页添加类
    if ( is_product() ) {
        global $product;
        $has_purchased = wc_customer_bought_product( '', get_current_user_id(), $product->get_id() );
        $classes[] = $has_purchased ? 'product-purchased' : 'product-not-purchased';
    }
    return $classes;
}

第二步：添加CSS样式 #

/* 未购买时：隐藏已购区块，显示未购区块 */
.product-not-purchased .after-purchase-section {
    display: none;
}
.product-not-purchased .before-purchase-section {
    display: block;
}

/* 已购买时：隐藏未购区块，显示已购区块 */
.product-purchased .before-purchase-section {
    display: none;
}
.product-purchased .after-purchase-section {
    display: block;
}

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