Similar Products on Single Product Page

For a particular client we wanted to offer very similar products as thumbnail links under products. The linked products would be similar products. They would however have to be separate products offering differences in color, fabric and pricing. They would also have a sample on offer each of them.

Variable Product?

Variable products do offer all the freedom in size, color and other attributes and even allow you to use variable prices. But as we really wanted to have independent products and even sell a sample per product this was not ideal at all. That is why a variable product was not a good choice.

Cross-Sell Linked Products

A cross sell was appealing as it would allow this linking and allow related products to stay intact as option below each product with cross-sell or linked product thumbnails. Here a little summary of the options for product linking in general.

Cross Sells are products that you would like to sell besides other products. They are often complementary items but they don’t have to be. In our case they would be more like related products. Related products are products related by tag or categorie. An option we wanted to keep open. So we did not want to use them as thumbnails below products of choice. Up-sells are products that tend to be pricier you try to get people interested in while looking at another product. Products you recommend so to speak. We will not be using them for now.

Cross-Sell Display

So as you can see cross-sells seemed to be the best choice. Now we wanted them to load on each product page where need be with ease and if a cross-sell would be removed or changed the thumbnail and link would have to be removed or updated. Normally cross-sells are loaded when you are at the cart page. And we wanted them on the single product page.

WooCommerce Cross Sell Products Shortcode

The Plugin WooCommerce Cross Sell Products Display allows the display of cross-sell products using a shortcode on single product pages or pretty much anywhere you would need them shown. It basically uses this code to get the cross-sell ids:

$crosssells = get_post_meta( $product_id, '_crosssell_ids', true);

There is even a carousel options for upsells, cross-sells and related products. Example shortcode here below:

[wcsp_cross_sell orderby=”rand” order=”ASC” product_num=”5″ display_columns=”3″ title=”Some title..” product_id=”Product ID” class=”class-1 class-2 class-3″]

Advanced Field Integration

If you need to load the shortcode in an advanced custom field as you want to easily load cross-sell on product pages you can do so as well. You can simply use the following code in your template:

do_shortcode( get_field('FIELDNAME') );

or allow it more broadly for certain field types inside functions.php using

add_filter('acf/format_value/type=textarea', 'do_shortcode');

You can of course pick another field type as well of course.