Home » WooCommerce: Change # of Upsells and Move Them Above Tabs

WooCommerce: Change # of Upsells and Move Them Above Tabs

by Tutor Aspire

If you use a full page width on your product page you might want to change the number of upsells to 3 (or multiple). Also, a client of mine needed the upsells to be above the tabs, so there you go.

WooCommerce: move upsells on the single product page

PHP Snippet: Move Upsells on the Single Product Page – WooCommerce

/**
 * @snippet       Move Upsells @ Single Product Page - WooCommerce
 * @how-to        Get tutoraspire.com FREE
 * @sourcecode    https://tutoraspire.com/?p=172
 * @author        Tutor Aspire
 * @compatible    WC 2.6.14, WP 4.7.2, PHP 5.5.9
 */

// ---------------------------
// 1. Remove Upsells From Their Default Position
// NOTE: please make sure your theme is not already overriding this...
// ...for example, see specific Storefront Theme snippet below

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );

// ---------------------------
// 2. Echo Upsells In Another Position

add_action( 'woocommerce_after_single_product_summary', 'tutoraspire_woocommerce_output_upsells', 5 );

function tutoraspire_woocommerce_output_upsells() {
woocommerce_upsell_display( 3,3 ); // Display max 3 products, 3 per row
}
}

PHP Snippet for Storefront Theme: Move Upsells on the Single Product Page – WooCommerce

/**
 * @snippet       Move Upsells @ Single Product Page - WooCommerce & Storefront Theme
 * @how-to        Get tutoraspire.com FREE
 * @sourcecode    https://tutoraspire.com/?p=172
 * @author        Tutor Aspire
 * @compatible    WC 2.6.14, WP 4.7.2, PHP 5.5.9
 */

// ---------------------------
// 1. Remove Upsells From Their Position (specific to Storefront Theme)

add_action( 'init', 'tutoraspire_remove_storefront_theme_upsells');

function tutoraspire_remove_storefront_theme_upsells() {
remove_action( 'woocommerce_after_single_product_summary', 'storefront_upsell_display', 15 );
}

// ---------------------------
// 2. Echo Upsells In Another Position

add_action( 'woocommerce_after_single_product_summary', 'tutoraspire_woocommerce_output_upsells', 5 );

function tutoraspire_woocommerce_output_upsells() {
woocommerce_upsell_display( 3,3 ); // Display max 3 products, 3 per row
}

You may also like