[Support request] Show product image at checkout

Home Forums Support Show product image at checkout

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1103550
    Pedro

    Hello! I would like to see the product image on the checkout page.

    Can you help me with this?

    Thank you!

    #1103630
    David
    Staff
    Customer Support

    Hi there,

    requires some custom work, but luckily this guy already figured it out:

    https://www.techiesandesh.com/woocommerce-show-product-image-checkout-page/

    #1103631
    Pedro

    Hello David! Thank you very much!

    I added the code and it worked perfectly, however the product title does not look very good.

    I mean the alignment.

    Here I show you a screenshot: https://mega.nz/#!jskyEAaY!OFnyfPC84GH8KQCePFsJreaUVy4mYa_DtuAy-0lM-tM

    Could you help me with that?

    Thank you!

    #1103649
    David
    Staff
    Customer Support

    Edit this line to remove the inline styles:

    <div class="ts-product-image" style="width: 52px; height: 45px; display: inline-block; padding-right: 7px; vertical-align: middle;">

    ie.
    <div class="ts-product-image">

    Then add this CSS:

    .woocommerce table.shop_table td.product-name {
        display: flex;
    }
    .ts-product-image {
        flex: 0 0 50px;
        margin-right: 5px;
    }
    #1103655
    Pedro

    Hello david! It worked, but now the second column (Subtotal) is left with very little space.

    Here you can see the screenshot: https://mega.nz/#!f0tAAaQS!ntYIe_N6jDiOs9L-nAenmm6LAkec9HS0JA_-vuFIYpQ

    #1103668
    David
    Staff
    Customer Support

    try this snippet instead:

    add_filter( 'woocommerce_cart_item_name', 'db_product_image_on_checkout', 10, 3 );
     
    function db_product_image_on_checkout( $name, $cart_item, $cart_item_key ) {
         
        /* Return if not checkout page */
        if ( ! is_checkout() ) {
            return $name;
        }
         
        /* Get product object */
        $_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
     
        /* Get product thumbnail */
        $thumbnail = $_product->get_image( array( 50, 50 ) );
     
        /* Add wrapper to image and add some css */
        $image = '<span class="db-product-image">'
                    . $thumbnail .
                '</span>'; 
        $name = '<span class="db-product-name">' . $name . '</span>';
        /* Prepend image to name and return it */
        return $image . $name;
    }

    And this CSS:

    .db-product-image img {
        vertical-align: middle;
        padding-right: 10px;
    }
    #1103674
    Pedro

    Hi David, these codes served to correct the problem of the subtotal column.

    But again the product title is misaligned again.

    #1103707
    David
    Staff
    Customer Support

    If you can add the code in – i added some extra HTML/Classes that may ( or may not ) allow me to correct that.

    #1103709
    Pedro

    Hello david! I added the codes again but everything remained the same.

    Thanks for your help.

    #1104097
    David
    Staff
    Customer Support

    I need you to add back the code so i can look and see if the problem can be fixed, not sure as tables are a pain in the backside.

    #1104286
    Pedro

    Hello david! I have added the codes again, please check.

    #1104299
    David
    Staff
    Customer Support

    Due to the variable sized content there probably isn’t a perfect solution, you can try this CSS instead of that i provided above:

    .woocommerce table.shop_table td.product-name {
        display: grid;
        grid-template-columns: 40px auto;
        min-width: 180px;
    }
    .db-product-image {
        margin-right: 10px;
    }
    #1104419
    Pedro

    Hello david! Thanks for all the help.

    I have put the code and it breaks several styles of the cart and checkout.

    Anyway I thank you very much for trying to help me with this.

    #1104636
    Tom
    Lead Developer
    Lead Developer

    This is likely why it’s not a thing by default in WooCommerce. Wonder if there are any examples using WooCommerce out there we can check out. That way we can just copy the code.

    #1107021
    Pedro

    Hello Tom! If it really is something that WooCommerce does not do by default and Shopify wins on this.

    However this feature is important for e-commerce sites.

    It would be nice if you had it in mind for a future GPP update.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.