Visibility block

This block allows you to hide or show content (inner blocks which you add to this block) based on some criteria:

Post query visibility

Possible filters:

Post category/tag

Custom post types and custom taxonomy

Manual selection

Taxonomy Query

You can select any taxonomy: categories, product categories, tags, and all custom taxonomies registered on your site.

User query

You can select to show based on logined user or not, you can select also user role and choose definite User.

User Query also has option to limit visibility by User Meta, the same as Custom field Query

Custom field Query

This is interesting visibility condition based on custom field value. You can set visibility, for example, to show content only if post get value of meta field more than specific amount. Custom fields and taxonomy fields support multiple conditions

Query String

You can set visibility by query string. For example, this is regular url – site.com/your_post and this is url with query string site.con/your_post?filterby=id

query string here is filterby=id – Now, you can set condition to check query string and show/hide blocks based on this

Referral URL

You can set to show/hide block depending on url from which user visited your page

Date period

You can select date and time period to show/hide your content

By Mobile View

You can show/hide blocks related to gadget of user. This option is different from Responsive control, which can hide only visibility of block via CSS and width of browser (but block is still on page). Visibility by Mobile view uses dynamic render so blocks are not existed on page if user uses mobile. This option uses wp_is_mobile function

You can hide/show blocks related to user’s cookie. Greenshift has also several blocks which can save cookie. For example button block and switcher blocks. So, you can use button block and save special cookie on user’s click and use visibility block to show/hide conditional blocks related to user’s choice.

Woocommerce Fields

Available woocommerce conditions

  1. Check if current product has related
  2. Check if current product has upsells
  3. By number of items in cart
  4. By total value in cart
  5. By stock value of product
  6. By type of product
  7. By purchased product ID (check if current user purchased specific product)

Change visibility programmatically

You can also use special PHP filters to check visibility per separate block.

First of all, copy ID from visibility’s block Panel. For example, it will be “gsbp-0fcead2”

Now you can use next code

add_filter('render_block', 'custom_visibility_conditions_check', 11, 2);
function custom_visibility_conditions_check($block_content, $block){
     if(isset($block['attrs']['id']) && $block['attrs']['id'] == 'gsbp-0fcead2'){
}
     if(is_home()){
          return '';
     }
     return $block_content;
}

This code will add extra condition layer that checks if block is on homepage, if yes, it shows nothing (hide content).

Copy this post’s content
<!-- wp:paragraph -->
<p>This block allows you to hide or show content (inner blocks which you add to this block) based on some criteria:</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="post-query-visibility">Post query visibility</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Possible filters:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Post category/tag</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1175,"width":271,"height":452,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2022/05/visibility1.jpg" alt="" class="wp-image-1175" width="271" height="452"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>Custom post types and custom taxonomy</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1176,"width":271,"height":429,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2022/05/visibility2.jpg" alt="" class="wp-image-1176" width="271" height="429"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>Manual selection</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1177,"width":271,"height":199,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2022/05/visibility3.jpg" alt="" class="wp-image-1177" width="271" height="199"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="taxonomy-query">Taxonomy Query</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can select any taxonomy: categories, product categories, tags, and all custom taxonomies registered on your site.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1178,"width":269,"height":366,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2022/05/visibility4.jpg" alt="" class="wp-image-1178" width="269" height="366"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="user-query">User query</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can select to show based on logined user or not, you can select also user role and choose definite User.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1179,"width":273,"height":293,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2022/05/uservisibility.jpg" alt="" class="wp-image-1179" width="273" height="293"/></figure>
<!-- /wp:image -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-9860b3a","type":"updatelight"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-9860b3a" id="gspb_infoBox-id-gsbp-9860b3a"><div class="gs-box updatelight_type "><div class="gs-box-icon"></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>User Query also has option to limit visibility by User Meta, the same as Custom field Query</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="custom-field-query">Custom field Query</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is interesting visibility condition based on custom field value. You can set visibility, for example, to show content only if post get value of meta field more than specific amount. Custom fields and taxonomy fields support multiple conditions</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2544,"width":267,"height":383,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2023/01/cfields.jpg" alt="" class="wp-image-2544" width="267" height="383"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="query-string">Query String</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can set visibility by query string. For example, this is regular url - site.com/your_post  and this is url with query string site.con/your_post?filterby=id</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>query string here is filterby=id - Now, you can set condition to check query string and show/hide blocks based on this</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="referral-url">Referral URL</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can set to show/hide block depending on url from which user visited your page</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="date-period">Date period</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can select date and time period to show/hide your content</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="by-mobile-view">By Mobile View</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can show/hide blocks related to gadget of user. This option is different from Responsive control, which can hide only visibility of block via CSS and width of browser (but block is still on page). Visibility by Mobile view uses dynamic render so blocks are not existed on page if user uses mobile. This option uses wp_is_mobile function</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="by-cookie">By Cookie</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can hide/show blocks related to user's cookie. Greenshift has also several blocks which can save cookie. For example button block and switcher blocks. So, you can use button block and save special cookie on user's click and use visibility block to show/hide conditional blocks related to user's choice. </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="woocommerce-fields">Woocommerce Fields</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Available woocommerce conditions</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Check if current product has related</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Check if current product has upsells</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>By number of items in cart</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>By total value in cart</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>By stock value of product</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>By type of product</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>By purchased product ID (check if current user purchased specific product)</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="change-visibility-programmatically">Change visibility programmatically</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can also use special PHP filters to check visibility per separate block.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>First of all, copy ID from visibility's block Panel. For example, it will be "gsbp-0fcead2"</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now you can use next code</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>add_filter('render_block', 'custom_visibility_conditions_check', 11, 2);
function custom_visibility_conditions_check($block_content, $block){
     if(isset($block['attrs']['id']) && $block['attrs']['id'] == 'gsbp-0fcead2'){
}
     if(is_home()){
          return '';
     }
     return $block_content;
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>This code will add extra condition layer that checks if block is on homepage, if yes, it shows nothing (hide content).</p>
<!-- /wp:paragraph -->
«
»