{"id":25141,"date":"2022-11-04T21:15:59","date_gmt":"2022-11-04T21:15:59","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=25141"},"modified":"2023-07-28T11:05:49","modified_gmt":"2023-07-28T11:05:49","slug":"jetengine-how-to-show-content-only-to-authorized-users","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-show-content-only-to-authorized-users\/","title":{"rendered":"How to Show Content Only to Authorized Users"},"content":{"rendered":"\n

JetEngine is a WordPress plugin by Crocoblock which allows website developers to output dynamic content through Elementor and Gutenberg page builders. Besides that, it is possible to configure which content will be shown to whom and when. Using the JetEngine Dynamic Visibility<\/a> module, you can set the visibility parameters according to which element will appear on the page. Let\u2019s go through this case in the Elementor Pro editor. <\/p>\n\n\n\n

Hiding Certain Product Prices from Non-Registered Users<\/h2>\n\n\n\n
\n

Creating a WooCommerce shop, you might want to set content restrictions that will hide certain product prices on the front end and show them only to authorized users. That\u2019s when Dynamic Visibility comes in handy.  <\/p>\n\n\n\n

Activate dynamic visibility module<\/h3>\n\n\n\n

Proceed to JetEngine > JetEngine<\/em><\/strong> dashboard and enable the Dynamic Visibility for Widgets and Sections<\/strong> toggle if inactive. Then press the \u201cSave<\/strong>\u201d button.<\/p>\n\n\n\n\"activated\n\n\n\n

Configure dynamic visibility settings<\/h3>\n\n\n\n

Now, it\u2019s time to decide which product prices you are willing to make invisible to non-logged-in users. We decided to hide the discounted prices from non-authorized users so that they need to log in to see the actual product price.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

To display certain product prices only to logged-in users, you need to make sure that the corresponding product post types have a custom tag, custom category, etc.; something that will distinguish them from the remaining posts. Otherwise, the visibility rule will not work as expected.<\/p><\/div><\/div>\n\n\n\n

In our case, all the products on sale are assigned a unique product tag called \u201cSale.\u201d You can double-check the product tags in the Products > Tags<\/em><\/strong> directory. If there are no special categories or tags, create them and assign them to certain WooCommerce products.<\/p>\n\n\n\n\"product\n\n\n

<\/svg><\/div>
Warning<\/div>

Remember the slug of the chosen product tag you are going to use because you\u2019ll need it further.<\/p><\/div><\/div>\n\n\n\n

As to visibility restrictions, we can apply them to both a single product page and all products from the Shop archive page. Let\u2019s start by hiding the single product price. <\/p>\n\n\n\n

Follow the Crocoblock > Woo Page Builder <\/em><\/strong>pathway and locate the single product template. Click on the \u201cEdit with Elementor<\/strong>\u201d button.<\/p>\n\n\n\n

In the newly-opened window, you\u2019ll see a single product layout. Right-click on the Single Price <\/strong>widget and press \u201cDuplicate<\/strong>.\u201d It is necessary to have two price fields, as we will apply different visibility conditions to each. <\/p>\n\n\n\n

Now, left-click one of the price fields. In the Advanced <\/strong>tab, unfold the Dynamic Visibility <\/strong>drop-down, and Enable <\/strong>the toggle. Set the Visibility condition type<\/strong> to \u201cShow element if condition met\u201d and add two conditions below. The first will be \u201cUser logged in,\u201d and the second will be \u201cPost Has Terms.\u201d In the latter condition, select the \u201cProduct tags\u201d option in the Taxonomy <\/strong>control and type the tag\u2019s slug from the previous step into the Value <\/strong>field. Set the Relation <\/strong>to \u201cAND.\u201d<\/p>\n\n\n\n\"the\n\n\n\n

Let\u2019s move on to the next price field. Left-click it and repeat the procedure described above. But this time, you set the Visibility condition type<\/strong> to \u201cHide element if condition met\u201d and add one condition, which is \u201cPost Has Terms.\u201d Once again, pick the \u201cProduct tags\u201d option in the Taxonomy <\/strong>control and type the same slug into the Value <\/strong>field. <\/p>\n\n\n\n\"the\n\n\n\n

Once done, press the \u201cUpdate<\/strong>\u201d button. <\/p>\n\n\n\n

Now, you need to apply the same visibility conditions to the products showcased on the Shop page. Go to Crocoblock > Woo Page Builder<\/em><\/strong> and open the corresponding archive item in Elementor. In our case, this is the Shop \u2013 Grid<\/strong> template.<\/p>\n\n\n\n\"shop\n\n\n

<\/svg><\/div>
Warning<\/div>

Please mind that you are supposed to modify both List<\/strong> and Grid<\/strong> Shop archive templates if using the Products Loop<\/strong><\/a> widget.<\/p><\/div><\/div>\n\n\n\n

First, duplicate the Single Price<\/strong> widget and then configure the visibility rules for both fields as you already did previously. Here is what the first price field should look like:<\/p>\n\n\n\n\"price\n\n\n\n

Here are the visibility conditions applied to the second price field:<\/p>\n\n\n\n\"price\n\n\n\n

Now, repeat the same procedure for the Shop \u2013 List <\/strong>archive template. Don\u2019t forget to update\/save all changes. Check out the final result on the front end. As you can see, the prices are hidden from non-logged-in users on the Shop page templates and the single product page.<\/p>\n\n\n\n

But how will the user know why there are no prices for certain items? We suggest you indicate that they need to authorize on the website to see these prices. The fastest way to do it is via a pop-up. <\/p>\n<\/div><\/div>\n\n\n\n

Creating a Pop-Up Card with Custom Visibility Conditions<\/h2>\n\n\n\n
\n

First of all, create a new pop-up<\/a>. To save time, we picked a desired pop-up layout from the library<\/a> and edited the text in Elementor \u2013 this will do. <\/p>\n\n\n\n

Proceed to the Crocoblock > Woo Page Builder<\/em><\/strong> directory and \u201cEdit with Elementor<\/strong>\u201d the templates where you have already set Dynamic Visibility rules for prices: <\/p>\n\n\n\n