WooCommerce Upsells Shortcode: outputs product upsells when the [woocommerce_product_upsells] shortcode is used

woocommerce-upsells-shortcode.php

<?php
/**
 * Plugin Name: WooCommerce Upsells Shortcode
 * Plugin URI: http://skyver.ge/51
 * Description: Adds a shortcode to output WooCommerce product upsells; removes them from the original location when used
 * Author: SkyVerge
 * Author URI: https://www.skyverge.com/
 * Version: 1.0.0
 *
 * Copyright: (c) 2016 SkyVerge, Inc. (info@skyverge.com)
 *
 * License: GNU General Public License v3.0
 * License URI: http://www.gnu.org/licenses/gpl-3.0.html
 *
 * @author    SkyVerge
 * @copyright Copyright (c) 2016, SkyVerge, Inc.
 * @license   http://www.gnu.org/licenses/gpl-3.0.html GNU General Public License v3.0
 *
 */


if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly


/** 
 * Adds a [woocommerce_product_upsells] shortcode, which outputs the upsells for a product
 * This shortcode will only render on product pages.
 *
 * If upsells are output by the shortcode, they will be removed from the default position below the description.
 *
 * The optional "columns" argument can be added to the shortcode to adjust the upsells output and styles
 */
class WC_Upsells_Shortcode {
	
	
	const VERSION = '1.0.0';
	

	// @var WC_Upsells_Shortcode single instance of this plugin
	protected static $instance;
	

	// set the column count so we can get it if overridden by the shortcode
	protected $column_count = NULL;


	public function __construct() {
		
		// add the [woocommerce_product_upsells] shortcode
		add_shortcode( 'woocommerce_product_upsells', array( $this, 'render_product_upsells' ) );
		
		// adjust the upsell display when shortcode is used
		add_filter( 'woocommerce_up_sells_columns', array( $this, 'adjust_upsell_columns' ) );
		add_action( 'wp_print_footer_scripts', array( $this, 'adjust_column_widths' ) );
	}


	/** Helper methods ***************************************/


	/**
	 * Main WC_Upsells_Shortcode Instance, ensures only one instance is/can be loaded
	 *
	 * @since 1.0.0
	 * @see wc_upsells_shortcode()
	 * @return WC_Upsells_Shortcode
	*/
	public static function instance() {
		if ( is_null( self::$instance ) ) {
			self::$instance = new self();
		}
		return self::$instance;
	}


	/** Plugin methods ***************************************/


	/**
	 * Set up a shortcode to output the WooCommerce product upsells
	 *
	 * @since 1.0.0
	 * @param array $atts shortcode attributes
	 */
	public function render_product_upsells( $atts ) {

		// bail if we're not on a product page
		if ( ! is_singular( 'product' ) ) {
			return;
		}

		$a = shortcode_atts( array(
			'columns'	=> '3',
		), $atts );
		
		// only use the shortcode attribute if it's an integer, otherwise fallback to 3
		$columns = (int) $a['columns'] ? $a['columns'] : 3;
	
		$this->remove_default_upsells();
		$this->column_count = $columns;
	
		// buffer our upsell display and output it with a custom CSS class
		ob_start();	

		?><div class="wc_upsell_shortcode"><?php	
			woocommerce_upsell_display();
		?></div><?php
	
		// output the buffered contents
		return ob_get_clean();
	}


	/**
	 * Adjust the number of columns to whatever the shortcode has set
	 *
	 * @since 1.0.0
	 */
	public function adjust_upsell_columns( $columns ) {
	
		// bail if the column count is not set, it means our shortcode isn't in use
		if ( ! isset( $this->column_count ) ) {
			return $columns;
		}
		
		// otherwise, set the column count to our shortcode's value
		return $this->column_count;
	}


	/**
	 * Adjust the column width CSS based on the number of columns
	 *
	 * @since 1.0.0
	 */
	public function adjust_column_widths () {
	
		// bail if the column count is not set, it means our shortcode isn't in use
		if ( ! isset( $this->column_count ) ) {
			return;
		}
	
		// set the related product width based on the number of columns + some padding
		$width = ( 100 / $this->column_count ) * 0.90;
	
		echo '<style>
		.woocommerce .wc_upsell_shortcode ul.products li.product,
		.woocommerce-page .wc_upsell_shortcode ul.products li.product {
			width: ' . $width . '%;
			margin-top: 1em;
		}</style>';
	
	}		

	
	/**
	 * Remove the upsells on the product page if shortcode is used
	 *
	 * @since 1.0.0
	 */
	private function remove_default_upsells() {
		remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
	}

} // end \WC_Upsells_Shortcode class


/**
 * Returns the One True Instance of WC_Upsells_Shortcode
 *
 * @since 1.0.0
 * @return WC_Upsells_Shortcode
 */
function wc_upsells_shortcode() {
	return WC_Upsells_Shortcode::instance();
}


// fire it up!
wc_upsells_shortcode();

Great! Worked!
How can I remove or edit the text above the products?

Done with CSS:

.up-sells h2{
display:none;
}

.up-sells:before{
content: 'Your new text here';
}

hi, I installed the plugin and set the shortcode to show 5 columns, but it continues to show only 4.
this is the shortcode I used: [woocommerce_product_upsells columns = "5"]
this is what it generates: <ul class = "products columns-4">

Did you figure out how to remove the columns-4 CSS?
I'm trying to put this in a sidebar widget, but the columns are tiny.

Thank you very much! Is it possible to hide under the image product the same upsell products?
I move it down the title product and under the image I need to not display

thank you
have a great day
M

How can I use this code?

It seems column is forced by theme woocommerce column setting and column number used here makes each time smaller in the column. So it looks normal with column=1 setting. Tested on Blocksy and Kadence.

Hey, I found your code but it is now working for me, I just getting empty result, nothing is showing
I wrote
AAA [woocommerce_product_upsells] BBB
and the result is
AAA (empty) BBB