
-
AuthorPosts
-
June 24, 2022 at 6:36 pm #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)How can I solve?
June 26, 2022 at 3:28 pm #1356532Hey 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:
After:
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,
MikeJune 27, 2022 at 12:58 pm #1356595Thank you Mike!
Problem solved.
So that the entire site follows the same line, I put it on all products in the same way.June 27, 2022 at 1:02 pm #1356596It’s possible apply a horizontal scrool to long tables?
June 27, 2022 at 1:19 pm #1356597Hi,
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,
MikeJune 27, 2022 at 2:59 pm #1356605Thank you Mike!
You save the day :)
June 27, 2022 at 6:20 pm #1356620 -
AuthorPosts
- You must be logged in to reply to this topic.