Tag - Easy

How to Build a WordPress AJAX Form (in 4 Easy Steps)


Do you want to build an AJAX contact form in WordPress?

AJAX contact forms allow users to submit the form without reloading a page. This enables you to increase user engagement while offering a better form submission experience to your users.

This comes in handy when you run an eCommerce website and want to collect user feedback without diverting user attention.

You can also use the same AJAX functionality for other custom forms on your website. For example, a custom user login form will allow users to login without an additional page load.

In this article, we will show you how to easily build a WordPress AJAX contact form with step by step instructions.

Creating an Ajax contact form in WordPress

What is Ajax and Why Use it For Your Forms?

Ajax, short for Asynchronous Javascript and XML, is a JavaScript programming technique which allows developers to transfer data without reloading a page.

It is most commonly used in web forms allowing users to submit form data without reloading a page. This makes form submission easy and fast, which improves the overall user experience.

Web applications like Gmail and Facebook extensively use this technique to keep users engaged while making everything work seamlessly in the background.

You can also use Ajax for your WordPress forms. It will save users from unnecessary page reload and keeps them engaged on the page they are currently viewing.

That being said, let’s take a look at how to easily make a WordPress Ajax contact form in 4 simple steps.

1. Install WPForms Plugin

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.

WPForms is the best WordPress form builder plugin on the market. It allows you to easily create Ajax powered forms aswell.

Upon activation, you need to visit WPForms » Settings page to enter your license key.

WPForms license key

After entering the license key, you’ll be able to receive automatic updates and install add-ons.

You are now all set up to make beautiful ajax forms in WordPress.

2. Create Your First Form

Let’s go ahead and create your first form.

Simply visit WPForms » Add New page in WordPress admin area. You’ll be asked to provide a title for your form and select a template as a starting point.

Choose form template

For the sake of this tutorial, we will be creating a contact form. However you can create any other type of form you need.

WPForms will now load your form with basic fields already added to it. You can simply point and click on any form field to edit it.

Editing form fields in WPForms

You can also add any new form field from the left column by simply clicking on it. The new field will appear at the bottom of your form just above the submit button.

Click to add a new form field

You can easily drag and drop form fields to move them up and down in the form.

Once you are finished editing the form, you can move on to the next step.

3. Turn On Ajax Form Submission Feature

WPForms does not enable Ajax form submission by default. You will need to manually enable it for your form.

Simply switch to the Settings tab in the form builder and check the box next to ‘Enable AJAX form submission’ option.

Turn on Ajax form functionality

Checking the box will turn on the Ajax functionality for this form.

Now let’s set up what happens after the form submission.

First, switch to the ‘Confirmation’ tab under settings. This is where you inform your users that you have received their form submission.

Confirmation settings

WPForms allows you to do that in different ways. For example, you can redirect users to a URL, show them a specific page, or simply display a message on screen.

Since we have enabled Ajax functionality for the form, redirecting users to another page will defeat the purpose of creating an Ajax form.

You need to select the message option and edit the confirmation message. Feel free to use the formatting toolbar on the editor or add a link or two to tell users where to go next.

After that, you can set up how you would like to be notified about a form submission.

Switch to the Notifications tab in the form settings and configure notification email settings.

Form notification email settings

Once you are done, you can save your form and exit the form builder.

4. Add Your Ajax Enabled Form in WordPress

WPForms makes it super easy to add forms into your WordPress posts, pages, and sidebar widgets.

Simply edit the post or page where you want to add the form and insert the WPForms block to your content area.

Add WPForms block to WordPress post or page

After that, you need to select the form you just created from the block’s settings. WPForms will immediately load a live preview of the form in the content editor.

Select your form

You can now save or publish your content and then visit your website to test the form’s ajax functionality.

Ajax contact form preview

You can also add your form to a sidebar widget in WordPress. To do that, go to Appearance » Widgets page and add the WPForms widget to a sidebar.

Add your ajax powered form to a sidebar widget

Select the form you created earlier and click on the Save button to store widget settings. You can now visit your website to see your Ajax powered form in action.

We hope this article helped you learn how to create a WordPress Ajax contact form for your website. You may also want to see our guide on how to create a contact form popup in WordPress.

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.



Source link

12 Tips to Get a 100% in WordPress Site Health Check Score (Easy)


WordPress introduced a site health check feature in version 5.1 which was further improved in WordPress 5.2 to include a site health check score.

This feature helps website owners keep an eye on the performance and security issues that may affect their site.

Many of our readers have asked us about how to properly utilize the site health feature, and what it can or cannot do.

In this article, we will show you how to get a 100% score in WordPress site health check. We will also answer some commonly asked questions about the site health feature.

Tips to get a 100% site health score in WordPress

What is WordPress Site Health Check Score?

WordPress Site Health check score is a feature in WordPress, which looks for common performance and security issues and gives a health check score based on various tests.

You can view your site health score by visiting Tools » Site Health page in your WordPress admin area.

Getting a perfect score in WordPress site health

WordPress powers more than 34% of all websites on the internet. Most people who make a website using WordPress are beginners and non-techy users.

Site Health feature runs a series of tests to see if their website is performing with optimal settings and latest server software.

How can a good site health score help your WordPress site?

Site health feature runs a series of tests to look for common performance and security issues on a WordPress website.

One example is a test that checks if your website is running the latest PHP version. Using older PHP versions can make your website slow and/or misbehave with many popular WordPress plugins.

Getting a better site health check score ensures that your website is running under optimal conditions.

That being said, let’s take a look at how to get a 100% score in WordPress site health check.

1. Get a Better WordPress Hosting

Nothing impacts a website’s performance more than the web hosting service. This is the most important decision you make for a website.

Using an unreliable hosting provider can affect your WordPress site in many ways.

They tend to use older software, do not have all the PHP modules installed, and there is no easy way for users to fix those issues.

Choosing a WordPress hosting company with a proven track record provides you a solid platform to build your website.

We recommend using Bluehost, SiteGround, or Dreamhost. They are all officially recommended WordPress hosting provider and the biggest names in the hosting industry.

For more hosting recommendations, see our complete guide on how to choose the best WordPress hosting for your website.

2. Install SSL / HTTPS in WordPress

SSL protects your website by encrypting the data transfer from server to user’s browsers. SSL enabled websites use HTTPs instead of HTTP in their URLs and have a padlock icon in the address bar.

SSL Enabled website

To switch from HTTP to HTTPs, you will need to install an SSL certificate on your website. Most of our recommended WordPress hosting providers offer free Let’s Encrypt SSL certificate that you can use.

For more details, see our guide on how to get a free SSL certificate for WordPress with step by step instructions on how to set it up.

3. Keep WordPress Up to Date

Keep your WordPress site up to date

WordPress is a regularly maintained open-source software. Each new WordPress release brings new features, bug fixes, and improves the security of your website.

Many beginners fear that updating WordPress could break their website. They ignore WordPress updates and as a result, leave their websites vulnerable to security threats.

You need to make sure that you are always using the latest WordPress version. For detailed instructions see our guide on how to update WordPress with step by step instructions.

4. Keep WordPress Plugins and Theme Updated

Update WordPress plugins

Just like WordPress itself, WordPress themes and plugins are also regularly updated. You need to keep an eye out for the available updates and install them to keep your site updated.

Plugins and themes use updates to deliver new features, fix bugs, and close security issues. You need to install updates to make sure that your website is not vulnerable to any known security issue.

For plugins, see our guide on how to properly update WordPress plugins.

For WordPress themes, you can simply go to Appearance » Themes page to install an update. You can also update a WordPress theme manually.

5. Use The Latest MySQL or MariaDB Version

Upgrade MySQL

WordPress stores all your website content in a database. By default, WordPress supports database management software like MySQL and MariaDB (a fork of MySQL).

Using the latest version of MySQL or MariaDB ensures that WordPress can safely store your website data. An older version may cause your website to behave unexpectedly.

You need to make sure that your website is running the latest stable version of MySQL/Maria. You can find the information about your database software version by switching to the info tab in site health.

MySQL version

If your website is using an older version of MySQL or MariaDB, then you need to contact your WordPress hosting provider and ask them to update it.

6. Use The Latest PHP Version

Upgrade PHP

WordPress is written in the PHP programming language. It is a server-side language, which means it runs on your hosting server to dynamically generate WordPress pages.

Using the latest PHP version gives your website a performance boost. It also ensures compatibility with new WordPress plugin features that may require the latest PHP version to work correctly.

For more details, see our article on how PHP updates affect your website.

If your website is using an older version of PHP, then you will need to ask your hosting provider to update it for you. Some hosting companies like Bluehost and WP Engine allow you to change the PHP version from the control panel.

7. Keep WordPress Automatic Updates Enabled

Automatic WordPress updates

WordPress comes with built-in ability to update itself and install the latest security releases. These are minor releases but crucial for the safety and security of your website.

However, site-owners do have the ability to turn off automatic WordPress updates. This can be done by using an update manager plugin or by adding code in the wp-config.php file.

These security updates are automatically installed on millions of websites. Make sure that automatic updates are enabled on your WordPress site to keep your site secure with these timely updates.

8. Remove Unused WordPress Plugins & Themes

Delete inactive plugins

Technically, you can use any number of WordPress plugins on your website as long as they are well-coded.

You can keep inactive plugins installed on your WordPress site. They are not loaded by WordPress and do not affect your website’s performance or speed.

However, it is recommended that you delete any inactive plugins that you don’t need. They take up space, can be used to hide malware, increase security scan time, and there is a chance you may accidentally activate them.

For more information, see our article on why you should delete inactive WordPress plugins.

9. Keep Rest API Enabled

JSON REST API

REST API in WordPress allows developers to securely use HTTP requests to perform actions on a WordPress site.

Many site owners disable REST API to protect their websites against brute force attacks.

However, site health does not recommend it because you may need REST API to use third-party apps or some WordPress plugins. Make sure that REST API is enabled to improve your WordPress site health score.

Editors note: We keep the REST API disabled on our sites to prevent against brute force attacks.

10. Make Sure Required PHP Modules are Installed

Install PHP extensions

PHP Modules and extensions are additional libraries that extend the functionality of the PHP programming language. WordPress recommends several PHP modules to be installed for optimal performance.

You can find a list of extensions on the WordPress website. Some of these extensions are required and others are recommended but not necessary.

Now, how do you install a missing module?

You will need to ask your hosting providers to install these extensions for you. Some web hosting providers allow you to install them from hosting dashboard (look for PHP PEAR Packages). However, you would still need to configure them in php.ini file which may not be easier for beginners.

11. Disable WordPress Debug Mode

WordPress debug mode

WordPress comes with a built-in debug mode which allows you to see if a plugin, theme, or custom code is throwing some errors. This feature is intended to be used by developers or advanced users.

It is not recommended to turn on the WordPress debug mode for a live website. It may show warnings and notices in the WordPress admin area which affect user experience.

For details, see our article on how to turn off PHP errors in WordPress.

12. Make Sure WordPress Can Run Scheduled Jobs

WordPress cron jobs

Your WordPress website needs to perform scheduled tasks like checking for updates. These tasks use a system called cron jobs.

Sometimes your hosting environment may block them from running or you may accidentally end up stopping WordPress cron jobs.

You need to make sure that WordPress can run these scheduled tasks to improve your site health score.

Frequently Asked Questions about WordPress Site Health Feature

WordPress site health feature provides excellent suggestions and recommendations. However, there are still some questions that may arise in your mind.

Here we will try to answer some of those questions.

Do I need to get a 100% site health check score in WordPress?

No, you don’t need to get a 100% site health check score. Any score above 80% is considered good enough to run a WordPress website without significant issues.

However, it does feel great to get a 100% site health score. It also ensures that you are not missing out on any of the recommended WordPress suggestions for your website.

Which site health checks are more important?

Site health tests are given three status labels:

  • Good (Passed tests)
  • Recommended (changes are recommended but not necessary)
  • Critical (Significant issues that you must consider fixing)

Critical issues are more important, and you should consider fixing them first.

Does the perfect site health score means my WordPress website is secure?

No, the site health score indicates that your WordPress installation uses the recommended WordPress settings. You would still need to improve WordPress security to protect your website against common threats.

How do I troubleshoot a WordPress site?

Site health feature also provides you debugging information that can be used for troubleshooting. Simply switch to the info tab and from here you can find detailed information about your WordPress install.

Site health debug information

For example, you can find which PHP version your site is using or how much memory limit is allowed on your site.

However, if you need to troubleshoot further, then see our guide on how to troubleshoot WordPress issues step by step.

We hope this article helped you learn how to get a 100% score in WordPress site health check. You may also want to see our guide on choosing the best WordPress caching plugin and best WordPress page builder plugin for your website.

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 12 Tips to Get a 100% in WordPress Site Health Check Score (Easy) appeared first on WPBeginner.



Source link

How to Create AMP Forms in WordPress (The Easy Way)


Do you want to create AMP-friendly forms on your WordPress site?

Accelerated Mobile Pages or AMP is a Google project that makes websites load faster on mobile devices.

While AMP offers a great mobile browsing experience by making your webpages load faster, it disables many useful features on your website.

One of them is contact forms. Since AMP uses a limited set of HTML and JavaScript, it cannot load your WordPress forms properly on AMP pages.

But thankfully, now there is an easy solution available. WPForms, the most beginner-friendly WordPress form plugin now helps you create AMP-ready WordPress forms. Their team recently worked with Google to make AMP forms easy for WordPress.

In this article, we will show you how to create AMP forms in WordPress using WPForms (the easy way).

Creating AMP Forms in WordPress (The Easy Way)

Creating AMP Forms in WordPress (Step by Step)

In order to use AMP with WordPress, you need to install and activate the official AMP plugin for WordPress. For more details, see our step by step guide on how to install a WordPress plugin.

Once activated, the plugin will automatically add Google AMP support for your WordPress site.

However, you can change AMP settings for your website by going to AMP » General from your dashboard.

AMP for WordPress Settings

From the AMP settings page, you can enable or disable AMP on your website, choose a website mode for AMP, and choose supported templates.

Once you have configured AMP, the next step is to create an AMP compatible contact form on your WordPress site.

Step 1. Create a WordPress Form with WPForms

To get started, install and activate the WPForms Lite plugin on your site. It is the lite version of the WPForms Pro plugin.

Both the lite and pro version of WPForms allows you to create a basic AMP ready contact form. In our article, we will be using the free version for screenshots.

Once the plugin is installed and activated, you need to head over to WPForms » Add New page to create a new WordPress form.

On the form setup screen, you can choose a form template to get started quickly. You can select the Blank Form if you want to start from scratch.

Form Templates WPForms

Next, it will open the form builder page.

Drag and Drop Form Builder WPForms

From here, you can add or remove form fields. To add a new field to your form, you can simply click on a form field from the left panel, and it will appear in the form builder panel on the right.

After that, you can configure the field options. Simply click on a field, and then Field Options will appear.

Configuring Field Options in WPForms Plugin

Similarly, you can customize all the other fields.

After that, you can click on the Settings tab to configure your form settings.

WPForms General Settings

The General Settings allow you to change your form name, submit button text, submit button processing text, enable anti-spam Honeypot, and more.

Next, you can click on the Notifications tab to set up email notifications to notify you when a user completes the form.

WPForms Notification Settings

Next, you can click on the Confirmation tab to set up a confirmation message to be shown when a user submits the form.

WPForms Confirmation Message Settings

After the configuration is complete, you can save your form.

Step 2. Add Your AMP Form to a Page

Now that your WordPress form is ready, you can add it to a page.

First, you need to create a new page or open an existing one where you want to add the form.

On your page edit screen, click on the Add New Block icon and select the WPForms block.

Add WPForms Block to WordPress Page Editor

After that, you can see the WPForms widget added to your page edit screen. You just need to select the form you created earlier, and the widget will instantly load it in the page editor.

Add Contact Form to WordPress Page with WPForms

Next, you can publish or update your page.

That’s all! You don’t need to configure anything else. The WPForms Lite plugin will add full AMP support to your form now.

If you want to see how it looks, then you can open the page on your mobile phone.

Or you can open the page on your desktop browser by adding /amp/ or /?amp at the end of your page URL. For example, https://www.example.com/contact/?amp.

Adding Google reCAPTCHA to Your AMP Form

By default, WPForms includes anti-spam honeypot to catch and block spam. Additionally, you can use Google reCAPTCHA to reduce spam submissions.

To use Google reCAPTCHA with your AMP forms, you need to register your site for Google reCAPTCHA v3 and get the Google API keys.

Go to the Google reCAPTCHA website and click on the ‘Admin Console’ button at the top right corner of the page.

Visit Google reCAPTCHA website

After that, you need to sign in with your Google account. Once done, you will see the ‘Register a new site’ page.

Register a New Site for Google reCAPTCHA

First, you need to enter your website name in the Label field. Google AMP only supports reCAPTCHA v3, so you need to choose it from the reCAPTCHA type options.

After that, enter your domain name under the Domains section.

Add Domain Name and Owner for Google reCAPTCHA

The Owners section shows your email address by default. You can also add another email if you want.

Next, you need to accept the reCAPTCHA Terms of Service to continue. Also, select the ‘Send alerts to owners’ checkbox, which will allow Google to notify you about problems like misconfiguration and suspicious traffic on your site.

Accept Google reCAPTCHA Terms of Service

Once done, click on the Submit button.

Next, you will see a success message along with the site key and the secret key to add reCAPTCHA on your site.

reCAPTCHA Keys

Now you have the Google API keys to add reCAPTCHA to your forms. However, there is one more adjustment required to ensure AMP compatibility with the reCATCHA. Click on the ‘Go to Settings’ link there.

Next, you will see the reCAPTCHA settings again with ‘Allow this key to work with AMP pages’ checkbox. Simply check the box and click on the Save button below.

Allow reCAPTCHA to work on AMP Pages

Now that you have Google API keys to add reCAPTCHA on AMP forms, you need to open WPForms » Settings » reCAPTCHA page in your WordPress dashboard.

WPForms reCAPTCHA Settings WordPress

On this screen, you need to choose reCAPTCHA v3 option and paste the site key and secret key. After that, click on the Save Settings button.

Now that Google reCAPTCHA is added to WPForms, you can enable it in your forms where needed. Go to WPForms » All Forms and select the form where you want to enable the reCAPTCHA.

Edit a Form Created with WPForms

Once the form setup screen appears, click on the Settings tab and select the General Settings section. At the bottom, you can see ‘Enable Google v3 reCAPTCHA’ checkbox.

Enable Google v3 reCAPTCHA in WPForms

Check the box and then save your form by clicking on the Save button at the top right corner.

After that, you can revisit your contact page and see the AMP form with reCAPTCHA in action.

We hope this article helped you to learn how to create AMP forms in WordPress easily. You may also want to see our guide on how to create GDPR compliant forms in WordPress.

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



Source link

How to Add Header and Footer Code in WordPress (the Easy Way)


Have you ever been asked to add some code snippets to <header> or <footer> section of your WordPress website?

Often you are asked to add header and footer code in WordPress when trying to integrate with web services like Google Analytics, Facebook Pixel, Google Search Console, etc.

You may also come across WordPress tutorials that might ask you to add some custom CSS or Javascript code to your WordPress header or footer.

By default, WordPress doesn’t provide an option to insert code in your website’s header and footer. Luckily there is an easy solution for beginners.

In this article, we will show you how to easily add header and footer code in WordPress. The goal is to safely add the code without directly editing your WordPress theme files.

How to Add Header and Footer Code in WordPress

The Best Way to Add WordPress Header and Footer Code

If you want to add WordPress header and footer code, there are three possible solutions:

  1. Manually, by editing you theme’s header.php and footer.php files
  2. With your theme’s built-in header and footer code feature
  3. Using a plugin

The first option is not beginner friendly because it requires you to add header and footer code by directly editing the header.php and footer.php files manually.

Another disadvantage of using this method is that your code will be removed if you install an update to your theme.

The second option is using your theme’s built-in feature. Some WordPress themes like Elegant Themes and Genesis Framework by StudioPress offer a built-in option for quickly adding code and scripts to your WordPress header and footer.

If you are using a theme with a built-in feature, then it seems like a safe and simple solution. However if you change your theme, then all the code snippets added to your website will be gone. This includes site verification in Google Search Console, website analytics via Google Analytics, etc.

This why we always recommend users to use the third option, a headers and footers plugin. This option is by far the easiest and safest method to add header and footer code in WordPress.

After a lot of request from readers, our team has built a 100% free Insert Headers and Footers plugin to let users easily add code to the header and footer in WordPress.

Insert Headers and Footers

Here are some benefits of using the Insert Headers and Footers plugin:

1. Easy, Fast, and Organized: It lets you add codes to your site’s header and footer easily and quickly. Plus, it keeps you organized by allowing you to store all your footer and header codes in one place.

2. Prevents Errors: It helps prevent errors which may occur if you edit your theme files manually.

3. Upgrade or Change Your Theme Without any Worry: The plugin will save your header and footer code in a separate place, so you can update or change your theme without worrying about the code being erased.

With that said, let’s see how to easily add header and footer code in WordPress using Insert Headers and Footers plugin.

Adding Code to Header and Footer in WordPress

First thing you need to do is install and activate the Insert Headers and Footers plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Once the plugin is activated, go to Settings » Insert Headers and Footers from your admin panel. After that, you will see two boxes for adding code to header and footer.

Insert Headers and Footers plugin settings

Simply paste the code in one of the two boxes. Once done, don’t forget to click the Save button to store your changes.

The plugin will now automatically load the code in the respective locations on your WordPress site.

You can always edit and remove any code that you don’t want to keep.

You’ll need to keep the plugin installed and activated at all times. Deactivating the plugin will stop adding all custom code to your site.

If you accidentally deactivate the plugin, the code will still be safely stored in your WordPress database. You can simply reinstall or reactivate the plugin, and the code will start appearing again.

Note: You may have to clear your WordPress cache after saving changes, so the code properly appears on the front-end of your website.

We have found the biggest reason why a lot of beginners use the Insert Headers and Footers plugin is to add Google Analytics to their website. For that, we actually recommend using the free MonsterInsights plugin. It’s the best Google analytics plugin for WordPress which helps you properly setup Google analytics tracking with just a few clicks, and it shows you helpful stats right inside your WordPress dashboard.

We hope this article helped you to learn how to add header and footer code in WordPress easily. You may also want to see our comparison of the best email marketing services and the best business phone services.

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 Add Header and Footer Code in WordPress (the Easy Way) appeared first on WPBeginner.



Source link

How to Add Free Live Chat in WordPress (The Easy Way)


Are you looking for a solution to add free live chat in WordPress?

Adding the live chat functionality to your website lets you interact with your visitors. You can answer their questions and solve their problems in real-time.

This helps you to convince your potential customers to purchase your product. It also allows you to provide faster support to your existing customers, so they stay loyal to your brand.

In this article, we will explain how to add live chat in your WordPress site, the easy way.

Adding free live chat in WordPress

Why Use Live Chat on Your WordPress Site?

In this age of instant gratification, customers want to get instant answers to their questions. This helps them make a quick decision to purchase a product or service.

According to eConsultancy, live chat has the highest level of satisfaction among all the customer service channels.

Live chat has a satisfaction level of 73% where as email satisfaction is 61%, phone is at 44%, and SMS satisfaction rate is at 41%.

Live chat is an incredibly powerful tool to recover abandoned carts and improve overall conversion rate across your website, specially if you run an online store.

Aside from being a powerful sales tool, you can also use live chat to provide support to your existing customers which can help turn your loyal customers into brand ambassadors.

That being said, let’s take a look at how to easily add a free live chat in WordPress.

Adding Live Chat to WordPress

While there are many live chat solutions available for WordPress, we’ll be using LiveChat Inc. for the sake of this tutorial.

It is the best live chat software in the market. We can confidently recommend it because we use it on one of our own business websites, OptinMonster.

While the WordPress live chat plugin is free, you will need to have a paid subscription to the LiveChat service. This is one of the most cost-effective solutions in the market.

There is no good free live chat plugin for WordPress.

LiveChat Inc’s paid solution starts at $16.99 per month, but they offer a free 30-day trial for testing their product.

We believe that it is the best option for small businesses that are just starting out. It is worth spending money on it because it will help grow your business.

You can add it to your website for free and give it a try.

To get started, head over to the LiveChat website to create a new account.

LiveChat Inc Website

Next, you need to click on the Sign up free button located at the top-right corner of the screen.

This will take you to a new page where you have to provide some basic information like your full name, email address, and password.

Create a LiveChat account

Click on the Continue button to move forward.

In the next step, you have to provide the URL of your website and the purpose for creating the LiveChat account. It can be for support, sales, or both.

Create a LiveChat account step two

Once done, click on the Continue button to proceed forward.

Now, you have to provide some information about your business. You can select the company size, industry of your business, and type of audience.

Create a LiveChat account step three

Once you’ve filled in the required information, you can click on the Create Account button to complete the process.

Customizing the Appearance of the Live Chat Window

Your LiveChat window needs to grab user’s attention while blending in with the rest of your website design. LiveChat allows you to make changes to the appearance of the chat window to match your needs.

To do that, you need to click on the Settings link on the left sidebar of your LiveChat account area.

This will take you to the Customization page where you can style the live chat window and see your changes applied in real-time.

LiveChat account settings page

On the right side of your screen, you can select a theme for the maximized window and the minimized version. You can also pick a color for the chat window to match it with your website’s colors.

Customize LiveChat Window

To replace the LiveChat Inc. logo with your website logo, you need to click on the Advanced window tweaks link.

This will take you to a new page where you need to click on “Upload your logo”.

Upload Logo and Add social links to LiveChat

You can also add the links to your social media pages. Once done, click on the “I’m done editing” button.

If you want to add custom CSS, then you need to click on the “Customize using own CSS” link.

Once you are finished with the customization, click on the Save Changes button to store the settings.

Customize LiveChat using custom CSS

Setting up Live Chat on Your WordPress Website

LiveChat comes with a free WordPress plugin that allows you to add it to your website within a few minutes.

Go ahead to install and activate the LiveChat plugin. You can check out our beginner’s guide on how to install a WordPress plugin for help.

Upon activation, head over to LiveChat » Settings from the left sidebar of your admin panel.

Connect with LiveChat Inc account

On the Settings page, you’ll have to connect to the LiveChat account by clicking on the “Connect with LiveChat” button.

This will open up a popup window where you need to click on the Sign in link and then log in to your LiveChat account.

Next, WordPress will ask for your permission to access your LiveChat account from the admin area. Click on Allow to complete the process.

Allow WordPress to Access LiveChat account

Now you’ll find some new options on the settings page.

You may click on the “Hide chat on mobile” toggle box to display live chat on desktop only.

LiveChat WordPress plugin settings page

You can also hide the chat feature for guest visitors to test the software.

Now you can visit your website to see the Live Chat bubble added to the bottom-right corner of your screen.

LiveChat added to WordPress site

You’ll receive notifications on your LiveChat account whenever someone uses it to contact you. You can then interact with them, from your account area to answer their queries.

How to Find Trained Live Chat Agents

The above method allows you to add the live chat feature to your site easily.

However, the biggest challenge for most small businesses is to maintain a team of support or sales professionals.

You’ll have to hire and train the team so that you can provide live support to your customers.

The easiest solution is to outsource the service to LTVPlus. It is a managed live chat service for online businesses.

LTVPlus website

LTVPlus is started by the co-founder of MaxCDN, the content delivery solution that we use on WPBeginner website.

They offer affordable live chat agents who can provide 24/7 support on your website. This will help reduce your expenses and grow your business without worrying about hiring more support and sales staff.

You can use the combination of LiveChat and LTVPlus to add live chat functionality to your website and take your business to the next level.

We have used the combination of these two services to increase the sales on our sister company, OptinMonster.

We hope this tutorial helped you learn how to easily add free Live Chat in WordPress. You may also want to see our list of the best CRM software for small businesses.

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.



Source link

How to Create a Custom Gutenberg Block in WordPress (Easy Way)


Do you want to create a custom Gutenberg block for your WordPress site? After the WordPress 5.0 update, you need to use blocks to create content in the new WordPress block editor.

WordPress ships with several useful blocks that you can use when writing content. Many WordPress plugins also come with their own blocks that you can use.

However, sometimes you may want to create your own custom Gutenberg block to do something specific.

If you’re looking for an easy solution to create custom Gutenberg blocks for your WordPress site, then you’re in the right place.

In this step by step tutorial, we’ll show you the easy way to create a custom WordPress block for Gutenberg.

Creating a custom WordPress block for Gutenberg

Note: This article is for intermediate users. You’ll need to be familiar with HTML and CSS to create custom Gutenberg blocks.

Step 1: Get Started

The first thing you need to do is install and activate the Block Lab plugin.

It’s a WordPress plugin that allows you to create custom blocks from your admin panel without much hassle.

Block Lab WordPress Plugin

To install the plugin, you may follow our beginner’s guide on how to install a WordPress plugin.

Once the plugin is activated, you can proceed to the next step of creating your first custom block.

Step 2: Create a New Block

For the sake of this tutorial, we will build a ‘testimonials’ block.

First, head over to Block Lab » Add New from the left sidebar of your admin panel.

On this page, you need to give a name to your block. You can write any name of your choice in the “Enter block name here” textbox.

Enter Custom Block Name

We will name our custom block: Testimonials.

On the right side of the page, you’ll find the block properties. Here you can choose an icon for your block and select a block category from the Category dropdown box.

The slug will be auto-filled based on your block’s name, so you don’t have to change it. However, you may write up to 3 keywords in the Keywords text field, so that your block can be easily found.

Custom Block Properties

Now let’s add some fields to our block. You can add different types of fields like text, numbers, email, URL, color, image, checkbox, radio buttons, and much more.

We’ll add 3 fields to our custom testimonial block: an image field for the image of the reviewer, a textbox for the reviewer name, and a textarea field for the testimonial text.

Click on the + Add Field button to insert the first field.

Image Field Options

This will open up some options for the field. Let’s take a look at each of them.

  • Field Label: You can use any name of your choice for the field label. Let’s name our first field as Reviewer Image.
  • Field Name: The field name will be generated automatically based on the field label. We’ll use this field name in the next step, so make sure it’s unique for every field.
  • Field Type: Here you can select the type of field. We want our first field to be an image, so we’ll select Image from the dropdown menu.
  • Field Location: You can decide whether you want to add the field to the editor or the inspector.
  • Help Text: You can add some text to describe the field. This is not required if you’re creating this block for your personal use.

You may also get some additional options based on the field type you choose. For example, if you select a text field, then you’ll get extra options like placeholder text and character limit.

You can click on the Close Field button once you’re done with the image field.

Following the above process, let’s add 2 other fields for our testimonials block by clicking the + Add Field button.

Final Custom Block Fields

In case you want to reorder the fields, then you can do that by dragging them using the hamburger icon on the left side of each field label.

To edit or delete a particular field, you need to hover your mouse over the field label to get the edit and delete options.

Once you’re done, click on the Publish button, present on the right side of the page, to save your custom Gutenberg block.

Step 3: Create a Block Template

Although you’ve created the custom WordPress block in the last step, it’ll not work until you create a block template named block-testimonials.php and upload it to your current theme folder.

Create a Block Template

The block template file will tell the plugin how to do display your block fields inside the editor. The plugin will look for the template file and then use it to display the block content.

If you don’t have this file, then it’ll display an error saying “Template file blocks/block-testimonials.php not found”.

Let’s create our block’s template file.

First, go ahead and create a folder in your desktop and name it blocks. You’ll create your block template file inside this folder and then upload it to your current WordPress theme directory.

To create the template file, you can use a plain text editor like Notepad.

Every time you add a new field to your custom block, you need to add the following PHP code to your block template file:

<?php block_field( 'add-your-field-name-here' ); ?>

Just remember to replace add-your-field-name-here with the field name.

For example, the name of our first field is reviewer-image, so we will add the following line to the template file:

<?php block_field( 'reviewer-image' ); ?>

Simple, isn’t it? Let’s do the same for the rest of our fields:

<?php block_field( 'reviewer-image' ); ?>
<?php block_field( 'reviewer-name' ); ?>
<?php block_field( 'testimonial-text' ); ?>

Next, we’ll add some HTML tags to the above code for styling purposes.

For example, you can wrap the reviewer image inside an img tag to display the image. Otherwise, WordPress will display the image URL which is not what you want, right?

You can also add class names to your HTML tags and wrap your code inside a div container to style your block content (which we’ll do in this next step).

So here’s our final code for our block template:

<div class="testimonial-block clearfix">
	<div class="testimonial-image">
		<img src ="<?php block_field( 'reviewer-image' ); ?>">
	</div>
	<div class="testimonial-box">
		<h4><?php block_field( 'reviewer-name' ); ?></h4>
		<p><?php block_field( 'testimonial-text' ); ?></p>
	</div>
</div>

Finally, name the file as block-testimonials.php and save it inside the blocks folder.

Step 4: Style Your Custom Block

Want to style your custom block? You can do that with the help of CSS.

Open a plain text editor like Notepad and add the following code:

.testimonial-block 
	width: 100%;
	margin-bottom: 25px;


.testimonial-image 
	float: left;
	width: 25%;
	padding-right: 15px;


.testimonial-box 
	float: left;
	width: 75%;


.clearfix::after 
	content: "";
	clear: both;
	display: table;

Once done, name the file as block-testimonials.css and save it inside the blocks folder.

Step 5: Upload Block Template File to Theme Folder

Now let’s upload the blocks folder containing our custom block template file to our WordPress theme folder.

To do that, you need to connect to your WordPress site using an FTP client. For help, you may check out our guide on how to upload files to your WordPress site using FTP.

Once you’re connected, go to the /wp-content/themes/ folder. From here you need to open your current theme folder.

Enter Theme folder using FTP

Now upload the blocks folder, containing the block template file and the CSS file, to your theme directory.

Once done, you can proceed to the final step to test your custom block.

Note: Block Lab plugin allows you to create theme-specific blocks. If you change your WordPress theme, then you need to copy the blocks folder to your new theme directory.

Step 6: Test Your New Block

It’s time to test our custom testimonials block. You can do this by heading over to Pages » Add New to create a new page.

Next, click on the Add Block (+) icon and search for the Testimonials block. Once you find it, click on it to add the custom block to your page editor.

Add Custom Block to Page Editor

You can now add a testimonial to this page using your custom block. To add more testimonials, you can always insert new testimonial blocks.

Once you’re done, you can preview or publish the page to check whether it’s working properly or not.

That’s all! You’ve successfully created your first custom WordPress block for your site.

Did you know that you can save time with reusable blocks in your editor? Check out our guide on how to easily create reusable blocks in the WordPress block editor and use them on other websites.

You may also want to see our guide on how to create a custom WordPress theme without writing any code.

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 Create a Custom Gutenberg Block in WordPress (Easy Way) appeared first on WPBeginner.



Source link

4 Easy Ways to Re-Order Blog Posts in WordPress (Step by Step)


Do you want to change the order of your blog posts in WordPress?

By default, WordPress displays your blog posts in reverse chronological order (newer posts first), but sometimes you may need to move specific posts up or down.

While it may feel like there is no way to do this in WordPress, you’ll be surprised to learn how easily you can change post order using multiple ways.

In this article, we will show you 4 different ways to re-order blog posts in WordPress. You can pick a solution that looks easier and fits your needs.

Ways to easily re-order blog posts in WordPress

Why Re-order Blog Posts in WordPress?

If you are just starting a blog, then you will not need to re-order your blog posts right away. However as your content grows, you may want to explore different ways to promote content across your website.

One of them is to make specific posts more prominently displayed on the front page, blog page, recent posts, or archive pages.

Now the problem is that WordPress normally displays your blog posts in a reverse chronological order. There is no option to simply just move a post up and down.

Does this mean you cannot bring your older articles to the front page? Or remove a newer article from the recent posts?

No, not at all.

There are multiple workarounds that let you do just that. Depending on your needs, you can choose the method that suits your requirements.

Let’s take a look at some of the ways you can easily re-order blog posts on your WordPress site.

1. Change Post’s Published Date

This is the easiest method and allows you to re-order posts using the built-in WordPress functionality.

As you know that WordPress displays posts based on their publish date in reverse chronological order (newer posts first). Changing a post’s publish date will also change where it appears in the list.

Reorder posts by changing published date

For example, if you wanted to bring an older post up, you would have to change its date to be newer. Similarly if you wanted to move a post down, then you can change its date to be older.

Simply edit the post you want to reorder and on the post edit screen click on the publish date under the Document panel.

Change publish date for a blog post

This will bring up a date and time popup where you can change the post’s published date and time. After you have changed the date/time, click on the ‘Update’ button to save your changes.

You need to select a date relevant to other posts.

For example, if you wanted to display an older post before another post that was published on 8 March, then you need to change the post’s publish date to 9 March.

Post moved up

2. Use Post Types Order Plugin (Drag and Drop Option)

If you want to re-order posts but don’t want to change their publish dates, then this method is for you.

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

Upon activation, you need to visit Settings » Post Types Order page to change plugin’s settings.

Post Types Order settings

From here, you need to select the post types where you want to enable the plugin. After that, simply click on the ‘Save settings’ button to store your changes.

Now you can just go to Posts » All Posts page and simply drag and drop posts to re-order them.

Reorder blog posts by drag and drop

3. Use Sticky Posts Feature in WordPress

Many users just want to reorder blog posts to highlight a blog post as featured content. WordPress comes with a default feature to achieve that, and it’s called Sticky posts.

Sticky posts feature allows you to highlight a post on top of all other posts on your blog page.

Simply edit the blog post that you want to pin to the top. On the post edit screen, check the box next to ‘Stick to the Front Page’ option under ‘Document’ panel.

Make a post sticky in WordPress

After that, click on the ‘Update’ button to save your changes.

You can now visit your website, and you will see the selected post pinned to the top. Depending on your theme, your sticky post will be highlighted differently.

Sticky post highlighted in WordPress

4. Modify WordPress Query using Code (Advanced)

This method requires you to add code to your WordPress site. If you haven’t done this before, then see our guide on how to copy and paste the code in WordPress.

If you are an advanced user and want to customize the post order, then you can modify the default WordPress query.

For example, take a look at this code snippet. It allows you to display posts in chronological order (older posts first).

//function to modify default WordPress query
function wpb_custom_query( $query ) 

// Make sure we only modify the main query on the homepage	
	if( $query->is_main_query() && ! is_admin() && $query->is_home() ) 

 	 	// Set parameters to modify the query
 		$query->set( 'orderby', 'date' );
		$query->set( 'order', 'DESC' );
	


// Hook our custom query function to the pre_get_posts 
add_action( 'pre_get_posts', 'wpb_custom_query' );

This code simply modifies the orderby and order parameters in the default WordPress query.

However, this code may sometimes not work as expected due to some plugins or theme already modifying the default query. To fix that, you can use the supress_filters parameter like this:

//function to modify default WordPress query
function wpb_custom_query( $query ) 

// Make sure we only modify the main query on the homepage	
	if( $query->is_main_query() && ! is_admin() && $query->is_home() ) 

 	 	// Set parameters to modify the query
 		$query->set( 'orderby', 'date' );
		$query->set( 'order', 'DESC' );
		$query->set( 'suppress_filters', 'true' );
	


// Hook our custom query function to the pre_get_posts 
add_action( 'pre_get_posts', 'wpb_custom_query' );

The oderby parameter comes with many options. See the full list of options on the WP Query codex page.

We hope this article helped you learn easy ways to re-order blog posts in WordPress. You may also want to see our ultimate list of most wanted WordPress tips and tricks that you can use on your blog.

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 4 Easy Ways to Re-Order Blog Posts in WordPress (Step by Step) appeared first on WPBeginner.



Source link

How to Remove Author Name from WordPress Posts (2 Easy Ways)


Do you want to remove the author name from your WordPress blog posts? Normally, blog posts are supposed to show author name with other meta-data like date and category.

However, some blog owners may not want to display the author name next to their blog posts.

By default, WordPress does not have an option to remove author name, and you must select an author to publish a post.

In this article, we will show you two ways to easily remove author name from your WordPress posts. We will also discuss the pros and cons of each approach.

Remove author name from WordPress posts

Why Would You Want to Remove Author Name?

Author name is an important type of metadata added to your WordPress posts by default. It allows your readers to learn about authors who create content on your blog.

However, there are times when you may want to hide the author name.

For example: if multiple staff members in your team collaborate on each blog post, then it may seem unfair to credit a single staff member for the work.

In another scenario, you may have several contributors/freelance writers who occasionally write articles, but you want to keep a consistent style and voice for your blog.

With that said, let’s take a look at solutions for easily removing author name from WordPress posts while still allowing multiple authors to work in the background.

Method 1: Manually Remove Author Name from WordPress Posts

Your WordPress theme decides when and how to display the author name in your blog posts. Themes use multiple approaches to do that which makes it harder for a plugin to provide a generic solution for removing author names.

You will need to edit some code to prevent your theme from displaying the author name. If you are uncomfortable editing code, then try the second method instead.

The first method requires you to edit WordPress theme files. If you haven’t done this before, then please take a look at our guide on how to copy and paste the code in WordPress.

Note: Make sure that you create backup of your theme or child theme before making any changes. If something goes wrong, then this will help you easily revert changes.

WordPress themes use different variations of code to display the author name. You will need to locate the code responsible for showing the author’s name in your theme files and delete it.

Most common locations to find this code are single.php, content.php, archive.php, and index.php files.

In many cases, you will not be able to find the code that outputs author name. Instead, you will find a template tag defined in the functions.php file or template-tags.php file.

For example, the default Twenty Nineteen theme uses the function twentynineteen_posted_by to display author name. This function is defined in template-tags.php file and uses the following code:


function twentynineteen_posted_by() 
		printf(
			/* translators: 1: SVG icon. 2: post author, only visible to screen readers. 3: author link. */
			'<span class="byline">%1$s<span class="screen-reader-text">%2$s</span><span class="author vcard"><a class="url fn n" href="%3$s">%4$s</a></span></span>',
			twentynineteen_get_icon_svg( 'person', 16 ),
			__( 'Posted by', 'twentynineteen' ),
			esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
			esc_html( get_the_author() )
		);
	
endif;

Once you have located the code that outputs the author name, you need to delete it.

For example, you have to delete the code from the second line to the ninth line in the above code. After that, the remaining code will look like below.


function twentynineteen_posted_by() 

endif;

Don’t forget to save your changes after deleting the author name code. Then, upload the files back to your website.

You can now visit your website to see your changes in action:

Author Name Removed in WordPress Post Demo

This method hides the author name on all your posts; however, the author archive pages will remain intact. An author archive page is where WordPress creates a list of all articles written by a specific user.

You can find author archive page on a URL like this:

https://example.com/author/samsmith/

This URL is discoverable by search engines, which means you may still get traffic to those pages.

You can disable the author archives easily using the Yoast SEO plugin. Once you install and activate the plugin, go to SEO » Search Appearance your dashboard and then click the ‘Archives’ tab.

Now you can see the author archive settings. You can toggle Author Archives switch and disable author archives on your site.

Yoast SEO Author Archive Settings

Doing so will disable author archives and hide author-sitemap.xml file created by the Yoast SEO plugin.

Method 2: Create a Generic Author Name for Publishing WordPress Posts

This method does not remove the author name, but it can be used as a workaround.

You will create a generic author name and use it for all your past and future articles. You will need to change the author name before publishing each post.

Note: This method is irreversible. If you do this and want to revert, then you will have to edit each post and assign it to the original author manually.

That being said, let’s get started.

First add a new author to your WordPress site and give it a generic username such as editorialteam.

Add new user

Next, you need to visit Users » All Users page and click on the ‘Edit’ link below the username you just added.

Edit user

On the user profile screen, scroll down to the ‘Nickname’ option and enter the name you want to be displayed (for example, Editorial Team).

After that, click on the drop down menu next to ‘Display name publicly as’ option and select the nickname you just entered.

Select display name

You can also add a generic bio and even create a gravatar for that user account.

Now go to Posts » All Posts page and click on the screen options menu at the top. Enter 999 for number of items to display.

Show all posts on screen

This will allow you to quickly edit and change author name for a large number of posts.

You need to select all posts using the checkbox and then select edit under the bulk actions drop down menu. After that click on the ‘Apply’ button to continue.

Select all posts for bulk editing

WordPress will now show you the bulk editing options. You need to change the author to the generic author name you added earlier and then click on the Update button.

Bulk change author name

WordPress will now update all selected posts and change author name. Remember, this process may take some time depending on how fast your WordPress hosting is.

If you have more than 999 posts, then you will need to go to page 2 and repeat the process.

That’s all. You can now visit your website to see it in action.

Editorial Team as Author Name

Our Recommendation

Removing author name using the coding method gets the job done, but it is not the best solution. For example, if you are not using a child theme, then a theme update will override your changes.

This is why we recommend the second method to create a generic author name.

Doing so allows you to use the built-in WordPress functionality and does not require you to edit any code. It will not remove author name or archives but will make them generic. It will also help to ensure consistency of authorship on your site.

If you are good with coding, then you can also use a combination of both approaches. You can create a generic author name to publish all your blog posts, and then hard-code author profile in a WordPress child-theme.

We use a similar approach at WPBeginner. You can see ‘Editorial Staff’ as the author for all blog posts including this one you are reading right now.

Generic Author Name on WPBeginner Article

You can also see that in the author info box at the bottom of the article.

Generic Author Info Box in WPBeginner Article

If you want to add an author info box like this, then take a look at the best free author bio box plugins.

We hope this article helped you learn how to remove author name from WordPress posts. You may also want to see our list of 30 effective ways to monetize your website.

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.



Source link

How to Build an Amazon Affiliate Store in WordPress (The EASY Way)


Do you want to create an Amazon affiliate store using WordPress?

An Amazon affiliate store allows you to sell products from Amazon.com as an affiliate and earn a commission on each sale. Due to low overhead, an Amazon affiliate store is among the easiest to start online business ideas at the moment.

In this article, we will show you how to easily build an Amazon affiliate store using WordPress. We will also share our expert tips on growing your Amazon affiliate earnings.

How to build an Amazon affiliate store using WordPress

Here is a quick overview of all the steps we will take to create an Amazon affiliate store using WordPress.

  1. What is Amazon affiliate store?
  2. Getting started with Amazon affiliate store and WordPress
  3. Signing up for Amazon affiliate program
  4. Adding affiliate products in WooCommerce
  5. Customizing your affiliate store
  6. Resources to increase your affiliate earnings
  7. FAQs about running an Amazon affiliate store

Ready? Let’s get started.

What is an Amazon Affiliate Store?

An Amazon affiliate store is an online store that promotes products listed for sale on Amazon.com.

As a store owner, you send traffic to Amazon by adding your affiliate links to the products. Users are redirected to Amazon to complete the purchase, and you earn an affiliate commission on each sale.

On a traditional online store, you source products, manage orders, ship products, and keep track of inventory. You don’t have to worry about any of these things on an affiliate store.

Amazon affiliate stores are popular among marketers because you can get started with very little money and choose from millions of products listed on Amazon.

Getting Started With Amazon Affiliate Store and WordPress

You can start an Amazon affiliate store with just about any WordPress eCommerce plugin, but we recommend using WooCommerce because it’s the most popular solution in the market.

WooCommerce powers millions of eCommerce websites all over the world.

To get started, you will need to be using the WordPress.org platform (See the difference between WordPress.com vs WordPress.org).

You will also need a WordPress hosting account, a domain name, and an SSL certificate if you want to accept payments for other non-affiliate products on your website.

Typically, a domain name costs around $14.99 / year, web hosting costs around $7.99 / month, and SSL certificate costs around $69.99 / year.

If you are just starting out, then this is quite a lot.

Thankfully, Bluehost, an official WordPress and WooCommerce recommended hosting provider, has agreed to offer our users a free domain name, free SSL certificate, and a discount on web hosting.

Basically, you can get started for $2.75 / month.

→ Click here to Claim this Exclusive Bluehost offer ←

Note: This starter hosting plan would work great for any new affiliate store. However, if you want more eCommerce centric hosting, then take a look at our pick of best WooCommerce hosting providers.

After purchasing hosting, follow the setup instructions in our how to start a blog article. It will walk you through the sign up process, and setting up WordPress.

Once you have installed WordPress, you’ll reach the WordPress dashboard which looks like this.

WordPress admin dashboard

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

Upon activation, WooCommerce will start the setup wizard to choose the currency, payment methods, location, etc.

Since you are setting up an affiliate store, you can scroll down to the bottom of the page and click on ‘Not Now’ link to skip setup.

Cancel set up wizard

You can configure each option in the set up later if you need it in the future.

Signing up for Amazon Affiliate Account

Now that you have installed WordPress and WooCommerce, you will need to sign up for an Amazon affiliate program to start adding products with your affiliate ID.

Head over to Amazon Affiliate program website and click on the ‘Join now for free’ button.

Join Amazon affiliate program

Next, you’ll be asked to log in to your existing Amazon account using the email address and password associated with that account.

Login or sign up

If you don’t have an Amazon account, then you can go ahead and create one.

Once you are logged in, you’ll need to provide payee information and answer questions about your website. Follow the on-screen instructions to complete your profile.

Affiliate program wizard

Upon completion, your application will be reviewed and approved by Amazon.

Adding Amazon Affiliate Products in WooCommerce

WooCommerce is the best Amazon affiliate store plugin for WordPress. It makes it very easy to add external affiliate products to your website.

Using WooCommerce allows you to offer a native user experience and integrate affiliate products seamlessly into your website.

To start importing products, you need to visit Products » Add New page.

Adding a new affiliate product in WooCommerce

First, you need to provide a title for the product you are adding and then add a detailed description in the post editor.

After that, scroll down to product data meta box and select ‘External/Affiliate Product’ under ‘Product type’ dropdown menu.

Product URL

Now you need to enter the product affiliate URL. You can get the URL from your Amazon Associates account dashboard. Simply search for the product and then click on the get link button.

Get product link

Copy the URL and paste it on your product edit page in WordPress.

Note: You need to leave the ‘Price’ field blank. This will allow users to check the price on Amazon.com. Amazon’s affiliate program policies do not allow you to manually enter price information.

Below the product data, you can provide a short description of the product. This description will appear on the shop front page, product category pages, and search results.

To your right, you can add a product image and product gallery images.

Product images

You can now click on the publish button to make the product page go live on your website.

Repeat the process for adding more affiliate products to your website. Once you have added a few products from Amazon, you can go and visit the shop page on your website to see the products in action.

Shop Page

Customizing Your WordPress Amazon Affiliate Store

By default, WordPress comes with a basic design with limited WooCommerce support. You can change that by picking up a WooCommerce ready WordPress theme that compliments your products and niche.

WordPress themes

There are thousands of WordPress themes that you can choose from. This abundance can be quite overwhelming for beginners. This is why we hand-picked the best themes that you can start with.

Need help setting up your WordPress theme? See our beginner’s guide on how to install a WordPress theme.

Themes control the appearance and design of your website. If you want to add a new feature, then you will need to find a WooCommerce plugin offering that feature.

There are tons of WooCommerce add-on plugins to add different features. See our list of best WooCommerce plugins to try out some new features on your store.

If you want more control of your website’s look and feel, then we recommend using Beaver Builder. It is a WordPress page builder plugin that works seamlessly with WooCommerce.

Resources to Grow Your Amazon Affiliate Store

Now that you have set up your Amazon affiliate store, you can focus on growing your business.

Fortunately, there are many tools, plugins, and resources that will help you achieve those goals.

Let’s start with SEO and optimize your WooCommerce store for search engines. Follow our step by step WooCommerce SEO guide for complete instructions.

After that, you can check out these useful tools and plugins for Affiliate marketing and the essential WordPress plugins for all websites.

Next, you need to track your website traffic to find your best selling Amazon affiliate products as well as products that are not doing so well. This is where you’ll need Google Analytics. For details see our tutorial on how to track WooCommerce users in WordPress.

The biggest hurdle any eCommerce store faces is abandoned carts. For an affiliate store, this means people looking at the products but not buying them which affects your affiliate earnings.

To fix this, we have a detailed guide on how to recover abandoned carts and boost your commissions.

Above all, make sure that you are continuously adding useful products, helpful reviews, and targeted content to your website. In the end, that’s what your users are looking for and that’s what you should strive to offer them.

FAQs About Running an Amazon Affiliate Store Using WordPress

Since we first published this article, we have received several questions from our users about running an Amazon affiliate store using WordPress.

Here are the answers to some of those most frequently asked questions.

1. Can I use content from Amazon for product pages?

No, you cannot. Amazon has a strict content policy where you are not allowed to copy product content directly from Amazon.

Most Amazon affiliate stores add their own product descriptions, reviews, and get images from the product manufacturer’s website.

2. Can I add products from other affiliate networks?

Yes, you can add affiliate products from other affiliate networks. This will allow you to diversify your earnings.

3. I live outside the United States, can I join Amazon Affiliate program?

Yes, you can. Amazon Affiliates program is available all over the world.

4. Do I need to disclose my affiliate partnership?

Yes, you do. Amazon’s program policies and the US laws require you to disclose that you’ll earn a commission when users buy a product.

It is not just limited to Amazon, all websites that use advertising or affiliate marketing to make money are required to do so. For example, see WPBeginner’s disclaimer page.

5. Can I promote Amazon products without creating an affiliate store?

Yes, you can. For example, if you run a blog, then you can add affiliate links to your blog posts. In that case, you will not need to install WooCommerce.

We hope this article helped you start an Amazon affiliate store using WordPress. You may also want to see our ultimate step by step WordPress security guide for beginners.

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.



Source link