Please submit a private ticket if you need to share sensitive information, such as license details and admin credentials.

Okay
  Public Ticket #3776467
Accordion
Open

Comments

  •  1
    Paolo started the conversation

    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

  •  1,287
    Dustin replied

    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:

    1847710466.png

    6258126457.png

    Best regards,
    Dustin

  •  1
    Paolo replied

    good!