How do I copy a style of an element in Pro 6?

[powrider686]

It used to be so easy with save and apply presets! I’ve saved the source element as a Template but can’t find how to apply that template. The element in question is Product Tabs for a Woo product. Different product types have different tab styles.

[ruenel]

Hello @powrider686,

Thanks for writing in!

You can save the element as a template like this:

And then, instead of applying to a Column, you can insert the template directly like how you insert a new element like this:

Hope this helps.

[WPDave]

Thanks, this does help!

[marc_a]

Hey @WPDave,

You’re welcome!

[powrider686]

Hi @ruenel! Thanks so much for your response!

I’m really only trying to match the styling of the product tabs, not the content? I’m sure I’m a little lost, but if I right click on the Product Tabs element, Manage > Save Template, then navigate to a different product and insert that template, it inserts the containing elements’ markup from what I can tell. The actual content is correct, though.

I’m trying to match only the styling of:

to:

When I insert the template I made from the first screenshot it rendered this:

The styles are different because they are different product types, I suspect.

Any insight is appreciated!
Thank you!

[tristup]

Hi @powrider686,

You have followed the correct way as explained by my colleague Runel. If that is not working for you, we need to check through the WordPress admin dashboard. I would suggest you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password
– Specific Layout/ Product and the section which you are trying to save in this case.

To create a secure note, click the key icon underneath any of your posts.

Thanks

[powrider686]

Hi @tristup, thanks for following up.

I’m trying to match the styling of the product tabs of this product (type Subscription):

Medium Roast Subscription - Bonfire Coffee Company

To this one (type Variable):

Organic English Breakfast - Bonfire Coffee Company

Login URL is default:
/wp-login.php

Thank you!

[tristup]

Hi @powrider686,

The given credentials are not working, can you please check and send it once again.

Thanks

[christian]

Hey @powrider686,

I noticed that you’re using the Tabs element in both product pages but they’re just styled differently. While waiting on the correct logins, know that Pro has a Copy and Paste Style feature that now you can copy and paste across builders. Check our Context Menu tutorial to learn more (see https://youtu.be/HidvW9mbeuQ)

Hope that helps.

[powrider686]

Hi @christian, thank you for your reply and sorry for the delay!

I’ve set the password to match the secure note, sorry about that!

[powrider686]

@christian I followed the process from the above GIF with no luck, any insight is much appreciated!

Thank you!

[ruenel]

Hey @powrider686,

Copying and pasting of the styling of the Tabs element will not work on the page because you have this custom CSS:

.x-tabs-list ul li {
    flex-basis: calc(100%/3);
}
.x-tabs-list ul li button {
    font-size: 14px !important;
    text-transform: none !important;
    font-family: "Roboto",sans-serif !important;
    letter-spacing: normal !important;
}
.x-tabs-list ul {
    border: 1px solid #ddd;
}
.x-tabs-list ul li {
    flex-basis: calc(100%/3);
    border-right: 1px solid #ddd;
}
.x-tabs-list button:hover, .x-tabs-list button[class*="active"] {
    border-top: 3px solid #000 !important;
    border-bottom: 0;
}
.x-tabs-panel {
    box-shadow: none !important;
    padding: 4% !important;
}
.x-tabs-panels h2 {
    font-size: 200%;
    margin-bottom: 15px;
}

You will need to remove this custom CSS to resolve your issue.

Cheers.