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 create your product layout as FSE template with Woocommerce addon or read below how to make it via custom PHP functions

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' => 'ce_woo_blocks',
    'label' => __('Review with Blocks', 'rehub_framework'),
  ), 
  array(
    'value' => 'vendor_woo_list',
    'label' => __('Compare prices by shortcode', 'rehub_framework'),
  ),
  array(
    'value' => 'compare_woo_list',
    'label' => __('Compare Prices by sku', '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', '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'),
    'ce_woo_blocks' => __('Review with Blocks', 'rehub_framework'), 
    'vendor_woo_list' => __('Compare Prices with shortcode', 'rehub_framework'),
    'compare_woo_list' => __('Compare Prices by sku', 'rehub_framework'), 
    'full_photo_booking' => __('Full width Photo', '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/product_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.

How to set layout based on category

In some cases, you will need to set product layout per category. For this, do customization of woocommerce/single-product.php and find this block. You need to change first line and instead of if(…) change it to elseif

Now, before this whole block, add next

<?php if(has_term( array( 'sneakers' ), 'product_cat')):?>
   <?php include(rh_locate_template('inc/product_layout/woo_directory.php')); ?>
<?php elseif(has_term( array( 'shoes' ), 'product_cat')):?>
   <?php include(rh_locate_template('inc/product_layout/darkwoo.php')); ?>

In this code we check if product belongs to category with slug “sneakers” and load Directory product layout for it, if it has category “shoes” – load dark layout and if product has no such categories – load regular layouts

here is how code will look

Here details about using child themes and grandchild plugin