Change Woocommerce Tabs layout to Horizontal on phone only

[siddharth]

I just want to change woocommerce tabs layout to horizontal on phone I have tried the below css for that but its displaying incorrectly or not working and also i want to scroll that tabs as well

.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    justify-content: space-between;
}

but the above css is not working…so could you please guide or provide me the css which is compatible with woodmart theme.

Thanks

• This topic was modified 2 years ago by siddharth.

Hello,

Sorry to say but this wouldn’t be correctly possible to adjust the Tabs with Custom CSS for Mobile view.

Right now, if you have selected the Tabs Layout as Tabs or Accordion under the Theme Settings > Single Product > Tabs then previews like this on Mobile view: https://ibb.co/xqxCkRj

Best Regards

The its an humble request to please provide the custom css which could change the mobile tabs layout to horizontal and scrollable

Hello,

Sorry to say this, but if it could’ve been possible with Custom CSS then we would’ve already you.

It requires Customization and might require changes in the Theme files which is beyond our limitations and support policy scope. Hope you can understand our limitations.

Best Regards

[siddharth]

Respected Sir,

I am just telling you to provide the css or help me in providing css class that should trigger the layout change in woodmart theme i am not telling to customizing woodmart theme…i don’t want accordion tabs in phone. It should be a recommended feature by that should be considered by woodmart we should have the option to change layout to sticky horizontal in phone.. Anyways is there’s anyway we can disable accordion tabs in smartphone and replace it with scrollable horizontal tabs like its showing in Desktop/Laptop

• This reply was modified 2 years ago by siddharth.

Hello,

Could you please send me a link to your website so I can see your current configuration and better understand what you are asking about?

Kind Regards

[siddharth]

Please see the screenshot and i have shared the product link in private info

• This reply was modified 2 years ago by siddharth.

Attachments:

You must be logged in to view attached files.

Please, send us your admin access to this website also. Thank you.

Kind Regards

Sorry for delay…I have shared the access.

Hello,

You can’t do this with custom CSS, unfortunately. But you can achieve this with our custom Single Product page layout. This feature is available in our latest theme version so you need to update it first.
https://xtemos.com/docs-topic/single-product-page-builder/

Kind Regards

[Author]

Posts