Accordion without "Compact" product page design

Hello,

I like the accordion description and shipping info tabs, but would love if they were available in another product page design, for example in default.

Is there a way to use them in that mode?

Thanks!

Hi,

Try to override the following file in your child theme basel/woocommerce/single-product/tabs/tabs.php and change this line

$tabs_layout = (basel_product_design() == 'compact') ? 'accordion' : 'tabs';

with this one

$tabs_layout = 'accordion';

Regards

Thanks, but that doesn’t solve my issue.
I already tried that but it generates accordions in the “gray” area, below product image.

I want the same as the compact view, but without the scrolling. In this case https://demo.xtemos.com/basel/shop/other/new-brands/yomber-jacket-trim/ the scroll is “fixed” in a box. I would like, if the accordion is longer, that it doesn’t have scrolling.

That is, the “compact” design without scrolling.

Is that possible?

Thanks

OK, so please enable this design and send us a link where we can see it. We will prepare a CSS fix for you.

Unfortunately I’m only working on local, but I’ve uploaded pictures.
I just want to avoid that compact scrolling. I want it to flow with the regular scroll of the webpage. In mobile it works fine as I want, but in bigger screens it doesn’t

Thanks

Attachments:

You must be logged in to view attached files.

Try to add the following code snippet to the Custom CSS in Theme Settings

.product-image-summary .summary .basel-scroll-content {
	overflow:visible;
}

.product-image-summary .summary  .basel-scroll {
    position: relative;
    overflow: visible;
}

.product-image-summary .summary  .basel-scroll .basel-scroll-content {
    position: relative;
    overflow: visible;
}

.product-image-summary .basel-scroll>.basel-scroll-pane {
	display:none;
}

Regards

Thanks for the fast response. It indeed works but the scroll bar is still appearing.
Also, could you modify the solution so that I can paste it in CSS in child theme? I prefer that.

Thanks

Attachments:

You must be logged in to view attached files.

This code removes the scroll bar as well. And you can place it to the child theme style.css.

I did what you told me. The last screenshot is from my local site with the code already added.

As you can see, it is still not working. The scroll bar is still appearing. I tried deleting cache just in case and nothing.

Nevermind. I added “!important” and it worked.
Thanks!

Is there a way to remove the scrolling completely?
There is a plugin associated which will decrease my site’s page load and it’s not useful to me.

It also adds a style="margin-right: -17px;" to the basel-scroll-content element.

This is minimum but in mobile it doesn’t look centered.

Thanks!

Sorry, but we can prepare any fixes without looking at your website live.

[Author]

Posts