WooCommerce无变体单产品页添加购物车按钮移置及功能保留问题

Got it, let's sort this out. You’ve moved the Add to Cart button on your non-variable WooCommerce product page, but it stopped working because it’s no longer inside the original product form. The goal is to keep the button in your new position, leave the original form (and any variation elements if you ever switch to variable products) untouched, and get the button functional again. Here are two reliable methods:

方法1：用JavaScript触发原表单提交（无需修改模板） #

This is the quickest fix if you don’t want to mess with WooCommerce template files. We’ll add a custom button in your desired location, then use a small JS snippet to make it submit the original product form when clicked.

步骤1：添加自定义按钮到目标位置 #

Add this code to your theme’s functions.php file (use a child theme to avoid losing changes when updating):

add_action('woocommerce_before_single_product', 'render_custom_add_to_cart_button');
function render_custom_add_to_cart_button() {
    global $product;
    // 仅针对无变体产品
    if ( ! $product->is_type( 'variable' ) ) {
        echo '<button id="custom-add-to-cart" class="single_add_to_cart_button button alt">'.esc_html__( 'Add to cart', 'woocommerce' ).'</button>';
    }
}

Replace woocommerce_before_single_product with any WooCommerce hook that matches your desired position (e.g., woocommerce_after_single_product_summary for below the product details).

步骤2：添加JS关联按钮与原表单 #

Add this JavaScript to your theme’s custom JS section (via Appearance > Customize > Additional CSS/JS, or enqueue it properly):

document.addEventListener('DOMContentLoaded', function() {
    const customBtn = document.getElementById('custom-add-to-cart');
    const productForm = document.querySelector('form.cart');
    
    if (customBtn && productForm) {
        customBtn.addEventListener('click', function(e) {
            e.preventDefault();
            // 触发原表单的提交动作
            productForm.submit();
        });
    }
});

This works because the original form still contains all necessary hidden fields (like product ID) and the quantity input. Clicking your custom button just tells the browser to submit that existing form.

方法2：利用HTML5的form属性（无JS更简洁） #

HTML5 lets buttons submit forms even when they’re outside the form tag, using the form attribute. This is a cleaner, JS-free solution.

步骤1：给原产品表单添加ID #

First, we need to add an ID to the original product form. Copy WooCommerce’s template file to your child theme to avoid modifying core files:

1. In your child theme, create the folder structure woocommerce/single-product/add-to-cart/
2. Copy simple.php (for non-variable products) from wp-content/plugins/woocommerce/templates/single-product/add-to-cart/ to this new folder
3. Edit the copied simple.php file, modify the <form> tag to add an ID:

<form class="cart" id="product-main-cart-form" method="post" enctype='multipart/form-data'>

步骤2：输出带form属性的按钮 #

Add this code to your theme’s functions.php to render the button in your desired position:

add_action('woocommerce_before_single_product', 'render_form_associated_add_to_cart_button');
function render_form_associated_add_to_cart_button() {
    global $product;
    if ( ! $product->is_type( 'variable' ) ) {
        // 用form属性关联到原表单的ID
        echo '<button type="submit" form="product-main-cart-form" class="single_add_to_cart_button button alt">'.esc_html__( 'Add to cart', 'woocommerce' ).'</button>';
    }
}

Again, swap out the hook to place the button wherever you need it. The form attribute tells the button exactly which form to submit, so it works perfectly even outside the form tags.

注意事项 #

• Always use a child theme when modifying templates or adding code to functions.php—this prevents your changes from being overwritten during theme updates.
• If you later switch to variable products, both methods still work: just make sure variation selectors stay inside the original form, and the button will submit the selected variation data.
• Test the quantity input: since it’s still in the original form, the button will use whatever quantity is entered when submitting.

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