Change default page design's tabs into accordion on mobile

Hi,
I like the default page design for desktop, but on mobile the tab headings being all on top of each other seems weird. I’d like them to change into accordion on mobile, and the accordion on the compact page design seems exactly what I interested in.
Also, I prefer the tab headings to be with similar font feel as of the accordion on ‘compact’, but I guess this is easily can be achieved.
Can you pls instruct how can that be done?
cheers.

Hello,

Could you please provide us a screenshot of the tabs you want to change?

Thank you

I don’t really understand your request….
I have 2 requests:
1. I’d like the product tabs (Description, Additional Information, Reviews etc…) of Default product page design be changed to accordion on mobile.
The current display of the tabs of Default product page design on mobile is awkward, the tabs headings being on top f each other, while the content is below all of them. It should be in the form of an accordion as the accordion in the Compact product page design. But on desktop, it still should be tabs next to each other.
2. I have noticed that there is no admin options to change the tab headings font independently.
There are only 2 global font options for text and titles for the whole sites. It would be nice if you include tab headings font options. I myself can easily change it with css, but that is not client-friendly… but for now, can you provide me with a css for that?
Cheers

1. Sorry, but there is no such feature in our theme. It requires a lot of additional code customization to achieve this.

2. Do you want to change the titles only? What font do you want to set there?

1. Ok, I’ll try to make it myself. Can you pls give me directions? Which template should I change etc.
2. I’d like to change font and font-size. Lets say to: Montserrat 14px.
Cheers

pls see:
https://codepen.io/gsarig/pen/GWgNdx

1. Tabs template file is located here woocommerce / single-product / tabs / tabs.php

2. Use this CSS code for that

.single-product-content .tabs li a {
	font-family: Montserrat;
	font-size: 14px!important;
}

Well, I’ve made it. It’s quite easy, I’ve just created a media query max-width:800px for .tabs-layout-tabs and given it the .tabs-layout-accordion css (or more easily: copied all instances of .tabs-layout-accordion into the new media query and replaced ‘accordion’ with ‘tabs’ + deleted 1 instance of .product-design-compact)
As for JS, in js/function.js I’ve made a new copy of productAccordion: function() with different name and replaced $accordion = $('.tabs-layout-accordion'); with $accordion = $('.tabs-layout-tabs'); + added it into init list.
The only problem is that I don’t know how to move this function into child theme. The CSS I’ve included in the child theme.
Can you Help?
Cheers

Hello,

We are glad that you found the solution to this. Unfortunately, JS functions can’t be overridden in the child theme. In this situation, you may try to add additional JS file and code your functions there. Here is an article that should help you http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/

Regards

Thanks for the tip.
I’m familiar with enqueue command.
Also, I don’t want to override a function, but to add one.
The problem is, that this is not a separate function but a sub-function that I’ve added.
I’m not quite sure what part of this parent function should I include in the child-theme JS file, and of course I don’t want to copy functions.js entirely as it is huge.
Can you provide a direction?
Cheers

Also, is there a way to let tab headings inherit the main color of theme as chosen in admin instead of it being defined programmatically in child-theme style.css?
I would like to note that IMHO this is a fix that should be included in the theme’s next release, as this should be the default behavior of the tabs in mobile and not the ugly arrangement it has now.
Cheers

Could you please provide some screenshot for better understanding?

Those are not screenshot questions:
1. What of the functions.js should I keep, in order of it to work (with an add function) in a child-theme using enqueue?
2. How to make child-theme CSS inherit Primary Color defined under Styles and colors in theme settings?
Note: the accordion fix should IMHO be included in the theme’s next release.
Cheers

OK. I solved No. 1.

2. Sorry, but what exactly accordion fix you are asking about?
If you are writing some code to the child theme, you can’t use the color defined in Theme Settings. You need to manually write the color you want to use there.

I was looking for the same thing exactly no.1

Mobile view of tabs is awkward in the theme and needs an accordition design

But i’m not too experiened in altering theme files

@ raqy Could you please provide me the complete solution for this? Thank you

@xtemos Could you please add this in your future updates? tabs are not very user friendly and now days 70% of e-shops visitors are from mobile devices. Plus raqy already provided almost all the instructions to make it.

Thank you

Hello,

You can create two rows: 1st row Product Tab and 2nd-row Accordion (WP Bakey Builder element) together with Product grid http://prntscr.com/jh1x0k

Next set the visibility of the column on different devices:
1. http://prntscr.com/j4fho7
2. http://prntscr.com/j4fio2

In result, you can hide Product Tabs on mobile and show Accordion instead.

Best Regards

Thank you

But where can I edit the default template of single product in your theme?

Raqy seems to be doing that with editing theme files

Sorry, but we don’t have a quick instruction for this. It is related to additional customization that is out of our theme support scope. We will consider this improvement in our next theme update.

Please do

Thank you!

[Author]

Posts