Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1356422

    Hi,
    I need to introduce tables in some products.
    As the tables are large, they are not fully visible on the page. (photo in the link)

    https://noventa365-my.sharepoint.com/:i:/g/personal/info_noventa_pt/EQtLSr8J2odLrHTK87OhA2YBfE9nmmUokOVa1tk3UJFaBA?e=xjkFht

    How can I solve?

    #1356532

    Hey noventa90,
    Thank you for the link to your site, I recommend moving the woocommerce tabs below the product image so they will be full width and your table will show full width.
    Before:
    2022-06-26_001.jpg
    After:
    2022-06-26_002.jpg
    This could be achieved on all product pages with this code added to the end of your child theme functions.php file in Appearance ▸ Editor:

    function av_woo_tabs_below() {
        remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 1 );
        add_action('woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 20 );
        }
    add_action( 'init', 'av_woo_tabs_below');

    But as I understood your question you only wanted this on some products, so use this instead:

    add_action( 'woocommerce_single_product_summary', 'woo_tabs_below', 20);
    function woo_tabs_below() {
       global $post;
       $idsArr = [1100, 1098];
       if ( is_single() && in_array($post->ID, $idsArr )) {
          remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 1 );
        add_action('woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 20 );
    
       }
    }

    change the numbers 1100, 1098 to your product pages, and you can add more.
    You will notice some extra padding between the tabs and the product image so add this css to your Quick CSS to remove:

    #top.single-product .template-shop .single-product-main-image {
    	padding-bottom: 0;
    }
    #top.single-product .template-shop .single-product-main-image ~ .woocommerce-tabs {
    	padding-top: 0;
    }

    Best regards,
    Mike

    #1356595

    Thank you Mike!

    Problem solved.
    So that the entire site follows the same line, I put it on all products in the same way.

    #1356596

    It’s possible apply a horizontal scrool to long tables?

    #1356597

    Hi,
    You can add a horizontal scrool to the woocommerce tabs panel with this css:

    #top div div.product .woocommerce-tabs .panel {
        overflow-x: scroll;
        overflow-y: hidden;
    }

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1356605

    Thank you Mike!

    You save the day :)

    #1356620

    Hi,

    Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.