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

Extended Custom Product areas

Tips. Sometimes, you need to show global area but only in 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

Each product has 3 additional code zone which can be used for various types of extending view of product. For example, to add icon blocks, featured lists, helpers, banners, promotional blocks

The next two blocks can be set per each product (so, will work only in one product) or globally in theme option – shop settings. These code zones are visible in area near button and near content.

Also, there is one global zone after all content of product. You can set it in theme option – shop options. This code zone can be used for different crosslinks, additional widgets, etc.

Here we will show you some examples from our demo. Each example can be customized. To change icons – just replace code, for example, “fa-plane” to other. You can find all available icons here. You can also use code like

<div class="mt20"></div>

to add margins

and

<div class="rh-line"></div>

to add line divider.

Any other html and shortcodes will work, so, you can use shortcodes from shortcode generator or blocks from visual composer. You can mix them with helper classes of theme. Here some examples

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>

3. Titled box

Useful for code zone near content

You can test this box before you place it in zone. You can insert inside this box any other content, images or links. To do this, click on Shortcode generator (button near Media button) and choose Titled box. Add any content and place shortcode inside Product content – check on preview how it looks. Then, switch on Text view of visual editor

and copy whole box, then place in code zone near button. Example

[wpsm_titlebox title="Bonus" style="3"]
This is example of custom code zone, which can be used for different purpose
[/wpsm_titlebox]

4. Hover banner.

This is more advanced block, which can have image, headings, subheading and link. You can also test it before placing in code zone. For this, open any page, switch to Backend editor view (you must have enabled visual composer), then, add Hover banner module and fill all fields inside it. Then, switch to classic view and copy shortcode. Example from demo which you can also use on your site, just replace link on image

[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"]

5. Featured attributes

Code zone will work not only for static content, but also for any shortcode. With help of specific theme’s shortcode, you can get also values from product attributes and show them in top of page.

First of all, theme has special shortcode

[wpsm_custom_meta field="" type=""]

By default, if you use [ wpsm_custom_meta field=”” ] will grab value of custom field, but also, you can grab attribute value.

For this, Use

[wpsm_custom_meta field="brand" type="attribute"]

where “brand” is name of attribute.

Additional parameters are label and show_empty.

Full code

[wpsm_custom_meta field="brand" type="attribute" show_empty=1 label="Brand:"]

This will show label “Brand:” before value and will show symbol “-” if value is empty

Here code example of 4 columns with icons. Just replace FontAwesome icons to your icons and change names of attributes which you want to grab

<div class="rh-line mb20 mt20"></div>
<div class="wpsm-one-fourth text-center">
<div class="font200 greencolor mb5">
<i class="fa fa-bath" aria-hidden="true"></i>
</div>
<div class="font110 greycolor">
[wpsm_custom_meta field="brand" type="attribute"]
</div>
</div>
<div class="wpsm-one-fourth text-center">
<div class="font200 greencolor mb5">
<i class="fa fa-motorcycle" aria-hidden="true"></i>
</div>
<div class="font110 greycolor">
[wpsm_custom_meta field="brand" type="attribute"]
</div>
</div>
<div class="wpsm-one-fourth text-center">
<div class="font200 greencolor mb5">
<i class="fa fa-id-badge" aria-hidden="true"></i>
</div>
<div class="font110 greycolor">
[wpsm_custom_meta field="brand" type="attribute"]
</div>
</div>
<div class="wpsm-one-fourth wpsm-column-last text-center">
<div class="font200 greencolor mb5">
<i class="fa fa-car" aria-hidden="true"></i>
</div>
<div class="font110 greycolor">
[wpsm_custom_meta field="brand" type="attribute"]
</div>
</div>
<div class="clearfix"></div>

Or use featured list, example

<div class="tabledisplay mb20">
  <div class="rowdisplay">
      <div class="celldisplay pt5 pb5 font150">
      	<i class="fa fa-headphones rehub-main-color" aria-hidden="true"></i>
      </div>
    <div class="celldisplay pt5 pb5">    
      <div class="fontbold lineheight15 ml5 rehub-main-font">Title of attribute</div>
      <div class="ml5 font80 greycolor">[wpsm_custom_meta field="name" type="attribute"]</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">Title of attribute</div>
      <div class="ml5 font80 greycolor">[wpsm_custom_meta field="name" type="attribute"]</div>
    </div>
  </div>
</div>

6. Connected Review

Sometimes you want to create separate review for product. This is great idea and we added special shortcode to connect product to review

Use shortcode

[wpsm_reviewbox id=77 compact=1]

Where 77 is id of post where you have review. How to find ID

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

Was this article helpful to you? Yes No

How can we help?