Amount of displayed items

Hello there,
thanks for using woo related products.

From what I see I understand that you want to increase related products carousel’s columns, you can easily increase from 3 to 4 using the function below ( as you already stated you ‘ll need to put this in your child theme function.php , if you are unfamiliar with PHP file editing please don’t do it. )

function v_woo_related_slider() { 
  if (is_product()) {?>
	<script>
	jQuery(document).ready(function($) {
	$("#woorelatedproducts").data('owlCarousel').destroy();
  	var owl = $("#woorelatedproducts");
	  owl.owlCarousel({
	      items : 4,
	      itemsDesktop : [1000,3],
	      itemsDesktopSmall : [900,3],
	      itemsTablet: [600,2],
	      autoPlay: 3500,
	      itemsMobile : false,
	  });
	  });
	</script> <?php 
	}
}
add_action( 'wp_footer', 'v_woo_related_slider' );

Hi Vagelis,

thanks for your reply.
I already tried that as you mentioned it in a thread here before. Unfortunately with no effect. Instead of 3 images being shown, it switched to only 2 with this code. In the options of the plugin I selected 4 images to be shown.
Any other idea?
I know that for my theme I had to add another code snippet to my functions.php to make it possible to display 4 items. This is the snippet, maybe it helps:

add_filter( 'woocommerce_output_related_products_args', 'change_related_products_amount', 9999 );
function change_related_products_amount( $args ) {
 $args['posts_per_page'] = 4; // # of related products
 $args['columns'] = 4; // # of columns per row
 return $args;
}

Edit: My snippet is not enabled right now, btw.
I also realize that if you refresh a single product page sometimes the slider only shows 2 items with a bigger gap between both. I am using meta slider on my homepage, but even with this being disabled I was able to reproduce the error.

Thank you for the fast reply! Best regards,
-Bj?rn

• This reply was modified 6 years, 6 months ago by gluecklichezwerge.
• This reply was modified 6 years, 6 months ago by gluecklichezwerge.

Hello again, the filter you mentioned above doesn’t affect the slider.
I see you have an active cache.
Please try again the function I sent before and wipe all your caches.

Ah i see you use multiple optimization plugins/caches.
You should test while all these are OFF.

Will give it a try as I see in Firefox now that your plugin is generating a lot more errors than displayed in Chrome.
I’ll report back to you after disabling plugins and flushing cache.

The plugin is error free.
Any errors you have in your js console are caused by the optimization.

Yes, now four items are being displayed. Not the most beautiful way for now, but we definately have a progress here. ??
It also switches back to 3 items when selected in plugin options (and code being disabled). No more errors in console, neither in Chrome, nor in Firefox.
Btw.: Is it possible to add navigation arrows like being displayed in plugin icon?

Thanks for your fast help, Vagelis! Highly appreciated!

You can easily change the design with CSS
A good start would be :

#woorelatedproducts li.product {
    padding: 10px;
}
#woorelatedproducts h2.woocommerce-loop-product__title {
    min-height: 40px;
}

You can also use CSS to alter prev-next links

Waaaaaay better and exactly what I was about to do next! ??
What do you mean with alter? I would only know how to make prev/next invisible, but not how to display navigation arrows left/right.

You can style the prev/next by extending the function i gave you before or using css :before and content (just to have an example)

I mean is it possible to remove the prev/next and replace the navigation with arrows?
For removing I’d use:

.customNavigation {
	display: none;
}

Because I don’t know if such a functionality is included in the plugin I’d insert the buttons with a Font from FontAwesome and add functionality to them. Or is there an easier way how to achieve the button menu?

No matter what…you already made my day! Big thanks for that again!

You could add this to the function i gave you

$( ".wprr a.prev").html('<i class="fa fa-chevron-left"></i>');
$( ".wprr a.next").html('<i class="fa fa-chevron-right"></i>');

or you could add the font awesome icon using CSS :before and content like this

.wprr a.prev:before {
   font-family: FontAwesome;
   content: "\f105";
}

??
Just found similar one on stackoverflow and am about to give it a try.
Done, but it should be .wprr.btn.prev / .wprr.btn.next and a.wprr.btn.prev / a.wprr.btn.next I guess.
Added the code to functions.php, but now I am struggling with removing ” – ” between both and positioning arrows before/after slider with CSS.
Sorry, for my rare knowledge, this is the first time I am working on a slider. I tried implementing bxslider before, but came upon your plugin then.

• This reply was modified 6 years, 6 months ago by gluecklichezwerge.

Update:
Decided to completely remove customNavigation with CSS and add navigation arrows through functions.php.
Next step was bringing the navigation arrows in one line with displayed related products. This is achieved with CSS:

.owl-prev {
    width: 15px;
    height: 100px;
    position: absolute;
    top: 40%;
    margin-left: -20px;
    display: block!IMPORTANT;
}
.owl-next {
    width: 15px;
    height: 100px;
    position: absolute;
    top: 40%;
    right: -25px;
    display: block!IMPORTANT;
}
.owl-prev i, .owl-next i {
	font-size: 30px;
	transform: scale(1,2);
	color: #aaa;
}

Now I am more than satisfied with the result. Thanks for all your help, Vagelis. Wish you a great week! Best regards,

-Bj?rn

Good job!