1. Home
  2. ReHub Theme
  3. Shop (woocommerce) options
  4. Extended Custom Product areas

Extended Custom Product areas

Custom code areas can be used for different purposes. Custom icon blocks, informational banners, promo images, additional CTA blocks, notices and offers.

Each product has 3 unique code zone.

The next two blocks can be set per each product or globally. If you want to show some content in all products, you should use Global part in Theme option – shop settings – Custom code areas

If you want to add some content just for special product, add it in Custom code areas section

Each area is rendered on Product page and place is depending on Product layout

Tips. Sometimes, you need to show global area but only for one product category. Use special shortcode for this

[rh_is_category tax="product_cat" ids="1,2"]

Your code

[/rh_is_category]

So, your code will be executed only if Product belongs to category with category Ids = 1 or 2

Latest theme version has support for Elementor custom blocks, so, you can easily add and configure any type of custom areas with nice design or even make one click import ready template. For this, install Elementor page builder if you don’t have it on site. You can do this in Plugins – add new and search for “Elementor”.

Next, you can create custom template. Go to Templates – Add new and choose to create “Section”

Now, you can create template, save it. Go back to Templates – Saved templates and find shortcode of your template in right part. You can copy it and use in Custom product areas.

We also created few ready templates, which you import with one click.

How to use Ready templates?

Create template as in previous step. Now, click on Folder icon. You can find there a lot of ready templates, which include also our examples below

Icon Block in area near Buttondemo

Info banner with popup in area near short descriotion – demo

This is more advanced area, because it has two areas at once. First is banner area, but also banner has button-popup module which has also another shortcode where I placed another template which has Table of sizes

You can find both examples and template for Table with sizes in Elementor library of ready templates

Sometimes Ready templates don’t show Blocks. Just switch to ready pages and back to Blocks. it needs some time to load all blocks

Featured Attribute area

You can show not only static blocks, but also dynamic blocks. For example, Featured attribute section

You can also build this area via Elementor because we added special Module “Meta/Attribute value”.

But first of all, you must add attributes. Our theme has special function to use Attribute swatches (image, text tags, color tags) which are the best for featured areas.

Once you have attributes, now, you can show them in Custom areas. If you want to use Elementor, create new template and use Meta/Attribute module. Choose Product in module where you have attributes. We will use this just to see how it will look on our product page. Once you find best design, delete Product Name. You will see grey areas, but, it’s ok. Plugin will get Product ID when you place shortcode in custom product area and will show values from your product.

If you don’t want to use Elementor module, you can use Shortcode to get attribute values

Here is example of shortcode and 4 columns with icons

<div class="wpsm-one-fourth text-center">
<div class="font200 greycolor mb5">
<i class="fa fa-microchip" aria-hidden="true"></i>
</div>
<div class="font90 mb5 rehub-main-font fontbold">Sim Type</div>
<div class="greycolor font80 lineheight15">[wpsm_custom_meta field="sim-type" type="attribute"]</div>
</div>
<div class="wpsm-one-fourth text-center">
<div class="font200 greycolor mb5">
<i class="fa fa-database" aria-hidden="true"></i>
</div>
<div class="font90 mb5 rehub-main-font fontbold">Storage</div>
<div class="greycolor font80 lineheight15">[wpsm_custom_meta field="internal-storage-gb" type="attribute" posttext="GB"]</div>
</div>
<div class="wpsm-one-fourth text-center">
<div class="font200 greycolor mb5">
<i class="fa fa-balance-scale" aria-hidden="true"></i>
</div>
<div class="font90 mb5 rehub-main-font fontbold">Weight</div>
<div class="greycolor font80 lineheight15">[wpsm_custom_meta field="weight-g" type="attribute" posttext="g"]</div>
</div>
<div class="wpsm-one-fourth wpsm-column-last text-center">
<div class="font200 greycolor mb5">
<i class="fa fa-camera-retro" aria-hidden="true"></i>
</div>
<div class="font90 mb5 rehub-main-font fontbold">Primary Camera</div>
<div class="greycolor font80 lineheight15">[wpsm_custom_meta field="Primary Camera (MP)" type="attribute" posttext="MP"]</div>
</div>
<div class="clearfix"></div>
<div class="rh-line mt15 mb20"></div>

HTML ready codes

If you don’t want to use Elementor plugin, you can use HTML codes. We added few ready examples. You can mix them with helper classes of theme.

1. Icon block

Useful for code zone near button

<div class="tabledisplay mb20">
  <div class="rowdisplay">
      <div class="celldisplay pt5 pb5 font150">
      	<i class="fa fa-plane rehub-main-color" aria-hidden="true"></i>
      </div>
    <div class="celldisplay pt5 pb5">    
      <div class="fontbold lineheight15 ml5 rehub-main-font">Free delivery</div>
      <div class="ml5 font80 greycolor">For orders &gt; $500</div></div>
    </div>
  <div class="rowdisplay">
    	<div class="celldisplay font150">
    		<i class="fa fa-database rehub-main-color" aria-hidden="true"></i>
    	</div> 
    <div class="celldisplay">    
      <div class="fontbold lineheight15 ml5 rehub-main-font">Product Protection</div>
      <div class="ml5 font80 greycolor">For all orders in shop</div>
    </div>
  </div>
</div>

2. Tick icons

Useful for code zone near button

<div class="font80"><i class="fa fa-check greencolor" aria-hidden="true"></i> NO BOOKING OR CREDIT CARD FEES</div>
<div class="font80"><i class="fa fa-check greencolor" aria-hidden="true"></i> BEST PRICE GUARANTEE</div>
<div class="font80"><i class="fa fa-check greencolor" aria-hidden="true"></i> SAVE €40 ON YOUR NEXT BOOKING </div>

Hover banner shortcode

[wpsm_hover_banner image_url="http://remarket.wpsoul.com/wp-content/uploads/2017/08/banner3.jpg" height="90" padding="20" url="#" title="Limited offer - 50 % discount" firstsize="20px" subtitle="Example of custom code area" color="#ffffff" colortext="#ffffff"]

Do you have any interesting example of styled blocks in product pages – send us link and we will add code in this tutorial.