Build a "Not at Home" Shipping Extension in the WooCommerce Checkout Block

Welcome to WordCamp Europe! Join us in an engaging workshop where we'll guide you through building a practical "Not at Home" shipping extension for the WooCommerce Checkout Block.

Prerequisites: What You'll Need

Before we begin, make sure you have the following prerequisites ready:

• A development environment with a blank WP installation
• WooCommerce plugin installed and activated
• Checkout page with the Checkout block integrated
• Free shipping method added in WooCommerce
• "Cash on Delivery" payment option enabled in WooCommerce settings
• Basic knowledge of JavaScript (React)
• IDE/Code editor (e.g., Visual Studio Code)
• Node or NVM (Node Version Manager) installed

Before We Start: Preparation Steps

Before diving into the workshop, let's make sure everything is set up properly. Take the following steps:

1. Install Redux Dev Tools in your browser. Chrome | Firefox
2. Install the sample product data into your WooCommerce site.
3. Ensure a free shipping method is enabled.
4. Activate the "Cash on Delivery" payment method.
5. Ensure the Checkout page contains the Checkout block, and that the [woocommerce_checkout] shortcode has been removed.

To get your development environment ready, follow these straightforward instructions:

npm i -D prettier@npm:wp-prettier@2.6.2
composer install
composer run phpcbf
npm start

Note: composer run phpcbf will show an error, this is OK!

Get ready to enhance your shipping capabilities with our workshop: Build a "Not at Home" Shipping extension in the WooCommerce Checkout block. Let's elevate your WooCommerce store and create a more convenient experience for your customers!