Storefront Product Tab Display

Hey Bennn,

The only way to achieve this would be by writing some CSS to change the overall design for the storefront theme as there are no settings or similar that would allow for this change in design.

Cheers

I need the horizon tab for storefront, too. I found out the mobile version shows tabs horizontal. Anyone can help CSS coding?

Hey Bennn, this should work for you after testing.

https://snippi.com/s/ziw8wk4

Screenshot: https://cld.wthms.co/1cFNA/3Vk6AQaf

If you want to show Desktop view on mobile then follow this steps

Go To your Headers File and Find this Code

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

Delete this code so desktop view will be shown on mobile

@stuart, thank you so much, the horizontal tab worked perfectly.

@mohsin786, thank you so much, I have removed the code “<meta name=”viewport” content=”width=device-width, initial-scale=1″>” and is now showing desktop view. I would have love a situation where one can choose to view desktop view from mobile and also can view mobile view as well.

When you visit some website with mobile, you have an option to click on desktop view, can I do same please.

Thank you for your support!

Hi,

I tried out this code https://snippi.com/s/ziw8wk4 for my website https://annalieserivers.com/ but my product info tabs remained vertical rather than horizontal.

I copied the raw code into my child theme style css but it didn’t change the format.

Any ideas?

Thanks alot,
Annaliese

Hey,

Looks like your code isn’t being picked up. Did you activate the child theme? ??

Try adding it to a custom css plugin instead.

Hi, Thanks for replying.
I copied and pasted the code by going to appearence – editor – style CSS then clicking on update. I got the ‘file updated successfully’ message bit it didn’t chanel anything so I deleted the code and updated again.
I’m not sure if I have anything else in my style CSS or functions php files that may be preventing further changes.
Thanks,
Annaliese

*change not chanel

Hi again,
Happy to say I have managed to change the tabs to horizontal. I also managed to delete a few random characters that were showing up and I have realigned to the left.
However, I have another tab related query. How do I change the colour of the tab background so they look like tabs. Does that make sense?
Thanks again.
Annaliese

Hey,

.woocommerce-tabs ul.tabs li a is the selector to use. Try something like;

.woocommerce-tabs ul.tabs li a {
background-color: blue;
}

Cheers

Hi everyone,

I can’t seem to sucssefuly use the code that @stuart gave on my website ??
I really need help on this, @angeltatt74 how do you manage to rsolove the question?

Thank you guys