• Resolved benjaminblue

    (@benjaminblue)


    The Accordions worked great for my tabs, but another task I have is moving those tabs that are now accordions up the page using:

    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
    add_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 60 );

    When they are relocated, they are no longer Accordions, and back to tabs. I realize this is pretty advanced / custom – i am hoping to find some insight on how i can get the accordions applied to the tabs after i have moved them.

    Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Kshirod Patel

    (@kshirod-patel)

    Hello,

    Please share your site url so that we can review this issue in your site and help you to fix this.

    Thread Starter benjaminblue

    (@benjaminblue)

    I ended up using jQuery UI accordion and it’s working great.

    Thank you though, I appreciate it!
    Ben

    63N

    (@63n)

    Hey @benjaminblue would you mind sharing how you went about using jQuery UI?

    Thread Starter benjaminblue

    (@benjaminblue)

    Hi 63N, I don’t mind at all – I will try to later today. I need to go take a closer look in that project to remember exactly what I did, but I will and post it!

    Hi all,

    @benjaminblue Did you succeed with this?
    I have the same problem, when tabs are moved from their default position to under description, the accordion is displayed correctly in the old tabs position but the old tabs are being displayed duplicated in the single_product_summary position.
    So we end up with both accordion tabs and default tabs in 2 positions.

    Theme: OceanWP

    Any help/ideas?

    Thread Starter benjaminblue

    (@benjaminblue)

    @daniel-mesteru and @63n (63N I’m sorry I never got back to you like I said I would. I definitely know first-hand about searching everywhere for solutions to tough problems, and how often another’s post saves me.)

    So, I am looking at this project which I haven’t in a while, and it looks like I

    in functions.php of my child theme (Avada in my case) I enqueued these jQuery UI files (downloaded from jQuery – just google jQuery UI) and a

    // jQuery accordion - product single page
    function product_accordion()
    {
        if ((is_product()) || (is_archive())){
    
            wp_enqueue_style('jquery-ui', get_stylesheet_directory_uri() . '/css/jquery-ui.css', 10);
            
            wp_register_script('jquery-core', get_stylesheet_directory_uri() . 'https://code.jquery.com/jquery-1.8.2.js', array('jquery'), '1.0', true);
            wp_enqueue_script('jquery-core');
            
            wp_register_script('jquery-ui', 'https://code.jquery.com/ui/1.9.0/jquery-ui.js', array('jquery'), '1.0', true);
            wp_enqueue_script('jquery-ui');
            /*
     * @source https://jqueryui.com/accordion/#no-auto-height
     */
    // alert("accordion-snippet.js start");
    
          jQuery('#accordion').accordion({ 
                collapsible:true, 
                active:false, 
                autoHeight: false, 
                disabled:true,
                heightStyle: "content"
          });
          // alert("#accordion').accordion({...}); executed");
    
          jQuery('#accordion h3.ui-accordion-header').click(function(){
                jQuery(this).next().slideToggle();
          });
          
          jQuery('.accordion-expand-all').click(function(){
                jQuery('#accordion h3.ui-accordion-header').next().slideDown();
          });
          // alert("accordion-snippet.js loaded");

    wp_register_script(‘accordion-snippet’, get_stylesheet_directory_uri() . ‘/js/accordion-snippet.js’, array(‘jquery’), ‘1.0’, true);
    wp_enqueue_script(‘accordion-snippet’);

    }
    }
    add_action(‘wp_enqueue_scripts’, ‘product_accordion’);`

    the accordion-snippet file has:

    /*
     * @source https://jqueryui.com/accordion/#no-auto-height
     */
    // alert("accordion-snippet.js start");
    
          jQuery('#accordion').accordion({ 
                collapsible:true, 
                active:false, 
                autoHeight: false, 
                disabled:true,
                heightStyle: "content"
          });
          // alert("#accordion').accordion({...}); executed");
    
          jQuery('#accordion h3.ui-accordion-header').click(function(){
                jQuery(this).next().slideToggle();
          });
          
          jQuery('.accordion-expand-all').click(function(){
                jQuery('#accordion h3.ui-accordion-header').next().slideDown();
          });
          // alert("accordion-snippet.js loaded");

    And this removes product tabs from original position and puts them next to product image:

    /**
     * @snippet       Move product tabs beside the product image - WooCommerce
     * @how-to        Get CustomizeWoo.com FREE
     * @sourcecode    https://businessbloomer.com/?p=393
     * @author        Rodolfo Melogli
     * @testedwith    WooCommerce 3.5.2
     * @donate $9     https://businessbloomer.com/bloomer-armada/
     */
    
    remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10);
    add_action('woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 60);

    I’m pretty sure that covers it, but I might have missed something. It ended up being somewhat complicated…but doable! There is a possibility i could have hidden any duplicate set of something via CSS, but hopefully I didn’t and got it done cleaner.

    Let me know if either of you need more and I’ll take a closer look. Also if inspecting the page might help, you can see it here: https://levelupnowyou.com/product/womens-survivor-racerback-tank/

    Thanks.

    Oh I see @benjaminblue ! So you’re not using this plugin or the WooCommerce inbuilt functionality at all, you’re just loading jQuery accordion and creating the tabbed content yourself?

    Thread Starter benjaminblue

    (@benjaminblue)

    @63n Yes! I started with this plugin, and eventually ran into a block. I don’t remember what it was though but I did end up downloading jQuery UI and doing the other tweaks I mentioned.

    Hello,

    I am looking in to the solution you provided here. But I am getting error while saving in functions.php file.

    Should I copy all of it and save on functions.php file

    function product_accordion()
    {
        if ((is_product()) || (is_archive())){
    
            wp_enqueue_style('jquery-ui', get_stylesheet_directory_uri() . '/css/jquery-ui.css', 10);
            
            wp_register_script('jquery-core', get_stylesheet_directory_uri() . 'https://code.jquery.com/jquery-1.8.2.js', array('jquery'), '1.0', true);
            wp_enqueue_script('jquery-core');
            
            wp_register_script('jquery-ui', 'https://code.jquery.com/ui/1.9.0/jquery-ui.js', array('jquery'), '1.0', true);
            wp_enqueue_script('jquery-ui');
            /*
     * @source https://jqueryui.com/accordion/#no-auto-height
     */
    // alert("accordion-snippet.js start");
    
          jQuery('#accordion').accordion({ 
                collapsible:true, 
                active:false, 
                autoHeight: false, 
                disabled:true,
                heightStyle: "content"
          });
          // alert("#accordion').accordion({...}); executed");
    
          jQuery('#accordion h3.ui-accordion-header').click(function(){
                jQuery(this).next().slideToggle();
          });
          
          jQuery('.accordion-expand-all').click(function(){
                jQuery('#accordion h3.ui-accordion-header').next().slideDown();
          });
          // alert("accordion-snippet.js loaded");
Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Accordion and moving tabs up the page’ is closed to new replies.