Minimal Metro

Limit Search Results to WooCommerce Products

Make sure your customers see only WooCommerce products when searching for items on your online store, giving them a better showcase of your offerings

Running a WooCommerce website requires some pretty straightforward tasks at hand each and every day. However, there are also some custom tweaks that some eCommerce admins would like to have for their websites. One of them is displaying just the products on their WooCommerce search page. This is done fairly easily and the code below has been tested with WordPress 5.6 and WooCommerce 4.8.0. However, as always, we advise you to thoroughly test the implementation of these custom code tweaks. In addition, either back up the entire site and database or use a service like Kinsta or WP Engine, which provide daily backups. Here’s the code below:

/** Limit WooCommerce Search Results To Products **/

function search_filter_pproducts($query) {
if ($query->is_search) {
$query->set(‘post_type’, ‘product’);
$query->set( ‘wc_query’, ‘product_query’ );
}
return $query;
}

If you have any questions or require custom WooCommerce coding, please contact us right away. We’ll be happy to provide you with assistance & services regarding items like these. In the meantime, have a happy holiday!

How to add additional gallery thumbnail sizes in WordPress

Create uniquely resized image thumbnails for use in content pages, blog posts, landing pages and galleries, speeding up the loading speed of your WordPress website

For many of us, the standard set of gallery sizes in WordPress aren’t enough and for many, they create their own set of issues. In turn, for any knowledgable WordPress developer, controlling what sizes are being created every time you upload an image is crucial for a proper, fast, and well-performing website. Below you will find a snippet that we’ve created for one of our clients, which you need to add to functions.php in order for it to work. Naturally, if you aren’t adding this prior to developing your website and uploading new media, you will have to regenerate all the thumbnails – easily done by the Regenerate Thumbnails plugin, which you can download & install on your WordPress site for free.

/** Gallery Sizes */

add_image_size(‘images-medium’, 450, 450, array(‘center’, ‘center’));
add_image_size(‘gallery-small’, 480, 300, array(‘center’, ‘center’));
add_image_size(‘gallery-medium’, 720, 405, array(‘center’, ‘center’));
add_image_size(‘gallery-thumb’, 500, 350, true );
add_image_size(‘woocommerce_single_resized’, 1000, 1000, true );

/** Media Gallery Sizes Add-on */

add_filter( ‘image_size_names_choose’, ‘my_custom_sizes’ );

function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
‘gallery-small’ => __( ‘Gallery Medium Cropped’ ),
‘gallery-medium’ => __( ‘Gallery Medium’ ),
) );
}

In this case, we’re adding 5 additional thumbnail sizes that we need for theme placements for our client’s website. These items are catered to a 1440px wide design grid size we’re using, allowing us to fill out the pages perfectly, all without adding too much weight to them. Naturally, it would be a great idea to use the <picture> element within the template’s design or ACF (Advanced Custom Forms). This will give you more leeway in terms of loading image sizes that fit each screen, allowing you to load smaller and less heavy imagery. In turn, this will undoubtedly speed up your site, as it stops loading large thumbnail sizes, albeit filling out the content area real estate perfectly. Below you will find an example of what is done on EV Car Scene, one of the websites we manage & develop.

EV Car Scene - Custom Sized Thumbnails For Use In Content Pages
EV Car Scene – Custom Sized Thumbnails For Use In Content Pages
DISCLAIMER: Please use the code, advice, and information presented on this website with caution. Nucleus J.D.O.O, or any of its employees, cannot be held responsible for any damages that this code might cause. We always try to update the code shown on our website, but we cannot guarantee its functionality with various themes, templates, or coding. Please ensure that you test each code thoroughly in order to use it safely.

 

How To Send A CC or BCC of Customer E-Mails in WooCommerce To Other E-Mail Address

For those running WooCommerce either for themselves or for their clients, the question we’re about to answer below comes into view quite often. Basically, most of our  clients want to have this option. After all, checking the e-mails that are sent to your customers is a great way to further troubleshoot any issues, but also, to ensure that  all the e-mails get sent out and that they contain all the necessary information. That’s why the code snippet added below will help you CC or BCC your customer e-mails to another e-mail address, preferably your own. Here’s the code below.

/** Send out a copy of WooCommerce e-mails to another address **/

add_filter( ‘woocommerce_email_headers’, ‘woocommerce_email_headers_nucleusmarketing’, 10, 4 );
function woocommerce_email_headers_nucleusmarketing( $header, $email_id, $email_for_obj, $email_class ) {
// Bcc this email address to *all* WooCommerce emails.
$header .= ‘Bcc: [email protected]’ . “\r\n”;

// Add another address to the Order Completed emails only.
if ( ‘customer_completed_order’ == $email_id ) {
$header .= ‘Bcc: [email protected]’ . “\r\n”;
}

return $header;
}

While WooCommerce doesn’t provide this feature out of the box, the above solution will simply create a BCC to your accounting and/or any e-mail address you want the customer confirmation e-mails (eg. processing order, completed order, etc.) to go to. It’s easy, works with the current WordPress 5.6 and WooCommerce 4.8.0 versions. Please free to send us a note if you find this code not working, we’ll appreciate it.

CloudFlare Launches Automatic Platform Optimization For WordPress

Today, Cloudflare launched Cloudflare APO (Automatic Platform Optimization). It’s a solution that allows (for now) WordPress and WooCommerce users to enhance their loading speeds, see lower TTFB (Time To First Byte) timings and make their websites run better. Since we’re a webdev and marketing agency dedicated to both increasing the lowering speeds and improving the overall usability of our client’s websites, we are looking forward to implementing these solutions to each of our clients that use Cloudflare. That being said, we’re undertaking a testing batch next week to confirm the increases in performance on some of our own, but also, on some of our client’s websites as well. However, since most of our websites are already greatly optimized for both speed and performance, we’re looking to see what results we get. Here’s a short rundown of the Cloudflare APO (Automatic Platform Optimization) right below:

Today, we are announcing a new service to serve more than just the static content of your website with the Automatic Platform Optimization (APO) service. With this launch, we are supporting WordPress, the most popular website hosting solution serving 38% of all websites. Our testing, as detailed below, showed a 72% reduction in Time to First Byte (TTFB), 23% reduction to First Contentful Paint, and 13% reduction in Speed Index for desktop users at the 90th percentile, by serving nearly all of your website’s content from Cloudflare’s network. This means visitors to your website see not only the first content sooner but all content more quickly.

With Automatic Platform Optimization for WordPress, your customers won’t suffer any slowness caused by common issues like shared hosting congestion, slow database lookups, or misbehaving plugins. This service is now available for anyone using WordPress. It costs $5/month for customers on our Free plan and is included, at no additional cost, in our Professional, Business, and Enterprise plans. No usage fees, no surprises, just speed.

We’ll get more in-depth into the details and the nitty-gritty of how this service works & affects loading speeds for the websites we run for our clients. In the meantime, if you’re interested in adding Cloudflare to your website or you need it optimized or rebuilt, please contact us right away. Our sales team will give you an exact quote and we will ensure to bring you up to speed on all current best web design and web optimization practices. Certainly, you can also use our consultation services and see what can be done to make your website go faster, bounce rate is lower, or increase overall sales. We can do it for you!

Another Quick Project In The Books: ADV.1 FLOWSpec Wheels Single Product Pages

CREATING A CUSTOM SINGLE PRODUCT PAGE WITH ALL THE BELLS AND WHISTLES IN 10 DAYS

Usually, eCommerce projects like these take between 60 and 90 days to complete. However, with the COVID-19 crisis hitting clients worldwide, the need to sell online is becoming more evident. For ADV.1 Wheels, our longstanding client with whom we’ve been through thick and thin from 2016, their venture into online sales was always planned. However, the company produces and sells a premium forged wheel product who’s price goes well above $10,000 per set of wheels in some cases, thus negating the need for online sales. After all, you’re not going to cough up that much money for a custom set of wheels, then completely screw up your fitments. That’s how the high-end wheel game works.

But, unlike the highest level of wheel making possible, their recently revealed FLOWSpec flow formed wheel line is a bit different. Some will say perfect for selling online. Here’s a bit about their FLOWSpec line below.

ADV.1 flow forming process how flow-formed wheels are made and what makes them a strong alternative to forged wheels at a more affordable price point. Flow forming is an incremental metal-forming technique used to make wheels. With this technology, a disk is formed over a mandrel by one or more rollers using tremendous pressure and heat. The roller deforms the workpiece, forcing it against the mandrel. In turn, the metal is both axially lengthened and radially thinned at the same time. With this technique, the pressure exerted by the roller is highly localized and the material is incrementally formed. Flow forming subjects the metal material, where, thanks to heat & pressure applied to the wheel, the molecules of the aluminum are improved, creating a strong & lightweight wheel with characteristics similar to that of a forged wheel, but with a much lower price point. In turn, this makes flow formed wheels more affordable than their forged counterparts and stronger than cast wheels.

In a nutshell, this allows ADV.1 to produce some of their well-known designs, but in a more approachable pricing format. Naturally, you don’t have all the bells & whistles regarding widths and diameters, hardware options or a wide variety of finishes available for their premium wheels, but these still look darn good. Furthermore, ADV.1 has selected a wide range of ready-made fitments for some of the most popular middle and high-end cars. In turn, this makes them a perfect candidate to be sold online. And that’s where we step in.

PARTICULAR REQUIREMENTS FOR A RATHER QUICK PROJECT

Currently, ADV.1 has a really old theme running the site. Fully secure and 90% cleaned from deprecated coding, it still is an outdated version of a very popular theme. Furthermore, when the site was developed over 5 years ago, a mistake was made and the work was not done the proper way (with a child theme), but interventions into the actual main theme were done, negating any (easily done) updates. However, with all the work we’ve put into this project in the last two years, the theme functions well and with advanced ObjectCaching, minification, CDN (Content Delivery Network) and several security-oriented solutions, it’s a stable site. Nonetheless, doing any major changes and coding work still requires a lot of effort and time.

This theme was used for WooCommerce online sales only once, back in early 2019 for a special limited edition t-shirt, worn by the CEO of MW Company, made for the 2019 Gumball 3000 Rally, particularly for its Japanese stage. After that, WooCommerce was brought offline, as the site (in this state) was never meant to be utilized for an online store. However, times and things change and about 4 weeks ago, we were presented by a task to push online, direct to consumer sales for our client and that’s what we did.

In order to achieve this, we had to do extensive work to the theme’s functions, single product template, shop template, cart and checkout template pages. Additionally, a lot of work was done to add particular cache exceptions, both at our end, but also on WP Engine’s end (that’s what we use to host the website for this client), ensuring we avoid any pitfalls of a highly cached environment on a dynamically generated set of web pages – the actual online store. While some of the challenges were done easily, items like an outdated jQuery file, several main.js lines of code that we had to recode, combined with a bunch of particular items related to the outdated theme, all made this a rather challenging task.

CUSTOM CODED WOOCOMMERCE SINGLE PRODUCT PAGE

For ADV.1, there were a couple of particular requirements we had to take into account to make this project happen. First, we had to create a custom template for the single product page that reflects the styling of the rest of the website. For the project at hand, two versions of the single product page header were done, both reflect the design requirements of the clients to the letter.

In the end, the client went with the second version of the product page, removing the top banner image. And in our opinion, that cleans up the page substantially. In addition to that, the removal of the top banner image from this single WooCommerce product page also brought a lot more information above the fold, increasing the possible CTR (Click Through Rate) for this page as well.

The particular requirements here consist of the way the product is sold and how it’s shipped. First, the product is sold in sets, which required a bit of custom function coding work, where the prices are set per product category and displayed “PRICE PER SET” instead of the usual “PRICING”. While the client is only selling sets right now, in the future, there will certainly be a need to sell single products, which will necessitate us coding a “PRICE PER PRODUCT” solution to be displayed if and when a variation that contains only a single product is chosen.

In addition to that, these items pack in four different boxes. So we have installed and set up a plugin that allows for additional boxes to be added to each variation. Unfortunately, this only works by manually adding the boxes for each variation, so it took some time to complete. In addition to that, particular shipping options needed to be addressed within the FedEx shipping calculator, where particular account and list rates were used. In turn, the client can now accurately calculate shipping for both domestic U.S orders, as well as international ones.

For this website, the client uses the Avalara tax calculator. In turn, this allows them to fully be on point regarding particular sales tax requirements set forth by the respective states, paying attention to both economic nexus and economic threshold laws and regulations. Furthermore, the client can easily adjust the economic threshold for each respective state, ensuring sales tax begins to be calculated the minute they cross it, avoiding any issues with taxation overall.

The finishing items for this single product page contain the custom gallery, particular H2 titles, and subtitles, followed by a custom HTML coded second part of the page. This latter part uses a custom shortcode generated to allow us to display gallery, press photo, newborns or other items in select HTML pages. For this page, it uses the shortcode to display the press photos, but we will shortly follow it up with newborn gallery display as well. For those who aren’t familiar with the wheel world and ADV.1 in particular, the term “newborns” is used to describe wheels that have been freshly built, right off the factory floor.

FINAL NOTES FOR THIS PROJECT

As said on a few occasions in this blog post, this was a really time-sensitive project. Total work days for this project were about 10 days, with 14+ hour workdays being the norm. We’ve worked through two weekends and managed to add three separate ADV.1 FLOWSpec products with over 90 variations in total in that amount of time. As you can see, our webdev and marketing team is more than capable of creating such work in a short amount of time, but usually, if you want to keep the cost and errors down to a minimum, these projects should be done with about 30 days of time set aside, or if you require a bit more custom work like two-page configuration process and similar, it will take around 60-90 days to accomplish.

You can view the full completed page below and visit them at ADV5.0 FLOWSpec, ADV005 FLOWSpec and ADV08 FLOWSpec wheel pages. For any information regarding our work, please contact us right away.