Plugin Contributor
Vagelis
(@eboxnet)
Hello there, I believe it’s your theme’s CSS that causing this issue
could you disable
div.owl-wrapper div.owl-item {
max-width: 180px;
}
for a moment and test?
div.owl-wrapper div.owl-item {
max-width: 180px;
}
did not help..
.owl-wrapper {
width: 8800px;
left: 0px;
display: block;
transform: translate3d(-6400px, 0px, 0px);
transition: all 800ms ease 0s;
}
maybe this is the problem
Plugin Contributor
Vagelis
(@eboxnet)
Did you remove this ? is it out atm ?
div.owl-wrapper div.owl-item {
max-width: 180px;
}
Plugin Contributor
Vagelis
(@eboxnet)
if you can’t remove then you should ADD this one
#woorelatedproducts .owl-item {
max-width: initial!important;
}
This will override your theme’s css
#welelatedproducts .owl-item {
max-width: initial! important;
}
added
Plugin Contributor
Vagelis
(@eboxnet)
Great, spacing issue fixed.
Plugin Contributor
Vagelis
(@eboxnet)
If you want to get 4 columns in the slider to reduce the size of related products you can use the function below into your child theme’s function.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' );
If you are not familiar editing PHP files you should avoid doing that.
