Skip Navigation

[Resolved] Products Slider from Module Manager Not Displaying Correctly

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 5.81 hours from now. Thank you for your understanding.

This topic contains 5 replies, has 2 voices.

Last updated by marcusC-4 4 years, 4 months ago.

Assigned support staff: Luo Yang.

Author
Posts
#544479

I am using the "Products Slider" module that I downloaded from this page: https://toolset.com/home/module-manager/ and the layout is not right. It shows the products stacked instead of side-by-side.

Here is a URL where you can view the slider: hidden link The password to view the page is GHE2017

I want to use the slider at the top of a custom Layout for WooCommerce archive pages, which you can see by going to the Shop page or any of the archive pages. They are linked to in the main nav menu.

It looks like this module uses Bootstrap 2 classes. Can it be updated to work with Bootstrap 3.0?

#544615

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

sliders.JPG

Dear Marcus,

What do you means this:
It shows the products stacked instead of side-by-side.

I checked the problem page you mentioned above:
hidden link
There is a view in the top of above page, see screenshot: sliders.JPG, are we talking about this view?

There is only one item(image) in the sliders, are you going to display two or three items(images) in each slider?
For example:
Slider 1
-- Item A
-- Item B
-- Item B
Slider 2
-- Item C
-- Item D
-- Item E
...

If it is, please edit the view, in section "Pagination and Sliders Settings", option "Pagination options", choose "Display 3 items per page".

More help:
Views Pagination – Split Content into Pages
https://toolset.com/documentation/user-guides/views-pagination/

#544617

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

sliders.JPG

Dear Marcus,

What do you means this:
It shows the products stacked instead of side-by-side.

I checked the problem page you mentioned above:
hidden link
There is a view in the top of above page, see screenshot: sliders.JPG, are we talking about this view?

There is only one item(image) in the sliders, are you going to display two or three items(images) in each slider?
For example:
Slider 1
-- Item A
-- Item B
-- Item B
Slider 2
-- Item C
-- Item D
-- Item E
...

If it is, please edit the view, in section "Pagination and Sliders Settings", option "Pagination options", choose "Display 3 items per page".

More help:
Views Pagination – Split Content into Pages
https://toolset.com/documentation/user-guides/views-pagination/

#544847

Hi Luo,

Thanks for checking out the page, but I think you need to scroll down to see the other products on that slide. At the very bottom of the page, you will see a little green square. That is the "Next" button. Click on that & you will see that all 3 products slide at once.

Yes, the "Display 3 items per page." option is already selected. I downloaded the module referenced in my original post & have not made any changes to it other than adding an image to the loop.

If you Inspect Element on that slider, you will see Bootstrap 2 column classes. I was wondering if this is causing the issue & if there is a version of this module that is updated for Bootstrap 3.0?

#544928

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

For the question:
I was wondering if this is causing the issue & if there is a version of this module that is updated for Bootstrap 3.0?
I assume we are talking about the CSS class "span3", yes it is outdated, if you are using Bootstrap V3 framework, it will cause the issue, and there isn't version of this module that is updated for Bootstrap 3.0, and I suggest you replace it with CSS class "col-sm-3", you should be able to find it in the sliders view and the content template.

#547713

that’s what i wondered about. thanks for the reply. we’ve updated all the html to reflect bootstrap 3.0 classes.