WooCommerce product loop in Bootstrap carousel not working

[MartynaC]

Hello,

I am using Bootscore with Woocommerce theme on my website, I am trying to add a simple product slider based on bootstrap and ACF fields.
I can not make it work, even though it works on my other websites, using different themes. In fact, I have tried many different bootstrap sliders approaches and none of it works – everything gets displayed in one column, underneath each item, I have tried these two codes for example:
https://codepen.io/mephysto/pen/ZYVKRY
https://www.jqueryscript.net/slider/multi-item-carousel-bootstrap.html

and this is the desired code, I have been successfully using on other sites:

if( $featured_posts ): ?>

// Setup this post for WP functions (variable must be named $post).
setup_postdata($post); ?>

" .$tag->name. "

"; } } ?>

get_price_html()?>

Previous Next

Can I get some help with this one, please?
Am I missing something?

[crftwrk]

Yes, that‘s because Bootstrap‘s carousel component is not able to show columns by default. Getting your Codepen examples working in a WP loop with Bootstrap carousel is quiet hard.

For this reason we‘ve created the bS Swiper plugin https://bootscore.me/documentation/bs-swiper/ which is able to show WooCommerce products or any other custom post types.

Use this plugin with a simple shortcode and show your customers products in a slideshow.

BTW I converted this issue into a discussion, because this isn‘t a theme bug.

Does this help?

[MartynaC]

I need the sliders to display content - for example products or posts or just images chosen from ACF fields, for example - I have front page, where I want to display products chosen in ACF relationship field.

[MartynaC]

I do not see how I can add that to the shortcode - I do not want sliders to be pre-made, I need to give control to my client, so he can choose his products/images from the admin. :)

[justinkruit]

You could achieve that using the plugin @crftwrk mentioned. But if you prefer to write it yourself, I highly recommend checking out SwiperJS (https://swiperjs.com/), in which you can do a loop of the relationship field.

[MartynaC]

I am not too keen on writing it myself tbh :) if there is a ready-made solution I'd be glad to use it - so if I understand it correctly, I shall overwrite the swiper file, inserting ACF fields in there and then use it as a shortcode?

so for example if I want to create a swiper with products I shall create a template :
/my-theme/bs-swiper-main/swiper-my-products.php

and then use it in shortcode as

[bs-swiper-my-products orderby="date" posts="12" ]

am i thinking correctly?

[crftwrk]

Almost, not that complicated. Plugin overrides works like WooCommerce template files, do it exactly as described in the docs.

1. Use shortcode to show products in your content [bs-swiper-card-product category="shoes, trousers" order="DESC" orderby="date" posts="12"], change categor(ies) shoes, trousers to yours.
2. Create folder bs-swiper-main in your child-theme's root folder
3. Go to folder wp-content > plugins > bs-swiper-main > templates and copy sc-swiper-card-product.php straight to folder bs-swiper-main in your child
4. Add Advanced Custom Fields to this file

[MartynaC]

Thank you for your answers!
I manage to have it working the way I need :)
I have to create many different sliders, so I am adding new shortcodes and creating new templates for swipers in my child theme - works great!