Change WooCommerce Checkout Page To A 2-Column Layout

Woocommerce Checkout Layout

The default WooCommerce checkout page layout doesn’t make great use of a 2nd right hand column and looks a bit disjointed. Here is some CSS that can push the product order data to the 2nd column balancing the layout more evenly, making for a better user experience whilst checking out. The CSS kicks in at…

Read More

An Introductory Guide for starting out with SASS for CSS

Sass Macos

SASS and LESS are two similar tools for writing out CSS code that is sort of pre-CSS code with variables – that is then converted to good ole regular CSS code. Why you would want to use them really depends on your workflow, for smaller scale work and minor CSS updates it probably isn’t necessary but for mid-large…

Read More

Up and running with installing Sass on macOS

Sass Macos

Up and running with installing Sass on macOS Big Sur or earlier OSX Sass  (Syntactically Awesome Stylesheets) is a CSS pre-processor tool in which you write your CSS code using variables, selector inheritance, mixins, and nestings and  and then compile that code to spit out regular CSS. The benefits of SASS are more advantageous in…

Read More

Add a CSS class on a current active menu item

Add Css Class Active Menu

With manual menus you may need to add a CSS class to the current menu item that is active, below is a jQuery solution, that utilizes the URL of the page to match the link and add the CSS. (function($){ $(function() { // Document Ready activeMenu(); }); // Functions // @link https://stackoverflow.com/questions/4866284/jquery-add-class-active-on-menu function activeMenu() {…

Read More

Show All Loaded Scripts and Styles on a Page in WordPress

Scripts Styles On Page

To show all loaded scripts and styles on a page in WordPress you can use a foreach loop and show the name of the script as referred to as a $handle add_action( ‘wp_print_scripts’, ‘prefix_show_me_the_scripts’ ); /** * Show what Scripts and Styles are running on a page */ function prefix_show_me_the_scripts() { global $wp_scripts; global $wp_styles; echo…

Read More