WooCommerce指定分类单商品页自定义按钮与购物车按钮内联对齐

原有代码问题 #

• 硬编码写死margin-top: -120px、margin-left: 220px这类偏移值，完全依赖固定位置定位，不同主题、不同设备下必然错位
• HTML语法错误：<a>标签内多写了冗余的a属性，且违规将<button>交互标签嵌套在<a>链接标签内，会被主题默认样式干扰布局
• 按钮元素默认块级/行内块对齐属性未配置，无法和原生加入购物车按钮自动对齐

修复后完整代码 #

直接替换原有代码即可：

add_action( 'woocommerce_single_product_summary', 'custom_button_by_categories', 36 ,0 );
function custom_button_by_categories(){
    
    global $product;

    // 可在此数组内配置需要显示按钮的产品分类，支持分类ID、别名、名称
    $product_cats = array('mobile-touch', 'music', 'furnitures');

    if( has_term( $product_cats, 'product_cat', $product->get_id() ) ){
         $demo_url = get_post_meta( $product->get_id(), 'demo_url', true );
         // 修正语法错误，移除硬编码偏移，添加垂直对齐属性，复用WooCommerce按钮基础类
         echo '<a class="fancybox iframe button" data-width="1280" data-height="820" href="https://lab.dmarket.pk/" target="_blank" rel="noopener" style="background: #007bc4; color: #ffffff; border-radius: 5px; margin-left: 12px; vertical-align: middle; padding: 10px 19px;"> Fix My Device</a>';
    }
}

兼容适配（可选） #

如果替换代码后仍存在错位，可将下方CSS代码添加到「WordPress后台-外观-自定义-额外CSS」中，强制购物车按钮区域弹性对齐：

.single-product .summary form.cart {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

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