Woocommerce upsell with checkboxes

Question

I'm having an issue with an new upsell section I've added for a wordpress/woocommerce website.

The upsells display nicely on the product page and can be added to the cart, but the product ID's are attaching themselves after the label.

Please see the attached photos;

The code I'm using;

Functions.php

    function add_upsells_to_cart( $cart_item_key ) {
    global $woocommerce;

    if ( empty( $_REQUEST['upsells'] ) || ! is_array( $_REQUEST['upsells'] ) )
        return;

    // Prevent loop
    $upsells = $_REQUEST['upsells'];
    unset( $_REQUEST['upsells'] );

    // Append each upsells to product in cart
    foreach( $upsells as $upsell_id ) {
        $upsell_id = absint( $upsell_id );

        // Add upsell into cart and set upsell_of as extra key with parent product item id
        $woocommerce->cart->add_to_cart( $upsell_id, 1, '', '', array( 'upsell_of' => $cart_item_key ) );
    }
}

/**
 * ADDED UPSELL FUNCTION ON PRODUCT PAGE
 */
add_action( 'woocommerce_add_to_cart', 'add_upsells_to_cart', 1, 6 );
/**
 * Inject upsell_of extra key cart item key when cart is loaded from session
 */
function get_cart_items_from_session( $item, $values, $key ) {
    if ( array_key_exists( 'upsell_of', $values ) )
        $item[ 'upsell_of' ] = $values['upsell_of'];

    return $item;
}
add_filter( 'woocommerce_get_cart_item_from_session', 'get_cart_items_from_session', 1, 3 );


/**
 * Remove associated upsells if product removed from cart
 */
function remove_upsells_from_cart( $cart_item_key ) {
    global $woocommerce;

    // Get cart
    $cart = $woocommerce->cart->get_cart();

    // For each item in cart, if item is upsell of deleted product, delete it
    foreach( $cart as $upsell_key => $upsell )
        if ( $upsell['upsell_of'] == $cart_item_key )
            unset( $woocommerce->cart->cart_contents[ $upsell_key ] );
}
add_action( 'woocommerce_before_cart_item_quantity_zero', 'remove_upsells_from_cart' );

content-single-product.php

<!-- .product_upsell -->
            <?php

            $upsells = $product->get_upsell_ids();
            $prod_id = get_the_ID();

            if ( sizeof( $upsells ) == 0 ) return;

            $meta_query = $woocommerce->query->get_meta_query();

            $args = array(
                'post_type'           => 'product',
                'ignore_sticky_posts' => 1,
                'no_found_rows'       => 1,
                'posts_per_page'      => $posts_per_page,
                'post__in'            => $upsells,
                'post__not_in'        => array( $prod_id ),
                'meta_query'          => $meta_query
            );

            $query = new WP_Query( $args );

            if ( $query->have_posts() ): ?>

                <div class="product_upsells">
                    <h3>Customers also buy:</h3>
                <ul>
                <?php while ( $query->have_posts() ): $query->the_post(); ?>
                    <label class="upsell">
                            <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( the_ID() ), 'single-post-thumbnail' );?>
                            <img src="<?php echo $image[0]; ?>" />
                            <span class="upsell_<?php the_ID(); ?>"><input type="checkbox" name="upsells[]" id="upsell_<?php the_ID(); ?>" value="<?php the_ID(); ?>" /> <?php the_title(); ?> 
                                    <?php if ( get_post_meta( get_the_ID(), '_sale_price', true) ) { ?>  
                        <span>&pound;<?php $saleprice = get_post_meta( get_the_ID(), '_sale_price', true); echo money_format('%.2n', $saleprice) . "\n";  ?></span>
                    <?php } else { ?>
                        <span>&pound; <?php $price = get_post_meta( get_the_ID(), '_regular_price', true); echo $price;  ?></span>
                        <?php } ?></span></label>
                            </span>
                    </label>

                <?php endwhile; ?>
                </ul>
            <?php endif; ?>

        </div><!-- END.product_upsell -->

Answer 1

Your issue is caused by the following line:

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( the_ID() ), 'single-post-thumbnail' );?>

You need to replace the_ID() with get_the_ID().

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'single-post-thumbnail' ); ?>

Currently what's happening is that when you define your $image variable, it's also echoing the ID because the_ID() function echoes the return value of get_the_ID(). The source code for it is literally just the following:

function the_ID() {
    echo get_the_ID();
}

Swapping those out should fix the issue nice and easy!

Generally speaking, WordPress has two types of post value functions:

Display Functions: These are generally defined with the_[…]() and will echo (display) the returned value. Ideal for template tags where you want to just show that particular value. Effectively, they just do echo get_the_[…]().

Retrieval (or Return) Functions: These are generally defined with get_the_[…](). These are the ones you want to define variables with, as they only return the value and don't output it.