Single Product display - Add support for Cross sells or Up sells

[bobbingwide]

One possible solution for the problem with displaying cross-sells for products in the cart ( issue https://github.com/bobbingwide/vgc/issues/38 ) is to remove cross-sells and up-sells But now we have a requirement to display other products on the single product page.

• Cross-sells could be

  • products which are are of the same size or smaller
  • similar products but a different colour

• Up sells could be

  • products which are larger, and therefore more expensive
  • similar products but for a different brand

The up-sells would be displayed below the single product details.

[bobbingwide]

According to the documentation in https://woocommerce.com/document/related-products-up-sells-and-cross-sells/

• Up-sells are products that you recommend instead of the currently viewed product.
• Cross-sells are products that you promote in the cart, based on the current product.
• Related Products is a section on some templates that pulls products from your store that share the same tags or categories as the current product.

Related products are displayed in response to the woocommerce_after_single_product_summary action hook, which is normally invoked in content-single-product.php

/**
     * Hook: woocommerce_after_single_product_summary.
     *
     * @hooked woocommerce_output_product_data_tabs - 10
     * @hooked woocommerce_upsell_display - 15
     * @hooked woocommerce_output_related_products - 20
     */
    do_action( 'woocommerce_after_single_product_summary' );
    ?>

If you don't invoke the action hook then neither upsells nor related products will be displayed.

Related products can be removed

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

[bobbingwide]

Adding the do_action produces the following output for A test product 6 x 4 ft (ID 7982 )

This product has an up-sell of A test product 10 x 10ft.

It also has a cross-sell of Alton Evolution Four LT 4 x 4 ft Greenhouse, but cross-sells are not displayed.

[bobbingwide]

There is already logic to control how related products are displayed.

add_filter( 'woocommerce_output_related_products_args', 'vgc_woocommerce_related_products_args' );

The theme's filter function sets the posts_per_page to 3 and columns to 3.

For up-sells the number of columns is 4.

[bobbingwide]

Note: Product data tabs are not displayed since the theme contains logic to remove the product tabs.

The filter below is invoked by the standard WooCommerce template single-product\tabs\tabs.php

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

function woo_remove_product_tabs( $tabs ) {

unset( $tabs['description'] ); // Remove the description tab
unset( $tabs['reviews'] ); // Remove the reviews tab
unset( $tabs['additional_information'] ); // Remove the additional information tab

return $tabs;

[bobbingwide]

The unwanted ticks can be removed by CSS.

Notes:

• Since they are sorted randomly the list of related products can change each time the product page is displayed
• This would also be true for up-sells if you chose more than 3 products.
• The thumbnail image size varies between products.

[bobbingwide]

With some CSS adjustments the display can look like this.

This allows for 3 columns for both up-sells and related products.