The Progress Bar is available as a Gutenberg block in the PRO version and can be added anywhere blocks are supported. Styling and customization are handled through the plugin’s settings, so you only need to insert the block where you want it to appear.
WooCommerce Cart & Checkout Blocks
Woocommerce Cart and Checkout blocks are gaining more and more popularity due to their modern design and really nice UI/UX.
Free Shipping Label Pro is fully compatible and you can place the Progress Bar block in any position you like.
In this example, we’ll show you how to add a Progress Bar block above order summary in the WooCommerce Cart block.
This is just an example and you can apply the same procedure on any position in the Cart or Checkout block.
1. Step
- Open the side panel to show all blocks in the list view.
- Find the desired position, in our case, this is Heading in the Order Summary group.
- Choose one of the following options:
– Insert before
– Insert after
2. Step
- Click on the Add Block icon
- Select Progress Bar
3. Step
This is how it looks when the Progress Bar is successfully inserted.
Update the page and you are ready to go.
Voilà! 🙂
WordPress Blocks
Blocks are the components for adding content in the new WordPress block editor. You can find the Progress Bar block under WooCommerce category.
Widgets
Similar to the block implementation, Progress Bar is also available as a widget.
You can add it to the sidebar, header, footer, single product page, etc.
