How to Customize the Search Results Page in WordPress

Do you want to customize the search results page on your WordPress website?

The search results page can help users find the content they are looking for. Customizing it will improve the user experience on your site, which leads to more page views and conversions.

In this article, we’ll show you how to easily customize the search results page in WordPress without writing any code.

Here is a step-by-step breakdown of the topics we’ll cover in this article.

• Why Customize the Search Results Page in WordPress?
• Set Up SearchWP as Your WordPress Search Engine
• Adjust The Search Results to Promote Important Content
• Exclude Content from WordPress Search Results
• Make Search Results Appear Instantly in WordPress
• Search in More Places on Your WordPress Site
• Include Ecommerce in WordPress Search Results

Why Customize Search Results Page in WordPress?

By default, your WordPress website comes with a basic search feature. It allows users to look for content matching their search terms, but the search results are not very good.

Often search terms return no results, even when there are possibly several matches that would answer the user’s query.

The search itself is slow, requires a page load, and if multiple users end up using the search feature at once, this could slow down your website.

By customizing your search results page in WordPress, you would be able to implement a faster search system with a better user experience and more helpful search results.

Sounds good? Let’s get started.

Step 1. Setting up SearchWP as Your WordPress Search Engine

SearchWP is the best WordPress search plugin on the market. It allows you to improve WordPress search by replacing it with a faster and more accurate search engine.

It automatically indexes your content in the background, which allows searches to run faster. Plus, you don’t need to replace the default WordPress search forms and templates.

First, you need to install and activate the SearchWP plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit SearchWP » Settings page and switch to the License tab. Enter your plugin license key, which you can find under your account on the SearchWP website.

Once you have activated the license key, you can switch to the Engines tab.

You’ll notice that SearchWP has set up a default search engine for you. It uses your WordPress posts, pages, and media as sources.

Under each source, you can adjust the sliders to give more relevance to an attribute than another.

Want to include more places in search results? Click on the Sources & Settings button to add them.

For the sake of this tutorial, let’s add Comments as a search source.

After you click Done, a new tab will appear under the sources list. However, it will be empty, and to make it useful, you need to click on the ‘Add/Remove Attributes’ button.

This will bring up a popup where you can select which attributes you want to include in your search.

For instance, we used Comment text to be used as an attribute.

After adding an attribute, you can assign a weight to it in your search results.

More weight means SearchWP will consider that attribute more relevant than other attributes under this source.

Once you are finished reviewing search sources, you can go ahead and click on the Save Engines button.

SearchWP will now start building a search index based on your settings.

Once finished, you will see 100% under the Index Status.

Your SearchWP engine will now automatically replace the default WordPress search. If you already have a search form on your website, then you can go ahead and try it.

If you don’t have a search form on your website, then you can add one by visiting the Appearance » Widgets page. Simply add the Search widget or block to your sidebar and click on the Update button to save your changes.

You can now visit your website and try out your new and improved search feature.

Step 2. Adjusting The Search Results to Promote Important Content

Now that you have replaced the default WordPress search with SearchWP, it is time to look at how you can customize it further to generate even better search results.

We’ll start by promoting important content in search results. These could be blog posts that bring you more revenue, sales pages, lead generation landing pages, and more.

First, you need to visit the SearchWP » Extensions page and install the ‘Custom Results Order’ extension.

Next, you need to visit the SearchWP » Statistics page.

Here you can see which search terms or keywords are popular among your users.

Note: If you have just installed the plugin, then you may not have enough data here. You can wait for users to enter a few search terms to collect more data.

Now, look for the keywords where you want to promote a particular post and page in the search results.

After that, go to SearchWP » Settings page and select Custom Results Order under the Extensions tab.

Enter the keyword where you want to promote a post or page to the top, and then click on the Add Search Query button.

SearchWP will show you the results for that particular query. You need to select the content that you want to promote and then click on the Promote to Top button.

Your selected post or page will now start appearing at the top for that particular search keyword.

You can always come back to the same page and unpin that post or page from the top or perhaps add a different one.

Step 3. Exclude Content from WordPress Search Results

Sometimes you may have content that you don’t want to appear in search results. For instance, a page promoting a sales event that has expired or an outdated blog post.

SearchWP allows you to easily exclude any post or page you don’t want to include in search results.

First, you need to visit the SearchWP » Extensions page and install the ‘Exclude UI’ extension.

After activation, you can simply edit the post or page you want to exclude from search results.

Under the ‘Post’ panel on the edit screen, you’ll now see an option to exclude that post from search results.

Simply check the box and click on the Update button to save your changes.

SearchWP will now stop showing that post or page in search results.

Step 4. Make Search Results Appear Instantly in WordPress

Normally, your SearchWP search results will appear using the theme template file provided by your WordPress theme.

However, what if you could show the users the results as soon as they start typing?

This feature is called live search, and you may have already seen it on search engines like Google and Bing.

Let’s add live search to your WordPress site to make search an even better experience for your users.

First, you need to visit the SearchWP » Extensions page and install the ‘Live Search’ extension.

Upon activation, the extension would start working automatically.

You can now go to your website and start typing keywords in a search form to see it in action.

For more detailed instructions, see our tutorial on how to add live search in WordPress.

Step 5. Search in More Places on Your WordPress Site

SearchWP can be configured to search in more places on your WordPress site. For instance, it can search in custom fields, PDF documents, shortcode outputs, and more.

Depending on where you want to enable search, you can turn these features on and off as needed.

Enable Search for WordPress Custom Fields

WordPress custom fields allow you to store additional meta data for your WordPress posts and pages. They are also used by WordPress plugins to store data related to a post or page.

To include custom fields in your search sources, go to SearchWP » Settings page and click on the Add/Remove attribute button below a source.

This will bring up a popup where you can select a specific custom field or select any meta key.

Click on Done when you are finished and don’t forget to click the Save Engines button.

SearchWP will now start using custom fields as a source and will include matching posts in the search results.

For more details, see our guide on how to how to make custom fields searchable in WordPress.

Enable Search in PDF and Documents

SearchWP can also search inside PDF files and office documents uploaded in your WordPress media library.

Simply go to the SearchWP » Settings page and click on the Sources & Settings button for your search engine.

This will bring up a popup where you need to make sure that the Media is selected as one of the sources.

Then, click the Done button.

After that, scroll down to the sources list on the Engine settings page to locate the Media tab.

From here, you need to click on the Add/Remove Attributes button.

This will bring up a popup where you can select which attributes you want to include in your search results.

Click on the Done button after making your selection.

Next, you can move the slider up and down to adjust the weight you want to give to a particular attribute in search results.

Once finished, don’t forget to click the Save Engines button to save your settings.

Enable Search in Shortcode Outputs

Many WordPress plugins use shortcodes to output data in your WordPress posts and pages.

If this shortcode data is important for your WordPress website and will help improve search results, then you can enable Shortcode Output parsing in SearchWP.

Simply go to the SearchWP » Settings page and switch to the Advanced tab. From here, you need to check the box next to the ‘Parse Shortcodes when indexing’ option.

After that, click the Wake Up Indexer button to run a new indexing process in the background to include shortcode output in search results.

Step 6. Include eCommerce in WordPress Search Results

SearchWP makes it super easy to improve eCommerce search results on your online store.

It comes with powerful integrations for popular eCommerce plugins, including WooCommerce and Easy Digital Downloads.

Here is how you’ll turn it on for your WooCommerce store. Other integrations work similarly as well.

First, you need to go to the SearchWP » Extensions page and install the WooCommerce Integration extension.

Upon activation, go to the SearchWP » Settings page.

Then click on the Sources & Settings button for your search engine.

This will bring up a popup where you need to make sure that the Products option is selected as one of the sources.

After that, click on Done to exit the popup.

Now, scroll down on the Sources screen, and you’ll see the Products tab.

You can adjust the attribute weight by moving the sliders or clicking on the Add/Remove attributes button to select custom fields or product categories.

Once you are finished, don’t forget to click the Save Engines button to save your settings.

For more detailed instructions, visit our guide on how to improve WooCommerce product search in WordPress.

We hope this article helped you learn how to easily customize the search results page in WordPress. You may also want to see our guide on how to get more traffic to your WordPress site or how to track user journey on WordPress lead forms.

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 Customize the Search Results Page in WordPress first appeared on WPBeginner.

August 18, 2022 at 05:28PM

How to Customize WooCommerce Login Page (3 Methods)

Do you want to customize your WooCommerce customer login page?

The default WordPress login page is plain and doesn’t match your store branding. Customizing your WooCommerce customer login page helps you provide a better user experience.

In this article, we’ll show you how to create a completely custom WooCommerce login page and also share tips on how to customize the checkout login page as well.

Why Create a Custom WooCommerce Customer Login Page?

When customers log in to your WooCommerce store, they’ll see the default WordPress login page with only the WordPress logo and branding.

This page is fine if you just want to access your site’s dashboard. However, customers may be put off by the plain design and find it suspicious that the login page doesn’t match your website’s appearance.

Customizing the WooCommerce login pages lets you add your logo and change the design to match your website. This makes your site look more professional and provides a better user experience.

It also allows you to add more form fields, and it even allows you to promote specific products or show special offers to customers.

That being said, let’s see how you can create a custom customer login page in WooCommerce.

• Create Completely Custom WooCommerce Login Page with SeedProd
• Customize WooCommerce Login Page with WPForms
• Bonus: Customize WooCommerce Checkout Login

Create Completely Custom WooCommerce Login Page Using SeedProd

The best way to create a custom WooCommerce customer login page is by using SeedProd. It’s the best WordPress landing page and theme builder for WordPress, and it’s incredibly easy to use.

You can use SeedProd’s drag-and-drop builder to customize the design and layout of a page or your WordPress theme without touching a single line of code.

For this tutorial, we’ll use the SeedProd Pro license because it includes the Login Page template and other advanced customization options. There is also a SeedProd Lite version you can use for free.

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

Upon activation, you will see the SeedProd welcome screen. Go ahead and enter your license key and click the ‘Verify key’ button. You can find the license key in the SeedProd account area.

Next, you can create a custom login page for your WooCommerce store.

Simply head to SeedProd » Landing Pages from your WordPress dashboard and click the ‘Set up a Login Page’ button.

After that, SeedProd will show you multiple templates. You can quickly select one and customize it according to your needs. This helps save time and you can use an existing design to create your own WooCommerce login page.

The plugin also lets you create a login page from scratch using a blank template.

Once you select a template, a popup window will open.

Go ahead and enter a name for your page and click the ‘Save and Start Editing the Page’ button.

Next, you’ll see the drag-and-drop page builder.

You can now customize the login page by adding new blocks to the template from the menu on your left.

SeedProd offers standard blocks like headline, text, image, button, and more.

Besides those, you can add advanced blocks like a giveaway, contact form, social sharing buttons, optin form, and more. There are also WooCommerce blocks like recent products, featured products, and best-selling products that you can add to your login page template.

Using the WooCommerce blocks, you can easily recommend your top products and promote discount offers to get more conversions.

Aside from that, SeedProd also lets you further customize any section on the login page. Simply click on the section, and you’ll see more options like editing the label, color, font, and spacing.

Once you’re done customizing the WooCommerce login page, don’t forget to click the ‘Save’ button at the top.

After that, you can head to the ‘Page Settings’ tab and click the ‘Page Status’ toggle to change it from Draft to Publish. Then, you can go ahead and click the ‘Save’ button and close the page builder.

From here, all that’s left is to make your new custom WooCommerce login page show up for users. To do this, go to SeedProd » Landing Pages in your WordPress dashboard.

Simply click the switch under ‘Login Page’ so that it’s green and says ‘Active.’

Once that’s toggled on, your new login page will appear on your site!

You can visit your eCommerce store to see it in action.

Customize WooCommerce Customer Login Form Using WPForms

Do you want to create a login form that also matches your website theme and offers more form fields?

The default WordPress login form only allows users to enter their email address or username along with a password. With a custom login form, you can add more fields and let customers sign in with their names or phone number.

The best way to do that is by using WPForms. It’s the best WordPress form builder that’s beginner-friendly to use. Over 5 million websites use WPForms to build smarter forms.

You can easily create a custom WooCommerce login form and display it anywhere on your online store, like the sidebar or product page.

For this tutorial, we’ll use the WPForms Pro plan because it includes the User Registration addon. You can also try the free version of WPForms to get started.

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

Upon activation, you can go to WPForms » Settings from your WordPress dashboard and enter the license key. You can find the license key in the WPForms account area.

Next, you will need to head over to WPForms » Addons in the WordPress admin panel.

After that, scroll down to the ‘User Registration Addon’ and then click the ‘Install Addon’ button.

Now, you’re ready to create a custom login form for WooCommerce. Simply go to WPForms » Add New to launch the form builder.

On the next screen, you can enter a name for your form at the top. Then, search for the ‘User Login Form’ template and click the ‘Use Template’ button.

After that, you can customize your user login form template using the drag and drop builder. WPForms makes it very easy to add different fields to the form or rearrange the existing fields on the template.

For example, you can add advanced fields like phone numbers by dragging them from the menu on your left and dropping it onto the template.

You can further customize each form field in the template. Simply click on any field and edit its label, add a description, and make it a required field in the form.

After that, you can head to the ‘Settings’ tab in the form builder. Under the General settings, you can change the ‘Submit Button Text’ to ‘Login.’

Next, you can go to the ‘Confirmations’ tab to change what will happen when a user successfully logs in.

Simply click the ‘Confirmation Type’ dropdown menu and select an option. You can show customers a message, display a page, or redirect them to a specific URL.

For instance, you can add your WooCommerce login form on a product page and allow customers to quickly sign in to purchase your product.

When you’re done, simply click the ‘Save’ button at the top.

Next, you’ll need to add the WooCommerce customer login form to a page on your site.

Simply click the ‘Embed’ button at the top of the builder. You can then choose whether you will put the form on an existing page or create a new one for it.

Let’s choose the ‘Create New Page’ option for now.

Next, you’ll need to enter a name for your page and click the ‘Let’s Go!’ button.

After that, you’ll see the WPForms login form inside the WordPress content area.

Now, you can preview your form, publish the new page, and display the custom WooCommerce login for your customers.

On the other hand, you can also add your WooCommerce login form to your store’s sidebar. This way, your form will appear on every product page and allow customers to sign in quickly.

Simply, head to Appearance » Widgets from your WordPress dashboard. Next, click the ‘+’ button and add a WPForms widget block.

After that, you can choose your login form from the dropdown menu and enter a title.

When you’re done, click the ‘Update’ button.

You can now visit your online store to see the login form in the sidebar.

For more ways to create a customized WooCommerce customer login page, you may want to see our guide on how to create a custom WordPress login page.

Plus, you can also see our tutorial on how to add a navigation menu in WordPress so that you can add your WooCommerce login page to your website navigation.

Bonus: Customize WooCommerce Checkout Login Page

WooCommerce allows returning visitors to login during the checkout page. If you’re looking to customize the WooCommerce checkout login page, then the best way to do that is by using a powerful funnel builder plugin like WooFunnels.

WooFunnels lets you customize your WooCommerce checkout page, add multi-step checkout, add one-click upsells, and so much more.

You can select from dozens of pre-made checkout templates that are highly optimized for conversions, and the best part is that you can customize them using any of the popular WordPress page builders.

You have the option to A/B test the multiple funnels, sales pages, and upsell offers.

WooFunnels give you detailed analytics on each step of your WooCommerce funnel.

It also comes with a powerful marketing automation addon, Autonami, which lets you customize WooCommerce emails, send drip email notification in WooCommerce for cart abandonment, welcome series, and more.

If you’re serious about growing your WooCommerce store, then this is one of the must have tool that we recommend.

We hope this article helped you learn how to create a custom WooCommerce customer login page. You can also see our expert pick on the best WooCommerce plugins, and our ultimate guide on how to fix WordPress not sending email issue.

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 Customize WooCommerce Login Page (3 Methods) first appeared on WPBeginner.

August 17, 2022 at 04:00PM