Woocommerce product tabs - global block?

[bethw789]

I have a couple of questions about the product tabs (description, etc) on Woocommerce product pages.

1. Is it possible (easy) to add a global block for content on one of the tabs? I’m thinking shipping info or product FAQs that I can update in one place and apply to each page. I know how to retitle the tabs using PHP, but I’m not sure about adding a global block.

2. Is there a way to remove the tab structure altogether and have just the gorgeous red line (particle?) above description like this:

I’m using Pro/Integrity. Thanks in advance!

[Prasant]

Hello @bethw789,

Thanks for asking.

1. Please note that the changes you are looking for falls outside the scope of support we can offer. However, to help you get started I am giving you some pointers that you can use. You can output the contents of global block by adding the shortcode in tabs.php file under /wp-content/themes/x/woocommerce/single-product/tabs/. To output the shortcode you can use following code:

<?php echo do_shortcode('[cs_gb id=2046]' ); ?>

Replace cs_gb id=2046 with the global block shortcode. To learn more about do_shortcode function, please take a look at following article:

https://developer.wordpress.org/reference/functions/do_shortcode/

That being said, before making any changes please make sure to install and setup child theme. Here are the resources that you can use to setup child theme.

Download child theme: https://theme.co/apex/child-themes

Child Themes | Themeco Docs

Best Practices | Themeco Docs

2. To remove border from tabs, you can add following CSS under Pro > Theme Options > CSS:

.x-nav-tabs>li {
    border: 0;
}

If you would like to learn CSS, please take a look at following resource: https://www.w3schools.com/css/

Thanks.

[bethw789]

Thanks for that. I’m going to skip the global block for now and use a link to my shipping page instead.

I still can’t figure out how to remove the description tab title without losing the h1 description and text underneath. I’ve already removed the other two tabs using PHP, but I need this tab to show (just without the repetitious ‘description’ label or line underneath it). This is what I’m looking for:

I’m using a child theme and I’m comfortable with CSS once I’m sure I’m targeting the right element. LOL.

Thanks!

[ruenel]

Hello There,

To get rid of the product tab nav, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.woocommerce-tabs .x-nav-tabs {
    display: none;
}

We would loved to know if this has work for you. Thank you.

[bethw789]

Yesss! I added the border and it’s gorgeous:

.x-tab-content > .active {
display: block;
border-top: 3px solid #C12639;
}

Thank you for your help!!!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.