EDITS.WS

Tag: tutorials

  • How to Sell Car Parts Online With WordPress (Step by Step)

    Are you looking for a way to sell car parts online on your WordPress website?

    If you have an automotive business, then a website is a great way to reach new customers. It can also improve the customer experience by allowing car owners to look through your entire catalog and order auto parts online.

    In this article, we will show you how to sell car parts online with WordPress.

    How to sell car parts online with WordPress

    Which Is the Best Website Builder to Sell Car Parts Online?

    There are many website builders that you can use to sell car parts online, but we recommend using WordPress.

    According to our blogging research statistics, WordPress is the most popular website platform in the world. It powers nearly 43% of all websites, including many of the top eCommerce websites.

    WordPress is also open-source and free, so you will have bigger profit margins. For more on this topic, see our article on why WordPress is free.

    However, just be aware there are two types of WordPress software. First, there is WordPress.com, which is a blog hosting platform. Then, there is WordPress.org, which is also known as self-hosted WordPress.

    For a detailed comparison, please see our guide on the difference between WordPress.com and WordPress.org.

    For an eCommerce site, we recommend using WordPress.org because it gives you complete ownership of your website and online store. You can also install third-party plugins, including the popular WooCommerce eCommerce plugin.

    According to our WordPress market share report, WooCommerce is used by 8.8% of all websites, which makes it more popular than Shopify for online stores and eCommerce sites.

    To learn more about why we recommend WordPress to all our readers, please see our complete WordPress review.

    We will now show you how to sell car parts online with WordPress. You can use the quick links below to jump to the different parts of the article:

    Step 1: Set Up Your Auto Parts Website

    To start selling car parts online, you will need a domain name and web hosting.

    A domain name is your store’s address on the internet. This is what customers will type into their browsers to reach your website, such as www.carparts.com or www.buyautoparts.com.

    Web hosting is where your site lives online. To help you find the right hosting for your business, we have created a complete list of the best WordPress hosting that you can buy.

    Although the WordPress software is free, hosting and domain names are where the costs can really start to add up.

    A domain name typically costs $14.99/year, and hosting costs start from $7.99/month. This can make it difficult if you are a new business or have a limited budget.

    Thankfully, Bluehost is offering our readers 60% off web hosting, plus a free domain name. Bluehost is one of the largest hosting companies in the world and an official WordPress-recommended hosting partner.

    They are also offering our users a free SSL certificate. If you want to sell car parts online, then an SSL certificate is essential for keeping customer credit and debit card information safe.

    You can click the button below to get started for as little as $2.75 per month.

    Once on the Bluehost website, click the green ‘Get Started Now’ button.

    The Bluehost web hosting website

    This will bring you to the Bluehost pricing page, where you can choose a hosting plan for your auto part business.

    We recommend choosing a Basic or Plus plan, as they are the most popular web hosting plans among our readers.

    Bluehost's pricing plans

    After selecting a plan, click on ‘Continue.’

    On the next screen, you will need to choose a domain name.

    Choosing a domain name for an automotive store

    Ideally, your domain name will be easy to pronounce, spell, remember, and relate to your business. The name of your auto parts business is a great place to start, but sometimes that domain may already be taken by another business website.

    In that case, you can try extending the domain name by adding your location, what makes your auto parts business unique, or some extra keywords. If you need some inspiration, then check out our guide on how to choose the best domain name.

    After choosing a name, click on the ‘Next’ button to continue.

    Now you will need to provide your account information, such as your name and business email address. After that, you will also see optional extras that you can buy.

    We generally don’t recommend buying these extras straight away, as you can always add them later if your business needs them.

    Bluehost package extras

    After that, type in your payment information to complete the purchase.

    After a few moments, you will get an email with instructions on how to log in to your web hosting control panel. This is your hosting account dashboard, where you can manage your car parts website, including setting up email notifications and asking for WordPress support.

    It’s also where you will install the WordPress software, so let’s do that now.

    Step 2: Create a New WordPress Website

    If you sign up with Bluehost using our link, then Bluehost installs WordPress on your domain name automatically.

    If you want to create a different WordPress website, then go ahead and click on the ‘My Sites’ tab in the Bluehost dashboard.

    After that, you need to click on the ‘Add Site’ button and select ‘Create New Site.’

    Creating a new WordPress website with Bluehost

    The Bluehost wizard will now walk you through the setup process.

    First, you will need to type in a site title and an optional tagline.

    Adding a site title and tagline to WordPress

    When you are ready, just click on the ‘Next’ button to continue.

    After that, Bluehost will ask you to choose a domain name and path for your car parts website. If you already own a domain name, then go ahead and select it from the dropdown menu.

    Selecting a domain name for an automotive parts website

    If you don’t have a domain name, then you can buy one by visiting the ‘Domains’ page inside the Bluehost dashboard.

    After choosing a domain name, you can leave the directory path blank and let Bluehost fill it in for you.

    The installer will also show a few plugins that you may want to install on your car parts website, including WPForms. Many of these are must-have WordPress plugins that can help you grow your business and get more sales, so we recommend installing them.

    When you are ready, click on the ‘Next’ button, and the installer will set up your car parts website. Once it’s finished, you will see a ‘WordPress installed successfully’ message with information about your new website.

    You can now go ahead and click on the ‘Log into WordPress’ button, which takes you to your site’s admin dashboard.

    How to create a car parts website with WordPress

    You can also log in to the WordPress dashboard by going to yoursite.com/wp-admin/ in your web browser.

    If you are using a different WordPress website host, such as SiteGroundHostingerHostGator, or WP Engine, then you can see our complete guide on how to install WordPress for all the top hosting providers.

    Now that you have successfully set up WordPress, you are ready to start building your automotive parts website.

    Step 3: Choose a WordPress Theme

    WordPress themes are professionally-designed templates that change how your automotive website looks and acts.

    By default, each WordPress site comes with a basic theme. If you visit your website now, then you will see something like the following image.

    An example of a default WordPress theme

    If you want to make a great first impression with customers and get more sales, then it’s a good idea to replace the default WordPress theme.

    There are lots of different premium and free WordPress business themes to choose from. You can generally categorize these as niche industry themes or multipurpose WordPress themes.

    Your typical automotive website needs special features, like the ability to show listings, support for popular eCommerce plugins, and a VIN decoder tool.

    With that in mind, it makes sense to look for a theme that’s designed for the car industry. To help you out, we have collected the best WordPress themes for car dealerships and the best themes for auto repair.

    You can also use a website and landing page builder plugin like SeedProd.

    The SeedProd page builder plugin

    SeedProd is the best drag and drop WordPress page builder and comes with built-in templates that you can use to create a professionally-designed car parts website.

    It even has a template that’s designed specifically for the car industry.

    How to sell car parts online with SeedProd

    Once you have chosen a theme, check out our step-by-step guide on how to install a WordPress theme. After installing your theme, you can customize it by going to Appearance » Customize in the WordPress dashboard.

    This will open the theme customizer, where you can fine-tune the theme settings and see your changes instantly, thanks to the live preview.

    The WordPress theme customizer

    If you are using one of the newer full site editing themes, then you can customize your theme by going to Appearance Â» Editor. This launches the full site editor, which uses blocks similar to the content editor.

    Pro Tip: No matter which theme you are using, you can’t edit it by default using advanced drag and drop. For that reason, we recommend using a page builder like SeedProd instead.

    Step 4: Create a Custom Home Page

    WordPress has two default content types called posts and pages.

    You will typically use posts to create articles and blogs. By default, the home page will show these posts in reverse chronological order, so the newest content appears at the top of the home page.

    An example of a car parts blog

    Blogging can help you build a stronger relationship with your customers, improve your WordPress SEO, and get more traffic to your automotive website.

    For example, you might share tips on how to diagnose common car problems or blog about the latest industry trends.

    However, even if you plan to blog, you typically don’t want to show those posts on your automotive website’s home page. Instead, we recommend creating a custom home page that introduces your car parts business to potential new customers.

    For step-by-step instructions on how to create an attention-grabbing auto parts home page, please see our guide on how to create a custom home page in WordPress.

    Once you are happy with how the page looks, it’s time to set it as your home page. To do this, head over to Settings » Reading in the WordPress dashboard.

    The WordPress reading settings

    On this screen, you need to scroll to ‘Your homepage settings’ and select ‘A static page.’

    With that done, just open the ‘Homepage’ dropdown and choose the page you want to use.

    The WordPress homepage settings

    After that, scroll to the bottom of the screen and click on ‘Save Changes.’ Now, if you visit your auto parts website, then you will see the new home page in action.

    If you are going to write blogs, then you should also make sure to create a separate blog page to show your posts.

    Step 5: Set Up an eCommerce Plugin

    WordPress doesn’t have eCommerce features by default, so you will need a plugin to sell car parts online. The easiest way to sell physical products is by using WooCommerce.

    WooCommerce is the most popular eCommerce plugin in the world and has everything you need to sell car parts online.

    First, you will need to install and activate the WooCommerce plugin. If you need help, then please see our guide on how to install a WordPress plugin.

    Upon activation, you will see the WooCommerce setup wizard. The first thing you will need to do is type in your store’s location.

    The WooCommerce setup wizard

    After that, click on the ‘Continue’ button.

    On the next screen, you can select your industry. Since you are going to sell car parts online, you will typically want to check the box next to ‘Other.’

    After that, type your industry into the ‘Description’ field.

    How to sell car parts online with WooCommerce

    With that done, click on ‘Continue.’

    You can use WooCommerce to sell all kinds of products, including digital downloads, bookings, and WooCommerce subscriptions.

    However, since you are selling automotive parts, make sure to check the ‘Physical products’ box.

    The WooCommerce setup wizard

    When you are happy with the information you have entered, click on ‘Continue.’

    With that done, you can choose how many products you plan to sell and whether you are currently selling anywhere else.

    How to create an online store with WooCommerce

    After entering this information, just click on the ‘Continue’ button.

    The setup wizard will now recommend some business features that you can add to your online store. These features are free, so we recommend selecting the following checkbox ‘Add recommended business features to my site.’

    Adding recommended features to an online store

    When you are happy with the information you have entered, simply click on ‘Continue’ to set up your online store.

    Step 6: Set Up Shipping for Your Car Parts

    Next, you can add shipping options by going to WooCommerce » Settings.

    The WooCommerce settings screen

    Here, you need to click on the ‘Shipping’ tab.

    With that done, select ‘Add shipping zone.’

    How to add shipping to an online store

    On the next screen, type in a name for the zone and select one or more regions from the dropdown menu.

    Once you have done that, simply click on the ‘Add shipping method’ button.

    How to set up WooCommerce shipping

    Now, you will see different shipping methods in the dropdown menu. You can choose between a flat rate, free shipping, or even offer local pickup.

    Select your preferred shipping method and click ‘Add shipping method.’

    Adding shipping methods to an online automotive store

    WooCommerce will now add your chosen shipping method to the shipping zone.

    To configure the shipping method, simply hover over it and then click the ‘Edit’ button.

    Editing shipping methods to a WooCommerce automotive store

    You will see a popup with more settings you can use. 

    The settings will vary depending on the shipping method you choose. For example, if you select ‘Flat rate’, then you can change the method title, add a tax status, and enter the total shipping cost.

    How to set up flat rate shipping in WooCommerce

    After entering this information, go ahead and click on ‘Save changes.’

    You can create as many shipping zones as you want by repeating these steps.

    Step 7: Set Up Payments for Your Car Parts Business

    Next, you need to add payment options so that customers can buy your car parts online. To get started, head over to WooCommerce » Settings and select the ‘Payments’ tab.

    Adding payment methods to an auto parts website

    This opens a screen with all the different payment methods and WooCommerce payment gateways that you can use.

    Simply find the method you want to enable and click on its ‘Finish set up’ button.

    How to sell car parts online in WordPress

    You can now set up this payment method by following the onscreen instructions.

    When you are finished, don’t forget to click on the ‘Save changes’ button.

    How to accept credit card payments in WordPress

    To make the payment method live on your site, click on the ‘Payments’ tab.

    Then, simply click on the method’s toggle so it turns from grey (disabled) to purple (enabled).

    Enabling WooCommerce payments

    To get more sales in your online store, you may want to offer multiple payment methods. For example, you might accept credit card payments on your WordPress site, plus cash on delivery.

    To add more payment methods, simply follow the same process described above.

    Step 8: Create Product Attributes and Attribute Terms

    By default, WooCommerce creates each product as a ‘Simple Product.’ However, you will probably want to offer the same car part for multiple models or brands.

    The easiest way to do this is by creating a variable product. This allows customers to visit a single product listing and then choose the right product variation for their car, as you can see in the following image.

    How to sell car parts online with WordPress

    To create variable products, you will first need to set up attributes and attribute terms.

    For example, if you are selling tires, then you might make a ‘Season’ attribute and then add ‘Winter’ and ‘Summer’ as the attribute terms.

    This will allow customers to choose between winter tires and summer tires.

    An example of a car part, created using WordPress and WooCommerce

    You might also create a ‘Model’ attribute and then add each car model as an attribute term.

    By adding attributes and attribute terms to your online store in advance, you will find it easier to create variable products later.

    With that being said, head over to Products » Attributes. You can now type a title for the attribute into the ‘Title’ field. This will appear on your product pages, so make sure you use something descriptive.

    Adding product attributes to an online store

    For more on this topic, see our guide on how to add product attributes to WooCommerce.

    When you are happy with the information you have entered, click on ‘Add attribute.’

    Adding car parts as a variable product

    This attribute will now appear towards the right of the screen.

    Next, go ahead and click on the ‘Configure terms’ link.

    Configuring terms for a variable product

    This brings up a screen similar to the main attribute screen, where you can start adding attribute terms.

    To start, type the term’s title into the ‘Name’ field.

    Adding terms to an eCommerce store

    When you are happy with the information you have typed in, just click on the ‘Add new…’ button.

    Simply repeat the above steps to create more attribute terms. You can also create as many product attributes as you want and then add unique terms to those attributes.

    Examples of product attributes, created using a WordPress eCommerce plugin

    Step 9: Add Your Car Part Products

    After creating some product attributes and terms, you are ready to start adding car parts to your online store. You can add each product manually or import WooCommerce products from a template, CSV file, or another service.

    In this guide, we will show you how to add car parts to your store manually, so start by going to Products » Add New.

    On this screen, start by typing in the product name. This will appear at the top of the product page, so visitors will be able to see it.

    Adding a car part to an online store

    After that, type in a description and add a product image.

    If you want to show multiple images, then you can click on ‘Add product gallery images.’ You can even add interactive 360-degree images in WordPress.

    Adding car part product images

    After that, it’s a good idea to add categories and tags to the product. These will help customers find the right products on your car parts site, like categories and tags for WordPress pages.

    Simply click on the ‘Add new category’ link and then create a new category for the car part you are adding.

    Adding car part product categories to an online store

    After that, you can type each tag into the ‘Product tags’ box and click on ‘Add.’

    To add multiple product categories and tags, simply repeat the same steps described above.

    Adding product tags to a car part product

    After that, scroll to the ‘Product Data’ box.

    To create a variable product, simply click on the dropdown that shows ‘Simple product’ by default. Then, select ‘Variable product.’

    Adding variable products to an automotive website

    You can now select the product type, add pricing, shipping costs, grouped products, and other information.

    After entering all this information, you are ready to create variations by selecting the ‘Attributes’ tab. Here, open the ‘Add existing’ dropdown menu.

    Adding existing attributes to a variable product

    You can now go ahead and select the product attribute you want to use.

    In the ‘Value(s)’ field, type in each term you want to use. When the right term appears, click to add it to the product.

    Adding values to a product variable

    With that done, click on the ‘Save attributes’ button.

    To add more product attributes and terms, simply repeat the above steps.

    WooCommerce's product data settings

    With that done, click on the ‘Variations’ tab.

    On this screen, go ahead and click on ‘Generate variations.’

    Generating variations for a car part website

    WooCommerce will now create variations using all the attributes you added to the product.

    To set up each variation, click on its ‘Edit’ link.

    Editing a variable car part product

    You can now add the variation’s price, upload an image, set the shipping options, and more using the settings in this section.

    Simply repeat this process to configure each product variation.

    Configuring a vehicle part product

    There are lots more settings you can use to fine-tune the variable product. However, this is all you need to add a car part to your online store.

    When you are ready to make the product live, go ahead and click on the ‘Publish’ button.

    Publishing a car part product to a WordPress website

    If you visit your online store, you will see the variable product live.

    To add more car parts to your online store, simply repeat these steps.

    Step 10: Add a Contact Us Form

    Customers might sometimes need to talk to you directly. For example, they may want to find out when a particular part will be back in stock or get some advice on a mechanical problem.

    While visitors could call your business phone number, it’s still a good idea to add a contact form to your website.

    An example of a contact form, on a car parts website

    Most of the best contact form plugins come with built-in spam protection, so you won’t get any contact form spam. A form will also collect consistent information, so you will have all the data you need to write a helpful reply.

    The easiest way to create a contact form is by using the free WPForms plugin. This plugin has a built-in Simply Contact Form template that you can quickly customize using the drag and drop editor.

    A contact form, created using WPForms

    After that, just add the form to any page, post, or widget-ready area using the ready-made WPForms block.

    For detailed instructions, see our guide on how to create a contact form in WordPress.

    Step 11: Add a Navigation Menu

    After adding some content to your car parts website, you will want to help visitors find their way around those pages and posts by adding a navigation menu.

    An example of a WordPress navigation menu

    No matter which theme you are using, it’s easy to add menus and sub-menus to your automotive website.

    For a complete guide, please see our post on how to add a navigation menu.

    Adding a menu to your car parts website

    WooCommerce has a built-in search feature, but it’s not very good at finding products. It doesn’t look for matches in product attributes, reviews, custom fields, or product descriptions.

    By replacing the default search with a smarter and faster search, you can help customers find the exact car parts they need. This will improve the customer experience and help you get more sales.

    The easiest way to create a smart WooCommerce product search is by using SearchWP. SearchWP is the best WordPress search plugin on the market and puts you in complete control of the WordPress search algorithm.

    The SearchWP search plugin for WordPress

    By default, SearchWP will look at the product title, content (description), slug, and excerpt (short description) for matches. 

    Plus, you can customize the SearchWP settings to look for matches in custom fields, taxonomies, customer reviews, product tags, and more.

    A smart WooCommerce product search, created using SearchWP

    For more information, please check out our guide on how to make a smart WooCommerce product search.

    Step 12: Display Customer Reviews

    Reviews are some of the best ways to earn customer trust and convince visitors to buy car parts from your website. After all, we are more likely to buy things that we see other people buying, using, or recommending.

    If you already have reviews on platforms like Facebook, Yelp, and Google, then it’s easy to display them on your WordPress site using Smash Balloon Reviews Feed Pro.

    Car part reviews, displayed using Smash Balloon

    Reviews Feed Pro is one of the best customer review plugins for WordPress that you can use.

    It will collect reviews automatically and then organize them into a nice layout on your automotive website. You can also completely customize the review feed so that it perfectly fits with your site.

    The Reviews Pro WordPress plugin, by Smash Balloon

    For more details, please see our guide on how to show Google, Facebook, and Yelp reviews.

    We hope this tutorial helped you learn how to sell car parts online with WordPress. You may also want to learn how to create a WooCommerce popup to increase sales or check out our list of the best WooCommerce plugins for your store.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Sell Car Parts Online With WordPress (Step by Step) first appeared on WPBeginner.

  • How To Send SMS Notifications from Contact Forms

    How To Send SMS Notifications from Contact FormsDid you know you can receive an SMS notification each time a form is submitted on your WordPress site, eliminating the need for constant email or active website monitoring? If you’ve been searching for a practical method to stay updated on new inquiries from your site visitors, implementing SMS notifications from your contact form is […]

    The post How To Send SMS Notifications from Contact Forms appeared first on WPExplorer.

  • How to Easily Create Post Purchase Surveys in WooCommerce

    Are you looking for the best way to gather useful feedback about your WooCommerce store from your active customers?

    User surveys can help you get valuable information so you can use it to make data-driven decisions. For example, they can help you find out how to improve your sales funnel or why your customers bought a particular product.

    In this article, we will show you how to easily create post purchase surveys in WooCommerce.

    How to Easily Create Post Purchase Surveys in WooCommerce

    Why Use Post Purchase Surveys in WooCommerce?

    If you have a WooCommerce store, then you may be wondering what your customers think of your products and online store. There’s no easy way to find out without actually asking them.

    Luckily, you can use a WordPress survey plugin to collect real user feedback quickly and easily. This feedback will help you discover the ‘why’ behind every website visitor’s action. This is something you can’t learn from Google Analytics alone.

    When creating your customer survey, make sure you don’t add any unnecessary questions. The questions you ask should get you the most valuable information and insights.

    Here are some examples of questions you can ask your customers after checkout:

    • How long have you been a customer?
    • How did you discover us?
    • Was our pricing page easy to understand?
    • Which of our products have you used?
    • How satisfied are you with our products?
    • Have you needed to contact customer service?
    • Do you have any additional comments or suggestions?

    By asking for user feedback after each WooCommerce purchase, you will learn ways you can improve your sales funnel to boost user experience and increase sales.

    When you know the why or the intent behind users’ actions, you can easily figure out why your visitors buy or do not buy your products.

    With that being said, let’s take a look at how to easily create post purchase surveys in WooCommerce. We will cover two different methods:

    Method 1: Creating Post Purchase Surveys Using UserFeedback

    UserFeedback is an easy-to-use survey plugin by the MonsterInsights team. It lets you ask your website visitors questions and collect their feedback in real time. It also makes it easy to add the survey to specific WooCommerce pages, such as the order confirmation page.

    UserFeedback includes a Post Purchase Review template to give you a head start in creating your survey. Plus, you can customize how your popup surveys look so that they completely match your brand and site design.

    First, you need to install and activate the UserFeedback plugin. For step-by-step instructions, you can follow our tutorial on how to install a WordPress plugin.

    Note: There is a free version of UserFeedback that you can use to get started. However, you will need the features of the Pro version to create a post purchase survey.

    Setting Up the UserFeedback Plugin

    Once the plugin is activated, the setup wizard will automatically launch. Click the ‘Start’ button to begin the setup.

    UserFeedback Setup Wizard

    Next, you will be prompted to create your first survey to show you what the plugin is capable of.

    We won’t be using this example survey, so you can go ahead and use the default answers.

    Choose question for your first UserFeedback survey

    You can choose from a few pre-written questions or create your own question. You will also be able to change your questions at any time.

    For this tutorial, you should simply click the ‘Next Step’ button to continue.

    Click on Next Step in the UserFeedback setup wizard

    Next, you will see the option to enable specific UserFeedback features, depending on your license level.

    Go ahead and enable the features you want or that your license level allows.

    Enable UserFeedback features

    Once you have done that, you need to click the ‘Next Step’ button at the bottom of the page.

    Now, you can enter the email address where you want the survey responses to be sent.

    Customize notifications for UserFeedback

    Since we won’t be using this survey, you don’t need to make any changes and can simply click the ‘Next Step: Publish’ button.

    In the final step of the setup wizard, the features and addons you enable will be installed.

    UserFeedback features and addons successfully installed

    Then, you can click on the ‘Exit to dashboard’ button at the bottom of the page.

    You will see the sample ‘First Survey’ that you created with the wizard.

    Exit to UserFeedback dashboard

    Now you can unlock the Pro features of the plugin. You need to enter the license key that was emailed to you when you purchased a UserFeedback plan.

    You will need to navigate to UserFeedback » Settings in the WordPress admin area. Once there, simply paste your license key into the field and click the ‘Verify’ button.

    Paste Your UserFeedback License Key

    Make sure you click the ‘Save Settings’ button once you have done this.

    After that, you can enable the Pro features by going to the UserFeedback » Addons page.

    For each addon, you will need to click the ‘Install Addon’ button, followed by the ‘Activate’ button that appears.

    Install the UserFeedback Addons

    This is important since the Additional Templates addon includes a Post Purchase Review template, and the Question Types addon allows you to add star ratings and more. Other addons allow you to further customize your survey form.

    Now that you have successfully installed the UserFeedback plugin and its addons, you are ready to create your post purchase survey.

    Creating a Post Purchase Survey Using UserFeedback

    To create a new survey, you need to return to the UserFeedback » Surveys page and click the ‘Create New’ button.

    Creating a New UserFeedback Survey

    This will show you dozens of survey templates that you can use as a starting point.

    You need to scroll down until you find the Post Purchase Review template and then click it.

    Click the Post Purchase Review Template

    A new survey will be created for you. Some helpful questions have already been added.

    You can change any question’s type and title by simply pointing and clicking.

    Editing a Survey Question in UserFeedback

    Each question has a Settings tab where you can set the question as ‘Required’. The Logic tab lets you show or hide the question based on the customer’s previous answers.

    With UserFeedback, you can ask unlimited questions and receive unlimited responses. You can ask all types of questions, including multiple-choice and free-form questions, and even capture emails and collect star ratings.

    You might like to add some of the questions we listed at the beginning of this article. To add a question to your survey, simply click the ‘Add Question’ button after the last question.

    Adding a New Question in UserFeedback

    When you choose a question type from the dropdown menu, a new question will be added.

    After that, you will be able to add a question title. Depending on the question type, you can then customize the question in other ways, such as labeling checkboxes or radio buttons.

    Customizing a UserFeedback Question

    Tip: The ‘Preview’ link at the top of the page doesn’t just preview the form but also allows you to customize its colors.

    You can also create a custom thank you message and redirect users after their submissions.

    Customizing the UserFeedback Thank You Question

    When you have finished editing your survey questions, just hit the ‘Next Step: Settings’ button. This will open the Settings page, where you can customize your survey even more.

    In the ‘Tracking’ section, you can enable or disable Google Analytics tracking if you have MonsterInsights installed.

    Next, in the ‘Targeting’ section, you can select what types of devices and pages you want your survey to appear on. You can display the survey on all device types or create different surveys that target desktop and mobile users.

    Targeting Device Type in UserFeedback

    Next, you can scroll down to the Pages setting area. This is important because it allows you to choose where the survey will be displayed.

    The default setting is ‘All Pages’. This will display the survey on every page of your online store. However, we only want to survey customers after they have made a purchase.

    In this case, we should display the survey on the order confirmation page that is displayed after checkout. This page is also known as the WooCommerce thank you page.

    To target this page, you will need to select ‘Page url is’ from the dropdown menu. After that, you should type ‘order-received’ in the next field.

    Targeting the WooCommerce Order Confirmation Page in UserFeedback

    This works because the setting matches partial URLs. The full URL will change with each transaction but will always contain the characters ‘order-received’.

    You can also scroll down to the ‘Behavior’ section. Here, you can configure settings like:

    • Display Timing â€“ When the survey will appear on the page.
    • Display Length â€“ How often the survey will appear to website visitors.
    • Survey Run Time â€“ How long the survey will appear on the designated pages.
    UserFeedback Behavior Settings

    In addition, you can enable or disable the ‘Start Survey Minimized’ option.

    This displays a less visible version of your survey instead of automatically opening the first question.

    Enable minimized survey option

    Once you are done changing the settings, you can click the ‘Next Step: Notifications’ button.

    This will take you to the Notifications page, where you can choose to send yourself an email with each new response to the survey. Simply leave the ‘Send Email’ toggle switched on and then enter one or more email addresses.

    UserFeedback Notifications Settings

    You can also enable conditional logic to trigger email notifications when visitors respond to your questions in a certain way.

    For example, you might only want to receive an email if the user checks a box labeled ‘Do you want a callback?’

    For this to work, your survey needs to contain at least one question with a radio, checkbox, NPS, or star rating question.

    After that, click on the ‘Next Step: Publish’ button to continue.

    Publish Your Survey

    Lastly, there’s an option to schedule the survey for a later date and time.

    If you are ready to publish your survey immediately, then go ahead and click the ‘Save and Publish’ button.

    Save and publish the UserFeedback survey

    That’s it! You’ve successfully created a survey form.

    Now when your customers purchase items from your store, your survey will pop up on the order confirmation page.

    UserFeedback Survey Preview

    Tip: You may not see the customer survey when you are logged into WooCommerce. You will need to open your online store in a new incognito window or a different web browser.

    Viewing Your Survey Form Results

    Once you start getting responses, you can analyze them right from your WordPress admin dashboard using easy-to-read reports.

    Simply navigate to UserFeedback » Results to see the total responses, impressions, and more details.

    UserFeedback survey reports

    Method 2: Creating Post Purchase Surveys Using WPForms

    WPForms is the best WordPress contact form plugin on the market. It comes with a powerful surveys and polls addon, which allows you to quickly create highly-engaging survey forms.

    It lets you combine the Surveys and Polls addon with powerful WPForms features like conditional logic, multi-page forms, custom notifications, email integrations, and more.

    Note: You will need the Pro plan because it includes the WPForms Surveys and Polls addon. WPBeginner users can use our WPForms coupon to get 50% OFF on all WPForms licenses.

    Setting Up the WPForms Plugin

    The first thing you need to do is install and activate the WPForms plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

    Once the plugin is activated, you need to go to the WPForms » Settings page and enter your license key. You will find this information in your account on the WPForms website.

    Entering the WPForms license key

    Don’t forget to click the ‘Verify Key’ button.

    Once you have done that, you should head over to the WPForms » Addons page and scroll down to the Surveys and Polls addon.

    Go ahead and click on the ‘Install’ addon button to install and activate the addon.

    Install surveys and polls addon

    Now you are ready to create the post purchase survey form.

    Creating a Post Purchase Survey Using WPForms

    You need to visit the WPForms » Add New page to create a new form. This will launch the WPForms form builder interface, and you can choose from different pre-built form templates.

    First, you should provide a title for your survey form at the top of the page.

    After that, you need to choose a template. Start by clicking on ‘Addon Templates’ to list templates that are compatible with the Surveys and Polls addon.

    Select the Survey Form Template in WPForms

    Then you need to click the ‘Use Template’ button on the Survey Form template. This will load a sample customer feedback form template with several fields already added to it.

    You can just point and click to edit the fields, rearrange them with drag and drop, or remove them from the form. You can also add new form fields from the left column.

    The WPForms Form Editor

    WPForms supports all commonly-used form fields, including dropdown, radio buttons, checkboxes, Likert scale, text input, rating scale, and many more. This makes it super easy for you to build highly-interactive survey forms.

    There is some conditional logic already built into the form. For example, the ‘How can we improve?’ field will only appear if a user selects 1 or 2 stars in the ‘Your Experience’ field.

    Add conditional logic to survey form

    You can see this by selecting the ‘How can we improve?’ field and then clicking the ‘Field Options’ tab on the left, as seen in the image above.

    If some of your customers log in to your online store, then you can make their life easier by auto-filling some of their information from their user profiles.

    For example, to auto-fill their email address, you need to click on the Email field, then click the ‘Field Options’ tab on the left. Once there, just click on the ‘Advanced’ tab to show the advanced field options.

    The Advanced Field Options in WPForms

    You will notice a field where you can set a Default Value for the email field.

    You can enter information from their profile automatically by clicking on ‘Show Smart Tags’.

    Entering the User Email Smart Tag in WPForms

    Now you simply click the ‘User Email List’ option, and the {user_email} smart tag will be entered into the field. This will automatically add the email address for logged-in users.

    You can also easily remove any fields that you don’t need on the form.

    For example, if you would like to remove the ‘Name’ field, then you should point at that field with your mouse and then click the red Trash icon that appears at the top right of the field.

    Deleting a Field in WPForms

    If you would like to add more questions, such as the ones we listed at the beginning of this article, simply drag a new field onto the page and then customize it.

    Once you have created the form, you need to click the orange ‘Save’ button at the top of the page to store your form settings.

    Next, you can go to the Settings tab and select ‘Confirmations’ in the WPForms form builder.

    Edit survey form confirmation settings

    Here, you can choose whether to show a message or a page or even redirect users to a URL when they submit the survey form.

    Besides that, the WPForms Notifications tab lets you edit the notification settings so that you get email alerts when a user fills out your survey.

    Edit notification settings

    You can now click on the close button to exit the form builder.

    Adding the Survey Form to a Custom Thank You Page

    If you have gone through the trouble of creating a custom WooCommerce thank you page, then you can easily add your post purchase survey to it using a shortcode or a block.

    Note: Whether you are using the default thank you page or a custom one, you can also display the survey as a popup using a plugin. See the next section for details.

    You will find the shortcode you need by visiting the WPForms » All Forms page.

    Finding the Survey Shortcode in WPForms

    You can then use the shortcode to add the form to your custom thank you page by following our guide on how to add a shortcode in WordPress.

    Alternatively, if you created your custom thank you page using the block editor or a page builder plugin like SeedProd, then all you need to do is drag the WPForms widget onto the page and then pick the survey form you just created from a dropdown menu.

    Dragging the WPForms Widget Onto a Page in SeedProd

    Once you have saved your custom thank you page, your customers will see the survey after checking out.

    Automatically Showing a Survey Popup Using OptinMonster

    You might prefer to have the survey pop up automatically over the order confirmation page, similar to what happens with the UserFeedback plugin in Method 1.

    The first thing you need to do is install the free OptinMonster plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

    Note: In this tutorial, we will use the free OptinMonster plugin because it does everything we need. However, with a Growth subscription, the premium version of OptinMonster has much stronger integration with WooCommerce.

    Upon activation, the OptinMonster setup wizard will start.

    Simply follow the onscreen instructions to set up OptinMonster on your website and create a free account.

    The OptinMonster Setup Wizard

    Once you complete the setup, you will find yourself on the OptinMonster dashboard.

    You will see a welcome message, a link to the OptinMonster user guide, and a video to help you get started.

    The OptinMonster Dashboard

    Now you will need to scroll down until you find a box where you can create a new popup.

    Simply click the ‘Create New’ link.

    Create a New Popup in OptinMonster

    You will now see a collection of popup templates. Since our popup will just contain our post purchase survey, we will use the minimal Canvas template.

    You can find this template by typing ‘canvas’ into the search field.

    Search for the Canvas Template in OptinMonster

    When you point your mouse over the Canvas template, two buttons will appear.

    You can create your popup by clicking the ‘Use Template’ button.

    Click the Use Template Button in OptinMonster

    You will see a popup asking you to give the campaign a name.

    You can type in ‘Post Purchase Survey’ and then click the ‘Start Building’ button.

    Name the New Campaign in OptinMonster

    The OptinMonster builder will open with your selected template. You can see a preview of the popup on the right, and there are blocks on the left that you can add to the popup.

    You need to find the WPForms block and drag it onto the page.

    Drag the WPForms Block Onto the Page

    You can now select the survey you want to add.

    Simply click on the name of the WPForms post purchase survey that you created earlier. The WPForms shortcode will be added to your popup.

    Select the WPForms Survey You Created Earlier

    There is still a placeholder image and text block on the page. These can be safely deleted.

    When you hover your mouse over the image, a purple toolbar will appear. You can delete the image by clicking the Trash icon. You will be asked to confirm the deletion.

    Deleting an Image in OptinMonster

    You can delete the text block that says ‘Drag blocks and elements to start building your campaign’ in the same way.

    Your finished popup should include just the WPForms shortcode. This is a good time to save your work by clicking the ‘Save’ button at the top of the screen.

    Save the Popup in OptinMonster

    Your next job is to click the ‘Display Rules’ tab and set how and where the popup will be displayed.

    The first rule determines when the popup will be shown. The default value is after you have been on the page for 5 seconds. This will work for most online stores, but you can change the value if you like.

    OptinMonster Time on Page Setting

    Now you need to scroll down to the second rule, which you will find just below the ‘AND’ label.

    The default value is to display the popup on every page of your WordPress website. You need to change this so that it only displays the post purchase survey on the order confirmation page.

    The Current URL Path Setting in OptinMonster

    To do this, you need to click the dropdown menu for ‘is any page’ and select ‘contains’ instead.

    Another field will appear, and you need to type ‘order-received’ here.

    The Current URL Path Matches When Contains Order-Received

    This rule will match the confirmation page URL. Although the URL changes with every transaction, it will always contain the characters ‘order-received’.

    Now you can click the ‘Next Step’ button to determine what happens when the conditions in those two rules are met.

    OptinMonster Then Rules

    The default settings here will display the popup without any effects or sound. If you would like to add an effect or sound, just use the dropdown menus.

    Once you are finished, you need to click on the ‘Next Step’ button. You will see a summary of the display rules you just created.

    Summary of Display Rules in OptinMonster

    Make sure you click the ‘Save’ button to store your settings.

    Finally, you can click the ‘Publish’ tab at the top of the screen and then click the ‘Publish’ button under ‘Publish Status’. This will push the popup live on your online store.

    Publishing Your OptinMonster Popup

    You can now close the OptinMonster builder by clicking the ‘X’ icon in the top right corner.

    Your customers will now see the post purchase survey whenever they finish checking out. Here’s how it looks in our demo store.

    WPForms Post Purchase Survey Preview

    Viewing Your Survey Form Results

    WPForms shows survey results in beautiful charts and graphs. You can also print survey results and export them to your favorite spreadsheet software.

    To view your survey results, you need to visit the WPForms » All Forms page and click on the ‘Survey Results’ link below your survey form.

    Click the Survey Results Link

    On the results page, you will see your survey responses displayed in an interactive chart and tables.

    You can export responses to a single question and the entire survey.

    Export survey results

    On the top, you will see options to switch to different chart types and export options.

    You can save individual survey results in JPEG, PDF, and Print formats to easily share them on presentation slides, blog posts, or social media.

    We hope this tutorial helped you learn how to create post purchase surveys in WooCommerce. You may also want to see our guide on how to create smart coupons in WooCommerce or our expert picks for the best WooCommerce plugins for your store.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Easily Create Post Purchase Surveys in WooCommerce first appeared on WPBeginner.

  • How to Display Nutrition Facts Labels in WordPress

    Are you looking for a way to display nutrition facts labels in WordPress?

    Nutrition facts labels provide information about the nutrient content of food, including the number of calories, protein, fat, carbohydrates, and more. These labels help users make better-informed health decisions according to their diets.

    In this article, we will show you how to easily add nutrition facts labels in WordPress.

    Display nutrition facts labels in WordPress

    Why Add Nutrition Facts Labels in WordPress?

    If you are a food blogger or sell food items in your online store, then adding nutrition facts labels along with your recipes and products can help you comply with any regulatory food requirements.

    By informing consumers about the calorie content, carbs, protein, and other nutrients of your meals, you also enable them to make informed decisions about their diets.

    Nutrition facts labels

    For instance, adding a nutrition facts label with a recipe will allow diabetic people to monitor their sugar intake and remain healthy.

    Adding nutrition facts labels can also boost the SEO rankings of your WordPress blog. This is because search engines usually prioritize websites that enhance the user experience by providing relevant information about their products.

    That being said, let’s see how you can easily add nutrition facts labels in WordPress.

    How to Add Nutrition Facts Labels in WordPress

    You can easily add nutrition facts labels in WordPress using Nutrifox.

    It is an online nutrition label generator that allows users to create and customize nutrition labels for their food products or recipes.

    Create a Nutrition Facts Label With Nutrifox

    First, you will need to visit the Nutrifox website and sign up for an account by clicking on the ‘Start Your Free Trial’ button in the top right corner of the screen.

    Nutrifox offers a 14-day trial to everyone, after which you will be charged about $9/month or $89/year.

    Start your free trial on Nutrifox

    Upon creating an account, you will be directed to the ‘Welcome to Nutrifox’ page.

    From here, simply click on the ‘Create Your First Recipe’ button to get started.

    Click the Create Your First Recipe button

    Next, you will be directed to a new screen, where you must enter a name for the recipe that you are about to create.

    Once you have added a recipe name, just click the ‘Continue to Ingredients’ button.

    Note: If you want, then you can also import a published recipe to Nutrifox from your WordPress website by clicking on the ‘import a published recipe’ link.

    Click the Continue to Ingredients button

    This will take you to a new screen where you will create the recipe. Here, you will be able to see the nutrition facts label in the right column of the screen.

    You can now start by filling in the fields for the serving size and the number of servings.

    For instance, if you are writing a recipe for a red velvet cake, then you will need to add 1 slice as the serving size. After that, you must add the number of slices that will be in the cake under the ‘Servings’ option.

    Once you have done that, simply type the recipe ingredients into the ‘Ingredients’ section and click the ‘Add’ button.

    Type the servings and its size and then add the ingredients for the recipe

    After the recipe has been added, the nutrition facts label will automatically update.

    Customize Your Nutrition Facts Labels

    Now, you have to click on the ‘Customize’ button in the right column to style the facts label.

    From here, go ahead and choose the ‘Label Style’ from the dropdown menu. You can pick ‘Tasty’, ‘FDA’, or ‘Basic’.

    After that, you can also select the nutrients that you want to be displayed on the nutrition facts label by toggling the switch next to these options.

    For instance, if you want to display the percentage of calcium in the meal, then you need to toggle the switch next to the ‘Calcium’ option.

    Customize nutrition facts labels

    Once you are happy with your nutrition facts label, you need to copy the label’s

    Once you are happy with your nutrition facts label, you need to copy its ID from the Nutrifox website’s URL.

    This label ID is a 4 to 5-digit number that will allow you to embed the facts label into your WordPress website.

    Copy the labels ID from the website URL

    Add the Nutrition Facts Labels to a WordPress Post

    After copying the label ID, head over to your WordPress website’s dashboard.

    Once you are there, you need to install and activate the Nutrifox WP Connector plugin. For more instructions, please see our step-by-step guide on how to install a WordPress plugin.

    This plugin will add a ‘Nutrifox label’ block to the Gutenberg editor that will allow you to show nutrition facts labels along with your recipes.

    Upon plugin activation, open up the page or post where you want to add the facts label. Next, you must click the ‘+’ button in the top left corner of the screen and find the ‘Nutrifox Label’ block.

    Upon adding the block, simply paste the Nutrifox label ID that you copied earlier into the block.

    Add the Nutrifox Label block and paste the label ID

    Finally, go ahead and click the ‘Publish’ or ‘Update’ button to save your changes.

    You can now visit your website to check out the nutrition facts label in action.

    Preview for nutrition facts labels

    Bonus: Use Tasty Recipes to Optimize Your Food Blog and Add Nutrition Facts Labels

    Tasty Recipes is a great WordPress recipe plugin that allows you to optimize your food blog for recipe SEO. It also lets you adjust the design and layout of your recipe cards.

    Additionally, it enables you to integrate your recipe cards with Nutrifox to add nutrition facts labels along with the recipes.

    First, you need to install and activate the Tasty Recipes plugin. For detailed instructions, check our guide on how to install a WordPress plugin.

    Upon activation, head over to the Settings » Tasty Recipes page and enter the license key. You can get your license key from your Tasty Recipes accounts page.

    Tasty Recipes license key

    After that, simply switch to the ‘Design’ tab on the ‘Tasty Recipes’ page.

    From here, you can choose a design template for the recipe card from the preview column on the right.

    You can also further customize the template with the on-screen settings on the left of the screen.

    Choose a template for recipe

    Once you have designed your recipe card template, scroll down to the ‘Nutrifox Display’ section and make sure that the ‘Insert Nutrifox label (iframe)’ option is checked.

    If you choose the ‘Insert as plain text’ option, you will need to manually enter the details for the nutrition facts labels.

    Once you are happy with your choices, don’t forget to click the ‘Save Changes’ button to store your settings.

    Choose the Insert Nutrifox Label option in the nutrition section

    Next, switch to the ‘Settings’ tab at the top to configure the plugin options.

    From here, you can choose which buttons to show on the recipes, display check boxes next to ingredients, allow users to convert units, and scale recipes for different serving sizes.

    You can also allow users to copy the ingredients with a single click and paste the recipe somewhere else.

    Finally, don’t forget to click on the ‘Save Changes’ button to store your changes.

    Recipe plugin settings

    Add the Recipe Card and Nutrition Facts Label to a WordPress Post

    To add the recipe card and nutrition facts label to your website, you need to open up a new or existing post in the block editor from the WordPress admin sidebar.

    Once you are there, simply click on the ‘+’ button in the top left corner of the screen and find the ‘Tasty Recipe’ block.

    Add the Tasty Recipes block into the block editor

    Upon adding the block, a ‘Create Recipe’ popup will open in the block editor. Here, you can start by adding a title, description, image, and author name for the recipe card.

    Next, type the ingredients for the recipe into the ‘Ingredients’ section and add the instructions for users to follow in the ‘Instructions’ section.

    Add description, instructions, and ingredients for the recipe card

    After that, just scroll down to the ‘Nutrition’ section, where you have to add the label ID for the nutrition fact labels.

    For that, you will have to visit the Nutrifox website and open up the nutrition facts label that you want to integrate with the recipe.

    Once you are there, you can get the label ID from the website’s URL. It will be a 4 to 5-digit number at the end of the URL.

    Get the label ID from the Nutrifox website

    Simply copy it and head back to your WordPress dashboard.

    Next, you have to paste the label ID into the ‘Nutrifox ID’ box. Once you are done, just click the ‘Insert’ button to add the recipe card to the block editor.

    Add label ID for Nutrifox

    Finally, click the ‘Update’ or ‘Publish’ button to save your changes.

    You can now visit your website to check out the recipe card with the nutrition facts label integrated into it.

    Preview of recipe card with nutrition facts labels

    We hope this article helped you learn how to display nutrition facts labels in WordPress. You may also want to see our tutorial on how to add SEO-friendly recipe schema in WordPress and our top picks for the best WordPress themes for recipe blogs.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Display Nutrition Facts Labels in WordPress first appeared on WPBeginner.

  • How to Optimize WordPress Site Performance Using Delay JavaScript Execution

    Looking for ways to further optimize your WordPress site’s performance? Easy…switch on Hummingbird‘s new Delay JavaScript Execution feature!

    Most sites nowadays are laden with JavaScript files and inline scripts, which can be resource intensive and affect site performance and PageSpeed scores in areas like site rendering and load time.

    As you will learn in this article, delaying the execution of JavaScript files to prioritise the load of more critical elements first can keep the overall load time of your site in check and improve your PageSpeed scores.

    Even better, we’ll show you how to automate the whole process with just one click using our WordPress optimization plugin, Hummingbird.

    In this article, we’ll look at:

    Let’s jump right in…

    Why Delaying JavaScript Execution Helps To Optimize Site Performance

    As mentioned earlier, sites nowadays are loaded with 3rd-party scripts for serving advertisements, tracking engagement, security verification, etc., which can block pages from rendering quickly on users’ browsers and affect your site’s user experience and search engine rankings.

    Holding these scripts off from loading on your site until there’s actual user interaction with the page can significantly improve areas of your site’s performance like:

    1. Faster Page Loading Times

    By delaying the execution of JavaScript files until users interact with the page, web pages will load faster, allowing users to access and interact with the site more quickly. This helps improve user experience and increase user engagement.

    2. Improved Rendering Performance

    Browser rendering engines need to process JavaScript before they can display the page content. Delaying JavaScript execution until after users interact the page content has been loaded helps the browser render the page more quickly and efficiently. This means users can see and interact with the web page sooner.

    3. Reduced HTTP Requests

    Combining JavaScript files and loading them asynchronously can reduce the number of HTTP requests made to the server, which also helps to speed up page loading times.

    4. Increased Google PageSpeed Insights Score

    Google considers page speed as a ranking factor for search results, and delaying JavaScript execution can improve your site’s PageSpeed Insights score, potentially leading to better search engine rankings.

    5. Lower Server Load

    By loading JavaScript asynchronously and combining files, fewer requests are made to the server, reducing its workload, and helping to prevent server crashes or slow responses during high-traffic situations.

    Improving PageSpeed Score Recommendations

    PageSpeed Insights score
    Want to improve your PageSpeed Insights score? Try delaying JavaScript file execution.

    Delaying JavaScript execution on your site can improve your Google PageSpeed score by addressing the following recommendations:

    Remove unused JavaScript

    This recommendation suggests eliminating unused or unnecessary JavaScript code from your web pages. Unused JavaScript can increase your page’s load time, as the browser has to download, parse, and execute the code even if it’s not being used.

    By removing any unused JavaScript code, you can decrease the file size and improve your website’s overall performance.

    Total blocking time

    Total blocking time is a metric that measures the amount of time between the First Contentful Paint (FCP) and the Time to Interactive (TTI) during which the main thread was blocked for long enough to prevent input responsiveness.

    In simple terms, it quantifies the duration when the page becomes unresponsive due to processing heavy JavaScript tasks. Lowering the total blocking time makes your website more responsive and improves user experience.

    Minimize main thread work

    The main thread is responsible for executing JavaScript, style calculations, layout, and other tasks required to display a web page. Minimizing main thread work refers to the process of optimizing the code and reducing the time the main thread spends on heavy tasks. This can be done by removing unnecessary JavaScript, splitting long tasks into smaller chunks, and optimizing the code’s execution.

    A lighter workload on the main thread results in faster page loading, improved rendering, and enhanced user experience.

    Time to interactive (TTI)

    This performance metric measures the time it takes for a web page to become fully interactive and responsive to user input. A page is considered interactive when the main thread is free from heavy tasks, and users can interact with the elements on the screen, such as clicking buttons or scrolling.

    Improving the TTI by optimizing JavaScript, splitting large tasks, and reducing render-blocking resources ensures a better user experience by allowing users to interact with the page more quickly.

    Reduce JS execution time

    Reducing JavaScript execution time involves optimizing the code to execute faster and use fewer resources. This can be achieved through techniques such as code minification, removing unused JavaScript, and optimizing algorithms.

    Reducing the execution time leads to faster rendering, decreased total blocking time, and better responsiveness, providing a better user experience.

    First Contentful Paint (FCP)

    This is a performance metric that measures the time it takes for the browser to render the first visible element (text, image, or other content) of a web page. A faster FCP equates to a quicker initial page load, providing users with a visual feedback that the page is loading. Improving FCP requires optimizing critical rendering paths, delaying non-critical JavaScript execution, and prioritizing the loading of visible content.

    A faster FCP significantly contributes to a better user experience and improved web page performance.

    Delaying JavaScript Execution Methods

    While faster page load times, reduced render-blocking, and prioritized content loading provide many benefits to users and can deliver higher PageSpeed scores, the actual methods available for delaying JavaScript execution on WordPress sites can be challenging for users without technical knowledge or web optimization skills.

    For example, these methods can include:

    • Implement async or defer attributes: This requires you to manually add async or defer attributes to your JavaScript files in the HTML header, which tells the browser not to block the page rendering while processing the JavaScript files.
    • Combine JavaScript files: Use online tools or WordPress plugins to combine multiple JavaScript files into a single file, helping to reduce the number of HTTP requests and speed up page loading times.
    • Minify JavaScript files: Use online tools or WordPress plugins to reduce JavaScript file size, which helps to improve page loading times.
    • Prioritize critical JavaScript: Identify the critical JavaScript that needs to be loaded immediately to ensure proper functionality, and then load the remaining JavaScript files after the page content has been rendered.

    While there are a few WordPress plugins available that can handle some of these tasks for you and help you to delay or defer JavaScript execution, our Hummingbird plugin does all of the above and more with the click of a button.

    How to Use Hummingbird’s Delay JavaScript Execution Feature

    The new optimization feature of Hummingbird delays the loading of all JavaScript files and inline scripts until there is user interaction on the page (e.g. mouse movement, keyboard action or screen tap) and improves all of the PageSpeed recommendations described earlier.

    To enable this feature, make sure that Hummingbird is installed and activated on your site, then navigate to Hummingbird > Asset Optimization > Extra Optimization in your WordPress admin and switch on the Enable Delay Javascript toggle button in the Tools > Delay Javascript section, then click Save Changes.

    Hummingbird's Delay JavaScript feature.
    Enable Hummingbird’s Delay JavaScript feature to improve your site’s performance.

    Alternatively, you can enable the feature from the plugin’s main dashboard.

    Hummingbird dashboard: Asset Optimization - Delay JavaScript Execution
    Enable Delay JavaScript Execution from Hummingbird’s dashboard.

    Once the Delay JavaScript Execution feature has been enabled, it automatically goes to work, delaying the loading of any non-critical JavaScript files on your page that are not required above-the-fold.

    The feature’s settings give you access to options like being able to specify a timeout for the scripts to load if no user interaction is detected, and the option to exclude critical JavaScript files from from being delayed on load by specifying their URLs or keywords.

    Hummingbird's Delay JavaScript settings
    Hummingbird delays the loading of JavaScript files until a set timeout limit is reached or a user interacts with the page.

    If enabling this feature breaks something on your site and you identify additional critical Javascript resources which are essential to render the page, simply add them to the Excluded JavaScript Files area to exclude them from being delayed.

    If there is no user interaction on the page beyond a set threshold, the JavaScript assets are forced to load. The default timeout is set to 20 seconds, but you can select a different value from the Timeout dropdown menu (currently ranging between 5-30 seconds).

    Hummingbird's Delay JavaScript Timeout options
    Select a timeout option from the dropdown menu.

    Notes

    • Enabling JavaScript Execution will automatically disable the Combine Compression option to ensure that your site’s scripts are loaded in their correct order.
    • The feature will only work when you’re connected to The Hub, as it pulls the list of continuously updated predefined exclusions from the API.
    • You can easily reverse any changes made by this feature by simply disabling the toggle and clicking save.

    Delay JavaScript and Speed Up WordPress

    Hummingbird’s Delay JavaScript feature is available in both the Pro and free versions of the plugin. We recommend enabling this feature and testing your site using the PageSpeed Insights tool.

    If you experience any issues using Hummingbird, check out the plugin’s documentation or contact our 24/7 support team for immediate expert support.

  • How to Optimize WordPress Site Performance Using Delay JavaScript Execution

    Looking for ways to further optimize your WordPress site’s performance? Easy…switch on Hummingbird‘s new Delay JavaScript Execution feature!

    Most sites nowadays are laden with JavaScript files and inline scripts, which can be resource intensive and affect site performance and PageSpeed scores in areas like site rendering and load time.

    As you will learn in this article, delaying the execution of JavaScript files to prioritise the load of more critical elements first can keep the overall load time of your site in check and improve your PageSpeed scores.

    Even better, we’ll show you how to automate the whole process with just one click using our WordPress optimization plugin, Hummingbird (note: Pro feature only).

    In this article, we’ll look at:

    Let’s jump right in…

    Why Delaying JavaScript Execution Helps To Optimize Site Performance

    As mentioned earlier, sites nowadays are loaded with 3rd-party scripts for serving advertisements, tracking engagement, security verification, etc., which can block pages from rendering quickly on users’ browsers and affect your site’s user experience and search engine rankings.

    Holding these scripts off from loading on your site until there’s actual user interaction with the page can significantly improve areas of your site’s performance like:

    1. Faster Page Loading Times

    By delaying the execution of JavaScript files until users interact with the page, web pages will load faster, allowing users to access and interact with the site more quickly. This helps improve user experience and increase user engagement.

    2. Improved Rendering Performance

    Browser rendering engines need to process JavaScript before they can display the page content. Delaying JavaScript execution until after users interact the page content has been loaded helps the browser render the page more quickly and efficiently. This means users can see and interact with the web page sooner.

    3. Reduced HTTP Requests

    Combining JavaScript files and loading them asynchronously can reduce the number of HTTP requests made to the server, which also helps to speed up page loading times.

    4. Increased Google PageSpeed Insights Score

    Google considers page speed as a ranking factor for search results, and delaying JavaScript execution can improve your site’s PageSpeed Insights score, potentially leading to better search engine rankings.

    5. Lower Server Load

    By loading JavaScript asynchronously and combining files, fewer requests are made to the server, reducing its workload, and helping to prevent server crashes or slow responses during high-traffic situations.

    Improving PageSpeed Score Recommendations

    PageSpeed Insights score
    Want to improve your PageSpeed Insights score? Try delaying JavaScript file execution.

    Delaying JavaScript execution on your site can improve your Google PageSpeed score by addressing the following recommendations:

    Remove unused JavaScript

    This recommendation suggests eliminating unused or unnecessary JavaScript code from your web pages. Unused JavaScript can increase your page’s load time, as the browser has to download, parse, and execute the code even if it’s not being used.

    By removing any unused JavaScript code, you can decrease the file size and improve your website’s overall performance.

    Total blocking time

    Total blocking time is a metric that measures the amount of time between the First Contentful Paint (FCP) and the Time to Interactive (TTI) during which the main thread was blocked for long enough to prevent input responsiveness.

    In simple terms, it quantifies the duration when the page becomes unresponsive due to processing heavy JavaScript tasks. Lowering the total blocking time makes your website more responsive and improves user experience.

    Minimize main thread work

    The main thread is responsible for executing JavaScript, style calculations, layout, and other tasks required to display a web page. Minimizing main thread work refers to the process of optimizing the code and reducing the time the main thread spends on heavy tasks. This can be done by removing unnecessary JavaScript, splitting long tasks into smaller chunks, and optimizing the code’s execution.

    A lighter workload on the main thread results in faster page loading, improved rendering, and enhanced user experience.

    Time to interactive (TTI)

    This performance metric measures the time it takes for a web page to become fully interactive and responsive to user input. A page is considered interactive when the main thread is free from heavy tasks, and users can interact with the elements on the screen, such as clicking buttons or scrolling.

    Improving the TTI by optimizing JavaScript, splitting large tasks, and reducing render-blocking resources ensures a better user experience by allowing users to interact with the page more quickly.

    Reduce JS execution time

    Reducing JavaScript execution time involves optimizing the code to execute faster and use fewer resources. This can be achieved through techniques such as code minification, removing unused JavaScript, and optimizing algorithms.

    Reducing the execution time leads to faster rendering, decreased total blocking time, and better responsiveness, providing a better user experience.

    First Contentful Paint (FCP)

    This is a performance metric that measures the time it takes for the browser to render the first visible element (text, image, or other content) of a web page. A faster FCP equates to a quicker initial page load, providing users with a visual feedback that the page is loading. Improving FCP requires optimizing critical rendering paths, delaying non-critical JavaScript execution, and prioritizing the loading of visible content.

    A faster FCP significantly contributes to a better user experience and improved web page performance.

    Delaying JavaScript Execution Methods

    While faster page load times, reduced render-blocking, and prioritized content loading provide many benefits to users and can deliver higher PageSpeed scores, the actual methods available for delaying JavaScript execution on WordPress sites can be challenging for users without technical knowledge or web optimization skills.

    For example, these methods can include:

    • Implement async or defer attributes: This requires you to manually add async or defer attributes to your JavaScript files in the HTML header, which tells the browser not to block the page rendering while processing the JavaScript files.
    • Combine JavaScript files: Use online tools or WordPress plugins to combine multiple JavaScript files into a single file, helping to reduce the number of HTTP requests and speed up page loading times.
    • Minify JavaScript files: Use online tools or WordPress plugins to reduce JavaScript file size, which helps to improve page loading times.
    • Prioritize critical JavaScript: Identify the critical JavaScript that needs to be loaded immediately to ensure proper functionality, and then load the remaining JavaScript files after the page content has been rendered.

    While there are a few WordPress plugins available that can handle some of these tasks for you and help you to delay or defer JavaScript execution, our Hummingbird plugin does all of the above and more with the click of a button.

    How to Use Hummingbird’s Delay JavaScript Execution Feature

    The new optimization feature of Hummingbird delays the loading of all JavaScript files and inline scripts until there is user interaction on the page (e.g. mouse movement, keyboard action or screen tap) and improves all of the PageSpeed recommendations described earlier.

    To enable this feature, make sure that Hummingbird is installed and activated on your site, then navigate to Hummingbird > Asset Optimization > Extra Optimization in your WordPress admin and switch on the Enable Delay Javascript toggle button in the Tools > Delay Javascript section, then click Save Changes.

    Hummingbird's Delay JavaScript feature.
    Enable Hummingbird’s Delay JavaScript feature to improve your site’s performance.

    Alternatively, you can enable the feature from the plugin’s main dashboard.

    Hummingbird dashboard: Asset Optimization - Delay JavaScript Execution
    Enable Delay JavaScript Execution from Hummingbird’s dashboard.

    Once the Delay JavaScript Execution feature has been enabled, it automatically goes to work, delaying the loading of any non-critical JavaScript files on your page that are not required above-the-fold.

    The feature’s settings give you access to options like being able to specify a timeout for the scripts to load if no user interaction is detected, and the option to exclude critical JavaScript files from from being delayed on load by specifying their URLs or keywords.

    Hummingbird's Delay JavaScript settings
    Hummingbird delays the loading of JavaScript files until a set timeout limit is reached or a user interacts with the page.

    If enabling this feature breaks something on your site and you identify additional critical Javascript resources which are essential to render the page, simply add them to the Excluded JavaScript Files area to exclude them from being delayed.

    If there is no user interaction on the page beyond a set threshold, the JavaScript assets are forced to load. The default timeout is set to 20 seconds, but you can select a different value from the Timeout dropdown menu (currently ranging between 5-30 seconds).

    Hummingbird's Delay JavaScript Timeout options
    Select a timeout option from the dropdown menu.

    Notes

    • Enabling JavaScript Execution will automatically disable the Combine Compression option to ensure that your site’s scripts are loaded in their correct order.
    • The feature will only work when you’re connected to The Hub, as it pulls the list of continuously updated predefined exclusions from the API.
    • You can easily reverse any changes made by this feature by simply disabling the toggle and clicking save.

    Delay JavaScript and Speed Up WordPress

    Hummingbird’s Delay JavaScript feature is available as a Pro feature only. We recommend enabling this feature and testing your site using the PageSpeed Insights tool.

    If you experience any issues using Hummingbird, check out the plugin’s documentation or contact our 24/7 support team for immediate expert support.

  • How to Embed TikTok Videos in WordPress (3 Easy Methods)

    Do you want to easily embed TikTok videos on your WordPress website?

    If you’re already creating successful, viral TikToks then it makes sense to post these videos to your website too. In this way, you can get more views, engagement, and social media followers with very little extra effort.

    In this article, we’ll show you how to easily embed TikTok videos in WordPress.

    How to embed TikTok videos in WordPress

    Why Embed TikTok Videos in WordPress?

    According to our ultimate list of blogging stats, posts with videos get 83% more traffic than those without video. That said, if you’re already posting TikToks then it makes sense to embed these videos on your WordPress website.

    An example of a TikTok video, embedded in a WordPress website

    In this way, you can get more visitors, without having to spend a ton of time creating new content. These videos can also help capture the visitor’s attention and keep them on your website for longer, which will increase pageviews and reduce bounce rate in WordPress.

    At the same time, these videos will promote your TikTok channel to people who visit your website. This can get you more engagement and followers on TikTok.

    With that said, let’s see how you can embed TikTok videos in WordPress. Simply use the quick links below to jump straight to the method you want to use.

    Method 1. Using the TikTok Block (Works With Any Theme)

    The easiest way to embed TikToks on your WordPress site is by pasting the video’s URL into the page or post editor. WordPress will then detect the video and fetch it for you automatically.

    First, you need to visit the TikTok video that you want to embed. Then, copy the video’s URL.

    Adding a TikTok video to a page or post using the WordPress block editor

    Next, open the WordPress page or post where you want to show the TikTok video. You can then simply paste the URL into the WordPress block editor.

    WordPress will automatically detect that you’re embedding a TikTok video, and add a TikTok block with the video already embedded.

    Embedding TikTok videos on a WordPress blog or website

    By default, WordPress will resize the TikTok video automatically for smaller screens, including smartphones and tablets. It will also preserve the video’s ratio when the browser gets resized.

    This is a good user experience, so we recommend leaving the setting enabled. However, sometimes you may want to keep the video at the same size, no matter what. In that case, click to select the TikTok block and then disable the ‘Resize for smaller devices’ toggle.

    Resizing a TikTok video on mobile devices including smartphones and tablets

    If you do disable this setting, then it’s a good idea to test the mobile version of your WordPress site from the desktop, to check you’re happy with the visitor experience.

    You can get similar results by adding the TikTok block to a page or post. After that, you can add the TikTok video’s URL at any point.

    This is useful if you’re unsure what TikTok video you’re going to embed, or if the video hasn’t been published yet. This is also a good way to plan your layout, particularly if you’re designing a landing page or sales page.

    To add a TikTok block, simply click on the ‘+’ icon and then type in ‘TikTok.’

    Adding the WordPress TikTok block to a page or post

    When the right block shows up, click to add it to the page or post.

    After that, you can simply paste the TikTok URL into the block and click on ‘Embed.’

    The TikTok WordPress block

    Another option is to embed the TikTok video in a widget-ready area such as the sidebar or similar section. This allows you to show the same video across your entire site. For example, if you’re trying to create a viral giveaway in TikTok, then you might embed the video announcing the contest.

    To do this, go to Appearance » Widgets in your dashboard. Here, you’ll see all the different areas where you can add widgets in WordPress.

    Adding widgets to a sidebar or similar section

    Simply find the area where you want to embed the TikTok video.

    Then, click on the ‘+’ icon.

    Adding a block to a widget-ready area in your WordPress theme

    In the popup that appears, type in ‘TikTok.’

    When the right block shows up, click to add it to the widget-ready area.

    Embedding TikToks in a WordPress website or blog

    You can now paste the URL of the TikTok video you want to embed.

    With that done, click on the ‘Embed’ button.

    How to embed TikTok videos in WordPress

    When you’ve finished, don’t forget to click on ‘Update’ to make the changes live.

    You can now visit your WordPress blog or website to see the TikTok video live.

    Making a TikTok video live on your website

    Method 2. Using the Full-Site Editor (Works With Block-Based WordPress Themes)

    If you’re using a block theme then you can add a TikTok to any widget-ready area or template using the full-site editor. This allows you to show TikTok videos on pages and posts that you can’t edit using the standard content editor. For example, you might use TikTok videos to improve your 404 page template.

    In your WordPress dashboard, go to Themes » Editor.

    Opening the WordPress full-size editor (FSE)

    By default, the full-site editor will show your theme’s home template.

    If you want to add the TikTok video to a different area, then click on either ‘Template’ or ‘Template Parts.’

    Editing template parts using the full-size editor (FSE)

    You’ll now see all the templates or template parts that make up your WordPress theme.

    Simply find the template where you want to embed a TikTok video and click on it. As an example, we’ll be adding a TikTok to the Archive page template but the steps will be largely the same no matter what template you’re using.

    Customizing the archive template using the WordPress block-based FSE editor

    WordPress will now show a preview of the template.

    To go ahead and edit the layout, click on the small pencil icon.

    Editing a block-based template using the full-site editor (FSE)

    With that done, click on the ‘+’ button towards the top left of the screen.

    In the search bar that appears, type in ‘TikTok.’

    Adding a TikTok block to a WordPress site template

    When the right block shows up, drag and drop it onto the layout.

    You can now paste the video’s URL into the TikTok block, and click on the ‘Embed’ button.

    Adding a TikTok video to any part of your website or blog

    When you’re happy with how the template looks, click on the ‘Save’ button. Now, simply visit your WordPress website to see the TikTok in action.

    Method 3. Using QuadLayers (Embed Your Entire TikTok Feed)

    If you just want to add a few TikToks to your WordPress website, then method 1 and method 2 are both great choices. However, sometimes you may want to show all your latest TikToks in a feed that updates automatically.

    This is an easy way to keep your website fresh and interesting, while promoting your newest TikTok videos at the very same time.

    The best way to embed a TikTok feed in WordPress is by using QuadLayers TikTok Feed. This free plugin allows you to connect WordPress to your TikTok account, and then show all your videos in a gallery or masonry layout.

    An example of an embedded TikTok feed, on a WordPress website

    Just be aware that you can only show TikToks from your own account.

    First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.

    The first step is creating an access token using your TikTok account. In the WordPress dashboard, head over to TikTok Feed » Accounts and click on ‘Add TikTok Account.’

    Connecting TikTok to your WordPress website or blog

    Next, click ‘Login with TikTok.’

    You can now type in your TikTok email address and password, and follow the onscreen instructions to connect QuadLayers to your TikTok account.

    How to connect your TikTok social media account to WordPress

    When you’re done, QuadLayers will take you back to the WordPress dashboard automatically.

    Now, go to TikTok Feeds » Feeds and click on the ‘+ Feed’ button.

    Adding a TikTok feed to your WordPress website or blog

    In the popup that appears, open the ‘Account’ dropdown and select your TikTok account.

    You can now choose between Gallery and Masonry layouts for the TikTok feed. Masonry shows the videos in portrait mode, while Gallery displays the videos as square thumbnails.

    Connecting a social media account to your WordPress website

    By default, QuadLayers will show the most recent 12 TikToks posted to your account. To show more or fewer videos, simply type a different number into the ‘Limit’ field.

    You can also change how many videos QuadLayers shows in each row, by typing into the ‘Columns’ field.

    Showing TikTok videos in an organized layout

    There are some more settings you can configure, but this is all you need to create an eye-catching TikTok feed.

    When you’re happy with your settings, click on ‘Save.’

    Creating a live TikTok feed for your website or blog

    QuadLayers will now create a shortcode that adds the feed to your website.

    Simply go ahead and copy the value in the ‘Shortcode’ column.

    Adding a TikTok feed to your website using shortcode

    Now, just paste this shortcode into any page, page, or widget-ready area. For step-by-step instructions on how to place the shortcode, please see our guide on how to add a shortcode in WordPress.

    With that done, simply visit your website to see the TikTok feed in action.

    An example of a TikTok feed, embedded on a WordPress website

    We hope this article helped you learn how to embed TikTok videos in WordPress. You may also want to check out our guide on how to embed a Facebook video in WordPress, or see our expert pick of the best social media plugins.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Embed TikTok Videos in WordPress (3 Easy Methods) first appeared on WPBeginner.

  • How to Select and Use Nested Blocks in WordPress

    Do you want to learn how to select and use nested blocks in WordPress?

    The WordPress Gutenberg nested blocks feature allows you to add multiple blocks within a parent block. Then, you can customize different block elements at the same time, organize post content efficiently, and access more design flexibility.

    In this article, we will show you how to easily select and use WordPress nested blocks.

    Select and use nested blocks in WordPress

    What Are WordPress Nested Blocks?

    The WordPress Gutenberg nested block feature allows you to insert (or ‘nest’) one or more blocks within another block.

    Nested blocks help you create more complex layouts on your WordPress website by adding multiple blocks inside each other. This allows for more flexibility when designing and formatting content for pages and posts.

    For instance, you can nest multiple Image blocks within a Group block to display a set of photos from a particular event or a series of artworks created using a particular technique.

    Preview of WordPress nested blocks

    Moreover, the nested block feature allows you to edit individual blocks separately. This means that you can customize each block according to your needs without affecting the other blocks. In turn, this results in better content organization, makes your content more attractive, and streamlines your content creation process.

    That being said, let’s see how you can easily select and use WordPress Gutenberg nested blocks.

    How to Use WordPress Nested Blocks

    You can easily nest multiple blocks together using the Group or Columns block in the Gutenberg block editor.

    First, you need to open up an existing or new post in the block editor from the WordPress admin sidebar.

    From here, simply click on the ‘+’ button in the top left corner of the screen and find the ‘Group’ block. Upon clicking it and adding it to the page, you will need to select a layout for the blocks that you will nest together.

    For this tutorial, we will be selecting the ‘Group’ layout.

    Select Group block from the block menu

    Next, simply click on the ‘+’ button on the screen to start adding content within the parent block.

    For the sake of this tutorial, we will be adding an Image block.

    Add an image block within the Group block

    Upon adding the Image block, just click the ‘Group’ button in the block toolbar at the top to select the parent block.

    Next, you need to click the ‘+’ button to open up the block menu, from where you can choose other blocks to add.

    Open the block menu to add another block within the Group block

    How to Configure WordPress Nested Block Settings

    Once you have nested multiple blocks, you can configure their individual settings by clicking on each block. This will open up the block settings in the right column on the screen.

    From here, you can adjust the background color, text color, and size of the individual blocks without affecting the other blocks that are nested within it.

    Configure the individual block settings

    To configure the settings of all the nested blocks together, you will have to click the ‘Group’ button in the block toolbar at the top. This will open up the parent block settings in the right column.

    You can now configure the justification, orientation, background color, text color, and typography of all the nested blocks.

    Keep in mind that these settings will affect all the blocks nested within the parent block.

    Configure the settings of the Group block

    You can also convert an existing individual block into nested blocks by clicking the ‘Options’ button in the top toolbar of any block.

    This will open up a menu prompt, where you need to select the ‘Create Reusable block’ option.

    Choose the Create Reusable Block option

    Once you have done that, a new reusable block will be created where you can add multiple blocks.

    After you are done, don’t forget to click the ‘Publish’ or ‘Update’ button to save your changes.

    Create nested blocks

    In our example, we have nested a Title, Image, and Paragraph block within a Group block. This is how the nested blocks looked on our demo website.

    Preview of WordPress nested blocks

    Bonus: Use the Wayfinder Plugin to Easily Select Nested Blocks

    Sometimes, it can be difficult to select an individual block and configure it when there are multiple blocks nested together.

    Luckily, the Wayfinder plugin makes it super easy to select nested blocks from a parent block and even tells you the type and class of the blocks.

    First, you will need to install and activate the Wayfinder plugin. For more instructions, you may want to see our guide on how to install a WordPress plugin.

    Upon activation, head over to the Settings » Wayfinder page from the WordPress admin sidebar.

    Once you are there, all the settings will already be activated. You simply need to uncheck the box next to the settings that you don’t want to use.

    For example, if you want Wayfinder to display block types for all the blocks in the editor, then keep the box checked next to the ‘Display block type’ option.

    Configure the Wayfinder plugin settings

    However, if you don’t want the plugin to display block classes, simply uncheck the box next to that option.

    After configuring the settings, don’t forget to click the ‘Save Changes’ button.

    Next, you need to open up an existing or new post from the WordPress admin sidebar.

    Once you are there, hovering your mouse over any block will show an outline with its name. You will also be able to see the outline and name of any nested blocks within the parent block.

    GIF for the Wayfinder plugin

    This will help you identify all the different blocks that are nested within a Group or Columns block.

    From here, you can easily select an individual block from the parent block to configure its settings.

    Use Wayfinder plugin to easily select a block

    You can also select all the nested blocks at the same time by simply clicking on the ‘Columns’ or ‘Group’ heading. This will open up the parent block settings in the right column.

    Once you have configured the block settings, simply click the ‘Update’ or ‘Publish’ button to save your changes.

    Click the Group block outline to open its settings

    We hope this article helped you learn how to select and use WordPress nested blocks. You may also want to see our tutorial on how to change block height and width in WordPress and our top picks for the must-have WordPress plugins to help grow your site.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Select and Use Nested Blocks in WordPress first appeared on WPBeginner.

  • G2 Spring Awards 2023 – How WPMU DEV Performed

    How did WPMU DEV compare against other WordPress leaders in the areas of Managed Hosting, Web Hosting, and WordPress Site Management for the Spring 2023 quarter?

    Winners of 70 G2 Awards for Spring ’23!

    Not sure why G2 awards matter? Then check out this post: Why G2 Are Kind Of a Big Deal for Web Developers

    Here are the results of the G2 Spring 2023 Awards, backed by authentic and verified feedback from G2 users.

    Managed Hosting

    Overall grid rankings (Spring 2023)

    Managed Hosting overall grid rankings (Spring 2023)
    Managed Hosting overall grid rankings (Spring 2023)

    User satisfaction rankings (Spring 2023)

    Managed Hosting user satisfaction rankings (Spring 2023)
    Managed Hosting user satisfaction rankings (Spring 2023)

    Summary

    WPMU DEV, along with Kinsta, tops 3 of the 5 G2 user satisfaction categories shown above, including an amazing 99% for Quality of Support, which we’re pretty chuffed about.

    View full report

    Web Hosting

    Overall grid rankings (Spring 2023)

    Web Hosting overall grid rankings (Spring 2023)
    Web Hosting overall grid rankings (Spring 2023)
    Web Hosting user satisfaction rankings (Spring 2023)
    Web Hosting user satisfaction rankings (Spring 2023)

    Summary

    WPMU DEV and Kinsta each ranked highest for the various G2 user satisfaction categories shown above. Notably, WPMU DEV topped Quality of Support here with another 99% score.

    View full report

    WordPress Site Management

    Overall grid rankings (Spring 2023)

    WordPress Site Management overall grid rankings (Spring 2023)
    WordPress Site Management overall grid rankings (Spring 2023)
    WordPress Site Management user satisfaction rankings (Spring 2023)
    WordPress Site Management user satisfaction rankings (Spring 2023)

    Summary

    WPMU DEV is the clear winner in all of G2’s WordPress Site Management categories shown above. Not much more to say, other than to brush the non-existent dust off our shoulders.

    View full report

    Help Us Improve

    We take our members’ feedback and suggestions seriously and we provide 24×7 expert support to deal with any issues you may experience.

    If you are unhappy with any aspect of our services or have suggestions for improvement, please tell us. And if you are delighted, please leave a review.

    To see how our performance stacks up against other WordPress leaders, go here: How We Compare

    To see what new and exciting WPMU DEV developments are coming up next, check out our roadmap.

    Not a WPMU DEV member yet? Then experience our award-winning services and become a member today…it’s 100% risk-free!