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.

See How it Works

To get started, you’ll need to have Composer installed locally. This setup uses the WordPressVIPMinimum and WordPress-Extra rulesets. If you want to see a working example, check out my WooCommerce Coupon Restrictions extension on GitHub.

Set up composer.json file

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.

composer require dealerdirect/phpcodesniffer-composer-installer --dev
composer require automattic/vipwpcs --dev

Set up phpcs.xml

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:

./vendor/bin/phpcbf

Setup for VS Code

There’s a number of different VS Code extensions that integrate with PHPCS, but setup that has worked best for me is PHP Intelephense with PHP Sniffer & Beautifier. I also highly recommend setting an .editorconfig file for you project, and installing EditorConfig for VS Code to define you indent style and sizes.

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' );

In WooCommerce, an optional “Order Notes” field is generally shown at the bottom of the checkout page.

You can easily remove this field using a plugin or with custom code.

Remove with a Plugin

The free plugin Checkout Field Editor (Checkout Manager) for WooCommerce allows you to edit, remove or add fields in the checkout form.

1. Install the plugin
2. Go to the settings page for the plugin
3. Go to the “Additional Fields” section
4. Select the “order_comments” field and click “Remove”
5. Click “Save Changes”

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:

add_filter( 'woocommerce_enable_order_notes_field', '__return_false', 9999 );

If a customer’s phone number is not required for orders or support, removing the phone number field is a great way to simplify the checkout form.

You can either do this with code or a plugin, depending on what you are more comfortable with.

Remove with a Plugin

The free plugin Checkout Field Editor (Checkout Manager) for WooCommerce allows you to edit, remove or add fields to the checkout form.

1. Install the plugin
2. Go to the settings page for the plugin
3. Select the “billing_phone” field and click “Remove”
4. Click “Save Changes”

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.

Continue reading →

The cart is hooked in using the storefront_header action. To remove it:

/**
 * Remove the cart from the theme header.
 */
function prefix_storefront_mods() {
    remove_action( 'storefront_header', 'storefront_header_cart', 60 );
}
add_action( 'init', 'prefix_storefront_mods' );

If you’d like to remove it from just the home page (or other specific pages), you can use a conditional statement:

function prefix_storefront_mods() {
	if ( is_front_page() ) {
    	remove_action( 'storefront_header', 'storefront_header_cart', 60 );
	}
}
add_action( 'init', 'prefix_storefront_mods' );