Comments 1Paolo started the conversationDecember 3, 2024 at 3:22pmIs it possible to have an accordion display for the various components on the product page?Attached files: Screenshot 2024-12-03 alle 16.18.12.png 1,287Dustin repliedDecember 4, 2024 at 8:52amHi Paolo, Please add the custom code below. (How to add custom code? ↗): add_action( 'wp_footer', function () { ?> <style> .wooco_component_layout_list .wooco_component_product_selection { flex-direction: column; } .wooco_component_layout_list .wooco_component_product_selection_list.wooco_component_product_selection_hide { display: none; } .wooco_component_layout_list .wooco_component_product_selection_toggle { display: block; width: 100%; padding: 20px; margin-bottom: 10px; text-align: center; border: 1px solid #dddddd; cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .wooco_component_layout_list .wooco_component_product_selection_toggle:hover { border-color: #999999; } .wooco_component_layout_list .wooco_component_product_selection_toggle:before { content: '↓'; margin-right: 10px; } .wooco_component_layout_list .wooco_component_product_selection_toggle.wooco_component_product_selection_close:before { content: '↑'; } </style> <script type="text/javascript"> (function($) { $(function() { // ready if ($('.wooco_component_layout_list').length) { $('.wooco_component_layout_list').each(function() { $('<div class="wooco_component_product_selection_toggle">View component products</div>'). insertBefore($(this).find('.wooco_component_product_selection_list')); $(this). find('.wooco_component_product_selection_list'). addClass('wooco_component_product_selection_hide'); }); } }); $(document).on('click touch', '.wooco_component_product_selection_toggle', function(e) { $(this).toggleClass('wooco_component_product_selection_close'); $(this). closest('.wooco_component_product_selection'). find('.wooco_component_product_selection_list'). toggleClass('wooco_component_product_selection_hide'); }); })(jQuery); </script> <?php }, 99 ); Then, the optional component will be collapsed: Best regards,Dustin 1Paolo repliedDecember 4, 2024 at 9:52amgood!1 Like Sign in to reply ...
Is it possible to have an accordion display for the various components on the product page?
Attached files: Screenshot 2024-12-03 alle 16.18.12.png
Hi Paolo,
Please add the custom code below. (How to add custom code? ↗):
add_action( 'wp_footer', function () { ?> <style> .wooco_component_layout_list .wooco_component_product_selection { flex-direction: column; } .wooco_component_layout_list .wooco_component_product_selection_list.wooco_component_product_selection_hide { display: none; } .wooco_component_layout_list .wooco_component_product_selection_toggle { display: block; width: 100%; padding: 20px; margin-bottom: 10px; text-align: center; border: 1px solid #dddddd; cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .wooco_component_layout_list .wooco_component_product_selection_toggle:hover { border-color: #999999; } .wooco_component_layout_list .wooco_component_product_selection_toggle:before { content: '↓'; margin-right: 10px; } .wooco_component_layout_list .wooco_component_product_selection_toggle.wooco_component_product_selection_close:before { content: '↑'; } </style> <script type="text/javascript"> (function($) { $(function() { // ready if ($('.wooco_component_layout_list').length) { $('.wooco_component_layout_list').each(function() { $('<div class="wooco_component_product_selection_toggle">View component products</div>'). insertBefore($(this).find('.wooco_component_product_selection_list')); $(this). find('.wooco_component_product_selection_list'). addClass('wooco_component_product_selection_hide'); }); } }); $(document).on('click touch', '.wooco_component_product_selection_toggle', function(e) { $(this).toggleClass('wooco_component_product_selection_close'); $(this). closest('.wooco_component_product_selection'). find('.wooco_component_product_selection_list'). toggleClass('wooco_component_product_selection_hide'); }); })(jQuery); </script> <?php }, 99 );
Then, the optional component will be collapsed:
Best regards,
Dustin
good!