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 + 1 code zone for Product Loop
Code areas can be set per each product or globally. If you want to show some content in all products, you can use Template parts.
Using template parts is easy, just click to edit one of template part. Now, everything which you drop in this template part will be used in relevant area.
woocommerce-product-area-content – will be used near short description on Product inner page
woocommerce-product-area-button – will be used near short description on Product inner page
woocommerce-product-area-additional – will be used before related products in Product inner page
woocommerce-product-area-floatingpanel – will be used in floating panel in Product inner page
woocommerce-product-loop – will be used in product loop on archives and product blocks
You can drop not only static content but also many dynamic blocks in template parts. For example, post excerpt block (if you want to extend product/post loop with excerpts), Meta getter (to retrieve any custom meta values).
If you prefer to use Shortcodes or plain HTML, you can also drop them in Theme options – shop settings – global area
If you want to use conditional render based on different criterias (category, taxonomy, referred, cookie and many other), consider to buy Query Addon of Greenshift
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 of code area is depending on Product layout
This code will be executed only if Product belongs to category with category Ids = 1 or 2
[rh_is_category tax="product_cat" ids="1,2"]
Your code
[/rh_is_category]Table of Contents
How to use Page builder to make custom section
You can use also Page builders: Elementor or bundled Greenshift Gutenberg plugin to make custom areas
How to use Greenshift for custom sections
You need to create Reusable template, copy shortcode and place it in custom code areas.
Here is video how to use Reusable Templates and convert them to shortcodes.
How to use Elementor for sections
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 of Elementor
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 Button – demo
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
If you want to save loading time, you can use our special feature Dynamic Elementor template loading
Featured Attribute area
You can show not only static blocks, but also dynamic blocks. For example, Featured attribute section. You can use special shortcodes to get values from custom fields or attributes to make attribute featured area. How to use attributes in theme
Here is also Shortcode to get attribute values
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 > $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.