Pro WooCommerce Single Page Customization

Hi
Pro Theme

  1. How to enable the sidebar on the product page?
  2. What tools of customization of the product page are possible with Pro?
  3. How to connect Woocommerce Checkout in Pro?

Hey @shumuher,

  1. Our theme’s design does not include a sidebar for product pages. You can enable the sidebar but it’s not recommended as it will reduce the space of the product gallery and short description. If you wish to proceed to, you can follow this guide: https://theme.co/apex/forum/t/sidebar-on-left-side-woocommerce-product-pages/5967/4?u=christian_y

  2. The product content or product description can be built using the Content Builder. The rest of the product page is controlled by the WooCommerce template system.

  3. Our theme does not have a connection to WooCommerce Checkout. We, however, do have a checkout editor extension so you can add custom fields in the checkout form. See https://theme.co/apex/forum/t/extension-woo-checkout-editor/93

Hope that helps.

2 It is possible in more detail about Content Builder!

How do you propose to customize the unique design of the product page? Can this be done through the Pro editor?

Hey @shumuher,

Sorry for the lack of info for #2. Please see the highlighted blue part in the screenshot below:

You can build that part using the Content Builder like in a page. That is provided you have enabled the Content Builder in Pro > Settings > Permissions

The rest of the parts of the product page could not be edited by the Content Builder as it is only for content.

What you’ll need is a Layout Builder. With that, you’ll be able to create your own single product page design. That feature is still in development though. You can read about that and the rest of the features that are in development in our recent Status Report. See https://theme.co/apex/forum/t/status-report-may-1-2019/57564

For now, you’d need to have WooCommerce development knowledge to modify the product page.

Hope that helps.

  1. Tell me which style files are responsible for the layout of the product page?
  2. When is it planned to introduce the possibility of full customization of the product page?

Hi There,

Styles are inherited through a style-sheet included for each stack. For example, if you’re on Integrity stack you can check the following file.

/wp-content/themes/x/framework/dist/css/site/woocommerce/integrity-light.css

Similarly, you should be able to locate the stylesheet according to your current stack used.

As to future implementations or updates, we cannot provide any ETA because our developers are working on certain priorities and bug fixes at the moment.

Thanks!

Hello!
Which file to edit, what to add sidebar?

Hi @shumuher,

You need to setup a child theme:

After that put the custom code under functions.php file locates in your child theme.

Hope it helps :slight_smile:

Where can I get the ethos.css file with normal code structure?

Hi Shumuher,

The css files that come with the stack are minified as they are for production.

If you want to have an unminified version, you can make use of unminifyers like:

Hope this helps.

Put a child theme. Added code, cleared cache, added sidebar, added widget. Does not work(

Hi @shumuher,

Would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

  • Link to your site
  • WordPress Admin username / password

Thanks.

Sorry, it all worked!
But there was another question!
What function calls this button? and from which file?

Hi @shumuher,

You can customize that button by adding the following code under functions.php file locates in your child theme:

function x_ethos_entry_top_navigation() {

    if ( x_is_portfolio_item() ) {
      $link = x_get_parent_portfolio_link();
    } elseif ( x_is_product() ) {
      $link = x_get_shop_link();
    }

    $title = esc_attr( __( 'See All Posts', '__x__' ) );

    ?>

      <div class="entry-top-navigation">
        <a href="<?php echo $link; ?>" class="entry-parent" title="<?php $title; ?>"><i class="x-icon-th" data-x-icon-s="&#xf00a;"></i></a>
        <?php x_entry_navigation(); ?>
      </div>

    <?php

}

Hope it helps :slight_smile:

No, how to remove it?

Hi @shumuher,

Please try:

function x_ethos_entry_top_navigation() {

}

Hope this helps.

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Theme functions for X.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Boot Registry
//   02. Bootstrap Class
//   03. Content Width
//   04. Localization
// =============================================================================

// Boot Registry
// =============================================================================

function x_boot_registry() {
return array(
'preinit' => array(
  'functions/helpers',
  'functions/thumbnails',
  'functions/setup',

  'tco/tco',
  'legacy/setup',
  'functions/fonts',
  'functions/custom-sidebars',

  'functions/portfolio',
  'functions/plugins/setup',
  'functions/updates/class-theme-updater',
  'functions/updates/class-plugin-updater'
),

'init' => array(
  'functions/frontend/conditionals',
),

'front_end' => array(
  'functions/frontend/view-routing',
  'functions/frontend/styles',
  'functions/frontend/scripts',
  'functions/frontend/content',
  'functions/frontend/classes',
  'functions/frontend/meta',
  'functions/frontend/integrity',
  'functions/frontend/renew',
  'functions/frontend/icon',
  'functions/frontend/ethos',
  'functions/frontend/social',
  'functions/frontend/breadcrumbs',
  'functions/frontend/pagination',
  'functions/frontend/featured'
),

'logged_in' => array(

),

'admin' => array(
  'functions/admin/class-validation',
  'functions/admin/class-validation-updates',
  'functions/admin/class-validation-theme-options-manager',
  'functions/admin/class-validation-extensions',
  'functions/admin/setup',
  'functions/admin/customizer',
  'functions/admin/meta-boxes',
  'functions/admin/meta-entries',
  'functions/admin/taxonomies'
),

'app_init' => array(
  'functions/theme-options',
),

'ajax' => array()

);
}



// Bootstrap Class
// =============================================================================

class X_Bootstrap {

private static $instance;
protected $registry = array();
protected $theme_option_defaults = array();

public function boot() {

// Define Path / URL Constants
// ---------------------------

define( 'X_TEMPLATE_PATH', get_template_directory() );
define( 'X_TEMPLATE_URL', get_template_directory_uri() );

// Preboot
// -------

$x_boot_files = glob( X_TEMPLATE_PATH . '/framework/load/*.php' );

sort( $x_boot_files );

foreach ( $x_boot_files as $filename ) {
  $file = basename( $filename, '.php' );
  if ( file_exists( $filename ) && apply_filters( "x_pre_boot_$file", '__return_true' ) ) {
    require_once( $filename );
  }
  }


// Set Asset Revision Constant (For Cache Busting)
// -----------------------------------------------

define( 'X_ASSET_REV', X_VERSION );

// Preinit
// --------

$this->registry = x_boot_registry();
$this->boot_context('preinit');

// Theme Option Defaults
// ---------------------
$this->theme_option_defaults = include X_TEMPLATE_PATH . '/framework/data/option-defaults.php';

if ( is_admin() ) {
  $this->boot_context('admin');
}

add_action( 'init',                               array( $this, 'init' ) );
add_action( 'admin_init',                         array( $this, 'ajax_init' ) );
add_action( 'cornerstone_before_boot_app',        array( $this, 'app_init' ) );
add_action( 'cornerstone_before_custom_endpoint', array( $this, 'app_init' ) );
add_action( 'cornerstone_before_admin_ajax',      array( $this, 'app_init' ) );
add_action( 'cornerstone_before_admin_ajax',      array( $this, 'ajax_init' ) );
add_action( 'cornerstone_before_custom_endpoint', array( $this, 'ajax_init' ) );



}

public function init() {

$this->boot_context('init');

if ( ! is_admin() ) {
  $this->boot_context('front_end');
}

if ( is_user_logged_in() ) {
  $this->boot_context('logged_in');
}

}

public function admin_init() {
$this->boot_context('admin_init');
}

public function app_init() {
$this->boot_context('app_init');
}

public function ajax_init() {
if ( defined( 'DOING_AJAX' ) ) {
  $this->boot_context('ajax');
}
}

public function boot_context( $context ) {

if ( ! isset( $this->registry[$context] ) ) {
  return;
}

foreach ( $this->registry[$context] as $file ) {
  require_once( X_TEMPLATE_PATH . "/framework/$file.php" );
}

do_action( 'x_boot_' . $context );

}

public static function instance() {
if ( ! isset( self::$instance ) ) {
  self::$instance = new X_Bootstrap();
}
return self::$instance;
}

public function get_theme_option_defaults() {
return $this->theme_option_defaults;
}

public function get_theme_option_default( $key ) {
return isset( $this->theme_option_defaults[$key]) ? $this->theme_option_defaults[$key] : false;
}

}

function x_bootstrap() {
return X_Bootstrap::instance();
}

x_bootstrap()->boot();



// Content Width
// =============================================================================

if ( ! isset( $content_width ) ) :

$stack = x_get_stack();

switch ( $stack ) {
case 'integrity' :
  $content_width = x_post_thumbnail_width() - 120;
  break;
case 'renew' :
  $content_width = x_post_thumbnail_width();
  break;
case 'icon' :
  $content_width = x_post_thumbnail_width();
  break;
case 'ethos' :
  $content_width = x_post_thumbnail_width();
  break;
}

endif;



// Localization
// =============================================================================

load_theme_textdomain( '__x__', X_TEMPLATE_PATH . '/framework/lang' );

// Add Sidebar to Product Pages in Woocommerce Store
function x_get_content_layout() {

$stack          = x_get_stack();
$content_layout = x_get_option( 'x_' . $stack . '_layout_content', 'sidebar-content' );

if ( $content_layout != 'full-width' ) {
    if ( is_home() ) {
        $opt    = x_get_option( 'x_blog_layout', 'sidebar' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
    } elseif ( is_singular( 'post' ) ) {
        $meta   = get_post_meta( get_the_ID(), '_x_post_layout', true );
        $layout = ( $meta == 'on' ) ? 'full-width' : $content_layout;
    } elseif ( x_is_portfolio_item() ) {
        $layout = 'full-width';
    } elseif ( x_is_portfolio() ) {
        $meta   = get_post_meta( get_the_ID(), '_x_portfolio_layout', true );
        $layout = ( $meta == 'sidebar' ) ? $content_layout : $meta;
    } elseif ( is_archive() ) {
        if ( x_is_shop() || x_is_product_category() || x_is_product_tag() || x_is_product() ) {
            $layout = 'sidebar-content';
        } else {
            $opt    = x_get_option( 'x_archive_layout', 'sidebar' );
            $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
        }
    } elseif ( x_is_product() ) {
        $layout = 'sidebar-content';
    } elseif ( x_is_bbpress() ) {
        $opt    = x_get_option( 'x_bbpress_layout_content', 'sidebar' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
    } elseif ( x_is_buddypress() ) {
        $opt    = x_get_option( 'x_buddypress_layout_content', 'sidebar' );
        $layout = ( $opt == 'sidebar' ) ? $content_layout : $opt;
    } elseif ( is_404() ) {
        $layout = 'full-width';
    } else {
        $layout = $content_layout;
    }
} else {
    $layout = $content_layout;
}

if ( is_page_template( 'template-layout-content-sidebar.php' ) ) {
    $layout = 'content-sidebar';
} elseif ( is_page_template( 'template-layout-sidebar-content.php' ) ) {
    $layout = 'sidebar-content';
} elseif ( is_page_template( 'template-layout-full-width.php' ) ) {
    $layout = 'full-width';
}

return $layout;

}

What functions.php are we talking about?
About this ~/wp-content/themes/pro/functions.php
There is no function x_ethos_entry_top_navigation()

Hi @shumuher,

It’s the functions.php in your child theme. It’s located in wp-content/themes/pro-child/functions.php

If you haven’t installed a child theme yet, kindly refer to the link below

Thanks