@wordpress/create-block tool to create a WordPress plugin.
To do so, open your wp-content/plugins directory and run the following command:
npx @wordpress/create-block -t wceu23-shipping-workshop shipping-workshop
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:
- Install Redux Dev Tools in your browser. Chrome | Firefox
- Install the sample product data into your WooCommerce site.
- Ensure a free shipping method is enabled.
- Activate the "Cash on Delivery" payment method.
- 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 startNote: 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!