Add a WooCommerce missing action hook with shortcode in Beaver Builder
Some themes or plugins remove native action hooks in WordPress / WooCommerce, however you can add them back in the layout with another action hook or shortcode insertion. Beaver Builder is missing some WooCommerce action hooks one such one is woocommerce_before_shop_loop_item_title , you can add that back to the WooCommerce loop by doing a custom…
Read MoreAligning the last element in a Beaver Builder Posts Module
Here is how to align the last element across multiple columns in Beaver Builder Posts Module with Flexbox – this would typically be a button or a read more link. In the Posts Module ensure Equal Heights is enabled as this will give the correct same size height for the columns. Then click on Edit…
Read MoreAdd full screen window canvas to back to icons when searching in Beaver Builder
In a recent Beaver Builder update the canvas size for an icon search was humbly shrunk as some users didn’t like the vast open lands of icon city. With a bit of CSS code injected into the backend, the icon canvas size can be resized back to its former glory. Add the above code to…
Read MoreAdding Bootstraps Collapse to a Beaver Builder button and module
If you have the Beaver Theme as your WordPress theme, here is how you can add Bootstraps Collapse effect to a Beaver Builder row or module can be achieved using the Bootstrap data-toggle and data-target attribute. You need to have the full bootstrap enabled in the theme, not the minimal version. Let’s say you have…
Read MoreAdding jQuery Slide Toggle to a Beaver Builder button and module
Adding a jQuery Slide Toggle effect to a Beaver Builder row or module can be achieved with some Javascript and CSS. Let’s say you have a button which when clicked reveals a module below it and another click hides the module again, give the button a class of .trigger-button and the module an ID of…
Read MoreEqual Heights after Search & FIlter Pro Ajax Refresh
Using Search & Filter Pro with a grid of items that have equal heights set may loose their equal heights after a S&F filter on the same page Ajax refresh. You can pass in some jQuey to Search & Filter Pro callback sf:ajaxfinish (function($){ $(function() { // Document Ready // detects the end of an…
Read MoreHow to Add Web Fonts to Beaver Builder Plugin and Theme
You can add other fonts to Beaver Builder Plugin modules such as the heading module etc by first enqueuing the fonts and then using a filter to add them for the font selection of the plugin modules. Before you do this you need to enqueue the fonts so the plugin can recognise them which you…
Read MoreAdd Search & Filter Pro with Ajax Reload to Beaver Builder Post Masonry Grid
You can use Search and Filter Pro with Beaver Builders Themer Post Module grid masonry layout with Ajax reload. This guide goes through the tweaks needed and uses a custom post type archive page with a Post Grid module that uses the main query with a masonry layout. Create your Posts Module CPT Archive Page…
Read MoreCreate a content flyout overlay in Beaver Themer Layout Header
This is a starter guide to get you up and running with an overlay flyout on click of hidden content in Beaver Builder – there is nothing indeed Beaver Builder specific about it other than it’s easy to build the overlay content within the builder itself, display it normally in the BB editing screen but…
Read MoreOutput Beaver Builder CPT Posts in a Module that belong to a Custom Taxonomy
Using Beaver Builder loop modules to output posts can be limited when you want to output a CPT that belongs to multiple custom Taxonomies but you only want posts to display from one taxonomy – this can be achieved in code using the fl_builder_loop_query_args filter. View the code on Gist. In the above code snippet…
Read More