woocommerce

Woocommerce Admin Customers listing didn’t display all items

This week started with a reported issue from my client that she said when looking for the customer report from Woocommerce Admin located at Woocommerce > Customers, she only sees some entries displayed, not the all items.

When checking for this page, the entries are all the same when I even change the page numbers or number of items per page. The console log keeps showing 500 error message: “You must supply an array of options.”. Dumping the parameters, it’s always empty for the $request parameters. It’s beginning seriously.

Comparing with the version on our dev site, this report page still working correctly without any errors. I’m thinking the issue is only for our live server which uses nginx. Recently, I often uses nginx for the server setup, so it may have some issues.

The main issue I often have with nginx is the wrong rewrite rules, so when doing some research, I found that WordPress has specific known issue when query parameters is not working here. Great!

My final nginx fixing this issue will be:

location / {
	# This is cool because no php is touched for static content.
	# include the "?$args" part so non-default permalinks doesn't break when using query string
	try_files $uri $uri/ /index.php$is_args$args;
}

#WP JSON issue
location /wp-json/ {
	 try_files $uri $uri/ /index.php$is_args$args;
}

That’s it 😳

Woocommerce shop page empty with the result count 1 product randomly

Last week, my customers report a weird bug that the Shop page of Woocommerce is blank / empty. It appeared randomly, and it’s fixed when I re-save the permalink.

When researching some related issue, I found that on WPML forum (because the site I’m working with has WPML also), there are some users reported about this bug. According to this guy, the bug is fixed when he disabled the Yoast SEO plugin. I tried and it works, but the main point is I can’t deactivate Yoast SEO since it’s related to my theme breadcrumbs and other SEO settings, so the journey began here.

I’ve worked with many Woocommerce sites and this is the first site has the weird bug like this. I tried to compare all the different things between this site and the others.

I didn’t remember why I’ve setup the permalink for this site is different from the others, but it’s the key settings that cause this bug.

I used the same slug for both Shop page and product detail page, because in Vietnamese, “products” and “product” has the same slug “san-pham” (there is no differences between the singular and plural noun). That’s why shop page only displayed 1 product in the result count, it’s for the product detail query.

After updating the shop page slug, this issue is fixed (I’ve kept checking this issue for some days to make sure that it’s fixed). The most important lesson I’ve learnt is “Don’t use the same slug for shop page and product detail“.

Fix conflict issue in email nofitication when showing product images on Woocommerce Thank you page

📍 Issue

Working one some Woocommerce projects make me realize that, for the default layout, Woocommerce don’t even show any product images on checkout, thankyou page and my account orders. I think it will make customer confused to revise their cart before checking out or after they finished the order.

🙄 The current solution

I often use this code to display images on thank you page:

/**
 * Show Product Image in Thankyou and My Account View Order v1.1
 */

add_filter('woocommerce_order_item_name', 'dc_product_image_on_thankyou_myacount', 10, 3);
function dc_product_image_on_thankyou_myacount($name, $item, $visible){
	if(!is_order_received_page() && !is_account_page()){
		return $name;
	}
	
	// update my $image_html here
	
	return $image_html . '<span>' . $name . '</span>';
}

In our company, the front-end dev ask to use a background images <div> with an image tag inside, so they can style the product image easily.

🙌 How I improve the code

This week, a customer found that when they received the admin new order email notification, they saw that product images still show in emails which broke the layout. The issue happened.

Because in email notifications, there is no styling added, so when the product images added, it always makes the layout be broken (with some big and un-styled images).

I found that in Woocommerce, email notifications will use the same hook woocommerce_order_item_name to display order item. This is the only hook I can use since I don’t want to modify many templates, override templates can caused issues when we upgrade Woocommerce.

In Woocommerce plugin code – /woocommerce/templates/emails/email-order-items.php – the hook will be called something like this:

// Product name.
echo wp_kses_post( apply_filters( 'woocommerce_order_item_name', $item->get_name(), $item, false ) );

I realized that I can use the final parameter $visible to check if the order item is in thankyou page or it’s in email content. (But I think it’s a temporary solution since I can’t find any hint for email content in this hook). The $visible parameter is always false in email content, so I updated my code to:

That’s it 🥳