请求协助：为WooCommerce的Motta主题自定义极简加号加入购物车按钮

1. 替换加入购物车按钮的HTML结构 #

把代码添加到子主题的functions.php文件中（不要直接修改父主题文件，避免主题更新丢失内容）：

add_filter( 'woocommerce_loop_add_to_cart_link', 'replace_add_to_cart_with_plus_button', 10, 2 );
function replace_add_to_cart_with_plus_button( $button, $product ) {
    // 仅针对简单产品（需支持其他类型可自行调整判断条件）
    if ( $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() ) {
        $button = sprintf(
            '<a href="%s" data-quantity="1" class="%s" %s>
                <span>+</span>
            </a>',
            esc_url( $product->add_to_cart_url() ),
            esc_attr( implode( ' ', array_filter( array(
                'button',
                'product_type_simple',
                'add_to_cart_button',
                'ajax_add_to_cart'
            ) ) ) ),
            wc_implode_html_attributes( array(
                'data-product_id'  => $product->get_id(),
                'data-product_sku' => $product->get_sku(),
                'aria-label'       => $product->add_to_cart_description(),
                'rel'              => 'nofollow',
            ) )
        );
    }
    return $button;
}

2. 添加自定义CSS实现极简加号样式 #

将以下CSS代码添加到子主题的style.css，或者通过WordPress后台「外观-自定义-额外CSS」面板粘贴：

/* 重置默认按钮样式，改为圆形极简加号 */
.woocommerce ul.products li.product .add_to_cart_button {
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #000; /* 可自行修改背景色 */
    color: #fff; /* 可自行修改加号颜色 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: none;
    transition: background-color 0.3s ease;
}

/* 鼠标悬停效果 */
.woocommerce ul.products li.product .add_to_cart_button:hover {
    background-color: #333; /* 自行修改悬停背景色 */
}

/* 确保无残留文字显示 */
.woocommerce ul.products li.product .add_to_cart_button span:not(:first-child) {
    display: none;
}

3. 排查之前代码不生效的常见原因 #

• 直接修改父主题functions.php：主题更新会覆盖所有修改，必须使用子主题。
• 钩子优先级不足：Motta主题可能用了更高优先级的钩子重写按钮，可尝试将代码中的10改为99提升优先级。
• CSS权重不够：主题默认样式优先级更高，可在CSS选择器前加上主题容器类（比如.motta），例如.motta .woocommerce ul.products li.product .add_to_cart_button。
• 缓存未清理：修改后清空浏览器缓存、WordPress缓存（若使用缓存插件）。

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