求助：为WooCommerce Upsell部件添加「Add to cart」按钮

Hey there! Let's get that missing "Add to cart" button added to your WooCommerce upsell widget. The core issue here is that your content-product-small.php template likely doesn't include the add-to-cart functionality. Here are two solid ways to fix this:

Method 1: Add the button directly in your upsell widget code #

You can modify the existing widget loop to include the add-to-cart button right after loading the small product content. Here's the updated code:

<aside class="widget widget-upsell">
    <h3 class="widget-title shop-sidebar">
        <?php _e( 'You may also like&hellip;', 'woocommerce' ) ?>
        <div class="is-divider small"></div>
    </h3>
    <!-- Upsell List style -->
    <ul class="product_list_widget">
        <?php foreach ( $upsells as $upsell ) : ?>
            <?php
            $post_object = get_post( $upsell->get_id() );
            setup_postdata( $GLOBALS['post'] =& $post_object );
            
            // Load the small product content (title, price, etc.)
            wc_get_template_part( 'content', 'product-small' );
            
            // Add the dynamic Add to Cart button
            $product = wc_get_product( $upsell->get_id() );
            ?>
            <div class="upsell-add-to-cart">
                <?php
                if ( $product->is_purchasable() && $product->is_in_stock() ) {
                    // Output the standard WooCommerce add-to-cart button with AJAX support
                    echo apply_filters( 'woocommerce_loop_add_to_cart_link',
                        sprintf( '<a href="%s" data-quantity="1" class="button %s" %s>%s</a>',
                            esc_url( $product->add_to_cart_url() ),
                            esc_attr( implode( ' ', array_filter( array( 'product_type_' . $product->get_type(), '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',
                            ) ),
                            esc_html( $product->add_to_cart_text() )
                        ),
                    $product );
                } elseif ( $product->is_in_stock() ) {
                    // If product isn't purchasable (e.g., variable product), link to product page
                    echo '<a href="' . esc_url( get_permalink( $product->get_id() ) ) . '" class="button">' . esc_html__( 'View Product', 'woocommerce' ) . '</a>';
                } else {
                    // Show out-of-stock message if product is unavailable
                    echo '<span class="button out-of-stock">' . esc_html__( 'Out of Stock', 'woocommerce' ) . '</span>';
                }
                ?>
            </div>
        <?php endforeach; ?>
    </ul><!-- row -->
</aside>
<?php wp_reset_postdata(); // Always reset post data after custom loops! ?>

Method 2: Update the content-product-small.php template (Recommended) #

For a more scalable fix (so all instances of content-product-small.php get the button), edit the template file directly:

1. Find the file in your theme directory: wp-content/themes/your-theme/woocommerce/content-product-small.php
2. Add the button code in a logical spot (e.g., after the product price):

<?php
global $product;
if ( $product->is_purchasable() && $product->is_in_stock() ) {
    echo apply_filters( 'woocommerce_loop_add_to_cart_link',
        sprintf( '<a href="%s" data-quantity="1" class="button %s" %s>%s</a>',
            esc_url( $product->add_to_cart_url() ),
            esc_attr( implode( ' ', array_filter( array( 'product_type_' . $product->get_type(), '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',
            ) ),
            esc_html( $product->add_to_cart_text() )
        ),
    $product );
} elseif ( $product->is_in_stock() ) {
    echo '<a href="' . esc_url( get_permalink( $product->get_id() ) ) . '" class="button">' . esc_html__( 'View Product', 'woocommerce' ) . '</a>';
} else {
    echo '<span class="button out-of-stock">' . esc_html__( 'Out of Stock', 'woocommerce' ) . '</span>';
}
?>

Pro Tip: Always use a child theme to modify WooCommerce templates—this prevents your changes from being overwritten when the parent theme updates.

Quick Styling Note #

You might want to add a bit of CSS to make the button fit your site's design, for example:

.upsell-add-to-cart .button {
    margin-top: 10px;
    padding: 8px 16px;
    font-size: 14px;
    width: 100%;
}

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