Woocommerce snippets
For SINGLE PRODUCTS– Skip Cart WooCommerce shopping cart altogether and send your buyers straight to the checkout page and Increase Conversions Instantly! The more steps you put your buyer through, the lower your conversions. Here are the 2 code snippets:
WooCommerce Skip Cart Code
This snippet allows the user to skip to the cart directly.
|
1 |
add_filter( 'woocommerce_add_to_cart_redirect', 'skip_woo_cart' ); function skip_woo_cart() { return wc_get_checkout_url(); } |
Change WooCommerce Add to Cart Button Text to BUY NOW!
|
1 |
add_filter( 'woocommerce_product_single_add_to_cart_text', 'cw_btntext_cart' ); add_filter( 'woocommerce_product_add_to_cart_text', 'cw_btntext_cart' ); function cw_btntext_cart() { return __( 'Go To Checkout', 'woocommerce' ); } |
Both snippet will work on WooCommerce 4 and newer.
Once you add these codes to your WooCommerce store, you’ll see that your customers will be redirected to the checkout once they click on the Buy Now button.
Adding ACF Options page via a plugin
Because of the possibility of plugin loading order error, it is best to use the init hook to search for acf existence and adding the options page. i.e:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
add_action('init', 'add_acf_options_page'); function add_acf_options_page() { if (function_exists('acf_add_options_page')) { acf_add_options_page(array( 'page_title' => 'Site Settings', 'menu_title' => 'Site Settings', 'menu_slug' => 'site-settings', 'capability' => 'edit_posts', 'redirect' => false, 'position' => '6' )); } } |
Max Mega Menu – adding a custom divider
I wanted to add a “|” character in-between elements but the only option in Max Mega Menu (MMM) is to enable a divider or not but not specify a custom divider – it only uses the border-right/left settings.
Their support suggested this but stated it could cause icon alignment issues – under custom CSS in MMM:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@include desktop { #{$wrap} #{$menu} > li.mega-menu-item:first-child::before { content: ""; display: none; } #{$wrap} #{$menu} > li.mega-menu-item::before { content: "|"; color: #fff; display: inline; float: left; } } |
I ended up using a javascript hack to get it done:
|
1 2 3 4 5 6 |
jQuery(document).ready(function(){ var theSpan=`<span class="whiteDivider">|</span>`; jQuery("#mega-menu-max_mega_menu_3 #mega-menu-item-166").append(theSpan); jQuery("#mega-menu-max_mega_menu_3 #mega-menu-item-150").append(theSpan); jQuery("#mega-menu-max_mega_menu_3 #mega-menu-item-154").prepend(theSpan); }); |
Npm tips
To update all dependencies in a package.json to their latest versions.. can install this globally first(just once):
|
1 |
npm install -g npm-check-updates |
and then run below which will update the versions of each dependency to the latest
|
1 |
ncu -u |
finally run below to update all of the scripts to their latest. Note, this could be code breaking depending on version updates for your dependencies.
|
1 |
npm install |