after enable slider

Hello there, I can’t access your website. Wordfence is blocking me. From what you said it sounds like a CSS conflict with your theme.

hi, now is open, please try Link again, thank you!!
https://www.apshop.tw

Ok yes, I can see the website now. The problem is on the theme CSS.

Do you know how to add custom CSS? if you do then try this:

.woo-related-products-container .col-md-3.col-sm-4.col-xs-6 {
    width: 100%;
}

If not just let me know.
Thanks.

Thank you Vagelis. now is normal, if I want on desktop browse related product 4 product (now is 3 ), how to do on CSS ?

Glad it worked, to change the slider you’ll need to destroy and re-initiate.
You can do that by adding this function into your functions.php file

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' );

Please do that only if you are familiar with functions.php file edits.

thank you!!
now is show on desktop browse with 4 product normal, but on link the right side of related products (red ring), can you help fix this?
https://www.apshop.tw/wp-content/uploads/2019/03/1.png

That should help:

.woo-related-products-container {
    width: 98%;
    margin: 0 auto;
}

not have fix, but still thanks for your support!!

Well if it didn’t work try to use !important

.woo-related-products-container {
    width: 98%!important;
    margin: 0 auto!important;
}

• This reply was modified 5 years, 8 months ago by Vagelis.

thank you! but still not work, haha…. but this problem is not important, thank you!

if I want on desktop browse related product 6 product, how to do on php? sorry I’m a newbie…..haha

if you want to display 6 items in carousel you ‘ll need to change items variable in the function you added on your functions.php file

owl.owlCarousel({
items : 6,
itemsDesktop : [1000,3],
itemsDesktopSmall : [900,3],
itemsTablet: [600,2],

• This reply was modified 5 years, 8 months ago by Vagelis.
• This reply was modified 5 years, 8 months ago by Vagelis.

thank you!!

because some one product have long title, and some one product have short title, so show on related layout not neatly aligned, Can you help me fix for title change four columns, because I think this can fix my problem. Or you have a better proposal, thank you!

Link : https://www.apshop.tw

Hello there, use this to set a minimum height for titles (will solve your issues for 2 and 3 lines titles)

.woo-related-products-container h6.product-item-content-heading {
    min-height: 40px;
}

thank you!

In matter of join car “Red ring”, how to do CSS can align?

please ss https://www.apshop.tw/wp-content/uploads/2019/04/note.png