If you didn’t know, now you know: Crocoblock has plenty of free products. And there’s a whole directory of them to add extra functionality to Crocoblock plugins. These add-ons are small plugins that do something particular but are not included in the main build of JetPlugins.

Check the page with all 40+ free Crocoblock DevTools (plugins) here. (You can always find a link to it in the footer menu of the Crocoblock website, it’s called DevTools). 

In this article, I will not write about all of them in detail and show what they do but will highlight only some of them. 

Also, check out our free standalone resources (theme and plugins) on this page.

Table of Contents

• Free Add-Ons for Improved Layouts and Functionality
  • Off-canvas column in Elementor for mobile
  • Clipboard shortcode
• Crocoblock Dev Tools for JetEngine
  • Query Results Count – Plain Number
  • Split listing by months
  • Calculated callback for Elementor and Gutenberg
  • Attachment link callback
• Free Add-Ons for JetWooBuilder
  • Products Grid Load More/Infinite Scroll
  • Custom Products Badges
• Free Add-Ons for JetFormBuilder
  • Forms popup notification
• FAQ
• Bottom Line

Free Add-Ons for Improved Layouts and Functionality

Off-canvas column in Elementor for mobile

This little plugin will help you keep the website interface nice and compact on mobile and turn a normal column or container into an off-canvas one. It’s very easy: 

1. Install the add-on (Plugins > Add New > Upload Plugin) and activate it. 
2. Open your page in Elementor, select the column you want to put off-canvas on mobile, go to the Advanced tab and activate Offcanvas Settings toggle. Now, on mobile, you will get the Expand/Collapse labels. 
3. Edit styling, Expand/Collapse labels, the icon, paddings, margins, and whatever you need to match your design.
   Enjoy!

Also, you can make any element work as a Collapse button by adding the “offcanvas-collapse” class to this element. This class will work if you click directly on the element with this class or the button inside the element with this class.

For example, you want the off-canvas column to close automatically after the user applies filters, submits a form, etc. For a video guide on using it with JetSmartFilters, check this video.

🔗 Download the add-on
🔑 Go to the GitHub page 

Clipboard shortcode 

This add-on adds a shortcode for JetEngine’s Dynamic Field that allows copying content into the buffer with a click on the text block. There are two ways to use it: 

1. Add a Shortcode widget/block and insert the text that should be copied in the body of the shortcode.
2. Use it dynamically for copying the content of existing meta field or content object by using the Do Shortcode callback in the Filters of JetEngine Dynamic Field widget/block. 

After installation of the add-on, the shortcode 

[jet_clipboard copy_text=“Some text to be copied“ label=“Your label“ icon=“1“] 

starts working. 

It has three arguments:

• copy_text=”Some text” – the string that will be copied to the clipboard. Insert your text inside the quotation marks. 
• label=”A label for the text you want to copy” – just add a label you want. Basically, it’s the visible part of the block; that’s why it’s better to duplicate the text you want to copy. 
• icon, which can be 0 or 1, where “0” means no icon, and “1” means there is. It’s all about whether you want to see an icon (copy and tick one on success) or not.  

Using as a shortcode

Simply use this shortcode, change your text and label, and set whether you want to have an icon:

[jet_clipboard copy_text=”Copy me”  label=”Just Click here to copy” icon=”1″] 

Using as a shortcode with a callback

In this case, you can fetch the text for copying dynamically. To do it, use the Dynamic Field widget/block and choose the content object or meta field you want the text to be fetched from. Then, activate the Filter field output toggle and choose the Do Shortcodes callback. 

Then, activate the Customize field output and insert a shortcode like this:

[jet_clipboard copy_text="%s"  label="%1$s <span style='font-size:10px; color:blue;'>click to copy</span>" icon="1"]

In this shortcode, I use custom formatting for the label, but you don’t have to do it. Also, pay attention that if you want to use the text from the meta field, just set copy_text=”%s” (which means that you fetch it from the dynamic field) and label=”%1$s” that uses a bit different format because it uses the sprintf PHP function. 

Don’t forget to use single quotation marks inside the double or vice versa to avoid syntax errors.

🔗 Download the add-on
🔑 Go to the GitHub page 

Crocoblock Dev Tools for JetEngine

To make these add-ons work, you should have the JetEngine plugin installed and activated. 

Query Results Count – Plain Number

This add-on adds a new Dynamic Tag to the widgets/blocks that support them, so you can display a number of items in a selected query created by Query Builder. It can be shown in any place or page. 

1. Install the add-on (Plugins > Add New > Upload Plugin) and activate it. 
2. Go to JetEngine > Query Builder and create a new query, where you choose items that should be fetched from the database. Or, you can work with the existing query. 
3. Add any widget that supports dynamic tags, and select Query Result Count: Return Plain Number. In the dialog window, select the query from which you want to get the number of items. 
   That’s it!

In my example, I’ve used a query of this dynamic rental website demo and the existing query of properties marked as Hot Deals (this query fetches the properties with the “Hot Deal” custom field checked). There are six existing properties with this badge. The process is very straightforward:

🔗 Download the add-on
🔑 Go to the GitHub page

Split listing by months

You can split listings by months, and any Date field can be used, be it a custom field or a default “publishing date” meta. It works very well with JetSmartFilters. To learn how to use it, read this detailed instruction or watch the video:

🔗 Download the add-on
🔑 Go to the GitHub page

Calculated callback for Elementor and Gutenberg

This add-on is a gem for sites that work with prices and other numeric values. It allows you to increase/decrease field values, add, subtract, or multiply the given field’s value by the values of other fields.

The add-on adds a custom callback (to use which, activate the Filter field output toggle) and uses the Dynamic Field widget/block. It works both with Elementor and Block Editor. 

Please find detailed instructions on how to use it in this article. 

🔗 Download the add-on

Attachment link callback

With this add-on, you can easily display download links to files uploaded via custom fields. After installing and activating the plugin, the new callback “Get attachment file link by ID” will become available. 

To use it, add the Dynamic Field widget/block by JetEngine, choose the meta field you want to get the attachment from, activate the Filter field output toggle, and choose the “Get attachment file link by ID” callback from the list. 

That’s it; now you can edit the display name for the link (it can be the file name, parent post title, current post title, attachment post title, or custom text). Also, you can choose whether it opens in the current or new tab. 

It works with Elementor and Block Editor.

💡 Note that this and some other popular free add-ons have been added to the JetEngine > JetEngine dashboard and can be easily activated from there. 

Free Add-Ons for JetWooBuilder

JetWooBuilder is a really powerful plugin for building WooCommerce layouts in Elementor. And we have many free add-ons for it. Let’s have a look at a couple of them. 

Products Grid Load More/Infinite Scroll 

This little plugin adds a very simple yet effective functionality: the Load More button or Infinite Scroll. Before using it, make sure you have the JetWooBuilder plugin activated. It comes with a lot of great widgets for WooCommerce. 

1. Install the add-on (Plugins > Add New > Upload Plugin) and activate it.
2. Go to the Elementor page where you have a Product Grid widget (the add-on works with this widget, not something else). 
3. In the Content section of the Elementor panel, choose the Product number you want to display (and the same number will be added with each Load More button click or on scroll). 
4. Below, find the Load More section and activate the toggle. Select either the Load More button or Infinite Scroll. 
5. If you’ve chosen the Load More button, create a unique ID for the button/element that will activate the loading process. Then, add a button and assign this ID to it in the Content section. If you use an icon, image, or text instead of a button, assign this ID in the Advanced tab. 
6. If you prefer the Infinite Scroll, no IDs are required. 
   Enjoy the result!

For more detailed instructions on how to use the add-on, you can check this article. 

🔗 Download the add-on
🔑 Go to the GitHub page  

Custom Products Badges 

This add-on enables custom product labels in the Products Grid and Archive Sale Badge widgets. The first one is available globally, and the second one – on Archive pages. 

After the add-on activation, you can add as many custom badges as you need and style them for each product grid section or each archive. 

It’s very intuitive, like all the JetWooBuilder tools, and it’s made to attract more customers’ attention to particular products. 

1. Make sure you have WooCommerce, Elementor Free or Pro (because JetWooBuilder is a plugin for Elementor), and JetWooBuilder installed and activated. You can create your shop page templates at this stage. 
2. Install the Custom Product Badges add-on (Plugins > Add New > Upload Plugin) and activate it.
3. Having too many badges is not a very good idea, so it’s better if you can see the list of all of them in one place. Go to Crocoblock > JetPlugins Settings > JetWooBuilder > Custom Badges tab and add all the badges you want to have.

4. Go to the products you want to mark with badges, and on the sidebar, you will see a “Custom Product Badges” dialog window for adding them. Add those you want. 

5. Now, go to any of the ready templates (Crocoblock > Woo Page Builder) where the Product Grid widget is used, add a new one, or edit the page where you want to put it. You will find a Custom Badges section, activate the toggle, and the badges will appear over the products you’ve added them to. 
6. Style the colors and backgrounds of the badges. 
7. You can keep or hide the default “Sale!” badge and control it by switching on/off the “Enable Default Badge” toggle. 
   That’s it. 

To add badges to the archive item, click “Edit with Elementor,” and add the Archive Sale Badge widget. You will see the Custom Badges section there, and the logic of action is the same here as in the instruction above.

🔗 Download the add-on
🔑 Go to the GitHub page

Free Add-Ons for JetFormBuilder 

Forms popup notification

This is a very simple yet handy add-on; it adds a Show Popup post-submit action and works both with JetPopup and Elementor Pro pop-ups. 

1. Make sure you have JetPopup (or Elementor Pro) and free JetFormBuilder plugins installed. 
2. Install the add-on (Plugins > Add New > Upload Plugin).
3. Create a new form or work with the existing one. On the right panel, open the list of post-submit actions, and choose “Show Popup.” Select the provider and a pop-up that will be shown after the form submission. 
   Enjoy the result!

🔗 Download the add-on
🔑 Go to the GitHub page  

💡 There are much more tools for you; check them out here. 

FAQ

The Bottom Line

With JetPlugins, you can build WordPress websites of any complexity, including branchy dynamic sites. There are 20 plugins that you get in the All-Inclusive subscription. But in some cases, you might need very particular functionality. That’s why our developers created another 40+ free add-ons requested by users. A few of them are shown in this article, but the full list you can see on the DevTools page; the link to it you can find in the footer menu of this site.