Title: after enable slider
Last modified: March 26, 2019

---

# after enable slider

 *  Resolved [chappiewu](https://wordpress.org/support/users/chappiewu/)
 * (@chappiewu)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/after-enable-slider/)
 * After enable slider show on mobile device is normal, But browse on desktop device
   the related product layout is too small and not normal, the web link [https://www.apshop.tw/](https://www.apshop.tw/)
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fafter-enable-slider%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 15 replies - 1 through 15 (of 27 total)

1 [2](https://wordpress.org/support/topic/after-enable-slider/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/after-enable-slider/page/2/?output_format=md)

 *  Plugin Contributor [Vagelis](https://wordpress.org/support/users/eboxnet/)
 * (@eboxnet)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/after-enable-slider/#post-11356372)
 * 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.
 *  Thread Starter [chappiewu](https://wordpress.org/support/users/chappiewu/)
 * (@chappiewu)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/after-enable-slider/#post-11356858)
 * hi, now is open, please try Link again, thank you!!
    [https://www.apshop.tw](https://www.apshop.tw)
 *  Plugin Contributor [Vagelis](https://wordpress.org/support/users/eboxnet/)
 * (@eboxnet)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/after-enable-slider/#post-11356907)
 * 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.
 *  Thread Starter [chappiewu](https://wordpress.org/support/users/chappiewu/)
 * (@chappiewu)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/after-enable-slider/#post-11356955)
 * Thank you Vagelis. now is normal, if I want on desktop browse related product
   4 product (now is 3 ), how to do on CSS ?
 *  Plugin Contributor [Vagelis](https://wordpress.org/support/users/eboxnet/)
 * (@eboxnet)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/after-enable-slider/#post-11356970)
 * 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.
 *  Thread Starter [chappiewu](https://wordpress.org/support/users/chappiewu/)
 * (@chappiewu)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/after-enable-slider/#post-11357021)
 * 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](https://www.apshop.tw/wp-content/uploads/2019/03/1.png)
 *  Plugin Contributor [Vagelis](https://wordpress.org/support/users/eboxnet/)
 * (@eboxnet)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/after-enable-slider/#post-11357047)
 * That should help:
 *     ```
       .woo-related-products-container {
           width: 98%;
           margin: 0 auto;
       }
       ```
   
 *  Thread Starter [chappiewu](https://wordpress.org/support/users/chappiewu/)
 * (@chappiewu)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/after-enable-slider/#post-11357067)
 * not have fix, but still thanks for your support!!
 *  Plugin Contributor [Vagelis](https://wordpress.org/support/users/eboxnet/)
 * (@eboxnet)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/after-enable-slider/#post-11357138)
 * 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 7 years, 1 month ago by [Vagelis](https://wordpress.org/support/users/eboxnet/).
 *  Thread Starter [chappiewu](https://wordpress.org/support/users/chappiewu/)
 * (@chappiewu)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/after-enable-slider/#post-11357172)
 * 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
 *  Plugin Contributor [Vagelis](https://wordpress.org/support/users/eboxnet/)
 * (@eboxnet)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/after-enable-slider/#post-11357180)
 * 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 7 years, 1 month ago by [Vagelis](https://wordpress.org/support/users/eboxnet/).
    -  This reply was modified 7 years, 1 month ago by [Vagelis](https://wordpress.org/support/users/eboxnet/).
 *  Thread Starter [chappiewu](https://wordpress.org/support/users/chappiewu/)
 * (@chappiewu)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/after-enable-slider/#post-11357239)
 * thank you!!
 *  Thread Starter [chappiewu](https://wordpress.org/support/users/chappiewu/)
 * (@chappiewu)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/after-enable-slider/#post-11396365)
 * 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 : [http://www.apshop.tw](http://www.apshop.tw)
 *  Plugin Contributor [Vagelis](https://wordpress.org/support/users/eboxnet/)
 * (@eboxnet)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/after-enable-slider/#post-11397574)
 * 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;
       }
       ```
   
 *  Thread Starter [chappiewu](https://wordpress.org/support/users/chappiewu/)
 * (@chappiewu)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/after-enable-slider/#post-11397861)
 * 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](https://www.apshop.tw/wp-content/uploads/2019/04/note.png)

Viewing 15 replies - 1 through 15 (of 27 total)

1 [2](https://wordpress.org/support/topic/after-enable-slider/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/after-enable-slider/page/2/?output_format=md)

The topic ‘after enable slider’ is closed to new replies.

 * ![](https://ps.w.org/woo-related-products-refresh-on-reload/assets/icon-256x256.
   png?rev=1531812)
 * [Related Products for WooCommerce](https://wordpress.org/plugins/woo-related-products-refresh-on-reload/)
 * [Support Threads](https://wordpress.org/support/plugin/woo-related-products-refresh-on-reload/)
 * [Active Topics](https://wordpress.org/support/plugin/woo-related-products-refresh-on-reload/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woo-related-products-refresh-on-reload/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woo-related-products-refresh-on-reload/reviews/)

 * 27 replies
 * 2 participants
 * Last reply from: [chappiewu](https://wordpress.org/support/users/chappiewu/)
 * Last activity: [6 years, 11 months ago](https://wordpress.org/support/topic/after-enable-slider/page/2/#post-11630312)
 * Status: resolved