By default, Single Product tabs on mobile are hidden and only opened one is visible. This may confuse some customers. So, if you want to make this part of functionality more intuitive & user-friendly, follow suggestions below:
Enter server environment through this path:
/wp-content/themes/chromium/assets/js/theme-helper.js
Add the following code around line 15:
/* Add open class to wc tabs to dropdown on mobile */
if ( (window.matchMedia(“(max-width: 768px)”).matches) ) {
$(‘.wc-tabs’).addClass(“open”);
}Add the following code areound line 27:/* Hide tab content when tab list is shown */
if ( (window.matchMedia(“(max-width: 768px)”).matches) ) {
$(‘.woocommerce-Tabs-panel’).addClass(“hidden”);
$(“.wc-tabs”).on(“click”, function() {
$(“.woocommerce-Tabs-panel”).toggleClass(“hidden”);
});
}
Once it’s done, enter this file:
/wp-content/themes/chromium/assets/css/woo-styles.css
Add the following code at the end of the file:
.hidden {
display: none ! important;
}