Create A Responsive Bootstrap 4 Tab/Accordion ACF Repeater Loop
Create a Responsive Bootstrap 4 Tab/Accordion ACF Repeater Loop for use in WordPress. Bootstrap 4 Tabs stay as tabs in all viewport sizes which isn’t great responsively for larger content, however, this code has been adjusted to go from Bootstrap tabs to accordions at a certain breakpoint. (There is also another non-Bootstrap script that does…
Read MoreCreate an ACF Repeater Loop of Bootstrap 4 Tabs in WordPress
Create a while loop of Bootstrap 4 Tabs with an ACF Repeater field in WordPress. Create the ACF Repeater fields for the tabs. You can create as many tabs as needed, assign the field group to a post or page and populate the repeater rows. Add the ACF Loop Code View the code on…
Read MoreAdd WooCommerce Product Price as a Shortcode
Add WooCommerce Price as a shortcode using the product ID for the correct product add_shortcode( ‘cl_product_price’, ‘cl_woo_product_price_shortcode’ ); /** * Shortcode WooCommerce Product Price. * */ function cl_woo_product_price_shortcode( $atts ) { $atts = shortcode_atts( array( ‘id’ => null ), $atts, ‘cl_product_price’ ); if ( empty( $atts[ ‘id’ ] ) ) { return ”; } $product…
Read MoreCreate an ACF Repeater Loop of Bootstrap Modals in WordPress
Create a while loop of Bootstrap Modals with an ACF Repeater field in WordPress. Create the ACF Repeater fields. You can create as many fields as needed, this example uses 3 basic fields, assign the field group to a post or page and populate the repeater rows. Add the ACF Loop Code View the…
Read MoreCreating a loop of Bootstrap Modals
To create a loop of Bootstrap style modals on a page, you can use a foreach or while loop in PHP. First, let’s do the code for one modal. Single Modal Code <!– Button to Open the Modal –> <button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#myModal”> Open modal </button> <!– The Modal –> <div class=”modal” id=”myModal”>…
Read MoreAdd a lightbox popup to a jQuery lightslider carousel
Adding a lightbox pop up to a lightslider slider/carousel can be achieved by adding a script such as magnificPopup to a lightslider callback once the slider has loaded. The callback name is onSliderLoad which is fired when the slider is loaded. Make sure you have the magnificPopup script loaded, it’s a very popular lightbox and…
Read MoreRemove FOUC on Lightslider jQuery Carousel
When more than one slide is used on a lightslider slider/carousel, the slide images are initially loaded underneath each other and jump into place which causes the layout to jump around which is known as a flash of unstyled content or FOUC. There is a CSS class name that already ships with the lightslider CSS…
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 MoreSet a Minimum Subscription Period in WooCommerce Subscriptions
WooCommerce Subscriptions currently doesn’t allow a minimum subscription time period when setting up a subscription, nut you can manipulate the WooCommerce Subscription Sign-up fee and free trial fields to allow you to do so. Let’s say you want a minimum 3 month sign up period which then defaults to monthly after the 3 months is…
Read MoreFilter the Additional Information Placeholder Text field in WooCommerce
You can filter the Additional Information placeholder text field in WooCommerce checkout page with the woocommerce_checkout_fields filter. Use it in functions.php like so… add_filter( ‘woocommerce_checkout_fields’ , ‘wpb_custom_additional_info’ ); // Change placeholder text in Additional Notes function wpb_custom_additional_info( $fields ) { $fields[‘order’][‘order_comments’][‘placeholder’] = ‘Add a Shipping address here if different from Billing Address, or any additional…
Read More