Woocommerce product tabs on mobile version

1. I tried to edit woocommerce product tab style via CSS, it works on desktop, but there is no change in mobile version. pls help!

.woocommerce-tabs ul.tabs li.active a {
color: #ff6c00;
font-size: 20px;
}

.woocommerce-tabs ul.tabs li:not(.active) a {
color: #ff6c00;
font-size: 20px;
}

2. Can I change the woocommerce product tab layout from the mobile version to the desktop version layout? The tab title are displayed horizontally.

Hello,

The CSS is not working because the tabs are set to be displayed as accordion for the mobile and tablet devices.

Please try adding the following Custom CSS in the Custom CSS for the mobile area under Theme Settings >> Custom CSS.

a.woodmart-accordion-title.tab-title-description.active {
	color: #ff6c00;
	font-size: 20px;
}

.woocommerce-tabs .woodmart-accordion-title {
	font-size: 20px;
	color: #ff6c00;
}

And there is no option in Theme Settings to set them as tabs for mobile.

Regard’s.
Xtemos Studios.

[Author]

Posts