1. Home
  2. ReHub Theme
  3. Advanced tips and customizations
  4. Adding Custom Product Layout

Adding Custom Product Layout

One of big advantages of our theme is that Rehub has many ready Product layouts for woocommerce which can change your regular post view to e-commerce style, price comparison style, review style and much more. Read about this

You can also add own custom post layouts with next steps.

First of all, register your post layout in select box. For example, you want to register layout with name “My custom post layout” and key “custom_one”.

Use next code in functions.php

add_filter('rehub_global_product_layout_array', 'mycustom_layout_for_woo');
function mycustom_layout_for_woo() {
$custom_post_layout = array(
  array(
    'value' => 'default_with_sidebar',
    'label' => __('Default with sidebar', 'rehub_framework'),
  ),
  array(
    'value' => 'default_no_sidebar',
    'label' => __('Default without sidebar', 'rehub_framework'),
  ),
  array(
    'value' => 'full_width_extended',
    'label' => __('Full width Extended', 'rehub_framework'),
  ),
  array(
    'value' => 'sections_w_sidebar',
    'label' => __('Sections with sidebar', 'rehub_framework'),
  ),		
  array(
    'value' => 'vendor_woo_list',
    'label' => __('Compare prices', 'rehub_framework'),
  ),		
  array(
    'value' => 'ce_woo_list',
    'label' => __('Content Egg List', 'rehub_framework'),
  ),	
  array(
    'value' => 'ce_woo_sections',
    'label' => __('Content Egg Auto Sections', 'rehub_framework'),
  ),
  array(
    'value' => 'full_photo_booking',
    'label' => __('Full width Photo (booking)', 'rehub_framework'),
  ),	
  array(
    'value' => 'custom_one',
    'label' => __('My custom post layout', 'rehub_framework'),
  ),		

);
return $custom_post_layout;
}

 

As you see, you have all layouts in array (so, you can delete some if you don’t need them) and we add our layout in end

Now, you need to customize single page template to show your layout. For this, add also code for functions.php

add_filter('rehub_product_layout_array', 'mycustom_layout_for_woo_inner');
function mycustom_layout_for_woo_inner() {
  $custom_post_layout = array(
    'global' => __('Global from Theme option - Shop', 'rehub_framework'),
    'default_sidebar' => __('Default with sidebar', 'rehub_framework'), 
    'default_no_sidebar' => __('Default full width', 'rehub_framework'),
    'full_width_extended' => __('Full width Extended', 'rehub_framework'),
    'sections_w_sidebar' => __('Sections with sidebar', 'rehub_framework'),
    'ce_woo_list' => __('Content Egg List', 'rehub_framework'),
    'ce_woo_sections' => __('Content Egg Auto Sections', 'rehub_framework'),
    'vendor_woo_list' => __('Compare Prices', 'rehub_framework'),
    'full_photo_booking' => __('Full width Photo (booking)', 'rehub_framework'),
    'custom_one' => __('My custom', 'rehub_framework'),						
  );
  return $custom_post_layout;
}

 

Copy file woocommerce/single-product.php from main theme and insert it in your child theme or grandchild plugin.

Find lines

<?php else:?>
 <?php include(rh_locate_template('inc/product_layout/default_with_sidebar.php')); ?>

insert before this line

<?php elseif($rh_product_layout_style == 'custom_one') : ?>
    <?php include(rh_locate_template('inc/post_layout/custom_one.php')); ?>

Now, last step, you need to create template for your layout. Copy one of templates from folder inc/product_layout. Rename it to custom_one.php and place in folder inc/product_layout (you must create it) inside child theme or grand child plugin.

Here details about using child themes and grandchild plugin

 

Was this article helpful to you? Yes No

How can we help?