Product Carousel Doesn’t Display Properly on Mobile

[julanjubalam]

I think it will be more helpful to others when they have the same problem as me in the future and can search through the thread on Babiato.co
So I will write here according to the title and question.

I previously wrote here, in my other question to ask and got help with my problem. Thank you @Knights for your help.

https://babia.to/threads/show-data-on-product-loop-woocommerce.62831/#post-91698

I changed the product carousel display with some css code for mobile display.
Generally, on the mobile display it will show 2 products per line (before : https://snipboard.io/zYW1nS.jpg).

And I want to be 1 product + next partial product per line, like here I’m displaying it for mobile display.(after add some css : https://snipboard.io/ecKVzg.jpg)

Normally, when a product is swiped, it will display the next product.
However, I’m having a problem, when the next product doesn’t display properly ( eg: when the carousel starts on product 1, it shifts to product 3 and so on.)

Please see the link below for the screen recording for more details.
(https://we.tl/t-qTjjdXwyRX) or you can see live here (Use Mobile Layout view to check this on desktop – https://bit.ly/3O7l2c)

This is the css code I added

@media only screen and (max-width: 400px) {
.woocommerce ul.products {
margin-left: -10px;
margin-right: -80%;
}
@media only screen and (max-width: 400px) {
.woocommerce ul.products:not(.slick-slider) {
display: list-item;
flex-wrap: wrap;
overflow: scroll;
}

Thank you in advance.
Really appreciate anyone’s help.

 

[Knights]

This isn't a CSS problem. It's the JavaScript configuration. Your problem is within your script settings for the slick slider. You can find the file at: https://<site>/wp-content/themes/martfury/js/scripts.js

Put all the Product Slider ''CSS'' back to default, the CSS you added. Then Identify the slider being used and modify the breakpoint ''width'' settings for that slider. It looks something like this:

breakpoint: 767,
    settings: {
    slidesToShow: 2,
    slidesToScroll: 2
}

Change to -->

breakpoint: 767,
    settings: {
    slidesToShow: 1,
    slidesToScroll: 1
}

I don't know which slider is being used, so you will need to identify it and modify the breakpoint settings or just change all of the ''767'' breakpoints to show a maximum of 1 product.

You can find out more here:

• https://kenwheeler.github.io/slick/

Hope that helps point you in the right direction.

 

[julanjubalam]

Hi @Knights

Thanks for help.
I've tried replacing as you suggested. But when I replace it, it doesn't change the appearance. Is there a step I missed? Thank you very much for your time

 

[Knights]

Hi @Knights

Thanks for help.
I've tried replacing as you suggested. But when I replace it, it doesn't change the appearance. Is there a step I missed? Thank you very much for your time

Ah! Yes you are correct. For some reason the theme isn't using those settings. I recommend you use this plugin instead. It seems to be a similar match and has more control over the settings.

• https://babia.to/resources/yith-woocommerce-product-slider-carousel.137/

Install and activate the plugin.

Go to --> Admin --> YITH --> ADD NEW PRODUCT SLIDER CAROUSEL --> Configure your settings to match your previous Carousel. Save the slider. You will then find your shortcode. e.g. [yith_wc_productslider id=2525].

Edit your page within Elementor --> Add new a ''Shortcode'' block and paste the ''shortcode''. You can configure the settings easier within YITH --> Settings.

You can then style/change the CSS for the new carousel. Message back if you need help with the styling.

 

[julanjubalam]

Ah! Yes you are correct. For some reason the theme isn't using those settings. I recommend you use this plugin instead. It seems to be a similar match and has more control over the settings.

• https://babia.to/resources/yith-woocommerce-product-slider-carousel.137/

Install and activate the plugin.

Go to --> Admin --> YITH --> ADD NEW PRODUCT SLIDER CAROUSEL --> Configure your settings to match your previous Carousel. Save the slider. You will then find your shortcode. e.g. [yith_wc_productslider id=2525].

Edit your page within Elementor --> Add new a ''Shortcode'' block and paste the ''shortcode''. You can configure the settings easier within YITH --> Settings.

You can then style/change the CSS for the new carousel. Message back if you need help with the styling.

Hi @Knights

I'm already know the reason why there is no change in the js file when edit.
It's because of different js files location.
As it turns out, it is controlled by the add ons of their built-in plugin theme.

Thanks in advance @Knights for helping with my previous investigation.



Really appreciate you.

 

[Knights]

Hi @Knights

I'm already know the reason why there is no change in the js file when edit.
It's because of different js files location.
As it turns out, it is controlled by the add ons of their built-in plugin theme.

Thanks in advance @Knights for helping with my previous investigation.



Really appreciate you.

I'm glad you found a solution. No problem! Hopefully i helped you a little and pointed you in the right direction.