Posted on

WooCommerce Visual Hook Guide: Emails

WooCommerce Customizers: the Visual Hook Guide is back ๐Ÿ™‚

Here’s a visual HTML hook guide for the WooCommerce Emails. This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations.

Let me know in the comments if this resource it’s helpful and how! Also, if you’re eager to learn how to use this guide, how to customize emails AND how to make sure your customization only affects one email type (e.g. only the Customer Processing email), take a look at this free video lesson.

Enjoy ๐Ÿ™‚

Continue reading WooCommerce Visual Hook Guide: Emails

Posted on

Storefront Theme Visual Hook Guide

Hey WooCommerce Customizers, the Visual Hook Guide is back ๐Ÿ™‚

This time I’ve gone beyond expectations: I’ve created the visual hook guide for the Storefront Theme by WooThemes (Free Theme, with 50,000+ active installs). This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations. Also, you can copy & paste in seconds and speed up your customization time.

Let me know in the comments what you think about this resource! Enjoy!

Continue reading Storefront Theme Visual Hook Guide

Posted on

WooCommerce Visual Hook Guide: My Account Pages

Hey WooCustomizers, the Visual Hook Guide is back ๐Ÿ™‚

In this episode, I’ve created a visual HTML hook guide for the WooCommerce Account Pages (there are multiple pages such as the My Account as logged in user, My Account as logged out, etc). This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations – and you can also copy & paste in seconds unlike other “hook sniffer plugins” out there. Let me know in the comments what you think about this resource!

Enjoy!

Continue reading WooCommerce Visual Hook Guide: My Account Pages

Posted on

WooCommerce Visual Hook Guide: Checkout Page

Hey Woo Developers. I’ve created a visual HTML hook guide for the WooCommerce Checkout Page.

This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations – and you can also easily copy & paste. Enjoy!

Continue reading WooCommerce Visual Hook Guide: Checkout Page

Posted on

WooCommerce Visual Hook Guide: Archive / Shop / Cat Pages

I’ve created a visual HTML hook guide for the WooCommerce Archive Page (which is the same page for the Shop, Category, Tag pages). This visual guide belongs to my “Visual Hook Guide Series“, that I’ve put together so that you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can also copy/paste). If you like this guide and it is helpful to you, let me know in the comments!

Thanks to this WooCommerce Archive Visual Hooks Guide, you can now go to your template’s functions.php file and use “add_action(‘place-hook-here’,’your-PHP-function-here’);” – you can then place your custom functions exactly where you like them to be. Enjoy!

Continue reading WooCommerce Visual Hook Guide: Archive / Shop / Cat Pages

Posted on

WooCommerce Visual Hook Guide: Single Product Page

Here’s a visual HTML hook guide for the WooCommerce Single Product Page. This is part of my “Visual Hook Guide Series“, through which you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can copy/paste). If you like this guide and it’s helpful to you, let me know in the comments!

Now that you know the Single Product Page hooks, all you need to do in your functions.php is “add_action(‘place-hook-here’,’your-PHP-function-here’);” and you can place your custom functions exactly where you like them to show! Need a video tutorial? Watch it now → Continue reading WooCommerce Visual Hook Guide: Single Product Page

Posted on

WooCommerce Visual Hook Guide: Cart Page

Hi there!

I’ve put together a visual (yet, you can copy/paste!) hook guide for the WooCommerce Cart Page. If you like this and it is helpful to you, let me know in the comments and I’ll create another one for the checkout, single product page and my account page.

You can find WooCommerce Cart hooks quickly and easily by seeing their actual locations. Great thing is – all you need to do in your functions.php is “add_action(‘place-hook-here’,’your-PHP-function-here’);” and you can place your custom functions anywhere on the WooCommerce Cart Page!

Hope this guide is helpful to you – if you want me to add anything or edit a particular area of this, feel free to contact me via the comments. Enjoy!

Continue reading WooCommerce Visual Hook Guide: Cart Page

Posted on

WooCommerce: How to Display Custom Product Badges (e.g. %OFF, NEW, FREE)?

You would know by now ecommerce customers buy products for different reasons. Your store products might be cheaper than your competitors, maybe you offer better shipping rates, possibly you restock products more quickly than anyone else – or simply you’ve got a great product people keep buying.

One way to display your product features and benefits on the Shop page is by using “product badges”, a series of display messages that are able to communicate with the user immediately.

You’re probably already familiar with the “SALE!” badge that WooCommerce gives us by default. What if you wanted to show the exact percentage amount of that offer?

You’re also aware of the “Featured” option for WooCommerce products. Yes, they show in the “Featured” product shortcode, but what if you wanted the shop to display these special products in a different way, i.e. by using a special badge?

Well, there are millions of examples on how you could improve your products page (and single product page) by making the most of product badges. Thankfully there are snippets and plugins that can help you with that.

A little investment might mean better click-through rates and therefore higher conversion rates! Continue reading WooCommerce: How to Display Custom Product Badges (e.g. %OFF, NEW, FREE)?

Posted on

WooCommerce: Add Content Under “Place Order” Button @ Checkout

Adding content to the WooCommerce Checkout page is very easy.

All you need is to identify the position where you want to show your content (by using my WooCommerce Checkout Visual Hook Guide) and then create a short PHP function that prints on screen the content you need.

In this example, we will see how to add some content below the “Place Order” button on the WooCommerce Checkout page. This could be very helpful, for example, to print your GDPR-compliant Privacy Policy message and make sure the user is aware about the use of personal data. Continue reading WooCommerce: Add Content Under “Place Order” Button @ Checkout

Posted on

How to Sell ANYTHING with WordPress + WooCommerce: WP Dublin 2018 Slides

I had the pleasure to speak at the Dublin WordPress Meetup in March 2018. The presentation title was “How to Sell A-N-Y-T-H-I-N-G with WordPress + WooCommerce”, aimed at both beginners and more advanced designers.

Some of those who are only starting with WordPress didn’t know you can transform ANY WordPress install into an Ecommerce website in a matter of minutes.

Those who are pretty familiar with it, on the other end, they’re maybe entrepreneurs who want to set up a Marketplace, a Membership site, a Classified Ads platform or implement some of those Ecommerce features only Amazon and Ebay seem to be able to code with their million dollar budgets. Continue reading How to Sell ANYTHING with WordPress + WooCommerce: WP Dublin 2018 Slides

Posted on

How To Become an Advanced WooCommerce Developer?

Well, get ready for a 2,700+ words article: becoming a WooCommerce expert won’t take you just a couple of days.

A few months won’t be enough either.

If you want to join that very small group of advanced freelancers and agencies that exclusively work with WooCommerce clients and charge top dollar, if you want to become a WooCommerce authority and build a successful career, if you want clients to come to you as opposed to you chasing them, well – you need to digest and assimilate what I’m about to tell you.

In this (long) article I will help you understand what is advanced WooCommerce, and then break this down into 5 simple steps.

Five makes-a-lot-of-sense steps you should follow in order to complete your journey.

So, want to become a WooCommerce ninja? A WooCommerce wrangler? A WooCommerce guru?

Well, despite I dislike all those ninja-like “terms”, let me tell you a thing or two. Then, join me in the comments and let’s keep the conversation going. Continue reading How To Become an Advanced WooCommerce Developer?

Posted on

WooCommerce Customization Masterclass: WordCamp Dublin 2017 Slides & Video

I had the pleasure to co-organise the very first WordCamp Dublin this year. We welcomed 26 amazing speakers, 250 attendees, incredible sponsors and enjoyed a great venue and tasty food.

Just because organising, MCing, managing speakers and writing website content were not enough, I also decided to run a 45mins workshop titled “WooCommerce Customization Masterclass” and I have to say I received great feedback despite the lack of voice, sleep and energy (thank you)!

I spoke briefly about WooCommerce customization, my WooCommerce visual hook guides, the difference between snippets and plugins and finally demoed a few snippets to add, remove and move WooCommerce content to/from the Single Product Page.

Continue reading WooCommerce Customization Masterclass: WordCamp Dublin 2017 Slides & Video

Posted on

WooCommerce: Add Content to Empty Cart Page

A Business Bloomer fan asked me a great question: “Iโ€™m using your visual hook guide to add content above the cart, however I notice that it doesnโ€™t work if the cart is empty. Are there hooks specifically for empty carts?“.

Well, let’s take a look if we have anything available… (hint: of course we do!). Continue reading WooCommerce: Add Content to Empty Cart Page

Posted on

WooCommerce: How to Add CSS to WooCommerce Emails

Unlike your WordPress theme, you can’t just add CSS to your style.css in order to customize the look of the WooCommerce emails.

This handy PHP snippet is therefore the only viable solution. By using the WooCommerce Email Hook Guide, I identified an action called woocommerce_email_header, which is the very first thing that gets called by WooCommerce while “assembling” an email.

By using that hook, we can then echo some CSS that will therefore be applied to every email (note, woocommerce_email_header is a hook that all emails have in common). Continue reading WooCommerce: How to Add CSS to WooCommerce Emails

Posted on

WooCommerce: Remove, Rename, Add “Default Sorting” Options @ Shop

We’ve seen in the past how to completely remove the “Default Sorting” dropdown that shows in the WooCommerce Shop, Category and Product Archive pages.

Sometimes, however, you might just need to remove one of the default options, rename a sorting option accordingly to your needs or even add a brand new sorting method. As usual, a few lines of PHP are sufficient to achieve anything, thanks to WooCommerce hooks and filters. Continue reading WooCommerce: Remove, Rename, Add “Default Sorting” Options @ Shop

Posted on

WooCommerce: Add Content Below the Single Product Page Images

One of the latest WooCommerce versions introduced an optimized product gallery on the single product page. If your products have multiple images and therefore use the product gallery, you might want to also add content below the gallery itself. But…

If you’re familiar with WooCommerce customization and WooCommerce hooks (and specifically the ones of the Single Product Page), you’ll know it’s now impossible to add content under the image as it used to be done with the “woocommerce_product_thumbnails” hook.

In fact, the new gallery completely replaces the default content via JQuery, including that hook. Adding content is not as easy as it used to be. So, here’s the workaround (you might want to check how it behaves on mobile or maybe completely hide this for small devices – this has been tested on desktop only). Continue reading WooCommerce: Add Content Below the Single Product Page Images

Posted on

WooCommerce: Hide Related Products @ Single Product Page

Adding content to the WooCommerce Single Product Page is super easy – but what if you wish to remove / hide a default element?

Well, in this case it gets even easier. All you need to know is the default hook used by WooCommerce – so that you can remove it with one line of PHP in your functions.php. You can find a list of default hooks here: (https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/)

For example, how do we hide the Related Products? Well, here’s one line of code that will help you! Continue reading WooCommerce: Hide Related Products @ Single Product Page

Posted on

WooCommerce: Easily Get Product Info (ID, SKU, $) from $product Object

I’ve been wanting to publish this guide for a long while. As a freelancer, every day I repeat many operations that make me waste time – and one of them is indeed “How to get ____ if I have the $product variable/object?”.

For example, “How can I get the product SKU”? Or “How can I get the product short description”? Or maybe the product stock level, shipping class, tax class, price, regular price, sale price, and so on… hopefully this article will save you time ๐Ÿ™‚ Continue reading WooCommerce: Easily Get Product Info (ID, SKU, $) from $product Object