Slider for Upsell and Cross sell Products

Support
#1

Hello,

We are currently developing a WooCommerce Single Product Template and would like to display Upsell and Cross-sell products in a slider format.

Could you please guide us on how to implement this? Any examples or best practices would be highly appreciated.

Thank you for your support.

#2

Hey @bibhashkarn,

Below are the steps you can take to achieve or have Upsell and Cross sell Products in your Single Product Layout.

  1. Create/Edit your Single Product template
  2. Add a Slider element where you want the upsells/cross-sells
  3. In Slider Content Wrapper:

image
image455×537 23.3 KB

  1. Set the Slide element as the consumer and add slide content:
  • Product Image
  • Product Title
  • Product Price
  • Add to Cart button

Hope that helps.

#3

Hi,

Thank you for your response.

I was able to successfully implement the slider by following the steps you shared.

Could you also please assist us with the layout issue? As you know, a single product may have one, two, three, or four upsell items. Currently, the layout appears broken when there are fewer than four upsell products, while it displays correctly when all four are present.

Please refer to the screenshots below for clarity. We would appreciate your guidance on how to display smaller divs when there are fewer than four upsell products so the layout remains consistent.

image
image995×471 88 KB

image
image984×469 133 KB

Hoping for the suggestions.

Thank you and best regards.

#4

Hey Bibhash,

Please check it out first:

One thing to note is that Upsells are displayed in the current product, while Cross-Sells are displayed while the user is viewing the Cart page.

Could you please send me the URL of that one product that have the Up Sells so that I can check it.

Thanks.

#5

Hi,

Thank you for your response.

Thanks for sharing the link— I’ve reviewed it.

Just to confirm, I agreed that Upsells are shown on the product page , and Cross-Sells appear on the Cart page — that makes sense. But for now (in test page), I have used Cross-Sells in the product page too as there was option in the Cross-Sells element. You can see in below screenshot.

image

Here’s the URL of the product that has the Upsells for your reference:
https://www.hamroshringar.com/product/the-purest-solutions-exfoliating-facial-peeling-aha-10-bha-2-30-ml/

Please let me know if you need anything else.

Thank you and best regards.

#6

Hi Bibhash,

I’ve checked the page, and it appears that the Cross-Sell products are being used within the slider below. Since there is only one product available, it stretches to fill a single slide, which is expected behavior.

If this is not what you’re referring to, please share a screenshot highlighting the issue or a short video that helps us clearly identify the problem.

Thanks

#7

Hi,

Thank you for your response.

Thank you for checking. Yes, you are correct—the issue I’m referring to is with the layout when there are fewer than four Cross-Sell and Upsell products. The single product stretching across the slider looks a bit off, and the same happens when there are two or three products. So we want the products to remain small in the slider as it is now with the default theme. You can see in the below screenshot (with the default). We want like this in our slider too.

image
image1263×313 35.3 KB

I hope this clarifies the issue.

Thank you and best regards.

#8

Hi Bibhash,

In the case of a slider, it will automatically fill the available space. What I can suggest is to check the number of products available in the Cross-Sell section. If the count is 4 or more , you can display them using the slider; otherwise, it would be better to show them without the slider.

Hope this helps.
Thanks

#9

Hi,

Thank you for your response.

We appreciate your suggestion. While we understand that the slider automatically fills the available space, we would like the products to appear smaller, similar to the default theme layout.

So, could you please advise on how we can achieve the layout shown in the screenshot instead of the default theme’s design for Upsell and Cross Sell? This is the layout we are using for the product blocks on our website.

To achieve this
image
Instead of below
image

Hoping for the solution.

Thank you and best regards.

#10

Hi Bibhash,

I’ve tested several possibilities in my local environment, but the only available solution remains the one I previously shared. There may be ways to achieve something similar through more complex custom coding; however, that would fall outside the scope of Theme Support .

If you’d like to proceed with such customizations, I recommend hiring a developer who can assist you, or you may consider our newly launched service, One TOTAL CARE , where we offer small customizations.

Thanks

#11

Hi,

Thank you for your response.

Thank you for testing this and for sharing the details.

We understand that the solution you shared is currently the only supported option, and that further customization would require more complex custom coding outside the scope of Theme Support.

At this point, we’ll try to work on this ourselves and explore possible approaches on our end.

Thank you for your time and assistance.

Thank you and best regards.

#12

You’re welcome, @bibhashkarn

#13

Hi,

Pleasure ours.

Just to update you, we have implemented a custom layout for Upsell and Cross Sell products using the Grid Layout along with Lopper and Provider. The slider has been removed for both Upsell and Cross Sell products.

image
image1181×412 72.9 KB

For Cross sell
image
image732×399 94.7 KB

Thank you for your kind support.