Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WooCommerce Upsells Shortcode: outputs product upsells when the [woocommerce_product_upsells] shortcode is used
<?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();
@Felipe-NS

This comment has been minimized.

Copy link

Felipe-NS commented Nov 14, 2018

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

@Felipe-NS

This comment has been minimized.

Copy link

Felipe-NS commented Nov 15, 2018

Done with CSS:

.up-sells h2{
display:none;
}

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.