[Resolved] Customize the output for upsells

[Author]

Posts

[ellenB]

I am using WooCommerce and I have a Content Template for the Single Product pages. On that page, I am displaying the upsell products at the bottom of the page using [wpv-woo-show-upsell-items] in the Content Template. Screenshot: cincopuntos_upsells.jpg

I have also set the number that I want to display in the functions.php using:

add_filter( 'woocommerce_upsell_display_args', 'number_related_products', 9999 );
function number_related_products( $args ) {
$args['posts_per_page'] = 4;
$args['columns'] = 4;

return $args;
}

What I need help with is to customize the display of those upsells. It is displaying to the default WooCommerce layout and styling and I need to change that to the custom layout that I am using on my shop page and elsewhere. Screenshot: cincopuntos_product_archive.jpg

I have tried creating a View for the upsells but I don't see where to filter by upsell status and related to the current product selected. Can you help me with this?

My website url is hidden link.

[Nigel]

The output of the wpv-woo-show-upsell-items just triggers the standard WC output, which is not customisable by Toolset.

You could probably copy the PHP template to your child theme and edit that to your needs.

But if you want to recreate the output using a View you need to pass the IDs of the upsell products to the View so that it knows which products to display.

I looked in the database, and see the the IDs are stored in a hidden post meta field with key "_upsell_ids", but they are stored as an array, and you need to pass a comma-separated list to the View.

So the first thing to do is to create a custom shortcode that would return the upsell ids.

Here's the kind of code you could use (with a disclaimer: providing or debugging custom code falls outside of our support policy and we cannot provide further support for it):

/**
 * Register shortcode to return list of upsell IDs
 */
add_shortcode( 'upsells', function(){

	global $post;

	$upsell_ids = get_post_meta( $post->ID, '_upsell_ids', true );

	if ( isset( $upsell_ids ) ){
		$upsell_list = implode( ",", $upsell_ids );
		return $upsell_list;
	}
});

(You can add such a PHP snippet at Toolset > Settings > Custom Code.)

You then need to go to Toolset > Settings > Front-end Content and register the shortcode so that it can be used as a shortcode argument.

Now, create a View to display the upsell products. Include a Post ID Query Filter where the IDs of the posts to output are passed via a shortcode attribute (which defaults to "ids").

Then insert this View into your single product template, and edit the shortcode so that it includes an "ids" attribute whose value comes from the custom upsells shortcode, something like this:

[wpv-view name="upsells" ids="[upsells]"]

[ellenB]

This worked like a charm. Thank you for your prompt and thorough reply, Nigel!

[ellenB]

My issue is resolved now. Thank you!