Change Amount of WooCommerce Products Displayed on Shop Page
WooCommerce displays by default 4 columns and 10 products per page in the shop or archive page – the products per page is based off the amount of post set to display in the WP Admin Dashboard > Reading – Blog pages show at most setting. Here is how you can change the amount of products…
Read MoreRemove the Additional Information and Order Notes fields in WooCommerce
You can remove the Additional Information and Order Notes fields in WooCommerce checkout page with 2 filters that you add to your themes functions.php file View the code on Gist. The first filter woocommerce_enable_order_notes_field is returning false and will not display the ‘Additional Information’ heading and also the order notes field, I have found it needs to…
Read MoreRemove Address Fields in WooCommerce Billing and Shipping in Form Checkout
WooCommerce has the ability to remove the address fields in the checkout form of the billing and shipping forms, this is great if you do not require the address fields as you may have a virtual/download only products that don’t require shipping, less fields to fill out = happy customers. You can remove address field…
Read MoreAdd Menu Items in a certain place with wp_nav_menu_filter
wp_nav_menu_filter allows you add items at the end of a menu but what about adding an item in a specific place. add_filter( ‘wp_nav_menu_items’, ‘prefix_add_menu_item’, 10, 2 ); /** * Add Menu Item to end of menu */ function prefix_add_menu_item ( $items, $args ) { if( $args->theme_location == ‘primary’ ) $items .= ‘<li class=”menu-item”>…</li>’; } return…
Read MoreWooCommerce 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 MoreAdd WooCommerce Cart Icon to Menu with Cart Item Count
Here is a way to add WooCommerce cart icon to a menu with the cart item count, it links to the cart page and displays the number of items that have been added to the cart. The code uses three functions which need to be added to functions.php and some CSS in style.css. (If you just…
Read More