Modifying the image size of related products

Built right into WooCommerce is the ability to cross-sell and upsell products. By cross-selling and upselling your products, you can very easily increase your average order value.

Cross-sells are products that work well together (such as peanut butter and jelly). Cross-sells appear on the cart page to get the customer to buy more products. Upsells are similar products where you want the customer to buy the more expensive option, for example, a generic version of peanut butter upselling a well-known and popular brand of peanut butter. These appear on the Product page.

The one adjustment I'd made to the WooCommerce cross-sell is to make it a bit bigger. If you're going to cross-sell something, you should make sure it's big enough to catch the customer's eye on the cart page.

Getting ready

You'll need to have at least two products in your store.

How to do it…

The first step is to configure one product to cross-sell the other product. Once the product is set up, we can customize the cart page. Let's take a look at the following steps:

  1. In the WordPress admin, click on Products and navigate to one of your products.
  2. Scroll down to the Product Data panel.
  3. Click on Linked Products.
  4. Enter the product you wish to cross-sell in the Cross-Sells field.
    How to do it…
  5. Click on Update.

    Now that the cross-sell is set, we can take a look at how it's displayed on the frontend of the site.

  6. Go to the frontend of your site.
  7. Add the product to your cart.
  8. Go to the cart page.
    How to do it…

The cross-sell is definitely visible. There's enough space for two cross-sells, but you may prefer to have a really big image and try harder to sell one product.

To make this more visible, we'll have to do three different things via code: increase the size of the product image, add some CSS to display the image in as large a way as possible, and force the page to only display one cross-sell. Add the following code to the bottom of your theme's functions.php file or create a custom plugin:

  1. First, we need to increase the size of the product image. We have to remove the existing programming (that's the remove_action line) and then add our own custom programming (that's the add_action line). The add_action line at the very bottom gets the whole thing running. Carry out the following code:
    function woocommerce_cookbook_big_upsell_image() { 
    if ( class_exists( 'WooCommerce' ) && function_exists( 'woocommerce_get_product_thumbnail' ) ) { 
        if ( is_cart() ) { 
            remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
            add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_cookbook_product_thumbnail', 10 ); 
        } 
    } 
} 

// get a bigger version of the product thumbnail.  
function woocommerce_cookbook_product_thumbnail() { 
    echo woocommerce_get_product_thumbnail( 'large' ); 
    echo woocommerce_cookbook_product_thumbnail_css();
} 
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_cookbook_big_upsell_image', 0 );
  2. Below the preceding code shown here, paste in the following. This code will make sure that the item is displayed at its full width:
    function woocommerce_cookbook_product_thumbnail_css() { 
    echo '<style> .woocommerce .cart-collaterals .cross-sells ul.products li, .woocommerce-page .cart-collaterals .cross-sells ul.products li{ 
        width: 100%; 
        } 
    </style>'; 
}
  3. Lastly, we need to make sure that we only display one cross-sell on the page. Two big cross-sells would look bad. Add the following code beneath the rest:
    add_filter( 'woocommerce_cross_sells_total', 'woocommerce_cookbook_cross_sells_total', 10 ); 
function woocommerce_cookbook_cross_sells_total( $total ) { 
    return 1; 
}
  4. Save and upload your file.

You should now see just one big cross-sell image on the cart page.

How to do it…

Note

If you're not seeing any cross-sells, make sure they aren't already in your cart.

There's more...

For the sake of simplicity, in this tutorial I wrote the CSS inline. This isn't necessarily a best practice. If you wanted to make this code a bit prettier, you could take that CSS, put it in a style sheet, and enqueue the style sheet with wp_enqueue_style.

Rather than having to manually set which products are related to each other, there's a service called Graphflow that does this for you. They use an algorithm to constantly revaluate which products you should recommend to which customers. They have a free tier and a WooCommerce plugin. Find out more about the service and a link to their plugin at http://graphflow.com/.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset