Create a slider of WooCommerce Product Featured Images
Here is how you can create a slider of WooCommerce product featured images using a jQuery slider. There are many slider scripts you can use, this one uses Slick Center Mode, this one from Slick adds a CSS class on the center image by which you can target with CSS and add in transition and…
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 MoreUpdating WordPress Plugins Versions with wp-cli
With wp-cli installed on your webhosting you can upgrade your WordPress plugins to specific versions of the plugin, all plugins, all but certain plugins and minor or patch releases. Also you can test the update with a dry run option just to make sure installs go without error. Show all WordPress Plugins wp plugin list…
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 MoreAvoid Blank Square FontAwesome 5 Icons when used as CSS Pseudo Elements
Are your FontAwesome 5 icons appearing as blank squares “□ □ □ □” ? Are the icons displaying on Desktop ok but not displaying on iOS Mobile Safari iPhones or iPads? – you need to tighten up your CSS rules in order for them to display correctly. Add FontAwesome 5 CSS First up is to…
Read MoreWooCommerce Only Show Free Shipping Rates
You can force WooCommerce to only show free shipping rates if the carts contents qualify and hide the other shipping rates with this code snippet below, which uses the woocommerce_package_rates filter, it goes in your themes functions.php file add_filter( ‘woocommerce_package_rates’, ‘prefix_hide_shipping_when_free_is_available’, 100 ); /** * Hide shipping rates when free shipping is available. * Updated…
Read MoreRename Home name and link in WooCommerce Breadcrumbs
You can change the Home name and home url link in WooCommerce breadcrumbs with 2 filters, woocommerce_breadcrumb_defaults and woocommerce_breadcrumb_home_url Change WooCommerce Home Text in Breadcrumb add_filter( ‘woocommerce_breadcrumb_defaults’, ‘prefix_change_breadcrumb_home_text’ ); /** * Rename “home” in WooCommerce breadcrumb */ function prefix_change_breadcrumb_home_text( $defaults ) { // Change the breadcrumb home text from ‘Home’ to ‘Shop’ $defaults[‘home’] = ‘Shop’;…
Read MoreOuput Custom Taxonomy Terms in a Post
If you have created a custom taxonomy and linked it to a custom post type and want to output any terms used for that post in the single post view you can use the_terms the_terms <?php the_terms( int $post_id, string $taxonomy, string $before = ”, string $sep = ‘, ‘, string $after = ” );…
Read MoreRemove Product Tags from Products Post Type in WooCommerce
Here is a great snippet I came across to remove all product tags for the Product Custom Post Type in WooCommerce, it has 4 action/filters to remove the product tag metabox from the products posts, remove the tag column in the dashboard as well as removals in the dashboard menu and quick edit options. View…
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 More