WooCommerce Accordion Style Expand/Collapse Product Category Menu
Here is a jQuery solution for a WooCommerce accordion style menu for the product category menu that can be assigned with a WooCommerce widget, the menu works best when all product categories are assigned to a parent category. The Accordion menu will then expand and collapse on click with the first parent category appearing expanded,…
Read MoreFlyout Overlay with CSS & Javascript
Building on from 2 previous posts on overly flyout content and animating hamburger icons – I did one more code example with a more minimal approach. The initial same approach is required with 2 x rows of content, one static and the other designated as the overlay flyout with a class of .overlay The toggle…
Read MoreAnimating the Hamburger Menu Toggle
There is a comprehensive animating Menu toggle CSS set of rules created by Jonathan Suh, it’s got more animation options than you can poke a stick at. The basic mark up in HTML is… <button class=”hamburger hamburger–collapse” type=”button”> <span class=”hamburger-box”>< <span class=”hamburger-inner”></span> </span> </button> The second CSS class for the button is the animating class…
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 MoreCreate Multiple Marker Map from ACF Google Map Location Field from a CPT
Here is a rundown on how to get a multiple marker Google map on a page that contains markers for a business dealer that has it’s own Custom Post Type (CPT). Each dealer has it’s own CPT with an individual map location marker and also another agnostic page that has all the dealers map markers in a…
Read MoreMake Beaver Themer Sticky Header And Shrink At Any Size
You can make the Beaver Themer header stick and shrink at any viewport width by overriding the default fl-theme-builder-header-layout.js that comes with Beaver Themer, your version will overrule the Themer javascript as it runs after and can be re-declared in javascript. Create a js file, copying /wp-content/plugins/bb-theme-builder/js/fl-theme-builder-header-layout.js and enqueue it to your theme, there are 2…
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 MoreLimit the Words in WooCommerce Product Short Description
WooCommerce has a filter that can limit the words in a product short description field called ‘woocommerce_short_description‘ – coupled with an existing WordPress function ‘wp_trim_words‘ we can make the description any length to suit teasers, sliders etc and leave other areas where we want the full short description. View the code on Gist. In the…
Read MoreOverride the Beaver Builder LightBox Plugin
Here is a quick guide on how to override the Beaver Builder Lightbox plugin in which you may wish to run another lightbox plugin instead. If you are using the Beaver Builder plugin, then add in your theme’s function.php add_filter( ‘fl_builder_override_lightbox’, ‘__return_true’ ); Additionally, if you are running the Beaver Builder Theme then you need…
Read MoreChange WooCommerce Variation Dropdown Text
You can change the default text in the product variation dropdown from ‘Choose an option‘…. to something else with the ‘woocommerce_dropdown_variation_attribute_options_args‘ filter. Add in your functions.php add_filter( ‘woocommerce_dropdown_variation_attribute_options_args’, ‘bt_dropdown_choice’ ); // /** * Change the custom dropdown “Choose an option” text on the front end */ function bt_dropdown_choice( $args ){ if( is_product() ) { $args[‘show_option_none’] =…
Read More