Okay
  Public Ticket #2824766
No title for full width tabs on WooCommerce
Closed

Comments

  •  8
    benoitfouc33 started the conversation
    July 13, 2021 at 11:55am

    Hi there, since the major update 13 of Salient, you add a new option on WooCommerce > Single Product > Product Tab Position : Fullwidth Under Images Stacked (No Tabs) (see the attached screen1.png).

    That's a great feature, today all shops are display like that.

    But i've an issue with it : no title appear on the content. I'm using both default and custom tabs, and when i enable this option of full display. the content is correctly full displayed BUT missing the <h2> titles in order to separe tabs (see screen2.png).


    Regards

  •  1,882
    Judith replied
    July 13, 2021 at 12:08pm

    Hi There,

    Thanks for choosing Salient.

    I am afraid I am not replicating the issue from my end:

    3571146970.png

    Please let me know whether I am missing something.

    Thanks.

  •  8
    benoitfouc33 replied
    July 13, 2021 at 12:13pm

    Hi there, can you try again please ? 


    https://developpement.mamiemalice.fr/produit/farine-de-ble-bio/


    (i'm working on this website, this is why you don't see it before, now it will working)

  •  1,882
    Judith replied
    July 13, 2021 at 12:30pm

    Hi There,

    Please try this css:

    .woocommerce div.product .woocommerce-tabs[data-tab-style="fullwidth_stacked"] ul.tabs {
        display: flex;
    }

    Thanks.

  •  8
    benoitfouc33 replied
    July 13, 2021 at 12:38pm

    Hi there, with this code a strange table appear at the top oh the tabs content.

    But this is not the good behavior, let me show you an other example : 

    https://developpement.natureetpartage.fr/produit/chloracerola-organica/

    Here there is 2 titles of 3 : 

    DescriptionInformations complémentaires

    And missing "Avis" (reviews) title. 


    Did you understand ?


    On this case : https://developpement.mamiemalice.fr/produit/vinaigre-blanc-menager-1l/ missing all theses custom tabs <h2> : 


  •  8
    benoitfouc33 replied
    July 13, 2021 at 12:40pm

    I attach to this message a screenshot of the HTML code.

    We can see that's working perfectly for "Informations complémentaires", there is the H2.

    But missing the H2 for reviews " Avis". The H2 not appear on the code, i think it's not a CSS issue.

  •  1,882
    Judith replied
    July 13, 2021 at 1:10pm

    Hi There,

    Please send in your admin login credentials so that we can look into it further.

    Thanks.

  •   benoitfouc33 replied privately
  •  1,882
    Judith replied
    July 13, 2021 at 2:25pm

    Hi There,

    I selected this option:

    6085917901.png

    Please checked whether it helped.

    Thanks.

  •  8
    benoitfouc33 replied
    July 13, 2021 at 2:29pm

    Hi there, if i select this option the tabs will not display full sized.

    I don't wanna tabs, the option "Fullwidth Under Images Stacked (No Tabs) " is good for that, but missing titles H2 of tabs between each tab content.

  •  8,860
    Tahir replied
    July 13, 2021 at 2:49pm

    Hey Again,

    You seem to have Child Theme Customizations in place, please switch to the Parent Theme to get the new Features to work as intended: 

    1511941416.pngClick To Open Larger Image.

    Thanks 

    ThemeNectar Support Team 

  •  8
    benoitfouc33 replied
    July 13, 2021 at 2:58pm

    Hi Tahir, welcome back ! How are you since the last time ?

    Thanks for reply, yes i've customized my website with Child theme and custom plugin particularly for this menu :

    5f4542ad7d6647745929d58c794f6370.png


    So i switch to Salient main theme (parent) :

    https://i.gyazo.com/94c2d9ff16b456581961189511019a9c.mp4


    The content is good displayed, tab per tab, but no one H2 (tab title) 😣

    This is my dev website, you can make some tests ;)

  •  1,882
    Judith replied
    July 13, 2021 at 6:56pm

    Hi There,

    Please try to also check for plugin conflicts by deactivating the third party plugins then reactivate them back one by one to see the one that causes issues.

    Thanks.

  •  8
    benoitfouc33 replied
    July 15, 2021 at 8:31am

    Hi there, thanks for reply.

    I've disable all plugins except Salient Core, Salient Social, Salient WPBakery Page Builder and WooCommerce.

    Now there is only 3 tabs "Description" "Informations complémentaires" and "Avis". But as you can see, only one have a H2 title on fullwidth display : "Informations complémentaires". For the others, the content start without title between them.

    https://i.gyazo.com/0035dc86a8c1a28ab4a08c31ff53c78b.mp4

    My 3 custom tabs are not displaying because i'm using the plugin YITH WooCommerce Tab Manager Premium, and i disable it for this test. For all of my custom tabs generated by this plugin, there is no H2 title on fullwidth display.

  •  1,882
    Judith replied
    July 15, 2021 at 12:07pm

    Hi There,

    Please allow us to escalate this to the developer to look into it further.

    Thanks.

  •  8
    benoitfouc33 replied
    July 15, 2021 at 12:08pm

    Sure, you can !

    thanks for reply.

    Have a nice day

  •  1,882
    Judith replied
    July 15, 2021 at 12:09pm

    I have forwarded already,

    Thanks.

  •  1,077
    ThemeNectar replied
    July 15, 2021 at 2:46pm

    Hey benoitfouc33

    The "description" heading is not output to the screen by default in Salient. To change that would require adding this into a child theme functions.php file:

    add_filter('wc_get_template', 'salient_child_call_default_woo_templates', 20, 5);
function salient_child_call_default_woo_templates($template, $template_name, $args, $template_path, $default_path) {
    if( in_array( $template_name, array('single-product/tabs/description.php') ) ) {
        $template = wc_locate_template( $template_name, 'default', '' );
    }
    return $template;
}

    The heading for the comments section is normally set to just be paragraph text from WooCommerce (Il n’y a pas encore d’avis.) However, you can style it to match the heading typography by setting the option labeled "Product Tab Heading Typography" in the Salient options > WooCommerce > single product tab, which will normalize all tab headings to use the same typography - I've set that to use h3 as an example.

  •  8
    benoitfouc33 replied
    July 19, 2021 at 8:21am

    Hi ThemeNectar, that's a very good answer thanks a lot !

    Now i've 3 of 3 title of default tabs, because the "additionnal information" is default display on H2 :)

    For the 3 cutoms tabs, i will asqued Yith support right ?

    Regards

  •  8,860
    Tahir replied
    July 19, 2021 at 10:24am

    Hey Again,

    Yes, that's correct.

    Best 

    ThemeNectar Support Team