WooCommerce Visual Hook Guide: Cart Page (Block Version)

I’ve put together a visual hook guide for the WooCommerce Cart Block (you can find the legacy shortcode version here).

Please note – as of the date above, you can’t really customize the Cart Block via PHP (unless you use the workaround below).

If you need to personalize the Cart page, move elements around, hide default elements, add custom content, you can play on the Edit Page and do the usual manual work with blocks: you can move them (e.g. you can move the coupon form to the bottom), remove them (e.g. you can remove the cross-sells block), place blocks in between default blocks (e.g. you can add some text above and below the “Place Order” button), etc.

But if you wish to do that via code (custom plugin, snippet, child theme), then you must revert to the shortcode version – unless, once again, you get to understand my workaround as per the below visual hook guide.

So, at least for now and until WooCommerce decides to release actions and filters for us developers, let’s see how to find WooCommerce Cart Block hooks quickly and easily by seeing their actual location.

Once you’ve picked your hook, all you need to do in your custom code is “add_action(‘hook_name’,’custom_function’);” and you can place your personalized content in that exact position within the WooCommerce Cart Block.

Enjoy!

Continue reading WooCommerce Visual Hook Guide: Cart Page (Block Version)

WooCommerce: 10 Crucial Issues That Should Be Fixed Right Now

I just spent the last 3 days in Porto with another 2,300 WordPressers at the first in-person WordCamp Europe since Berlin 2019. I had a blast, held a nice (yet long) workshop, spoke to many, but got tired too soon.

Later on, I realized that that tiredness was something more serious – in fact I tested positive against COVID for the first time in my life, and I’m now in self-isolation hoping it won’t last long… Another 7 days without my kid – send help!

Anyhow, what really struck me at WCEU 2022, and based on various chats and some data that I’ll share below, is that the WooCommerce ecosystem is in trouble.

A nicer way to put that? WooCommerce is not moving forward as fast as it should, and unless some key issues are addressed right now, in a few years time we all may pay the consequences.

Please note, this is not a rant. It’s a proper analysis, full of actionable information.

@ WooCommerce team - if you're reading this - my plan is to give you constructive feedback and tell you what the community (really) thinks, needs and wants, so that you can get a better picture of the current situation. I know you've already started working on this, so this is just a recap/reminder and a way to get the whole community realigned. 

In this post, I will share my worries, my fears, the current WooCommerce issues, some data I collected at WCEU 2022 and then a list of actionable solutions that may be implemented in order to clear the backlog and get back on track – asap. Enjoy!

Continue reading WooCommerce: 10 Crucial Issues That Should Be Fixed Right Now

WooCommerce: How to Get Started with WooCommerce Blocks – PART 2

WooCommerce is one of the leading eCommerce platforms marking its territory in the eCommerce industry one website at a time – with over 5 million downloads. It offers a complete online store solution for small and medium-sized businesses and web professionals.       

And now, the development team is working at making WooCommerce fully compatible with Gutenberg. And the first phase is about building custom WooCommerce Blocks that can be used in the new WordPress editor.

These blocks come free of cost and let you customize and change the complete look and feel of your WooCommerce store – without typing a single line of code. With a simple drag and drop tool – you can place your store products wherever on the website in whichever desired format.

In part 1 of this article we saw ten WooCommerce blocks and their significance. In this article, we’ll talk about ten more blocks you can use for an interactive online store. But first, let’s learn about adding and editing these blocks on your store. 

Continue reading WooCommerce: How to Get Started with WooCommerce Blocks – PART 2

WooCommerce: How to Get Started with WooCommerce Blocks – PART 1

Since WordPress 5.0, the default page/post editor has been completely redeveloped. Surely, you’ve heard about Gutenberg.

Bad news is that WooCommerce joined the new editing experience much more slowly, and there are still major things to develop in order to make it Gutenberg-friendly.

The compatibility progress can be tracked via the WooCommerce Blocks official plugin, which states “You can use this plugin if you want access to all the available blocks for WooCommerce – including experimental ones. Our current “stable” blocks are bundled into WooCommerce, and can be added from the “WooCommerce” section in the block inserter“, because you can find their “beta” blocks in there, those they call “experimental” and that will be officially released into WooCommerce once they are approved.

In this article, we’ll specifically dive deep into WooCommerce Blocks – what they are, why they’re important, how many blocks are available, and how you can use them. 

Since this is a huge topic – we have twenty WooCommerce Blocks to cover – we’re dividing it into two parts. This article will evaluate the first ten Blocks you can use in your store. But first, let’s identify what WooCommerce blocks are and investigate why they are so important.

Continue reading WooCommerce: How to Get Started with WooCommerce Blocks – PART 1

WooCommerce Blocks: Hide Images Etc. From Product Grid Block

Business Bloomer enters the world of Gutenberg today, and we do it with a simple customization tutorial related to the “Product Grid” WooCommerce Gutenberg Blocks: currently these are “Best Selling Products“, “Newest Products“, “On Sale Products“, “Top Rated Products“, “Products by Category” and use the same base code…

However, all of them use custom code and not the default WooCommerce templates (and therefore we can’t take advantage of the WooCommerce hooks for the shop / product archive / product loop unfortunately), so we need to find a workaround if we wish to remove some of the default elements that come up with the product grid items: product permalink, product image, product title*, sale badge, product price*, rating*, add to cart button* in this exact order.

* As you can see from the screenshot below, actually, you can already remove the information with an asterisk from the Block settings. So, in this article, we will see how to remove the rest in case you don’t want it: permalink, image, sale badge. Enjoy!

Continue reading WooCommerce Blocks: Hide Images Etc. From Product Grid Block