WooCommerce: Restricting Cart to One Product Category for Dropshipping Conditions

In a recent Business Bloomer Club discussion, a WooCommerce store owner faced a challenge with drop-shipped products. They needed a way to prevent customers from adding these drop-shipped items to the cart alongside in-stock inventory items, due to logistical differences in handling each type.

The goal was to restrict the cart so that customers could either add drop-shipped products or in-stock products—but not both simultaneously. This setup would help streamline fulfillment and avoid potential complications that arise from mixing different fulfillment types in a single order.

After testing various solutions, including plugins and custom code, the most effective approach emerged as a customized, code-based solution.

Continue reading WooCommerce: Restricting Cart to One Product Category for Dropshipping Conditions

Customizing WooCommerce Cart Layout with the New Block-Based System

In a recent Business Bloomer Club Slack thread, a WooCommerce developer raised an important question about the recent shift to block-based cart and checkout pages in WooCommerce 8.3.

With this update, WooCommerce now defaults to using blocks instead of the traditional cart.php file, affecting how developers customize the cart page with hooks and filters.

This transition has raised challenges for many, as the familiar filters and hooks now behave differently with block-based pages.

Continue reading Customizing WooCommerce Cart Layout with the New Block-Based System

Optimizing Cross-Sell Display on WooCommerce Cart for Mobile

In a recent Business Bloomer Club Slack thread, a WooCommerce user asked about the best way to display cross-sell items on the cart page for mobile and tablet views.

While the desktop display was satisfactory, they found that mobile placement options—above or below the cart—were less effective. Suggestions ranged from compact styling to implementing a side cart popup to enhance cross-sell visibility without disrupting the cart experience.

Here’s a breakdown of the top strategies.


1. Use a Side Cart with Integrated Cross-Sells

One recommended approach is to implement a “side cart” that slides in, containing both the cart items and cross-sells, which appear below relevant items. This setup allows users to see cross-sell options without scrolling too far or losing sight of the cart.

Popular plugins like FunnelKit (formerly WooFunnels) support side cart functionality, which offers flexible placement and easy customization for cross-sells.

  • Pros: Keeps the cart and cross-sells visible together; provides a modern, user-friendly interface on both desktop and mobile.
  • Cons: Requires additional setup and potentially a plugin, which may not be suitable for all themes.

2. Compact Styling for Cross-Sells Under Cart Items

Another simple yet effective approach is to place cross-sells below the cart items and apply styling to keep the line items compact. This way, cross-sells are still accessible on mobile without pushing the cart content too far down.

Tips for compact styling:

  • Reduce padding and margins between cart items.
  • Use smaller images and text for cross-sells, creating a visual distinction from primary cart items.
  • Ensure prominent headings, such as “You May Also Like,” to draw attention to cross-sells.

This approach can be implemented without additional plugins, though it may require custom CSS to achieve a polished look.

3. Popup Display for Cross-Sells

Using a popup to display cross-sells on mobile ensures they don’t interfere with the main cart view. This setup triggers a cross-sell suggestion as users navigate to the cart or begin the checkout process, providing a seamless experience.

  • Pros: Ensures cross-sells are noticeable without impacting the cart’s flow.
  • Cons: Popups can be intrusive if not designed carefully and may be dismissed quickly on mobile, reducing conversion potential.

Conclusion

Choosing the right cross-sell display on WooCommerce cart pages depends on your theme, plugins, and user experience priorities. A side cart with integrated cross-sells provides the most flexible and modern approach, while compact styling and popup options offer viable alternatives. By testing these methods, you can find the best fit to encourage cross-sell engagement without sacrificing cart usability on mobile.

WooCommerce: Custom “Empty Cart” Button

A dedicated “Empty Cart” button can significantly streamline the customer journey on your WooCommerce website.

Yes, you can manually change the product quantities to 0 on the cart page, or click on the “remove item” icon for each product… but having a button that can do all that could be a time saver, especially for B2B WooCommerce customers.

This post will guide you through creating a custom empty cart button. We’ll cover a code-based solution that uses jQuery to listen to button clicks and Ajax to trigger the empty cart function.

Enjoy!

Continue reading WooCommerce: Custom “Empty Cart” Button

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: Remove Second Item When Item Removed From Cart

This approach might be relevant for specific promotional offers (e.g. BOGO) or custom coded product bundles. In this case, you may want to remove a second item from the cart – programmatically – once a product is removed.

Of course, a relationship is needed between the two cart items via custom cart item meta data (for example, the “bundled” item will need to specify the ID of the “base” product in the cart within some custom cart item meta, so that we can “listen” to its removal).

Alternatively, you can check if a pair of product IDs are in the cart, and if one of them is removed, we’ll automatically remove the other – this is the case study we’ll go through today as it’s much easier.

Enjoy!

Continue reading WooCommerce: Remove Second Item When Item Removed From Cart

WooCommerce: Empty Cart Redirect

An empty WooCommerce Cart page can be frustrating for customers, especially if they’ve been browsing and adding items to their cart.

Redirecting them to a relevant page, like the Shop page, can help them continue shopping and potentially complete a purchase.

The redirect page can be used to showcase ongoing sales, promotions, or new products that customers might be interested in. This can help generate interest and encourage customers to make a purchase.

So, let’s see how we can redirect users from the empty Cart page to another page on the same website. Enjoy!

Continue reading WooCommerce: Empty Cart Redirect

WooCommerce: Add Shipping Rate Description @ Cart & Checkout Page

Each payment method on the WooCommerce Checkout page comes with a description right below the label. What if we could achieve something similar for the shipping rates, so that we can explain to the customer the difference between each method?

This question came up today in our private Slack channel for Woo developers, and we were able to write a quick snippet that does the trick. Here’s the complete code – enjoy!

Continue reading WooCommerce: Add Shipping Rate Description @ Cart & Checkout Page

WooCommerce: Split Cart Into Packages

There are a million plugins out there that allow you to make the most of WooCommerce “cart packages” – this is a short way to say that you have the chance to assign cart items to multiple “packages“, so that the customer can pick different shipping methods for each package.

For example, imagine you sell products that are only available for “pick up in store“, and others that are shippable. By splitting the cart into 2 packages, the customer can place both product types in the same cart, but will be able to choose “Local pickup” for package 1 only, while for package 2 they’ll select one of the available delivery rates.

Splitting the cart into multiple packages is as easy as looping through the cart items, and assigning them to its own package array based on shipping class. Enjoy!

Continue reading WooCommerce: Split Cart Into Packages

WooCommerce: Add Hyperlink to Shipping Method Label @ Cart & Checkout

Let’s say you want to help customers understand your shipping rates and benefits right on the WooCommerce Cart and Checkout pages, by adding a link to each shipping option (e.g. “View shipping FAQ“).

As you can see from the first and second screenshot below, if you enter any HTML within the WooCommerce shipping zone -> shipping method settings, this will be stripped out, and HTML tags such as hyperlinks won’t work.

So, how can we add a clickable text link to each shipping method, given that we can’t use the WooCommerce settings? Well, as usual, a quick PHP snippet can help us with that. Enjoy!

Continue reading WooCommerce: Add Hyperlink to Shipping Method Label @ Cart & Checkout

WooCommerce: Apply Discount to Cheapest Cart Item

If you run WooCommerce store promotions, this little snippet will help you with that. For example, how to run a “Buy 2 products, get one half off” or a “Buy 3 products, get the cheapest one for free” campaign?

The trick behind this workaround is to find the cheapest item by looping through the cart, and then to set its price so that it’s lower than the regular price. Enjoy!

Continue reading WooCommerce: Apply Discount to Cheapest Cart Item

WooCommerce Dynamic Pricing: BOGO, Buy X Get Y & Conditional Discounts

Offering promotions is a great way to attract customers and increase sales in your online store. Some promotion strategies that have proven effective are the Buy One Get One Free (BOGO), Buy X Get Y, and WooCommerce dynamic pricing.

Taking this into account, you may want to offer reduced prices to your users in these various circumstances:

  • Run a flash sale for a limited time.
  • Encourage your customers to buy specific products in a clearance sale.
  • Offer product bundles to big spenders.
  • Add free shipping when someone makes a bulk purchase.
  • Automatically add gift items as part of your store’s loyalty program.

Without dedicated plugins, these strategies might be utterly difficult to conduct. To save yourself from the coding hassle, you should pick a WooCommerce dynamic pricing plugin to quickly get it up and running.

In this blog post, we will discuss how to create a BOGO promotion, Buy X Get Y, and dynamic pricing rules in WooCommerce based on user conditions. And it requires no coding knowledge. Let’s dive in.

Continue reading WooCommerce Dynamic Pricing: BOGO, Buy X Get Y & Conditional Discounts