How to reorder tabs on product page

Hi jackiepowerfuse,

You could select the tab you would want to be shown first in the tabbed layout by navigating to the “Product Page” tab and changing the tab in “Starting Tab” option.

Thank you for the quick response! But what I’m really looking for is a way to rearrange the order of the physical tabs or buttons above the text box.

Thanks again!

Hi jackiepowerfuse,

You could use the following custom CSS as an example to arrange the tabs on the product page:

ul#upcp-tabs {
   display: inline-flex !important;
   flex-direction: row !important;
}

[data-class="upcp-tabbed-reviews"] {
   order: 1 !important;
}

[data-class="upcp-tabbed-description"] {
   order: 2 !important;
}
[data-class="upcp-tabbed-addtl-info"] {
   order: 3 !important;
}

You could select the order you want by setting attribute “order” in the example above.

Is this all the code I need? I tried uploading it onto the custom css section but it didn’t work.

Thanks!

Hi jackiepowerfuse,

The Custom CSS doesn’t look like it’s being loaded.
Just to make sure: did you add the above code into the “Custom CSS” box in the Edit Catalogue page?

No, I didn’t! I didn’t see the Custom CSS box- I was trying to upload it via the CSS File option on the Style page.

One last thing- is there a way to change the colors of the tabs?

Thank you so much!

Hi jackiepowerfuse,

You can add the following custom CSS into your catalogue to change the color of the tabs in your product pages:

.upcp-tabbed-layout-tab {
background-color: #c7470d;
}
.upcp-tab-layout-tab-unclicked {
background-color: #d16636;
}

Please make sure to change the background-color hex value with the color of your choice.