Using the WooCommerce Cart Block

    June 17, 2020

    Ever since the introduction of blocks with WordPress 5.0 more and more functionality has been replaced by the easier to use & visually appealing blocks. If you want to use the new Cart block for WooCommerce follow these instructions.

    Requirements:

    Note: eventually this functionality will be merged into WooCommerce core and you won’t need the WooCommerce Blocks plugin.

    Replace Cart Shortcode

    We have to start by replacing the existing cart shortcode. 

    1. In your WordPress admin navigate to Pages > Cart

    2. You should see the existing shortcode

    1. Delete this shortcode.

    2. Add the new Cart block

    When you’re done you’ll see a preview of the cart.

    As you can see, this block gives you a visual representation of the cart itself. Your theme will modify the look & feel so this isn’t a perfect representation but it should be very close to what your users see.

    At this point if you like you can preview the page and see what the cart looks like.

    Different Viewing Modes

    Unlike a lot of blocks this block lets you view the cart in two different states 1) filled with items or 2) empty. And you can toggle between them.

    If you toggle to the Empty Cart you’ll see the main cart block replaced by several smaller blocks.

    You can edit any of this text to customize it for your store. At the very bottom is a block that shows new items. Feel free to leave the New Items block. Or if you have featured products you can replace this block with a featured products block.

    You can customize all of the settings for these new blocks. Ex. columns, rows, and specific content.

    Customize Cart Settings

    To customize the cart settings make sure to toggle back to the Full Cart view. 

    Under Block settings you’ll see two options 1) Shipping calculator and 2) Hide shipping costs until an address is entered.

    I generally recommend turning on both of these settings. Both displaying the shipping calculator and only show those costs until an address is entered.

    Feel free to toggle both settings and see what the cart looks like.

    Once you’re done make sure to save the page.

    Was this article helpful?

    Send feedback

    Can’t find what you’re looking for?

    Our award-winning customer care team is here for you.

    Contact Support