Return to previous page

Reorder custom and WooCommerce tab product page

This topic has 10 replies, 3 voices, and was last updated 5 years, 9 months ago ago by Rose Tyler

d4r1uzzo

Participant

January 30, 2019 at 17:33

Hello,
is it possible to place the “Recipes” tab before the “Reviews” tab?

http://prntscr.com/mec70o

The “Recipes” tab is a custom tab inserted from the product page

http://prntscr.com/mec7gd

Greetings,
Dario

#208272 Copied Theme version: 5.1.5 WooCommerce version: 3.5.4

9 Answers

Olga Barlow

Support staff

January 30, 2019 at 18:30

Hello,

You can try to implement this by additional customization. Copy xstore/woocommerce/single-product/tabs/tabs.php file into child theme and move the custom tabs before the WooCommerce tabs http://prntscr.com/med5oz

Regards

#208277 Copied

d4r1uzzo

Participant

January 31, 2019 at 10:07

Hi works, but the content is not displayed

http://prntscr.com/men25w

Greetings,
Dario

#208310 Copied

Rose Tyler

Support staff

January 31, 2019 at 13:08

Hello,

Please change the content of tabs.php in your child theme to:

<?php
/**
 * Single Product tabs
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     2.4.0
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

/**
 * Filter tabs and allow third parties to add their own
 *
 * Each tab is an array containing title, callback and priority.
 * @see woocommerce_default_product_tabs()
 */
$tabs = apply_filters( 'woocommerce_product_tabs', array() );

$close_tab = true;

$et_tabs['custom_tab'] = etheme_get_option( 'custom_tab_title' );
$et_tabs['custom_tab1'] = etheme_get_custom_field('custom_tab1_title');
$et_tabs['check'] = ( ! empty( $et_tabs['custom_tab'] ) || ! empty( $et_tabs['custom_tab1'] ) ) ? 1 : 0;

if ( ( ! empty( $tabs ) || $et_tabs['check'] ) && etheme_get_option('tabs_type') != 'disable' ) : $i=0; ?>
<?php if (etheme_get_option( 'single_layout' ) == 'center' && etheme_get_option('tabs_location') == 'after_content') : ?>
<div data-vc-full-width="true" data-vc-full-width-init="false" class="vc_row wpb_row tabs-full-width">
<?php endif ?>
    <div class="woocommerce-tabs wc-tabs-wrapper tabs <?php etheme_option('tabs_type'); ?> <?php echo (etheme_get_option('tabs_scroll') && etheme_get_option('tabs_type') == 'accordion') ? 'tabs-with-scroll' : ''; ?>">
        <ul class="wc-tabs tabs-nav">

        
         <?php if ( $et_tabs['custom_tab1'] && $et_tabs['custom_tab1'] != '' ) : ?>
                <li>
                    <a href="#tab_7" id="tab_7" class="tab-title <?php if( empty( $tabs ) && ! empty( $et_tabs['custom_tab1'] ) ) echo 'opened'; ?>"><span><?php echo esc_html($et_tabs['custom_tab1']); ?></span></a>
                </li>
            <?php endif; ?>  
        
            <?php if ( $et_tabs['custom_tab'] && $et_tabs['custom_tab'] != '' ) : ?>
                <li>
                    <a href="#tab_9" id="tab_9" class="tab-title <?php if( empty( $tabs ) && empty( $et_tabs['custom_tab1'] ) && ! empty( $et_tabs['custom_tab'] ) ) echo 'opened'; ?>"><span><?php echo esc_html($et_tabs['custom_tab']); ?></span></a>
                </li>                
            <?php endif; ?> 

            <?php foreach ( $tabs as $key => $tab ) : $i++; ?>
                <li <?php if($i == 1 && $close_tab) echo 'class="tab_closed"'; ?>>
                    <a href="#tab_<?php echo esc_attr($key) ?>" id="tab_<?php echo esc_attr($key) ?>" class="tab-title <?php if($i == 1 && !$close_tab) echo 'opened'; ?>"><span><?php echo apply_filters( 'woocommerce_product_' . esc_attr($key) . '_tab_title', $tab['title'], esc_attr($key) ) ?></span></a>
                </li>
            <?php endforeach; ?>

            
           
        </ul>
        
        <?php if ( $et_tabs['custom_tab1'] && $et_tabs['custom_tab1'] != '' ) : ?>
            <div class="accordion-title"><a href="#tab_7" id="tab_7" class="tab-title <?php if( empty( $tabs ) && ! empty( $et_tabs['custom_tab1'] ) ) echo 'opened'; ?>"><span><?php echo esc_html($et_tabs['custom_tab1']); ?></span></a></div>
            <div id="content_tab_7" class="tab-content" <?php echo 'style="display:block;"'; ?>>
                <div class="tab-content-inner">
                    <div class="tab-content-scroll">
                        <?php echo do_shortcode(etheme_get_custom_field('custom_tab1')); ?>
                    </div>
                </div>
            </div>
        <?php endif; ?>  
        
        <?php if ( $et_tabs['custom_tab'] && $et_tabs['custom_tab'] != '' ) : ?>
            <div class="accordion-title"><a href="#tab_9" id="tab_9" class="tab-title <?php if( empty( $tabs ) && empty( $et_tabs['custom_tab1'] ) && ! empty( $et_tabs['custom_tab'] ) ) echo 'opened'; ?>"><span><?php echo esc_html($et_tabs['custom_tab']); ?></span></a></div>
            <div id="content_tab_9" class="tab-content" <?php if( empty( $tabs ) && empty( $et_tabs['custom_tab1'] ) && ! empty( $et_tabs['custom_tab'] ) ) echo 'style="display:block;"'; ?>>
                <div class="tab-content-inner">
                    <div class="tab-content-scroll">
                        <?php echo do_shortcode(etheme_get_option('custom_tab')); ?>
                    </div>
                </div>
            </div>
        <?php endif; ?> 

        <?php $i = 0; foreach ( $tabs as $key => $tab ) : $i++; ?>
            <div class="accordion-title <?php if($i == 1 && $close_tab) echo 'tab_closed'; ?>"><a href="#tab_<?php echo esc_attr($key) ?>" id="tab_<?php echo esc_attr($key) ?>" class="tab-title <?php if($i == 1 && !$close_tab) echo 'opened'; ?>"><span><?php echo apply_filters( 'woocommerce_product_' . esc_attr($key) . '_tab_title', $tab['title'], esc_attr($key) ) ?></span></a></div>
            <div class="tab-content tab-<?php echo esc_attr($key) ?>" id="content_tab_<?php echo esc_attr($key) ?>" <?php if($i == 1 && !$close_tab) echo 'style="display:block;"'; ?>>
                <div class="tab-content-inner">
                    <div class="tab-content-scroll">
                        <?php call_user_func( $tab['callback'], esc_attr($key), $tab ) ?>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>

    </div>
<?php if (etheme_get_option( 'single_layout' ) == 'center' && etheme_get_option('tabs_location') == 'after_content' ) : ?>
</div>
<div class="vc_row-full-width vc_clearfix"></div>
    <?php // ! WC Marketplace fix ?>
    <?php if ( class_exists( 'WCMp_Ajax' ) ): ?>
        <script>
        jQuery(document).ready(function($) {
            $('.goto_more_offer_tab').click(function (e) {   
                if (!$('#tab_singleproductmultivendor').hasClass('opened')) {
                    $('#tab_singleproductmultivendor').click();
                }     
            }); 
        });
        </script>
    <?php endif; ?>
<?php endif; ?>
<?php endif; ?>

Regards

#208328 Copied

d4r1uzzo

Participant

January 31, 2019 at 16:44

Perfect works!
is it possible to move the up sell section above the reviews section?

http://prntscr.com/metfaa

Greetings,
Dario

#208354 Copied

Rose Tyler

Support staff

January 31, 2019 at 16:52

Hello,

By default, there is no such possibility. If you need help with additional customization you can contact Codeable team – https://codeable.io/?ref=qGTdX

Regards

#208355 Copied

d4r1uzzo

Participant

January 31, 2019 at 17:17

OK thank you very much

#208359 Copied

Olga Barlow

Support staff

January 31, 2019 at 17:36

You are welcome!

Regards

#208361 Copied

d4r1uzzo

Participant

February 1, 2019 at 09:57

Hello, about the customization in the file tabs.php yesterday, I realized that if I do not use the custom tab but only that default description of woocommerce is not open to loading the page, but you need to click to see the content.

Product opening, tab closed description:
http://prnt.sc/mf4q25

Click on the content display tab:
http://prnt.sc/mf4qhe

Greetings,
Dario

https://www.sapeitalia.com/shop/sughi/sugo-alla-norma/

#208385 Copied

Rose Tyler

Support staff

February 1, 2019 at 13:04

Hello,

Please change the content of tabs.php in your child theme to:

<?php
/**
 * Single Product tabs
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     2.4.0
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

/**
 * Filter tabs and allow third parties to add their own
 *
 * Each tab is an array containing title, callback and priority.
 * @see woocommerce_default_product_tabs()
 */
$tabs = apply_filters( 'woocommerce_product_tabs', array() );

$et_tabs['custom_tab'] = etheme_get_option( 'custom_tab_title' );
$et_tabs['custom_tab1'] = etheme_get_custom_field('custom_tab1_title');
$et_tabs['check'] = ( ! empty( $et_tabs['custom_tab'] ) || ! empty( $et_tabs['custom_tab1'] ) ) ? 1 : 0;

$close_tab = ( $et_tabs['custom_tab1'] && $et_tabs['custom_tab1'] != '' ) ? true : false;

if ( ( ! empty( $tabs ) || $et_tabs['check'] ) && etheme_get_option('tabs_type') != 'disable' ) : $i=0; ?>
<?php if (etheme_get_option( 'single_layout' ) == 'center' && etheme_get_option('tabs_location') == 'after_content') : ?>
<div data-vc-full-width="true" data-vc-full-width-init="false" class="vc_row wpb_row tabs-full-width">
<?php endif ?>
    <div class="woocommerce-tabs wc-tabs-wrapper tabs <?php etheme_option('tabs_type'); ?> <?php echo (etheme_get_option('tabs_scroll') && etheme_get_option('tabs_type') == 'accordion') ? 'tabs-with-scroll' : ''; ?>">
        <ul class="wc-tabs tabs-nav">

        
         <?php if ( $et_tabs['custom_tab1'] && $et_tabs['custom_tab1'] != '' ) : ?>
                <li>
                    <a href="#tab_7" id="tab_7" class="tab-title <?php if( empty( $tabs ) && ! empty( $et_tabs['custom_tab1'] ) ) echo 'opened'; ?>"><span><?php echo esc_html($et_tabs['custom_tab1']); ?></span></a>
                </li>
            <?php endif; ?>  
        
            <?php if ( $et_tabs['custom_tab'] && $et_tabs['custom_tab'] != '' ) : ?>
                <li>
                    <a href="#tab_9" id="tab_9" class="tab-title <?php if( empty( $tabs ) && empty( $et_tabs['custom_tab1'] ) && ! empty( $et_tabs['custom_tab'] ) ) echo 'opened'; ?>"><span><?php echo esc_html($et_tabs['custom_tab']); ?></span></a>
                </li>                
            <?php endif; ?> 

            <?php foreach ( $tabs as $key => $tab ) : $i++; ?>
                <li <?php if($i == 1 && $close_tab) echo 'class="tab_closed"'; ?>>
                    <a href="#tab_<?php echo esc_attr($key) ?>" id="tab_<?php echo esc_attr($key) ?>" class="tab-title <?php if($i == 1 && !$close_tab) echo 'opened'; ?>"><span><?php echo apply_filters( 'woocommerce_product_' . esc_attr($key) . '_tab_title', $tab['title'], esc_attr($key) ) ?></span></a>
                </li>
            <?php endforeach; ?>

            
           
        </ul>
        
        <?php if ( $et_tabs['custom_tab1'] && $et_tabs['custom_tab1'] != '' ) : ?>
            <div class="accordion-title"><a href="#tab_7" id="tab_7" class="tab-title <?php if( empty( $tabs ) && ! empty( $et_tabs['custom_tab1'] ) ) echo 'opened'; ?>"><span><?php echo esc_html($et_tabs['custom_tab1']); ?></span></a></div>
            <div id="content_tab_7" class="tab-content" <?php echo 'style="display:block;"'; ?>>
                <div class="tab-content-inner">
                    <div class="tab-content-scroll">
                        <?php echo do_shortcode(etheme_get_custom_field('custom_tab1')); ?>
                    </div>
                </div>
            </div>
        <?php endif; ?>  
        
        <?php if ( $et_tabs['custom_tab'] && $et_tabs['custom_tab'] != '' ) : ?>
            <div class="accordion-title"><a href="#tab_9" id="tab_9" class="tab-title <?php if( empty( $tabs ) && empty( $et_tabs['custom_tab1'] ) && ! empty( $et_tabs['custom_tab'] ) ) echo 'opened'; ?>"><span><?php echo esc_html($et_tabs['custom_tab']); ?></span></a></div>
            <div id="content_tab_9" class="tab-content" <?php if( empty( $tabs ) && empty( $et_tabs['custom_tab1'] ) && ! empty( $et_tabs['custom_tab'] ) ) echo 'style="display:block;"'; ?>>
                <div class="tab-content-inner">
                    <div class="tab-content-scroll">
                        <?php echo do_shortcode(etheme_get_option('custom_tab')); ?>
                    </div>
                </div>
            </div>
        <?php endif; ?> 

        <?php $i = 0; foreach ( $tabs as $key => $tab ) : $i++; ?>
            <div class="accordion-title <?php if($i == 1 && $close_tab) echo 'tab_closed'; ?>"><a href="#tab_<?php echo esc_attr($key) ?>" id="tab_<?php echo esc_attr($key) ?>" class="tab-title <?php if($i == 1 && !$close_tab) echo 'opened'; ?>"><span><?php echo apply_filters( 'woocommerce_product_' . esc_attr($key) . '_tab_title', $tab['title'], esc_attr($key) ) ?></span></a></div>
            <div class="tab-content tab-<?php echo esc_attr($key) ?>" id="content_tab_<?php echo esc_attr($key) ?>" <?php if($i == 1 && !$close_tab) echo 'style="display:block;"'; ?>>
                <div class="tab-content-inner">
                    <div class="tab-content-scroll">
                        <?php call_user_func( $tab['callback'], esc_attr($key), $tab ) ?>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>

    </div>
<?php if (etheme_get_option( 'single_layout' ) == 'center' && etheme_get_option('tabs_location') == 'after_content' ) : ?>
</div>
<div class="vc_row-full-width vc_clearfix"></div>
    <?php // ! WC Marketplace fix ?>
    <?php if ( class_exists( 'WCMp_Ajax' ) ): ?>
        <script>
        jQuery(document).ready(function($) {
            $('.goto_more_offer_tab').click(function (e) {   
                if (!$('#tab_singleproductmultivendor').hasClass('opened')) {
                    $('#tab_singleproductmultivendor').click();
                }     
            }); 
        });
        </script>
    <?php endif; ?>
<?php endif; ?>
<?php endif; ?>

Regards

#208406 Copied