Displaying Custom Product Slider on Single Product Page

Hello – I am storing an array of product id’s for “Product Accessories” that I’d like to display as a slider on the single product page. I’m testing a snippet using the standard WooCommerce shortcode for displaying products (https://docs.woocommerce.com/document/woocommerce-shortcodes/).

This is displaying a grid, but it won’t render the attributes for product count, columns, etc so it’s just displaying as a giant 2 column grid.

How can I display a 4 column product slider just like the “Related Products” slider included with the theme?

By the way, I’m using Elementor – is there a shortcode for Elementor or the Woodmart theme that I can use or is this accomplished with a different method?

add_action( 'woocommerce_after_single_product_summary', 'output_product_accessories', 5 );
 
function output_product_accessories() {
  
echo "TEST";  
echo do_shortcode('[products limit="4" columns="4" paginate="false" orderby="popularity" class="quick-sale" on_sale="true" ]');
}

Thanks!

Hello,

We recommend you create an HTML block and use our Products grid/carousel element to display your products. You can read information about this element in our documentation https://xtemos.com/docs/woodmart/faq-guides/product-grid-carousel-element/
Note that it works both for WPBakery page builder and for Elementor.
Then, you can use your HTML Block’s shortcode and place it whenever you need it.

Kind Regards

Thank you for your reply. I need to be able to pass product IDs or SKUs to the carousel. Is there a shortcode for the carousel element itself? I am using Elementor page builder if that matters.

Yes, our element has an option for this. Check the screenshot https://prnt.sc/115g9q1

I’d appreciate it if you would review the thread before replying.

I need to create a slider that will display “Product Accessories” on the single product page. I need this to display just like the Related Products carousel with 1 row, 4 columns. These accessory ID’s will be stored in a custom field (array). I created a PHP snippet to display the slider, but I need the shortcode or equivalent for the slider element so that I am able to pass the IDs to it programmatically. As far as I can tell the Elementor element you linked does not allow dynamic content.

rough example:

add_action( 'woocommerce_after_single_product_summary', 'output_product_accessories', 5 );
 
function output_product_accessories() {
echo "<h2>Product Accessories</h2>" 
echo do_shortcode('[need_this_shortcode ids="$product_ids_array"]');
}

So you can see I need something that will generate the slider that I can pass IDs or SKUs to via PHP.

Thanks

Hello,

In this case, please, update the theme to the latest 6.0 version and try to use the native WooCommerce shortcode. We have fixed the problem with columns so it should work well now.

Kind Regards

awesome! working perfectly now thanks

Great, you are welcome!

[Author]

Posts