Change default page design's tabs into accordion on mobile

This topic has 19 replies, 4 voices, and was last updated 6 years, 9 months ago by Felixwebsimple.

Viewing 20 posts - 1 through 20 (of 20 total)

Author

Posts
November 30, 2017 at 9:11 pm #26436

raqy
Participant

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.

December 1, 2017 at 7:39 am #26454

Artem Temos
Keymaster

Hello,

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

Thank you

December 1, 2017 at 10:34 am #26492

raqy
Participant

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

December 1, 2017 at 10:48 am #26499

Artem Temos
Keymaster

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?

December 1, 2017 at 11:16 am #26517

raqy
Participant

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

December 1, 2017 at 11:27 am #26520

raqy
Participant

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

December 1, 2017 at 12:53 pm #26555
Artem Temos
Keymaster
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;
}
```
December 1, 2017 at 6:47 pm #26622

raqy
Participant

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

December 1, 2017 at 10:50 pm #26655

Artem Temos
Keymaster

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

December 1, 2017 at 11:10 pm #26662

raqy
Participant

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

December 1, 2017 at 11:19 pm #26663

raqy
Participant

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

December 1, 2017 at 11:50 pm #26671

Artem Temos
Keymaster

Could you please provide some screenshot for better understanding?

December 2, 2017 at 10:02 am #26714

raqy
Participant

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

December 2, 2017 at 11:09 am #26722

raqy
Participant

OK. I solved No. 1.

December 2, 2017 at 12:13 pm #26733

Artem Temos
Keymaster

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.

May 12, 2018 at 2:50 pm #57268

Felixwebsimple
Participant

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

May 12, 2018 at 7:07 pm #57293

Elise Noromit
Member

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

May 13, 2018 at 8:45 am #57341

Felixwebsimple
Participant

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

May 13, 2018 at 8:49 am #57343

Artem Temos
Keymaster

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.

May 13, 2018 at 6:06 pm #57402

Felixwebsimple
Participant

Please do

Thank you!
Author

Posts

Viewing 20 posts - 1 through 20 (of 20 total)

The topic ‘Change default page design's tabs into accordion on mobile’ is closed to new replies.

Change default page design's tabs into accordion on mobile

Create your WordPress website.