At Universal Yums we decided to rebuild our customer dashboard in React. The dashboard is where customers go to make changes to their subscription, view their orders, update payment information, etc. Since it contains a lot of interactive elements, it felt like a good place to drop in React and avoid a lot of unnecessary page loads.
The dashboard is not entirely headless since we still use WordPress to render the initial page and handle authentication, but once you’re in React takes over and all the data is fetched using REST API calls. I made a short video showing how it works.
From a business perspective, I am not sure there is a real compelling business reason to move to React for most sites. A pretty similar result could be achieved with PHP rendered pages and a sprinkling of javascript on top. But if your team likes to work in React and doesn’t mind setting up custom endpoints to enable certain functionality, I think it is a fine route to go.
Linting is a way to automatically check code for potential errors and formatting issues.
Once code standards are defined for your WordPress project, linting issues can be displayed directly in VS Code as you work and most code formatting issues can be autocorrected on save.
Linting can be set up for a plugin, theme, or an entire WordPress site. To get started, create a composer.json file in the root of your project directory.
To use the WordPressVIPMinimum and WordPress-Extra rulesets you’ll need to install two composer packages.
Next we’ll need to define the rulesets to use and which files or directories to check. That happens in the phpcs.xml file, which also goes in the root of your project directory. See this phpcs.xml as an example.
The file contents should look something like this:
<?xml version="1.0"?>
<ruleset>
<arg name="basepath" value="."/>
<arg name="extensions" value="php"/>
<arg name="severity" value="4"/>
<arg name="tab-width" value="4"/>
<arg name="parallel" value="80"/>
<arg name="cache" value=".phpcs-cache"/>
<arg name="colors"/>
<exclude-pattern>*/.git/*</exclude-pattern>
<exclude-pattern>.github/</exclude-pattern>
<exclude-pattern>*/vendor/*</exclude-pattern>
<exclude-pattern>*/node_modules/*</exclude-pattern>
<exclude-pattern>*/tests/*</exclude-pattern>
<exclude-pattern>*/bin/*</exclude-pattern>
<config name="testVersion" value="7.4"/>
<config name="php_version" value="70407"/>
<!-- Ignore warnings, show progress of the run and show sniff names -->
<arg value="nps"/>
<!-- Directories to be checked -->
<file>.</file>
<!-- WordPress -->
<rule ref="WordPressVIPMinimum"/>
<rule ref="WordPress-Extra"/>
<rule ref="PSR2.Methods.FunctionClosingBrace"/>
</ruleset>
Run Linting and Fixing via Command Line
To see if everything is set up correctly, you can the checks via the command line.
To lint your codebase, run:
./vendor/bin/phpcs
If everything is working correctly, you should see an output like this:
To autofix linting issues (that can be corrected automatically, run:
Once you have these extensions installed, you should see linting issues highlighted directly in VS Code. Formatting and spacing issues can also be autoformatted and fixed on save.
Stock from orders can get added back to inventory for a variety of reasons: order was refunded, order was switched back to pending, or item was removed from an order.
Generally, this is what you would want WooCommerce to do. But in certain specific cases you may want to ensure stock is never returned to inventory. Here’s how:
// Defaults the edit order UI to not restock products on refund.
add_filter( 'woocommerce_restock_refunded_items', '__return_false' );
// Prevents items from being returned to stock when status changes.
add_filter( 'woocommerce_can_restore_order_stock', '__return_false' );
// Prevents items from being returned to stock when line item adjustment is made.
add_filter( 'woocommerce_prevent_adjust_line_item_product_stock', '__return_true' );
The line items in WooCommerce orders are only editable when the order is in a “Pending” or “On Hold” status. In general this makes sense. If an order is processing, it means the payment has already been accepted and any line item changes would likely require a refund (using the refund functionality) or a new payment (likely a separate order).
However, some business may have products that are frequently swapped or changed while an order is in processing, and it doesn’t make sense to have to switch the status to update the order. In those cases, you can use the wc_order_is_editable filter.
Select the “order_comments” field and click “Remove”
Click “Save Changes”
Checkout Field Editor Plugin
Remove with Code
Here’s the code snippet to remove the order notes field from checkout:
/**
* Remove the order field from checkout.
*/
function devpress_remove_checkout_phone_field( $fields ) {
unset( $fields['order']['order_comments'] );
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'devpress_remove_checkout_phone_field' );
There’s also an alternate method, which is just a one line filter:
Select the “billing_phone” field and click “Remove”
Click “Save Changes”
Checkout Field Editor Plugin
Remove with Code
Here’s the code snippet to remove the billing phone number field from checkout:
/**
* Remove the phone number field from checkout.
*/
function devpress_remove_checkout_phone_field( $fields ) {
unset( $fields['billing']['billing_phone'] );
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'devpress_remove_checkout_phone_field' );
WooCommerce stores order records in the posts table and its associated data in the postmeta table by default. To access and update order data, WooCommerce offers a number of helper methods.