Single product page customization

[Finlay]

I need to display the product description, reviews and other details in a long series, rather than the default tabbed styling.

I found the controls in Pro to activate/deactivate various tabs, but I cannot find controls to handle this layout task. It sounds like Cornerstone/Pro elements are not meant to affect this area below the main single product, but that’s fine - I don’t want to adjust the content of the sections; I just need to change how the sections display.

Thanks for your help!

[rad]

Hi Bill,

Thanks for reaching out.

The files used for those tabs are available within /x/woocommerce/single-product/, you can then copy the same file or folder to your child theme for customization, like /x-child/woocommerce/. The layout is mainly controlled and rendered as X tab shortcodes.

<?php

// =============================================================================
// WOOCOMMERCE/SINGLE-PRODUCT/TABS/TABS.PHP
// -----------------------------------------------------------------------------
// @version 2.4.0
// =============================================================================

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

$tabs = apply_filters( 'woocommerce_product_tabs', array() );

if ( ! empty( $tabs ) ) :

  $tab_num = count( $tabs );

  switch ( $tab_num ) {
    case '1' :
      $tab_num_class = 'one-up';
      break;
    case '2' :
      $tab_num_class = 'two-up';
      break;
    case '3' :
      $tab_num_class = 'three-up';
      break;
    case '4' :
      $tab_num_class = 'four-up';
      break;
    case '5' :
      $tab_num_class = 'five-up';
      break;
  }

  $tab_keys      = array_keys( $tabs );
  $first_tab_key = $tab_keys[0];

  ?>

  <?php if ( x_get_option( 'x_woocommerce_product_tabs_enable' ) == '1' ) : ?>

    <?php ob_start(); ?>

      [x_tab_nav type="<?php echo $tab_num_class; ?>"]
        <?php foreach ( $tabs as $key => $tab ) : ?>
          <?php $active = ( $key === $first_tab_key ) ? ' active="true"' : ''; ?>
          [x_tab_nav_item<?php echo $active; ?> class="<?php echo esc_attr( $key ); ?>_tab" title="<?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?>"]
        <?php endforeach; ?>
      [/x_tab_nav]
      [x_tabs]
        <?php foreach ( $tabs as $key => $tab ) : ?>
          <?php $active = ( $key === $first_tab_key ) ? ' active="true"' : ''; ?>
          [x_tab<?php echo $active; ?> class="<?php echo esc_attr( $key ); ?>_pane"]<?php call_user_func( $tab['callback'], $key, $tab ); ?>[/x_tab]
        <?php endforeach; ?>
      [/x_tabs]

    <?php $tabs = ob_get_clean(); ?>

    <div class="woocommerce-tabs">
      <?php echo do_shortcode( $tabs ); ?>
    </div>

  <?php endif; ?>

<?php endif; ?>

I’m not sure what modification you wish to implement but you can always edit those files. But make sure doing it in child theme instead on the main theme.

Thanks!

[Finlay]

Thanks @Rad, I’m just looking to show the sections in sequence, without tab navigation. That way, it’s a longer page, but no tapping/clicking tabs is needed. Just swipe/scroll down.

[rad]

Hi Bill,

I see, then you can reduce that code to this

<?php

// =============================================================================
// WOOCOMMERCE/SINGLE-PRODUCT/TABS/TABS.PHP
// -----------------------------------------------------------------------------
// @version 2.4.0
// =============================================================================

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

$tabs = apply_filters( 'woocommerce_product_tabs', array() );

?>
        <?php foreach ( $tabs as $key => $tab ) : ?>
              <?php call_user_func( $tab['callback'], $key, $tab ); ?>
        <?php endforeach; ?>

Hope this helps.