Archiv der Kategorie: Tutorial

WooCommerce: Adding the Product Short Description to Archive Pages

Final product image
What You’ll Be Creating

WooCommerce comes bundled with archive pages and loops that do a great job, but sometimes you might need to display a bit more information on your main shop and other archive pages.

In this tutorial, I’ll show you how you can add the product short description to your archive pages and display it below the product title.

If you want to learn how to use WooCommerce from start to finish, check out my free beginner’s course.

If you want to learn how to use WooCommerce from start to finish, check out my free beginner’s course.

What You’ll Need

To follow along, you’ll need:

  • A development installation of WordPress.
  • A code editor.
  • WooCommerce installed and activated.
  • Products added—I’ve imported the dummy product data that comes with WooCommerce; for details of how to do this, see this guide.
  • A WooCommerce-compatible theme activated—I’m using Storefront.

Before you start, make sure you’ve got WooCommerce set up. To add the product short descriptions, you’ll follow three steps:

  1. Create a plugin for the function and activate the plugin.
  2. Add a function that outputs the product short description.
  3. Identify the hook in WooCommerce that we need to hook the function to, and attach the function to that hook.

So let’s start!

Creating the Plugin

In your wp-content/plugins directory, create a new PHP file. I’m calling mine tutsplus-product-archive-short-descriptions.php.

Open the file in your code editor. At the top of the file, add this:

This sets up the plugin and gives WordPress everything it needs to activate it.

Now go to the Plugins screen in your WordPress admin and find the plugin:

Plugins screen

Now activate it.

At first it won’t make any difference as you haven’t populated it. Here’s what the main shop page looks like right now:

Default shop page

Writing a Function to Output the Short Description

The short description for products in WooCommerce uses the excerpt that you’d find in normal posts, so to display it all you need to do is display the excerpt for the post.

In your plugin file, add the code below:

It’s as simple as that! But now you need to hook your function to the right action, so that it’s output in the correct place in your archive pages.

Hooking the Function to the Correct Action

Let’s take a look at the file in WooCommerce that outputs the content of the loop on archive pages. This file is content-product.php, and you’ll find it in the templates folder in the WooCommerce plugin.

The file includes a number of action hooks, all of which are used by WooCommerce to output different content.

As we want to display our excerpt below the title of the product, the hook we need to use is woocommerce_after_shop_loop_item_title. As you can see from the content-product.php file, it’s already got two functions attached to it, woocommerce_template_loop_rating() and woocommerce_template_loop_price(), which have priorities of 5 and 10 respectively. So we need to hook our function with a higher priority number, to ensure it fires after those. I’ll leave some leeway and use 40 as the priority.

Beneath your function, add this:

Now save your plugin file and refresh the shop page in your browser. You’ll now see the product short descriptions below the product names:

Shop with short descriptions

Restricting the Length of the Product Descriptions

If your product short descriptions are long, they could mess up the layout of your shop page. Here’s how it looks with a longer description:

shop with long description

Personally I’d use shorter descriptions on a live site, and keep the more detailed information for the long description. But what if you want to use a longer short description on your product pages but restrict their length on the main shop page?

You can do this by using the wp_trim_words() function in your function to display the excerpt. Edit the function so it looks like this:

Your product short description will be displayed limited to the number of words you specified in your function:

shop page with shorter description

Hiding the Short Description on the Product Page

Another thing you might want to do is use the short description for the shop and archive pages, and use just the long description on the individual product pages.

By default, WooCommerce displays the short description at the top of the product page and the long description lower down:

default product page

To remove the short description from the product page and add the long description in its place, you need to unhook the function that outputs the short description and replace it with one outputting the content, which is the long description.

Add this to your plugin file:

This will remove the short description form the top of the product page and replace it with the long description. But the long description is now duplicated at the bottom of the page, so you need to remove it from the product tabs. Do it with another function, hooked to the woocommerce_product_tabs hook:

Now you’ll find that your individual product pages have the long description at the top instead of the short one:

long description on product page

Summary

Because WooCommerce outputs nearly all of its content using action hooks, it’s straightforward to add more content by writing functions and attaching them to those hooks. In this tutorial you’ve learned how to add product short descriptions to your product archives. If you wanted to take this further, you could include one or more conditional tags in your function to do this on specific archive pages.

from Envato Tuts+ Code – WordPress https://ift.tt/37Tn91R

12 Best WordPress Community Plugins for 2020

Whether you’re an online freelancer or running a brick and mortar store, having a website is no longer enough to get and retain customers. You also have to provide value through engaging content. Engagement drives traffic to your website. It provides new leads that you can convert to customers. Engagement is also key to retaining customers.

So, along with your website, you need to create a community of customers and engage with them. This is the best strategy to grow your business. Online communities have created and continue to create enormous value for businesses.

In this post, I’ll show you some of the best WordPress community plugins available on CodeCanyon. But before we do, let’s talk a bit about online communities.

What Is an Online Community?

An online community is:

„a network of people who communicate with one another and with an organization through interactive tools such as e-mail, discussion boards and chat systems.“ — Business Dictionary

Online communities come in different forms:

  • online forums
  • social networks
  • community blogs
  • email groups
  • subscription newsletters

Communities are hosted on a variety of platforms. Each community serves a specific purpose. Before you decide what platform you will use to start and host your community, here are some things you should consider:

  • What specific purpose is your online community going to serve?
  • What value are you going to provide for your members, and how will you provide it?
  • What type of community do you want to create?
  • What kind of content do you want to share with members?
  • Finally, how you will keep the community going?

Importance of Online Communities

Because they are integral to the success of your business, here’s why it makes sense to create an online community as part of your business growth strategy:

Reach

You will be able to reach a very large number of people, which means you will have access to high-quality leads that you can market to cheaply and convert to reliable repeat customers. You won’t have to rely on expensive traditional advertising.

Longevity

Having an online community means that you will be challenged to provide information that is of value to your users. This will help you build a loyal following, which means longevity.

Engagement

Through the community, you’ll be able to constantly engage with your customers. You can post questions about what changes your customers want to see and get immediate feedback about what they think of a new product or service. This level of engagement keeps them coming back.

What Does an Online Community Need?

Online communities need tools to facilitate direct engagement between users and your content, between users and the business, and between the users themselves.

Some tools needed to facilitate engagement in your online community are: 

  • membership tools for users to sign up, create profiles, and log in
  • means to engage with content through commenting, posting, or liking
  • ways for members to communicate with each other
  • the ability to join groups and have private conversations

Ultimately, the kinds of tools you need depend on the purpose you want the online community to serve.

Why Is WordPress the Perfect Choice for Building an Online Community?

Millions of websites are now powered by WordPress.

WordPress is built specifically for content. It started as a blogging tool, but was later revamped into a fully fledged content management system. It is highly adaptable and can be customized by adding themes and plugins to get the desired results.

The fact that it’s easy to customize makes it an ideal choice for building your online community.

Building an Online Community With WordPress

WordPress is a content management system that has user management built into it. This takes care of your user registration and login tools.

WordPress also comes with a built-in posting and commenting mechanism. This lets users engage with content you make available, questions you have for them regarding your product and service, and each other.

The basics of hosting an online community are already there with WordPress. And thanks to WordPress’s flexibility, any other features you could want for an online community are available as plugins, either in free plugins from WordPress.org or more full-featured premium plugins from CodeCanyon.

Now that you understand the importance of having your online community, I’m sure you can’t wait to get started creating your online community so you can grow your website and engage your users.

What Are Community Plugins?

You don’t need to create a community platform from scratch. There are plugins for that.

A plugin is a piece of software that allows you to add a specific function on your website. It saves you the time and headache of creating that particular functionality from scratch.

community plugin is a piece of software you add to your WordPress website to help you create your own social network or online community.

There are plenty of community plugins available to help you out. When choosing a plugin to start and host your online community, here are some things to consider:

  • It must be easy to use, flexible, and adaptable to fast-changing technology.
  • It must be fast: as your community grows, loading speeds become important.
  • It must be fully responsive and compatible with all devices—desktops, laptops, and mobile.
  • It must seamlessly integrate with other WordPress plugins that you’re using.

Now that we know what to look for, let’s review some of the best community plugins on CodeCanyon.

WordPress Community Plugins on CodeCanyon

There are currently over a 100 premium community plugins for WordPress on CodeCanyon. You can use them to add all kinds of community based functionality to your websites. This include things like user profiles, user testimonials, team member pages, forums and much more.

WordPress Community Plugins on CodeCanyon

Using a premium community plugin gives you access to free updates for lifetime and 6 months of support.

Top WordPress Community Plugins

We have created this list of top WordPress community plugins to help you save some time.

1. UserPro: Community and User Profile WordPress Plugin

UserPro Community and User Profile WordPress Plugin

With UserPro, you can do just about anything you need to build your WordPress Community website. Here are some things you can do:

  • Build your own community with searchable members directory.
  • Give each user a custom and elegant profile.
  • Customize registration and login.
  • Restrict access to content based on membership level.
  • Enable social connect and instant profile sync via Facebook, Twitter, Google+, Bkontakt, LinkedIn, and Instagram.

User ACleverCat says this about UserPro:

„I’ve been using this plugin for years. Works great and looks professional on the front-end. Plus, really good customer support…“

2. Youzer: BuddyPress Community & WordPress User Profile Plugin

Youzer BuddyPress Community  WordPress User Profile

Youzer focuses on creating beautiful community and user profiles. It offers a lot of tools to enable users to customize their profile and community pages.

Some of its features include:

  • social login
  • extremely customizable, with many different header styles, profile widgets, and color schemes
  • fully responsive design
  • lots of social features: likes, follows, points, reviews, ratings, badges, mentions, comments, and more…

It’s also fully compatible with the BuddyPress platform.

User cmh2010 says:

„It’s fast, lightweight and beautiful, with excellent support. Great plugin.“

3. Ultimate Membership Pro

Ultimate Membership Pro

For subscription-based communities that give access to content and other services depending on membership level, Ultimate Membership Pro is your plugin of choice.

Ultimate Membership Pro allows you to:

  1. Create your subscription-based online community with different membership fee levels.
  2. Provide different levels of access to content and other services based on the type of membership each user has paid for.

Here’s a look at some of its features:

  • manage your membership forms, membership pages and content lockers directly from WPBakery Page Builder (Visual Composer)
  • drip content: release content at regular intervals, with settings for when each item becomes available based on subscription time or level
  • content locker: lock content based on subscription level
  • sell subscriptions using WooCommerce
  • integrated payment gateways: PayPal, Authorize.net, Stripe, and more
  • integrated with popular email marketing platforms

Customer BreoganGal has this to say:

„An excellent plugin, it adapts perfectly thanks to all its editing possibilities… as well as editing the fields I need. Keep in that way!“

4. PrivateContent

Private Content Multilevel Content Plugin

PrivateContent is a powerful yet easy way to turn your WordPress site into a true multilevel membership platform.

It comes with complete user management, a modern form framework, and a unique engine to restrict any part of your website. All this without needing coding skills!

Some features that make PrivateContent awesome include:

  • five different ways to incorporate the login form into your custom WordPress theme
  • use third-party forms to register users and edit their data
  • WooCommerce checkout to create PrivateContent users
  • locked posts can be searchable and indexable but have hidden contents

PrivateContent is also integrated with Google Analytics to provide precise reports: each page view, each login, logout, and registration will be recorded. You will be able to know exactly what users see. All in real time!

PrivateContent is a developer-friendly plugin and can be easily extended and customized by developers.

Customer Fibeus says this about PrivateContent :

„Amazing! The ease of use. The flexibility. The attention to detail. Thank you for the amazing plugin, making my life just so much easier. Great work. An absolute steal at this price for user specific content!“

5. ARMember

ARMember WordPress Membership Plugin

Make the membership building process as simple as possible with the ARMember plugin. 

ARMember is a one-stop solution to all your membership needs, including member management, payment tracking, drip content, and more. It is so easy to set up that within minutes you will have your own membership site up and running!

You can do so much more, for example:

  • set up custom grace periods for late or failed membership payments
  • upgrade or downgrade membership levels
  • invite-only membership signup
  • choose from a wide selection of striking and customizable templates for member profiles and directory listings
  • track member statistics and payment histories

Members are more comfortable signing up if they are being offered convenient and popular payment gateways. The ARMember membership plugin for WordPress comes with some of the most popular gateways like Stripe, PayPal, Bank Transfer, 2Checkout, and Authorize.net.

User Lynn_HCM says this:

„If you are looking for an all-in-one membership plugin for your WordPress website with amazing and fast customer support then I highly recommend AR Membership.“

6. User Profiles Made Easy

The User Profiles Made Easy plugin does just what it says—it makes user profiles easy. It offers a front-end profile, login, and registration plugin for your membership-based WordPress site.

User Profiles Made Easy

Features include:

  • fully searchable membership directory
  • beautiful custom profile pages
  • customizable and searchable members list
  • private content module that restricts parts of the site based on user roles and guests
  • private content restriction messages with predefined design templates

The User Profiles Made Easy WordPress plugin is one of the best ways to build an online membership directory.

User RomeoLab says:

„A great plugin, but greater support!! Very fast in answering emails and fixing problems…“

7. Chat Support Board

This Chat support board plugin is a great way to automate basic interactions with customers using artificial intelligence. The UI is similar to popular chat services making it easier for everyone to use it.

Chat Support Board

Here are some of its features:

  • rich messages and surveys
  • registration and login
  • multilingual and RTL support
  • email and desktop notifications with sound
  • and more

The plugin also offers a lot of great tools to admins to help them manage different conversations and users. Admins are also able to save replies and find, sort or filter users.

8. Team Showcase

This WordPress plugin allows you to showcase different members of your team or company in a variety of layouts. You can provide some basic information like their title and social media links along with their profile picture.

Team Showcase

Here are some interesting features of this plugin:

  • filter team members by categories
  • reorder members using drag-drop
  • single pages for each entry
  • can be used inside widgets
  • user friendly shortcode generator
  • and more

Consider using Team Showcase if you want your team members to be easily accessible for your readers. This could potentially increase their engagement with your website and give team members more recognition at the same time.

9. Sabai Discuss Plugin

You can use the Sabai Discuss plugin in your WordPress website to create a questions and answers forum. The plugins allows users to ask and answer questions similar to websites such as Stack Overflow.

Sabai Discuss Plugin

You get a lot of features with this plugin, such as:

  • filter questions and answers
  • post comments on both questions and answers
  • tag questions with auto-suggest
  • profile pages
  • close and reopen questions
  • and more

You should definitely check out this plugin if you want to build a solid community of users based around the content of your website.

Free WordPress Community Plugins

You can also find quite a few free WordPress community plugins out there. We are listing three good ones here that have decent reviews. Before going ahead with free plugins, keep in mind that you might not always get regular updates and support.

ProfileGrid

This is a custom user profile plugin that aims to bring all kind of user data from a variety of plugins together. It is basically an all encompassing user profile builder that makes managing user data easier.

BuddyPress

This plugin allows you to create a community similar to popular social networks. Members of your website will be able to create their profiles, have private conversations and interact in groups.

wpForo

The wpForo plugin allows you to integrate a full-fledged forum into your website. It comes with a variety of layouts with in-built SEO and cache system.

Important Tips to Keep in Mind

Here are a few tips that will help you in choosing the best community plugin for your own website:

  1. Make sure that the plugin looks great on mobile devices. More and more people are now using the internet on their mobiles instead of their desktop computer. This makes it important to choose a plugin that loads quickly and looks great on mobile devices.
  2. Forum and social networking plugins will require comparatively more server resources. Be aware of the resources that might be needed by a plugin to work properly. The most feature rich plugin will do you no good if the website starts showing 503 errors with only 10 users!
  3. Spam can be a big issue for community based websites. Any plugin that you use should come with tools to help you easily moderate content and prevent spam. 

Conclusion

Endless customization possibilities built into WordPress have made it easier than ever to build and host your own online community. You don’t need to build your community platform from scratch. There are many WordPress community plugins to help you get started. Once you have established what purpose you want your online community to serve, you will find community plugins for every need on CodeCanyon.

from Envato Tuts+ Code – WordPress https://ift.tt/37PK6D4

A Guide to Overriding Parent Theme Functions in Your Child Theme

If you’ve had any experience working with parent and child themes in WordPress, you’ll know that the template files in your child theme override those in your parent theme. So for example if your parent theme has a page.php file and you create a new one in your child theme, WordPress will use the one in the child theme when displaying pages.

You might think that functions would work in the same way: create a new function in your child theme’s functions.php file with the same name as one in the parent theme, and it’ll take precedence. Unfortunately it isn’t as simple as this.

In this tutorial I’ll show you three methods you can use to override functions from the parent theme in your child theme:

  • pluggable functions
  • function priority
  • removing functions from the hook they’re attached to

How Functions in Parent and Child Themes Work

Before examining the methods for overriding functions in your child themes, it helps to understand how functions work in parent and child themes.

Firstly, you need to know that all of the functions in your parent theme will be run when you’re using a child theme. You don’t have to add anything to your child theme’s functions file to make this happen. This is different from CSS, where you have to manually include the parent theme’s stylesheet in the child theme’s stylesheet.

Another thing to know is that if your parent and child themes have functions with the same name, this will break your site—unless the function in the parent theme is a pluggable function (more on this shortly). This is why it’s important to use prefixes for all your functions, and to use a different prefix in parent and child themes—just in case.

However you can change the order in which functions are fired, and you can prevent functions from being fired altogether, as we’ll see shortly.

Pluggable Functions

Pluggable functions are something you code into your parent theme, so they won’t be any use to you if you’re working with an existing parent theme that doesn’t have them.

But if you’re writing your own parent theme, maybe as a starting point for future projects, or if you’re creating your own theme framework, it’s good practice to make your functions pluggable so that you can easily override them in child themes. It’s also a good idea to look through the functions that are written into the parent theme you’re using, as many of them, including the WordPress default theme, will have pluggable functions.

To write a pluggable function, you simply enclose it in a conditional tag to check if a function with that name has already been run:

So if you enclose the functions in your parent theme in a conditional tag like this, WordPress will check if there is a function with the same name in your child theme that’s already been run, and if that’s the case it won’t run the function from the parent theme.

Then when you come to write a function in your child theme which you want to override the one in the parent theme, you just give it the same name as the one in the parent theme:

WordPress will run the function in the child theme first, and when it comes to the one in the parent theme, it’ll check if it already exists and because it does, it won’t run it.

Function Priority

If you’re not using your own parent theme, or you’re using a third party one without pluggable functions, you’ll need another method.

When you write functions you can assign them a priority, which tells WordPress when to run them. You do this when adding your function to an action or filter hook. WordPress will then run the functions attached to a given hook in ascending order of priority, so those with higher numbers will run last.

Let’s imagine the function in the parent theme isn’t pluggable, and looks like this:

This function is attached to the init hook and hasn’t been given a priority. By default WordPress assigns a priority of 10 to functions which haven’t had a priority added, so to fire your function after it you use a number larger than 10. I tend to use 15 so I’ve got some breathing room in case I want to add another function between the two later on.

This means the function in your child theme would look like this:

Alternatively, the function in your parent theme may have had a priority assigned to it:

So you just need to make sure the priority you give the function in your child theme is higher:

Removing Functions From Hooks

Sometimes running another function after the first one isn’t enough to override it—you need to make sure the function in the parent theme doesn’t run at all. In this case, you can remove the parent theme function from the hook it’s attached to, using the remove_action() or remove_filter() functions. The one you use will depend on whether the function is attached to an action hook or filter hook in the parent theme.

So let’s return to our previous function in the parent theme:

To remove this function from its action hook and therefore prevent it from firing, you create a function in your child theme to remove it using remove_action():

However, this won’t work on its own—you need to attach this function to a hook which will fire after the hook which the parent theme function is attached to. This is because you can’t remove the action before it’s been fired. You can find details of the order in which actions are fired in the Codex.

Once you’ve done this, you can simply write an alternative function to replace the parent theme function in your child theme’s functions file, or you can do nothing if all you wanted to do was remove the functionality from the parent theme.

A Note on Priorities

Note that if you’re trying to remove a function using remove_action() or remove_filter() and the function has had a priority assigned to it, you must include the priority when removing it, or it won’t work.

So if the function in the parent theme looks like this:

… you’ll need to include the same priority value when removing it:

Advanced Parent and Child Theme Functions: Plugable Functions and Extending Functions

As well as the above, there are some specific scenarios in which you might want to take things further. The following tips are in response to questions that have been asked in the comments below.

How to Partially Override a Function in the Parent Theme

Strictly speaking, you can’t partially override a function. You can only let it run, or disable it. But there are workarounds.

The first is if the function you want to partially override itself contains functions that are pluggable. You might find that the function includes a call to another pluggable function from within the parent theme.

If this is the case, you can override any functions within the main function, if that’s the code you want to change. Do it by writing a new version of the pluggable function that either contains just a return statement or contains alternative code. Note that this will only work if the function is pluggable—if it isn’t, your site will break. 

However this method only works if you’re lucky enough to need to override functionality within a function that’s provided by another contained and pluggable function.

In the vast majority of cases, this won’t be an option. In which case, you’ll need to deactivate the function and replace it with a function of your own, with a different name. To create your new function, you can copy and paste the function from the parent theme into the child themes functions.php file, and then edit it to remove the code you don’t want.

You’d use two of your own functions: one to remove the original one, and the second to provide new code, like this example overriding a parent theme called on the init hook:

How to Override Non-Pluggable Functions

Functions in the parent theme that aren’t pluggable can’t be overridden in any special way. So you’d have to use the method above, removing the function from its action hook and then writing a new function on the same action hook that provides the new code.

Don’t give the function in your child theme the same name as the function from the parent theme as this will break your site!

How to Extend Parent Theme Functions

Functions are generally not designed to be extendable. However there may be an exception if your function includes calls to other pluggable functions.

If this is the case, you can extend the function by overriding the functions within the main function, without having to replace the whole of the main function.

In most cases, you can only extend a parent theme function in one of three ways:

  • If the function you want to extend is pluggable, copy it into your child theme and add extra code to extend it.
  • If the function isn’t pluggable, remove it from its hook using remove_action() and write a new function (with a different name) on the same hook with extra code. You might want to copy code from the original function into your new function and edit that.
  • Write a second function which is called on the same hook as the first function and adds extra code that will run before or after the first function. Use the priority parameter in add_action() to specify whether your second function will run before or after the original function.

Summary

Overriding functions in a parent theme is more complicated than overriding template files or styling, but it can be done. Here I’ve shown you three methods for doing this:

  • If you’re writing your own parent theme, or using one which has them, use pluggable functions so that a function in the child theme with the same name as one in the parent theme will replace it.
  • Assign higher priorities to functions in your child themes to ensure they’re run after those in your parent theme.
  • Use remove_action() or remove_filter() to remove functions in the parent theme altogether.

Which method you use will depend on the way your parent theme is coded and whether you need to remove the parent theme function altogether or just run another function after it to override it.

from Envato Tuts+ Code – WordPress https://ift.tt/2fYz1Rm

WP_Query Arguments: Categories and Tags

In the earlier parts of this series, you’ve learned how WP_Query is structured and what its properties and methods are. The next stage is to understand the various arguments you can use with it and how best to do so.

WP_Query has a large number of possible arguments, which makes it extremely flexible. As you can use it to query just about anything held in your wp_posts table, it has arguments for every permutation of query you might want to run on your content.

In this tutorial I’ll look at two types of argument for categories and tags:

The arguments for these two taxonomies are similar but do have some differences you need to know about if you’re going to use them effectively.

A Recap on How Arguments Work in WP_Query

Before we start, let’s have a quick recap on how arguments work in WP_Query. When you code WP_Query in your themes or plugins, you need to include four main elements:

  • the arguments for the query, using parameters which will be covered in this tutorial
  • the query itself
  • the loop
  • finishing off: resetting post data

In practice this will look something like the following:

The arguments are what tells WordPress what data to fetch from the database and it’s those that I’ll cover here. So all we’re focusing on here is the first part of the code:

As you can see, the arguments are contained in an array. You’ll learn how to code them as you work through this tutorial.

Coding Your Arguments

There is a specific way to code the arguments in the array, which is as follows:

You must enclose the parameters and their values in single quotation marks, use => between them, and separate them with a comma. If you get this wrong, WordPress may not add all of your arguments to the query or you may get a white screen.

Category Parameters

Let’s start with category parameters. The options you have here are as follows:

  • cat (int): use category id.
  • category_name (string): use category slug (NOT name).
  • category__and (array): use category id.
  • category__in (array): use category id.
  • category__not_in (array): use category id.

Note that for none of these do you use the name of your category. Even the category_name parameter takes the slug as its value, not its name. I tend to use this one rather than the ID as when I come back to my code at a later date, slugs are easier to identify than IDs. However if you think your site users might change the slug for one or more categories, I recommend using the ID to avoid any problems.

Let’s take a look at how you use each of these.

The cat Parameter

The cat parameter is straightforward: just use a single category ID or a string of category IDs.

Querying for one category looks like this:

Querying for multiple categories looks like this:

The above will tell WordPress to fetch posts that are in any of the categories listed. If you want to find posts in every one of an array of categories, you use the category_and parameter, of which more shortly.

You can also use the cat parameter to find posts that are in one category but not another, by using a minus sign before the category ID as follows:

The above would query posts in category 12 but not in category 13.

The category_name Parameter

The category_name parameter uses the category slug, not the name (confusing, I know!). Again you can use it with a single category or with a string of categories to find posts that are in any of the categories.

To query posts in a single category you add:

And to find posts in one or more of a number of categories, use this:

As with the cat parameter, this won’t find posts that are in all of the categories, but it will find posts in any of the categories.

The category__and Parameter

If you want to find posts that are in all of an array of categories, this is the parameter you use. It takes the category IDs for its value. So to find posts in all of three categories, you would use:

Note that this uses an array not a string, so you code it differently. The parameter has two underscores in its name: use just one and it won’t work.

The category__in Parameter

The next parameter looks for posts in one or more of an array of categories. It actually works in the same way as the cat parameter, and also takes the category ID as its value.

So to query posts in one or more of an array of categories, you would use:

The above would fetch posts from one or more of these categories.

The category__not_in Parameter

The category__not_in parameter does as you would expect: it queries posts which are not in a category or an array of categories.

To exclude posts from one category, you would use the following:

And to exclude posts from an array of categories:

This would exclude posts from any of these categories.

Tag Parameters

Tags have slightly different parameters from categories: you can’t work out what they might be based on your knowledge of category parameters, I’m afraid!

The tag parameters are:

  • tag (string): use tag slug.
  • tag_id (int): use tag id.
  • tag__and (array): use tag ids.
  • tag__in (array): use tag ids.
  • tag__not_in (array): use tag ids.
  • tag_slug__and (array): use tag slugs.
  • tag_slug__in (array): use tag slugs.

Let’s look at each of these.

The tag Parameter

The tag parameter takes the tag slug for its value and can be used to find posts with one tag or with any of a string of tags.

So to find posts with one tag you use:

And to find posts with tags from an array of tags:

Note that the above queries posts with any of the tags in the array, not all of them.

The tag_id Parameter

The tag_id parameter works in a similar way to the cat parameter: it takes the tag ID and can be used with a single tag or multiple tags.

To find posts with a single tag you use this:

To find posts with one or more tags from a string of tag IDs:

You can also use tag_id to exclude tags, either when using it for single tags or multiple tags.

So to query posts except those with a given tag, you’d use:

While to find posts with one of two tags but without another tag, you’d use this:

So the above will query posts with either or both of tags 21 or 23 but not tag 22.

The tag__in Parameter

This parameter lets you find posts with one or more of an array of tags. It works in the same way as tag when used with an array:

This will query posts with any or all of the tags listed. If you want to find posts with all of the tags, you use tag__and, which I’ll cover in a moment.

The tag__not_in Parameter

The tag__not_in parameter lets you query posts which don’t have a given tag or array of tags.

Use it like this to exclude one tag:

Note that you still need to use an array even though you’re only using one tag. For more tags, use:

This will query posts that don’t have any of the above tags.

The tag_slug__and and tag_slug__in Parameters

These two parameters behave in exactly the same way as the tag__and and tag__in parameters, except that you use that tag slug in your arrays instead of the tag ID.

So for example to find posts which have both of a pair of tags, you use tag__slug_in:

This finds posts with any of these tags. You could also use the tag parameter with a string of tag slugs to achieve the same result.

To include posts with all of a set of tags, use tag_slug__and:

Instead of querying posts with any of the tags, this only queries posts that have all of the tags.

Advanced Use of Categories and Tags with WP_Query

Let’s take a look at some advanced uses of category and tag arguments with WP_Query, based on questions raised in the comments to this article.

List Subcategories of a Category

To list the subcategories of a given category (with a link to the subcategory archives for each), you wouldn’t use WP_Query. Instead you’d use wp_list_categories(), which outputs a list of categories with links to their archives. To output the subcategories of a specific category, use the ‘child_of' argument.

Here’s the code:

Substitute the 5 in the code above for the ID of the category whose subcategories you want to list.

Display The First Post from a Category in One Element Then More Posts in Another Element

This is a useful technique if you want to highlight the most recent post from a category, maybe including the excerpt and featured image for that post, and then show a list of the next few posts from the category.

You do this by using the 'posts_per_page' and 'offset' arguments.

The simplest way to do this is to write two separate queries. The first uses 'posts_per_page' => 1 to just fetch the first post. The second query uses'offset' => 1 to fetch posts after the first post, and also uses 'posts_per_page' to define how many posts to output.

Here’s the code:

An alternative method, which involves fewer calls to the database, is to write one query and then loop back through that query a second time, rewinding the query and using a variable to make sure the post output by the first loop isn’t repeated. 

You can find more about using one query for multiple loops in our tutorial on the subject.

Display Posts From Multiple Categories

If you want to display posts that are in a given category and also in one or more of your other categories, you use the cat and category__in arguments. For each of these you use the category ID.

Imagine you want your posts to be category 1 and also in one or more of categories 2, 3 and 5.

Here are the arguments you would use for this:

Summary

Querying your posts by category and/or tag is something there’s a good chance you’ll have occasion to do with WP_Query. By using the arguments above, and combining them where necessary, you can create powerful arguments to extract exactly the data you need from the database.

If you want to learn more about WP_Query, check out some of my other posts in the Mastering WP_Query series.

from Envato Tuts+ Code – WordPress https://ift.tt/2glqpGQ

20 Essential WordPress Utilities to Manage Your Site

WordPress utility plugins let you make enhancements to all aspects of your WordPress website: performance, design, and security. 

With thousands of options available, however, it can be quite difficult sorting the good from the not so good.

In addition, you need to be very selective when deciding on what kinds of plugins you want to use because each plugin added to your site can decrease the load speed of your pages. More plugins also increase the likelihood of scripting conflicts.

With all these issues in mind, I’ve compiled a list of 20 essential WordPress utility plugins available at CodeCanyon to help take your site from good to great. 

There is still a lot of room to improve basic and critical functionality of your WordPress website, and the best way to do so is with utility plugins. Grab some of these best selling WordPress utility plugins and take your website to the next level!

Best selling WordPress Utilities

The Best-Selling WordPress Utilities of 2020

Let’s look at the WordPress utility plugins available at CodeCanyon that will help take your site to the next level. 

1. WPBakery Page Builder for WordPress

WPBakery Page Builder for WordPress

WPBakery Page Builder for WordPress, formerly Visual Composer, is an easy-to-use page builder that will help you create any layout you desire quickly and easily. 

This visual page builder allows you to use simple drag-and-drop widgets or building blocks that allow you to create eye-catching websites without having to understand any coding. This allows you to build out your ideas visually and build out your website quickly and easily.  

This page builder not only allows you to visually construct any page on your website in the WordPress admin back-end, but it allows you to construct any page in the front-end as well.   

2. Yellow Pencil

Yellow Pencil

Yellow Pencil is a WordPress CSS editor plugin which allows you to customise any theme quickly and easily by editing it in real time. All you need to do is click on an element you want to modify, start changing its features visually, and Yellow Pencil will create the required CSS style codes in the background for you. The plugin provides over 50 style properties, 500 fonts, 300 background colors, and a live color picker to help you modify your site. 

3. Hide My WP

Hide My WP

Hide My WP is a security plugin that hides the fact you’re using WordPress on your site, which allows you to fly under the radar of attackers that target WordPress sites. 

In addition, their Intrusion Detection system automatically monitors the site and finds potentially dangerous requests. It then provides you with all details of the attacker like who they are, where they’re located, and how they’re trying to hack your site, and suggests whether they should be blocked or not.

Other great features include:

  • easily replace any words in your HTML output file
  • easily change or hide any URL 
  • notify you when someone is poking around your WordPress site
  • change default WordPress email sender

4. Interactive World Maps

Interactive World Maps

Using maps on your website is a great way to integrate content with location, and the Interactive World Maps plugin is an ideal utility plugin for doing so. The plugin allows you to include maps in posts, pages, and even in the sidebar of your site. 

You can choose to use a map of the entire world, a continent, a country, a region, or a city. You can also add active colour regions to the map and display them in two different ways, as regions and as markers.

Other great features include:

  • ability to add interactivity
  • change background colour
  • change the width and height of the map
  • and much more

5. Advanced Google Maps Plugin for WordPress

Advanced Google Maps Plugin for WordPress

If the Interactive World Maps above isn’t quite what you were looking for, then Advanced Google Maps Plugin for WordPress offers another viable option. This is a great plugin for displaying multiple posts, pages or custom posts on a single Google map. You can assign a location to your post easily using the meta box or your own custom fields.

Other great features include:

  • display posts information like title, content, featured image, categories, etc.
  • display post listing below the map and show post information in the listing 
  • possible to customise HTML easily to integrate your own design
  • display posts or locations below the map in grid or list format

6. Video Gallery Plugin

Video Gallery Plugin

Video galleries are a great way to keep your visitors engaged. Here is where Video Gallery plugin comes in, to help you create a compelling WordPress video gallery. This plugin allows you to feature single videos, or mix-and-match video sources, streams, galleries, and playlists to curate the exact content you desire. 

It’s fully responsive, with subtitle support and AdSense compatibility, making it a solid choice for a dedicated WordPress video gallery. You can completely customize the look and function of your player with a user-friendly, drag-and-drop admin panel. You can also use the Design Centre to generate a brand-compatible skin for your video gallery. 

7. Essential Grid Gallery

Essential Grid Gallery

And if you want a plugin that builds video galleries and more, then the Essential WordPress gallery plugin allows you to build grid-style galleries using images, video, and audio files from a wide variety of sources, both self-hosted and social. Use the template library to create a fully-responsive and mobile-optimized gallery, or connect with Instagram, YouTube, Twitter, and more to stream social media content. Dozens of fully customizable skins and animation options give you total control of the look and feel of your gallery.

8. White Label Branding for WordPress

White Label Branding for WordPress

White Label Branding for WordPress allows developers more latitude in customising WordPress menus. The plugin allows you to customise the WordPress admin and the login screen and add a Role and Capability Manager, which allows you to create new user roles and assign capabilities and decide who has access to what features of the site.

Other great features include:

  • ability to add your own favicon easily
  • hide certain screen options
  • add a private dashboard metabox for editors or administrators eyes only
  • and much more

9. Reviewer WordPress Plugin

Reviewer WordPress Plugin

Reviewer WordPress Plugin offers you a great way for visitors, customers and clients to leave reviews on your site. What’s more, the plugin also allows you to add comparison tables inside your WordPress blog posts, pages, and custom posts. 

Reviewer WordPress plugin offers a good range of customisable themes so that you can adapt your reviews and comparison tables to fit your site, and each theme has a responsive layout to adapt to any devices.

Other great features include:

  • review box and user review widgets
  • three different rating modes
  • ability to collect visitor name and email
  • Google ReCaptcha for preventing spamming
  • and much more

10. Ajax Search Pro

Ajax Search Pro

If you’re looking for a better search function than the native one WordPress provides, check out Ajax Search Pro. It’s a live search engine plugin for WordPress that provides users with customisable front-end settings. 

For example, by checking different boxes, the user can change the behaviour of the plugin to look for exact matches, include or exclude certain post types, categories, etc.

Other great features include:

  • four built-in layouts
  • image support
  • custom field filters
  • keyword highlighting
  • and much more

11. Blog Designer PRO for WordPress

Blog Designer Pro for WordPress

If you’ve ever dreamed of designing your own blog but don’t have the necessary coding skills, Blog Designer PRO for WordPress may be the answer. Unlike the average blog template, the plugin comes with 36 templates, all of which you can customise extensively to suit your own design aesthetic.

Other great features include:

  • fully responsive blog templates
  • support of custom post type
  • preview of blog layout
  • and much more 

12. Super Store Finder for WordPress

SuperStore Finder for WordPress

Super Store Finder for WordPress is a great plugin for businesses who want to help their website visitors and potential customers find their stores easily and quickly. The plugin is integrated with Google Maps API v3 and has a fully responsive design for smartphones, tablets, and touch-screen devices.

Other great features include:

  • multiple store locator layouts to choose from
  • manages unlimited store locations
  • full-screen street view feature
  • extensive map settings to show all stores, specific location, or geo location
  • and much more

13. Ajax Translator Revolution WordPress Plugin

Ajax Translator Revolution WordPress Plugin

Ajax Translator Revolution WordPress Plugin is quite simply an automatic WordPress translation plugin that allows your visitors to view your website in their preferred language in a matter of seconds. 

The translation bar sits at the top of the website by default, but you can use the custom positioning settings to place it wherever you want. The plugin can translate as many as 91 languages and remembers a visitor’s selected language.

Other great features include:

  • over 80 settings for customisation available
  • display languages, flags with names, just names, or just flags
  • translate everything or selected sections of a web page
  • can exclude entire pages, posts, and categories
  • and much more

14. Cornerstone

Cornerstone

Cornerstone is a front-end WordPress page builder that allows you to see the changes you make to your site in real time as you build it. One of the great features of this plugin is Skeleton Mode, which allows you to see the underlying structure of your entire page without leaving the front-end interface.

Other great features include:

  • huge library of ready-made and customisable elements
  • text editing on the fly
  • compatible with any WordPress theme
  • and much more

15. Filetrip

FileTrip

The Filetrip plugin makes it easy to distribute files directly from your WordPress site as it allows your website visitors and clients to easily download any digital file from your website to Dropbox, Google Drive, or another cloud service. 

You can also program the plugin to automatically send copies of files uploaded by users to multiple destinations.

Other great features include:

  • automatic email notification for uploads and backups
  • ability to schedule full backup for your website
  • convert media files into transferable files
  • and much more

16. Ultimate Author Box

Ultimate Author Box

The Ultimate Author Box plugin is a great way to celebrate the authors who write for your blog. The plugin allows you to add an author box to each post to identify the author and provide additional information about them. 

You can add extra tabs to highlight the author’s other posts, social feeds, or other custom content like a contact form. The plugin comes with over 19 predesigned author box templates.

Other great features include:

  • ability to set role restrictions for author boxes
  • over 20 social media profiles
  • author summary in pop-up display
  • unlimited custom colour scheme customisation options
  • and much more

17. WP Contacts 

WP Contacts

Use WP Contacts to manage, log, track and share your contacts on any page of your site you choose. This responsive drag-and-drop plugin facilitates front-end login, and the contact database is highly customisable.

18. Custom Page Templates

Custom Page Templates

Custom Page Templates allows you to override your theme design and create a unique page template for your WordPress website. The plugin has an enormous amount of flexibility and gives you complete freedom to control precisely where and when your changes will be applied.

Other great features include:

  • over 30 shortcodes
  • ability to work with any plugin
  • support for popular plugins like Visual Composer, WooCommerce, etc.
  • and much more

19. Out-of-the-Box

Out-of-the-Box - Dropbox plugin for WordPress

Want to share photos, videos, or other files with your customers, clients, friends, and fans directly from your website without eating up your bandwidth? Say hello to Out-of-the-Box, a Dropbox integration plugin for WordPress that allows you to display your Dropbox files on your website. This responsive plugin is also multilingual ready.

Other great features include:

  • audio and video players
  • smart loading to save time and bandwidth
  • ability to search files by name or contents
  • and much more

20. Diamond Flipbook

Diamond Flipbook Plugin

The Diamond WordPress flipbook plugin allows you to create flipbooks from a variety of source files. Automatically convert PDFs, or upload multiple JPGs at the same time to create a flipbook. You can also manually add pages, or simply enter text directly into the WYSIWYG editor. Then, either add a shortcode for the generated flipbook to your website or post an image link that will launch a lightbox with one click. 

This WordPress gallery plugin also offers YouTube support. Fully responsive and with no Flash needed, this plugin works reliably on both mobile and desktop.

Add a Premium WordPress Plugin to Your Website Now!

Check out these thousands of premium WordPress plugins , as well as the best-selling, trending WordPress plugins, available on CodeCanyon that will vastly improve how your WordPress website functions and offer visitors an excellent user-experience. 

Best selling WordPress Utilities

Discover More Awesome WordPress Plugins

In the following articles and tutorials you will find more useful plugins for your WordPress website:

Learn More About WordPress Plugins

What makes WordPress an awesome platform is the wealth of unlimited resources available to help you succeed with your WordPress website. We are some selections from Envato Tuts+! 

Discover the best WordPress plugins to use for backup, security, caching, and SEO. Learn how to install and configure key WordPress plugins in this free course.

One of the great things about using WordPress is the vibrant plugin ecosystem. There are many thousands of WordPress plugins that promise to improve every aspect of your site. With the right plugins, your WordPress site will run more smoothly, get more visitors, and be less likely to face problems.

In this free course, Envato Tuts+ instructor Rachel McCollin will teach you how to install and configure free WordPress plugins for backup, security, caching, and SEO. You’ll see how WordPress can be made far more powerful and secure by the addition of a few key plugins.

Learn How to Use WordPress

If you’re just getting started, learn how to use WordPress in our complete guide or check out our free Beginner’s Guide to WordPress course.

from Envato Tuts+ Code – WordPress https://ift.tt/3opKNsm

How to Turn Your WordPress Website into a Mobile App

Do you want to turn your existing WordPress website into a mobile app without writing a single line of code? 

Webview templates and WordPress app builders are an easy and affordable way to turn your WordPress website into a mobile app. They’re perfect for a non-technical person—no mobile app development experience is required! 

Webview templates and WordPress mobile app builders turn your website into a responsive app that can be used on all mobile devices. And any changes or updates you make to your website will be reflected immediately in the mobile app. 

Let’s look at webview templates and WordPress app builders on CodeCanyon. 

Universal Android App

WordPress App Builder Plugins 

Grab one of these bestselling mobile app builders and convert your WordPress website into a mobile app. Purchase one of these high-quality mobile app builders to create your app in minutes.  

What is a WordPress App Builder Plugin?

WordPress App Builder plugins help you turn your WordPress site into a mobile app and save you development costs. 

Let’s have a look at some top-selling WordPress web app builders on CodeCanyon.

1. Wapppress App Builder 

WappPress App Builder

WappPress is an excellent tool for converting any WordPress website into an Android app instantly. It’s very easy to use and simple to navigate. You don’t need any coding skills. 

It is packed with highly useful features like Push Notifications, Admob, a custom launcher icon, a custom splash screen, and instant app builds in real time. 

You can even replicate functionality and features of your website in this app. 

2. Lekima React Native App for WordPress & WooCommerce 

Lekima - Store Delivery - React Native App for WordPress  WooCommerce

Lekima is a newcomer on the WordPress app builder scene and in less than six months it has already made an impact! This React Native app allows you to convert your WooCommerce website into a hybrid Android and iOS app. 

It’s perfect for the following businesses: food, grocery, pharmacy, and store delivery. 

Once you’ve converted your WooCommerce store into an app it will have: multiple screens to choose from, multiple payment gateways, push notifications, social login, product display, product cart, and more. 

3. Flink: WordPress App Builder

Flink - WordPress App Builder

The Flink WordPress App Builder makes it possible to easily create a native Android app from your WordPress website and blog. Your native app is created automatically and an APK file is built and sent by email. The app will work smoothly with many features of WordPress like posts, pages, categories, tags, in-post galleries, audio and video players, and users. 

Because your app is connected to your website via the WordPress API, any content updated by you on your website is also updated in your app instantaneously. No need for extra actions.

You can send out push notifications via Firebase. Also, your users can use the app in different languages by switching to their preferred language in the settings page. 

4. Android App Builder 

Android App Builder

Convert your WordPress site into a native Android app from the convenience of your desktop! You can do all this using Android App Builder. This software creates native apps for Android without you having to write a single line of code. It’s perfect for both seasoned Android developers and people without programming skills. 

Android App Builder writes the new classes, activities, scales the icons, creates key stores, etc. You won’t even need to open Android Studio!

In addition, you can do all of the following operations with Android App Builder:

  • Generate your ready to run project.
  • Test your new application on emulator or a real device.
  • Generate a signed APK or App Bundle to publish to the Play Store.

You only have to install it once. Your project is created and compiled on your computer. You don’t have to enter your secret codes, ids or passwords on anyone’s web site. Everything starts and ends on your computer.

Free WordPress Mobile App Builders

If you are on a tight budget, the following free mobile app builders are worth exploring:

AppMySite 

AppMySite

AppMySite is a allows you to convert your WordPress and WooCommerce sites to Android and iOS mobile apps. You can create native apps that offer your customers a premium experience that keeps them coming back for more. In addition, you can publish them on the App Store or Google Play Store. 

Note that you can get started with AppMySite for free, but if you want white label branding, you’ll have to pay a monthly fee ($9 per month at the time of writing).

SuperPWA: Super Progressive Web Apps 

SuperPWA - Super Progressive Web Apps

Super Progressive Web Apps is open source software that converts your WordPress website into a progressive web app. Progressive Web Apps require that your WordPress website is served securely—ie. your website should be HTTPS.

Users can come back to your website by launching the app from their home screen and can interact with your website through an app-like interface. Your return visitors will experience almost-instant loading times and enjoy the great performance benefits of your PWA!

Progressive WordPress 

Progressive WordPress

Progressive WordPress is another PWA plugin that helps encourage users to add your website to their homescreen. But that’s not all. It also allows you to control the display behaviour of your website so it will be shown without any browser elements. Just like a native app.

No connection? No problem. Progressive WordPress pre-caches all critical assets of your website, as well as all visited resources. So if there’s no internet connection it will serve the resources from the local storage.

Turn Any Website Into a Mobile App 

The options are ideal for WordPress websites, but you can also easily turn any other kind of website into a mobile app. For a one-time payment you can grab one of these bestselling webview app templates and convert your website into a mobile app. 

Top-Selling WebView App Templates on CodeCanyon in 2020

If you have an existing website that you want to optimize for mobile users, consider turning it into a WebView app. 

Web apps or responsive web apps are essentially webpages that can be read on mobile devices. They can be accessed through mobile web browsers without needing to install anything. 

To give a web app the look and feel of mobile apps, including the ability to add the app to the Google Play Store or App Store so it can be installed a mobile device for easy access, you will need a WebView template

Best Webview App Templates on Code Canyon

The following best-selling WebView templates for Android and iOS available on CodeCanyon will be your best bet for turning your website into a web app.

1. Best-Seller: Universal Android App 

Universal Android App

The Universal Android App template allows developers to create an app for almost any purpose using the template’s dedicated layouts, with different layouts designed for different kinds of content. The template’s „configurator“ tool can be used to define the content without you needing to write a single line of code, and the template has tons of built-in features to give you a head start. In addition to step-by-step documentation, it comes with in-app purchase options, AdMob advertising, push notifications by OneSignal, and more. 

2. Best-Seller: Universal Android WebView App 

Universal Android WebView App

Universal WebView App is a native Android application which uses a web view component for displaying content. With this template, you can turn your responsive website into a universal mobile app. It is quick, easy, and affordable, and it does not require programming skills. The code is easily configurable and customizable. And there is just one config file to set up everything! 

It has lots of nice extra features such as Material Design styling, geolocation, and pull-to-refresh gesture support. Universal WebView App is also compatible with WordPress or any other web framework. It supports HTML5, CSS3, JavaScript, jQuery, Bootstrap, and other web technologies.

Create your own app in less than 15 minutes without any special knowledge! It’s easier than you think.

3. Web2App for Android and Web2App for iOS  

Web2App

If you’re looking to convert awebsite into an Android or iOS app, then Web2App is for you! The template is packed with features and has powerful customization, such as seven different layout options where you can choose your own theme and customize the app to fit your particular brand identity. Not only that, but its comprehensive documentation, along with video tutorials and step-by-step instructions, make your job much easier than you might have thought possible.

4. RocketWeb for Android

RocketWeb

RocketWeb is yet another WebView-based app for Android. It comes with a lot of configuration options, and you don’t need to learn any programming language to make changes to the app. What sets it apart from the competition is the wide selection of available themes. There are over 50 color schemes for you to choose from, based on the theme of your own website

It comes with support for RTL view, a dynamic sliding menu, and push notifications. There is also integration for AdMob to serve ads.

5. SuperView WebView App for Android and SuperView for iOS 

SuperView WebView App for Android

The SuperView WebView App for Android and SuperView for iOS are great for people who already have a website and want to quickly create a mobile app that pulls up the content from the website.

They comes integrated with AdMob, social logins, and in-app billing. Other features of the app templates include Firebase push notifications, geolocation, a splash screen, and a loading indicator.

6. WebViewGold for Android and WebViewGold for iOS

WebViewGold for Android

WebViewGold wraps your web-baesd or local HTML content into a real, native Android app! No more coding, no more plugins needed. This app template supports all kinds of web apps and websites, including HTML, PHP, WordPress, progressive web apps, and HTML5 games. It also supports AdMob banners and full-screen interstitial ads.

Turn Your Website Into a Mobile App Today!

You have a chance to reach millions of mobile users by simply converting your WordPress website into a mobile app. Webview templates and mobile app builders on CodeCanyon will get you started right away! 

In addition to all the webview templates and WordPress app builders available, there are also thousands of other high-quality WordPress plugins on CodeCanyon that can help you improve your website for you and your users. This incredible collection of plugins contains all types of plugins including video, SEO, eCommerce, and email plugins.

from Envato Tuts+ Code – WordPress https://ift.tt/3jdzTlS

Download and Install WordPress Via the Shell Over SSH and With WP-CLI

Installing WordPress often takes a lot of steps: downloading and uncompressing a zip file, uploading files to the server, and setting up the database and config. That can take a lot of time. Or you can do it by using the Fantastico or SimpleInstall utilities available via your host’s control panel. There is nothing wrong with that, but it’s not foolproof to say the least. In this post I’ll show you a faster and more reliable way—with the shell over SSH.

Nowdays most hosting plans offer an SSH command-line facility so you should definitely consider the SSH method to download and install WordPress on your server. The big advantage  is that you don’t need to visit different sites, and don’t need to do any uploading or open any control panels. You do everything via a single command-line interface. For this you will need an SSH client. If you are running on Windows go for PuTTY and if you are on Mac you can use Mac’s built-in Terminal or iTerm 2. Before we move ahead please make sure your host offers the Bash shell because our commands are configured for that.

At the end of this article, we’ll also go through the WP-CLI tool which is an even easier way to download and install WordPress via command line.

1. Connecting to Your Server

Using PuTTY

Open PuTTY and enter your domain name in the box named Host name(or IP address) and enter the port number used to connect to SSH under Port, then click Open. You can even save your site settings by entering a name in the Saved Sessions box and by pressing Save. Next time you can always load the session by selecting your site and clicking Load.

PuTTY will now ask for your username. Enter your username and press Enter. Now you will be asked for your password. Note here that while you are typing your password, you won’t see it being typed on the screen. It’s hidden for security reasons. Press Enter after you’ve typed your password and you will be logged on.

Using any other SSH client or Mac Terminal

Enter the following command in your Terminal client to connect to your site’s command-line over SSH:

The -p switch tells it to use the port number 22. If your host allows SSH over default port 22, you can omit -p and 22 in the above command, otherwise substitute 22 for your host’s SSH port number. After logging in you will see something like this:

That is the shell command prompt where you will be typing all your commands from now on.

2. Downloading WordPress

Now that we have logged in to our SSH server, we need to go to the correct directory where we want to setup our blog. Then we download the files and extract them there. Supposing the directory you want your blog to be installed under is blogdemo residing under the public_html directory, you will use the following command:

Now that we have reached the correct directory we will download WordPress using the wget command.

The above command downloads the latest WordPress install from their server and extracts the file from it into the blogdemo directory. xf, and z are parameters which tell the tar command to extract the contents from the specified file using gzip.

Now after extraction you will find a wordpress directory under the blogdemo directory containing your install. So to shift the files back to where they should be use the following commands:

This command moves the contents of the wordpress directory into the current directory. Anytime you want to check what is in the current directory, type ls.

You can delete both the wordpress directory and the archive file you downloaded if you want using the following commands:

3. Installing WordPress

In this step we will create the database and corresponding user and associate them together. Then we will use the famous 5 minute install of WordPress to finish it off.

Note: Before moving ahead you will need to check whether you have got the privileges to create a database or not. An easy way to check is to go to your phpMyAdmin and check whether you can create a database from there or not. If you can’t that means you won’t be able to follow this step. You should check with your web host if they allow you to do so or not. Most shared web hosts will let you create a database.

First you need to login to the MySQL command-line using the following command:

After entering this you will be asked for your MySQL password. Type your password and you will be shown a screen like this:

MySQL Login

Now that we have logged in to the MySQL Server, we will first create a database and will grant access to the user to that database. Use the following commands now:

Don’t forget the semi-colon at the end of each MySQL command. The first command creates the database. The second command allows the user to connect to the database. The final command grants all privileges to the user for that database. You can test whether your database creation was successful by running this command:

It should say database changed. Now you can exit the MySQL command-line by typing exit.

Now fire up the blog in your browser and run the usual WordPress install and use the database information we used in the third step to setup your wp-config.php and then setup your blog.

Note: New Database User

In our tutorial we are using an already existing database user to connect to the new database. But in case you want separate user for each database you need to create a new user to access that database. Here is how you should do it.

Once you are inside the MySQL shell, use the following commands to create a new user and set its password.

Now go back to Step 3 and run all other commands with this username.

Editing wp-config.php

In our tutorial I have told you that after doing everything on the shell you can directly proceed to the install. But some of you might want to edit wp-config.php to add special settings and code. You can only do that via the shell. While you are in your blog directory at the shell use the following command to fire up the Vim Editor (a command-line shell file editor)

Now you will see something like what’s shown below:

Vim Editor

Press the i key to enter insert mode and use arrow keys to move around the file. Once you have made your edits, press the Esc key to exit insert mode. To exit Vim type : and then type wq and press Enter. This will save your changes and quit Vim.

Download and Install WordPress With the WP-CLI Tool

In this section, I’ll show you an even better way to download and install WordPress: with the WP-CLI tool. First, we have to install the WP-CLI tool on the sever.

How to Install the WP-CLI Tool

Run the following commands on your server to download, install and configure the WP-CLI tool.

Let’s check if the WP-CLI tool is installed successfully by using the following command.

You should see something like this:

Download and Install WordPress

Let’s download the latest version of WordPress first place.

IF the download is successful, you’ll see something like the following:

So we’ve downloaded the WordPress code base now.

Next, it’s time to create the wp-config.php file. We can do it with the help of the following command. Replace the placeholders with the actual values. I assume that you’ve already created the database which you would like to use with WordPress.

Finally, let’s run the following command which installs WordPress.

And with that, WordPress is installed successfully on your server! 

In fact, the WP-CLI tool is capable of doing a lot more than just installation. It allows you to manage plugins, themes and do necessary version updates as well. All in all, it’s a great tool for WordPress developers, and I would encourage you to explore it! You can learn about WP-CLI here at Envato Tuts+.

Learn to Code PHP for WordPress With a Free Online Course

If you want to learn to code PHP WordPress, check out our free online course on learning to code PHP for WordPress!

 

In this course, you’ll learn the fundamentals of PHP programming. To get started, you’ll learn why WordPress uses PHP, how to create a PHP file, and how to mix HTML and PHP.  You’ll go on to learn how PHP works and how to write simple PHP loops and functions. To wrap things up, you’ll build a custom archive page to practice what you learned.

If you want to learn WordPress plugin development, we have a free course for that as well!

from Envato Tuts+ Code – WordPress https://ift.tt/3jZxmgs

Hosting WordPress With SiteGround: Pros and Cons and How To

There are countless WordPress hosting providers on the market, but which one is right for you?

Find the provider that’s the best possible fit for your website, and you can look forward to faster loading times, improved SEO, protection against the latest security threats, and all the storage and bandwidth your website could ever need. Choose the wrong provider, and you’ll be facing an uphill struggle before you’ve even created your first post! 

Previously, we weighed up the pros and cons of choosing Amazon as your hosting provider, and in this article we’ll be deep-diving into one of the most popular and highest rated hosting providers in the WordPress community. 

By the end of this article, you’ll know exactly how to get WordPress up and running using SiteGround.

Pros of Hosting Your Website Using SiteGround

Let’s start positive, and look at the reasons why you may want to opt for SiteGround over competing WordPress hosting providers. 

1. It’s Recommended by WordPress.org

There are countless hosting providers on the market, but SiteGround is one of only three companies that’s officially recommended by WordPress.org.

“Just like flowers need the right environment to grow, WordPress works best when it’s in a rich hosting environment… We’ve dealt with more hosts than you can imagine; in our opinion, the hosts below (SiteGround, DreamHost and BlueHost) represent some of the best and brightest of the hosting world.” — WordPress Web Hosting

2. One-Click Installation and Automatic Updates

Why go to the effort of downloading, installing and configuring WordPress manually, when SiteGround provides a straightforward, click-and-install solution?

Later in this tutorial, I’ll show you how to install all the WordPress software and plugins your website needs, in just a few clicks. Once you have this software installed, SiteGround’s auto-updater can install any new releases automatically, so you’ll always have access to the latest bug fixes, patches and features. 

3. A Speedier WordPress Website 

To improve your website’s loading speeds, SiteGround uses SSD, a custom PHP handling setup that’s optimized with an OPCache extension, the CloudFlare Content Delivery Network (CDN), and a unique SuperCacher feature that caches your WordPress website on three different levels. 

SiteGround also frees up RAM for dynamic content caching, by using NGINX Direct Delivery to remove static content from the server memory.

For users who want an additional performance boost, SiteGround also offers a SG Optimizer plugin that’s been proven to deliver a 20-30% performance boost even for websites that are already optimized. 

4. Staging: Test Changes and New Content in Private 

Do you want to test experimental changes or new features in private, before sending them out into the world? 

SiteGround lets you create a staged copy of your WordPress website with a single click, so you can test your changes without disrupting your live website. Once you’re happy with your changes, SiteGround makes it easy to roll them out to your users.

5. Protect Your Site Against the Latest Hacks and Exploits 

In 2018, WordPress accounted for 90% of all hacked CMS sites, and security continues to be a major concern for the entire WordPress community. 

To help protect your WordPress installation, SiteGround manages the overall security of your application at the server and firewall level. Since new security threats are emerging all the time, SiteGround frequently adds new rules that are designed to help protect your website against the latest security threats. 

6. Technical Support: Your Issues Resolved Within 5 Minutes 

All of SiteGround’s plans come with technical support as standard. 

Regardless of whether you purchase the StartUp or GoGeek subscription, you’ll have access to 24/7 technical support over the phone, via instant message, or using SiteGround’s ticketing system, with SiteGround aiming to resolve the majority of serious issues within 5 minutes.

If you invest in SiteGround’s GoGeek plan, then you’ll also get advanced priority support, where all your queries are automatically assigned to the most experienced support agent available. 

You’ll find a detailed breakdown of all the WordPress subscription plans over at the SiteGround website. 

7. Easily Migrate an Existing WordPress Website

Do you already have a WordPress website, but are unhappy with your current hosting provider?

The prospect of migrating your entire website can be daunting, but SiteGround’s Migrator plugin lets you securely migrate all your content, while keeping your WordPress configuration intact. 

Cons of Hosting Your Website Using SiteGround

No hosting provider is perfect, so before you sign up for your SiteGround account let’s explore the potential drawbacks of choosing SiteGround as your hosting provider.

1. Restrictions Across All Subscription Plans 

Regardless of whether you opt for SiteGround’s StartUp, GrowBig or GoGeek plan, SiteGround has caps and restrictions in place, particularly when it comes to web space. The StartUp plan has a limit of 10 GB, but even if you invest in the higher-end GoGeek plan, you’ll still be limited to 40 GB of space.

Before committing to any WordPress hosting provider, you should identify the resources your website currently needs, and the resources it’s likely to require in the future. You can then use this information to identify the provider who offers you the best possible value for money in the long-term.

2. A Minimum One Year Subscription 

SiteGround’s subscriptions may work out at between £2.95 and £24.95 per month, but you can’t make payments on a month-by-month basis. Regardless of which plan you opt for, you’ll need to purchase an annual or multi-year subscription in advance. 

Yearly subscriptions aren’t unusual among WordPress hosting providers, but a 12 month contract is a substantial commitment—especially if you’re testing out a new idea that you may not even pursue in the long-term!

How to Launch Your WordPress Website With SiteGround

Now you have a high-level overview of SiteGround’s standout features, let’s look at how you can use this platform to create, configure and launch your WordPress website.

Don’t Already Have a SiteGround Subscription? 

If you haven’t already invested in a hosting plan, then head over to SiteGround’s website and choose the plan that’s right for you

You’ll also need a domain name. There are countless domain registrars to choose from, but some of the most popular include:

Alternatively, you can purchase a domain name directly from SiteGround

Create a Website in Just a Few Clicks

You can quickly and easily setup a new WordPress website, using SiteGround’s Account Setup wizard:

You can quickly and easily create a WordPress website using SiteGrounds Account Setup wizard
  • Select New website > Start New Website.

To create a new WordPress website select Start New Website

Assuming you’re using a domain name you previously purchased, select Existing domain, enter the domain name that you want to use, and then click Continue. Alternatively, select New domain and then follow the onscreen instructions to register a domain name. 

SiteGround lets you add a new name register an existing domain or setup a temporary domain

Under Choose application, select WordPress.

SiteGround supports a range of applications including WordPress

Enter your email address, create a password, and then click Continue > Finish.

Change Your Domain’s Name Servers

SiteGround should now display a selection of name servers. 

To transfer management to SiteGround, you’ll need to add these name servers to your domain name’s registrar. This process can vary, so you should check your provider’s official documentation or blog for more information, but as a general overview you’ll need to:

  • Copy the SiteGround name servers.
  • Log into your DNS hosting provider’s website. 
  • Find your hosting provider’s name servers, and delete them.
  • Paste SiteGround’s name servers into your provider’s account.
  • Save your changes. 

For example, here’s how I changed the domain name serves for my GoDaddy account: 

You can change GoDaddys domain name servers via the Domain Control Center
  • Choose Manage DNS.
  • In the Nameservers section, select Change.
  • Select the I’ll use my own nameservers checkbox.
  • Delete all of GoDaddy’s default name servers.  
  • Select Add nameserver.
  • Copy/paste SiteGround’s name servers into the GoDaddy console, and then click Save.

How to Install WordPress With SiteGround

You can now install WordPress with just a few clicks. To start, go to your SiteGround account, select the Websites tab followed by the Site tools button. In the left-hand menu, navigate to WordPress > Install & Manage.

In the Install New WordPress section, select WordPress. Then, in Application Setup, make sure the Install with WordPress Starter checkbox is selected, as this includes a collection of tools and themes that you can use to kickstart your WordPress website. 

Assuming you want to install WordPress on your main domain, leave the Installation Path blank. In Admin info, enter the login details that you’ll use to access your WordPress admin dashboard. 

Click Install and SiteGround will now install all of the required WordPress software.

Putting the Finishing Touches onto Your WordPress Website 

You’re nearly ready to launch your website! In this section, we’ll perform the final few bits of configuration, including selecting a WordPress theme:

  • Head over to the Site Tools page
  • In the left-hand menu, navigate to WordPress > Install & Manage.
  • Under Manage Installations, find your WordPress installation and click its accompanying Log in to Admin Panel icon (circled in the following screenshot).
You can setup and manage your WordPress website by selecting the Log in to Amin Panel icon

SiteGround’s Welcome to Your WordPress Site wizard will now open in a new tab; select Start Now.

SiteGround will now guide you through the final bit of setup

Choose the WordPress theme that you want to use.

At this point you may be prompted to install some additional plugins, such as WooCommerce and Elementor. If you want to add these plugins to your WordPress installation, then click Confirm > Complete.

Once SiteGround has finished installing your software, select Go to Dashboard and you’ll be taken to the familiar WordPress dashboard—complete with some extra goodies, courtesy of SiteGround!

You can now build your website using the standard WordPress dashboard

If you load your domain name, then you’ll see that your WordPress website is up and running—you’re now ready to start building your website!

Conclusion

In this article, we explored the pros and cons of hosting your WordPress website with SiteGround. If you were swayed by the pros, then I also showed you how to setup, configure and launch a WordPress website, using the SiteGround service.

Discount for WordPress Hosting

If you decide to go with a WordPress.org site, take a look at SiteGround. It comes with an easy installer, free support, and automatic updates. We’re happy to be able to offer a huge discount of 70% off self-managed WordPress hosting, thanks to our partnership with SiteGround.

Managed WordPress Hosting From SiteGround

from Envato Tuts+ Code – WordPress https://ift.tt/2EDY7aB

Customize Your WooCommerce Store With Elementor Template Kits

Elementor Pro’s built-in templates are a great way to style an individual page, but why customize your online store on a product-by-product basis, when you can use Elementor Template Kits to design your entire eCommerce site? 

Countless businesses use WordPress to sell their products and services, thanks to the popular WooCommerce plugin. In the previous post, we built a complete eCommerce store, using WordPress, WooCommerce and Elementor Pro.

In this follow-up post, I’ll show you how to redesign your entire online store, using Elementor Template Kits. We’ll also create a header that features all of your store’s contact information. Alternatively, if you have a very specific vision in mind, then I’ll show you how to create your own Elementor template from scratch—giving you complete creative control over your eCommerce site. 

What We’ll Be Building

Elementor is a flexible tool that gives you several ways to design your eCommerce store.  In the previous post, I showed you how to redesign WooCommerce’s product archive and product pages, using any of Elementor Pro’s ready-made templates. In this follow-up post, we’ll be exploring some additional ways that you can create a professionally-designed eCommerce store using Elementor. 

By the end of this tutorial, you’ll have created: 

  • A complete eCommerce store, using Envato Elements Template Kits. We’ll install a themed collection of templates that contain designs for all the pages your WooCommerce site could possibly need. By the end of this section, you’ll have overhauled your product page, product archive page, and created a themed header that appears across your entire store. To ensure you’re happy with the finished product, I’ll also show you how to customize your chosen template kit with your own widgets, contact information and links. 
WooCommerce generates a Product Archive page automatically you can customize this page using Elementor
  • A product page without a template! Have a specific design in mind? Or want to experiment with a few different potential designs? I’ll show you how to build a product page without using a template. By the end of this section, you’ll have created the following design:
A product page created with a completely custom Elementor Pro template

We have lots to cover, so let’s get started! 

Using Envato Elements Template Kits With WooCommerce

Elementor Pro’s built-in templates are a great way to style an individual page—but why customize your site on a page-by-page basis, when you can use a single template kit that styles your entire website? 

Elementor Template Kits are themed collections of templates, including eCommerce kits that are designed specifically with online stores in mind. 

Elementor Template Kits

Template kits can take the pain out of designing and building an online store. Simply choose your kit, apply a template to each of your pages, make any desired changes—and congratulations, you have a professionally-designed WooCommerce site!

These template kits also provide stand-alone blocks that you can combine into your own page layouts. Using these blocks, you can create pages that are unique to your website, but also consistent with your chosen template kit.  

In this section, I’ll show you how to overhaul your single product page and product archive, customize your default templates with extra widgets, and even how to build a complete eCommerce store using your chosen Elementor Template Kit. 

Install an eCommerce Elementor Template Kit

Envato Elements provides a wide range of professionally-designed Template Kits, ranging from flexible, multipurpose templates to industry-specific kits.

The Envato Elements website has an entire section dedicated to shopping and ecommerce, but you’ll also find templates designed with your specific business in mind, whether that’s photographytravelreal estate, or fitness

You can spend some time browsing all the available options, and decide which template is the best fit for your website. I’m using the Shoppix kit in all of my screenshots. 

Once you’ve chosen your kit, you just need to upload that kit to your website: 

  • On the Envato Elements website, select the template that you want to use and then click Download.
  • You can now either add this kit to an existing project, or create a new project. Make your choice, and your kit will be downloaded automatically. 
  • Head over to your WordPress website. 
  • In WordPress’ left-hand menu, select Templates > Add New.
  • Select Import Templates.
  • Click Choose file and then select the zip file that you just downloaded. 
  • Select Import Now.

Your Envato Elements Template kit will now be uploaded to your WordPress site, ready for you to use. 

Apply Your Elementor Template Kit

In this section, I’ll show you how to overhaul your product page, using an Envato Elements template.

All of the Elementor templates on Envato Elements are professionally-designed, but if your chosen template isn’t quite right for your specific website, then these templates are also easy to customize. 

In this section, I’ll show you how to easily add new functionality to any template, using a selection of Elementor widgets.

Let’s start by applying a template:

  • In WordPress’ left-hand menu, select Templates > Add New.
  • Open the Template type dropdown and select Single Product.
  • Give your template a name, and then select Create template.
  • In the subsequent window, select the My Templates tab.
  • Choose the template that you want to use. In my screenshots I’m using Single Product 1.

Whenever you choose a template, Elementor will prompt you to import the document settings for that template, which will override the page’s current settings. Unless you have a specific reason not to, you’ll generally want to import the document settings for your chosen template. 

Your template will now open in the Elementor editor.

The Elementor editor will now display your chosen template

This template already has everything your product page needs, but what if you want to add some extra functionality? 

In the following sections, I’ll show how to customize your product page template, using several popular Elementor widgets.

Facebook, Twitter, Instagram, & More: Adding Social Sharing Icons

You should make it easy for visitors to share all your content on social mediaincluding your products.

Although it’s not as common as sharing content such as blog posts or articles, visitors may sometimes feel the need to share your products, for example if you’re running a particularly noteworthy discount, or your site features some interesting or unusual products.  

You can add social sharing icons to your product pages, using Elementor’s Share Buttons widget:

  • In the Elementor Panel, find the Share Buttons widget.
  • Drag and drop this widget into the section where you want to display your social sharing buttons. 
You can add social sharing buttons to your product listing using the Share Buttons widget
  • In the Elementor Panel, make sure the Content tab is selected.
  • By default, this widget displays icons for Facebook, Twitter and LinkedIn. If you want to remove any of these icons, then click its accompanying X.
  • You can add more social media platforms to this widget by selecting Add Item and then using Network to select the social media platform in question.
Elementor Pro supports a long list of social media networks including Tumblr Digg and Skype
  • Rinse and repeat for every additional platform that you want to include in your widget. 
  • Next, you can tweak the look and feel of your social sharing buttons. Open the View dropdown and choose whether these buttons should feature an icon, text, or an icon and text. 
You can style your social sharing buttons using Elementors Style tab

You may also want to change the size of these icons, or the size of the sharing buttons in general, using the Style tab.

In this section, we covered a few different ways that you can customize the Social Sharing widget, but there’s plenty more changes that you can make. 

It’s well worth taking the time to explore the Elementor Panel’s various tabs and settings, until you’re completely happy with your Social Sharing widget.

Add to Cart: Customizing This Essential Widget 

Since it’s such an integral part of the online shopping experience, most product page templates feature a built-in Add to Cart widget. However, you may want to customize this default widget, or even replace it with Elementor’s Custom add to cart widget. 

The Shoppix template is no exception, as it features a built-in cart widget. However, its Add to Cart button is grey, which means it blends into the rest of my site.

To ensure potential customers don’t struggle to locate my Add to Cart button, I’ve decided to customize this widget with a bolder, brighter color:

  • In the live preview canvas, click to select the Add to Cart widget.
  • In the Elementor Panel, click the Background color swatch, which launches the color picker. 
  • Use the color picker to select the color that you want to use. I’m opting for a bright color that contrasts (but doesn’t outright clash) with my site’s color scheme. 

Alternatively, Elementor provides a Custom add to cart widget. This widget features the familiar Add to Cart button, plus an optional text field where visitors can specify how many products they’re adding to their cart. 

Suspect your customers might want to purchase products in bulk? In this scenario, a Custom add to cart may be a good alternative to the standard cart widget.

To replace your template’s Add to Cart widget with Elementor’s Custom add to cart, you’ll need to delete the existing Add to Cart widget. In Elementor’s live preview canvas, click to select the cart widget, and then press the Delete key on your keyboard. 

In the Elementor Panel, find the Custom Add to Cart widget, drag it onto the live preview canvas and then drop this widget into position. 

You can now customize the look and feel of your Custom Add to Cart widget, by clicking to expand the Button section in the Elementor Panel. 

You can customize your templates built-in Add to Cart widget or replace it with Elementors Custom Add to Cart widget

To change the button’s color, open the Type dropdown and choose from the various options. 

You may also want to change the text that appears on the Add to Cart button, using the Text field. 

The Custom Add to Cart widget can also display an optional Quantity text box, which is perfect for visitors who want to add multiple items to their cart. To add this Quantity box, click to expand the Product section in the Elementor panel. 

Elementors Custom Add to Cart widget can display an optional Quantity text box
  • Open the Product dropdown and select the product that you’re currently viewing. 
  • Drag the Show Quantity slider into the Show position. 

Unlike some other cart widgets, Elementor’s Custom add to cart widget doesn’t feature a product stock count. If you want to display this information on your product page, then you’ll need to use Elementor Pro’s Product stock widget, which you’ll find in the Elementor Panel. 

Boost Your Revenue, With an Upsell Strategy

As an eCommerce business, you should always be pushing customers towards bigger and better products—upselling is one sales tactic that’s popular with businesses of all shapes and sizes.

Once you’ve implemented an upsell strategy, your website will automatically encourage visitors to dig a little deeper into their pockets. For example, if a customer is viewing the latest MacBook Air, then your website can tempt them to splash more cash, by displaying the latest MacBook Pro in the sidebar. Bonus points if you highlight the fact that the Pro is on sale, for this week only!

To implement an upsell strategy, you’ll need to link all your related products in the WordPress admin area, and then add Elementor’s Upsell widget to your product page template. 

Since we already have the Elementor editor open, let’s add our Upsell widget: 

  • In the Elementor Panel, find the Upsell widget.
  • Drag and drop this widget into the desired location in your live preview canvas. 

Before any upsell content appears on your website, you’ll need to link all related products in the WordPress admin area. Once you’ve published your product page template, you’ll need to perform the following: 

  • In the WordPress dashboard, select Products > All Products.
  • Find the first product that you want to link to its more expensive counterpart, and then open this product for editing, as normal. 
  • Scroll to the Product data section, and then select the Linked Products tab.
You can boost your revenue using WordPress Linked Products feature
  • In Upsells, enter the product that you want to recommend as a more expensive alternative. 
  • Click Update.

You can now repeat the above steps, for all the products that you want to link.

Now, everytime someone views my Contemporary double-bed, WordPress will present the Contemporary king-sized double bed as a potential upgrade—and hopefully earn us some extra revenue in the process! 

Whenever you view product WordPress will now display a You may also like section

By tempting your customers with more luxurious, high-end alternatives, you can ensure you’re getting maximum revenue from each and every sale. 

How to Publish Your Elementor Template Kit Site

Once you’re happy with your customized product page template, it’s time to roll it out across your eCommerce store:

  • In the Elementor Panel, select Publish.
  • In the subsequent popup, open the Include dropdown and make sure Products is selected. 
  • Click Save and Close.

All of your product pages will now feature this brand-new layout.

Moving Beyond a Single Template: How to Build an eCommerce Store

Elementor Template Kits provide all the templates you need to create a complete eCommerce store. 

If you opted for a kit that was designed specifically for eCommerce stores, such as Shoppix, then you’ll have access to templates covering all the major eCommerce pages, including a product archive template.

To create a consistent look and feel across your website, you’ll typically use multiple templates from the same template kit. In the following sections, we’ll move beyond a single page and apply multiple templates to our website, including a header template that’ll appear across our entire eCommerce store.

How to Update WooCommerce’s Product Archive 

To start, I’m going to apply Shoppix’s product archive template to my site: 

  • In WordPress’ left-hand menu, select Templates > Theme Builder.
  • Select the Add New button.
  • Open the Template type dropdown and select Product Archive.
  • Give your template a name, and then click Create Template.
  • Elementor will now display all the available templates; click to select the Product Archive template that you want to use. 

Your chosen template will now open in the Elementor editor. 

At this point, you can customize your template by adding and removing widgets, or editing the widgets that come built into your template.

Once you’re happy with your template, it’s time to hit Publish:

  • Click the green Publish button in the Elementor Panel.
  • In the subsequent popup, open the Include dropdown and select All Product Archives.
  • Click Save and Close.

The updated product archive will now be rolled out across your website. 

How to Create a Header for Your eCommerce Site

At this point, you’re using multiple templates from the same Elementor Template Kit, which is perfect for giving your website a consistent look and feel. However, many websites use recurring elements such as headers and sidebars, to help tie their pages together and create a stronger brand identity. 

In the following sections, we’ll use your chosen template kit to create a header that’ll appear across your eCommerce store. I’ll also show you how to customize the header template with your contact information and links to the most important areas of your online store.

To start, let’s choose a header template:

  • In WordPress, select Templates > Theme Builder.
  • Click Add New.
  • Open the Select the template type… dropdown and choose Header.
  • Give this template a descriptive name. 
  • Select Create Template > My Templates.

Depending on your chosen theme, you may have a choice of header templates, for example my Shoppix theme provides Header Menu – Light and Header Menu – Dark templates.

In my screenshots, I’m using Header Menu – Dark.When prompted, opt to import the document settings.

Your chosen header template will now open in the Elementor editor.

In this section well add a header to our online store

There’s lots of ways that you can customize a header template, but I’ll be covering two of the most popular: adding contact information and adding links. 

Help Potential Customers Contact You

By including contact details in your header, you can encourage potential customers to reach out with any questions they might have. Providing easy access to your contact information can also make your business seem more trustworthy, as potential customers will already know how to contact you if they encounter any problems. 

In Elementor, contact information is typically displayed via the Icon List widget. If your chosen template already includes an Icon List, then you can customize this widget with your own contact information: 

  • Click to select your template’s Icon List widget. 

You can add your contact details using Elementors Icon List widget
  • In the Elementor Panel, click to expand the Icon List section.
  • Click to expand the section of text that you want to edit. 
  • Enter your text into the Text field.
  • Add an optional link and icon, if required. 
  • If you want to add more information to your Icon List, then click Add Item and customize this item with your own text, plus any icons or links that you want to use.

If your chosen template doesn’t already feature an Icon List, then you can find this widget in the Elementor Panel, and then drag and drop it onto your live preview canvas. 

How to Add Links to Your Site’s Header

Headers are a great way to provide easy access to all of your site’s most important content, and many header templates already contain placeholder links. 

Envato’s Shoppix template is no exception, as it already provides placeholders for ChatContact UsLog in and Register pages, as part of its built-in Icon List widget. I’m going to customize these placeholders to link to different areas of my website.

If your template doesn’t provide similar placeholder links, but it does feature an Icon List, then you can add your links as new items: 

  • In the live preview canvas, click to select your existing Icon List widget.
  • Click the Add Item button.

Alternatively, you can add a new Icon List by locating this widget in the Elementor Panel, and then dropping it onto your live preview canvas.

For the sake of simplicity, I’m going to assume you have an Icon List widget that you want to customize with your own links: 

  • In the live preview canvas, click to select the Icon list widget.
  • In the Elementor Panel, find the item that you want to turn into a link, and then click to expand this section.
You can add links to your websites header using the Icon List widget
  • In the Link field, either copy/paste or type your link. 
  • If required, change the text that appears in the header, by editing the Text field. 

Rinse and repeat for every link that you want to add to your header. 

By default, my header has a placeholder for a Contact Us page. Currently, my website doesn’t actually have this page, but Shoppix does have a dedicated Contact Us template. 

If you want to add a Contact Us page to your eCommerce store, then you can use this template to quickly and easily generate a Contact Us page that compliments the rest of your website. 

Want to quickly and easily add a Contact Us form to your page Shoppix has a Contact Us template that you can use with your ecommerce store

You can then reference this Contact Us page in your header.

The Shoppix header also contains placeholders for Log in and Register pages. If your site doesn’t have membership functionality, then we have a list of 22 free and premium membership plugins that you can add to your WordPress website. Alternatively, we’ve published a step-by-step guide to building a membership site, using the Ultimate Membership Pro (UMP) plugin. 

Perfecting Your Header: Remove Unwanted Links

If your header contains placeholders that you don’t want to use, then it’s easy to remove them:

  • Click to select your Icon List widget.
  • The Elementor Panel will now update to display all the items included in this widget.
  • To delete an item, click its accompanying X icon. 

Using these techniques, you can craft a header that contains links to all your website’s most important pages. 

Roll Out Your Custom WooCommerce Header

Happy with how your header is setup? Then it’s time to hit Publish:

  • In the Elementor Panel, click Publish.
  • Open the Include dropdown and select Entire Site.
  • Click Save & Close

Your new header is now live, and should appear across your entire eCommerce site. 

Click Publish  Entire Site  Save  Close and your header will appear across your ecommerce website

Designing an eCommerce Site, Using Elementor’s Theme Builder

In this tutorial, we’ve seen how you can create a stylish eCommerce site, using a range of ready-made templates, including the dozens of professionally-designed template kits available from Envato Elements. 

But what if you want to design a Woocommerce site, without using a template?

Perhaps you have a specific design in mind; maybe you need to ensure your eCommerce site stands out from the crowd, or maybe you want to mock up various designs, using an intuitive page builder? 

Transforming a blank slate into an Elementor template does require some time and effort, particularly compared to using a ready-made template. However, you’ll be working with many of the same widgets, so building an eCommerce template shouldn’t feel too dissimilar to customizing a ready-made eCommerce template.

In this final section, I’ll show you how to build a product page without using a template. To keep things interesting, I’ll use some widgets that we haven’t previously covered, including the WooCommerce breadcrumbs widget, which help keep customers orientated as they explore your various product categories. 

How to Create Your Own Elementor Template

To create a blank template:  

  • In WordPress’ left-hand menu, select Templates.
  • Give the Add New button a click.
  • Open the Template type dropdown and select Single Product.
  • Give your template a descriptive name.
  • Click Create template.
  • Elementor’s template library will now open automatically. Since we’re not using a template, you can close this window. 

You should now have a completely blank slate to work with. 

Build a Product Page, Without Using a Template

Let’s start from the top, by creating a space for our product title: 

  • In the Elementor Panel, grab the Product Title widget and drop it onto the live preview canvas. 
  • You can now use the Elementor Panel to change the title’s appearance, including altering the size of the text and its alignment.  
  • In the Elementor Panel, select the Style tab. Here, you can change the product title’s color and font, add a shadow, and make other stylistic changes. Spend some time experimenting, to see what effects you can create.
  • Next, we need to show potential customers what they’re purchasing. In the Elementor Panel, find the Product Images widget and drag it onto the live preview canvas. 
Make sure customers can see what theyre purchasing using the Product Images widget

Every product needs a description! I want to display my product description alongside the product image, so I’m going to add a second column. To add a column, click the section that contains the Product Image widget. This section should now be outlined in blue. Then, in the section’s upper-left corner, Control-click the Column icon.

You can add more columns to any section by Control-clicking the sections Column icon
  • Select Add New Column. You should now have a section consisting of two columns.

Weve added a second column to our section
  • In the Elementor Panel, find the Product Data Tabs widget, and drag and drop it onto the column you just created. 

You can display information about your product using Elementors Product Data Tabs widget
  • Now we need to add the price. In the Elementor Panel, find the Product Price widget and drag and drop it onto the canvas. 
  • By default, the Product Price widget is on the smaller side, so I’m going to adjust the size of its font. In the Elementor Panel, select the Style tab. 
  • Find Typography and click its accompanying Edit icon. 
  • In the subsequent popup, increase the size of the font.
  • Next up is the Add to Cart feature. In the Elementor Panel, find Add to Cart and drag and drop this widget onto the canvas.
Make sure visitors can purchase your products using the Add to Cart widget

Next, I want to add breadcrumbs so that visitors can see the categories and subcategories this product belongs to, such as Furniture, Electronics, or Gardening. In the Elementor Panel, grab the WooCommerce breadcrumbs widget and drop it onto the canvas. 

Help visitors navigate your ecommerce store using the WooCommerce breadcrumbs widget

Finally, I want to encourage visitors to purchase additional items, by creating a Related Products area. In the Elementor Panel, grab the Product Related widget and drop it onto the canvas.

These are all the widgets I’m adding to my product page, but you may want to add extra widgets, such as the Social Sharing or Upsell widgets we covered earlier. 

You can also style your widgets, by selecting them in the canvas and then opening the Styles tab in the Elementor Panel. Finally, you can change your template’s layout, by grabbing any widget in the canvas and dropping it into a new location.

When you’re happy with your template, you can publish it by selecting Publish > Include > Products > Save and Close. Every product page across your website will now feature this new design. 

You can repeat this process to create templates for any ecommerce page, or even design an element that’ll appear across your online store, similar to the header we created earlier. The possibilities are endless! 

Conclusion 

In this series, we covered three ways that you can build a WooCommerce store using Elementor. If you’ve been following along, then you’ll have created multiple eCommerce templates, including product archives, product pages, and headers. You should also be familiar with all of Elementor’s most important eCommerce widgets.

Elementor Template Kits are themed collections of templates, including eCommerce kits that are designed specifically with online stores in mind.

Elementor Template Kits

Template kits can take the pain out of designing and building an online store. Simply choose your kit and apply a template to each of your pages to get a professionally-designed WooCommerce site!

from Envato Tuts+ Code – WordPress https://ift.tt/3j5xaf3

How to Build a WooCommerce Store With Elementor

Elementor and WooCommerce make it easy to create an online store. In this tutorial, I’ll show you how to use WooComerce, WordPress, and Elementor to build an online store complete with products, categories, and an Amazon-style dropdown menu.

Why WooCommerce?

WordPress is one of the world’s most popular blogging platforms, but countless businesses also use WordPress to sell their products and services.

With a little help from the WooCommerce ecommerce plugin, you can use WordPress to sell digital and physical goods, and collect payments via popular payment gateways including PayPal and Stripe. 

Today, 29% of the top million websites use WooCommerce, and big names such as the All Blacks, L.A. Weekly and AeroPress all rely on this popular WordPress eCommerce plugin.

While WordPress and WooCommerce provide everything you need to launch a successful eCommerce store, you may want more control over how your store looks.

In this two-part series, I’ll show you how to build a professionally-designed online store using WordPress, WooCommerce and Elementor. 

In this post, we’ll setup Elementor and WooCommerce, and create an online store complete with products, categories, and an Amazon-style dropdown menu. Then, in the next post, we’ll redesign WooCommerce’s product archive and product pages, using your choice of Elementor Pro templates.

By the end of this tutorial, you’ll be ready to go live with a professionally-designed eCommerce store. 

What We’ll Be Building

Elementor is a flexible tool that gives you several ways to design your eCommerce store. You could use one of Elementor Pro’s built-in templates, upload additional third-party templates, or even build your own eCommerce template from scratch. In this series, we’ll be covering all three options!

By the end of this tutorial, you’ll have created a custom product page and product archive, using Elementor Pro’s built-in templates. 

Navigate to any product to see your new design in action

The product page and product archive are two pages that WooCommerce generates automatically, but the stock design should be adapted to suit your store’s branding and features. I’ll show you how to quickly and easily customize these default pages, using Elementor Pro’s built-in templates. 

In the follow-up post, we’ll use a themed collection of templates to create unique product pages, a product archive, and a themed header that appears across your entire eCommerce store. 

If you have a specific vision in mind, then I’ll also show you how to bring that vision to life, by creating your own Elementor template. 

Elementor: Build an eCommerce Store With Zero Code

The first step is adding Elementor to your WordPress website. 

The core Elementor plugin is free to download and provides access to more than 40 widgets and over 30 templates. However, since we’re working with WooCommerce you’ll need to invest in an Elementor Pro subscription

Unlike the free version of Elementor, Elementor Pro provides a dedicated WooCommerce Builder, plus some important ecommerce-themed widgets such as Add to Cart, Product Rating and Related Products.

If you want to stick with the free Elementor plugin, then this tutorial will help you master the Elementor user interface and the core workflows you’ll need to build beautifully-designed pages, websites, blogs and online stores. However, you will need an Elementor Pro subscription in order to complete all sections of this tutorial. 

How to Add Elementor to Your WordPress Website

Elementor Pro requires the free version of Elementor. If you haven’t already installed this free plugin, then you’ll need to add it to your website:

  • Log into your WordPress account, if you haven’t already. 
  • In WordPress’s left-hand menu, select Plugins > Add New.
  • Search for the Elementor plugin.
  • When the plugin appears, select Install Now > Activate.

We can now upgrade to Elementor Pro:

  • Head over to the Elementor website, and purchase Elementor Pro, if you haven’t already. You should receive a purchase confirmation email. 
  • On the Elementor website, log into your account using the details contained in your confirmation email. 
  • Select Download plugin, and Elementor Pro will be downloaded as a ZIP file. 
  • Log into your WordPress website. 
  • In the left-hand menu, select Plugins > Upload Plugin.
  • Click Choose file and then select the ZIP file you just downloaded.
  • Select Install Now > Active.
  • When prompted, click Connect & Activate and follow the onscreen instructions to activate your Elementor Pro license.

Elementor Pro is now ready for you to use! 

WooCommerce: How to Install WordPress’ Free eCommerce Plugin 

Next, I’ll show you how to design, build and launch an online eCommerce store, using Elementor and WooCommerce.

If you haven’t already added the free WooCommerce plugin to your website, then now’s your chance:

  • Log into your WordPress website.
  • Navigate to Plugins > Add New.
  • Search for WooCommerce. When this plugin appears, select Install Now > Activate.
  • You should now see the Welcome to WooCommerce screen; click Yes please to start the setup process.
  • On the subsequent screen, enter your postal address and then click Continue.
  • WooCommerce will now ask some questions about your industry and products, and whether you already have an online or physical store. 

After answering all of WooCommerce’s questions, you can choose a theme for your online store. We’ll be customizing our store using Elementor, so just select any free theme and then click Continue.

You’ll now be prompted to activate the Jetpack and WooCommerce Services plugin. This plugin will help protect your website against brute force attacks, and can also deliver a performance boost, so it’s recommended that you activate Jetpack unless you have a specific reason not to.

Congratulations, you’ve just successfully installed WooCommerce! 

WooCommerce has lots of settings, including some that are essential for running a successful online store, such as specifying whether you accept PayPal, Stripe, or Direct Bank Transfer.

Configuring your WooCommerce store is beyond the scope of this tutorial, but you can explore all of WooCommerce’s settings, by selecting WooCommerce > Settings from WordPress’ left-hand menu.

For some extra guidance, you may also want to check out our free Beginner’s Guide to Using WooCommerce course, or Getting Started with WooCommerce series. 

Stock Those Shelves: Creating Your First WooCommerce Product

In this tutorial, we’ll be creating various layouts so it’s important you test these layouts as you’re building them.

If you already have a catalog of WooCommerce products, then you can use these products to see exactly how your store will look once it’s fully-stocked. However, if you’re building your very first store, then I’d recommend taking a few minutes to create a handful of products that you can use in your layouts.

To create a product, select Products > Add New from WordPress’ left-hand menu. 

You can now open the Product data dropdown and specify the kind of product that you want to create: 

  • Simple product. This is any product that’s shipped and has no options. 
  • Grouped Product. This is a collection of related products that all fall into the simple product category. 
  • External/Affiliate product. This is a product that’s sold elsewhere, but is featured on your website
  • Variable product. This is a product that has variations, for example a jacket that’s available in different sizes and colors. 

For the purposes of this tutorial, I’ll be creating a Simple Product:

  • Give your product a name and write a short description. 

You can now assign this product to a product category, for example if you’re creating a clothing store then your categories might include Hoodies & SweatshirtsOccasionwear, and Shoes & Boots. Assuming that you want to create a new category, scroll to the Product categories section and select Add new category.

You can assign WooCommerce products to multiple product categories
  • Give your category a name, and then click Add new category.
  • In the Product categories section, select the category that you just created.

Already know all the categories that you want to feature on your website? You can implement all of these categories in advance, by repeating the above steps. You may also want to separate your categories into parent and child categories, for example I’m creating a Kitchen parent category and assigning it the following child categories: Bar stools, Dining chairs and Kitchen stools.

Im creating a Kitchen parent category and assigning it the following child categories Bar stools Dining chairs and Kitchen stools
  • In Product tags, enter all the tags that you want to use, and then click Add.
  • Next, add a featured image by scrolling to Product Image and then selecting Set product image.
  • Choose the image that best represents your product. 

Do you have multiple images that you want to use for this particular product? You can create a product gallery, by scrolling to the Product gallery section, selecting Add product gallery images, and then choosing the images that you want to use. 

  • In the Product Data section, make sure General is selected.
To test your Elementor layouts youll need to create at least one product
  • In Regular price, enter how much this product should cost. 
  • Next, select the Inventory tab. 
  • In SKU, enter this product’s Stock Keeping Unit, which is the number you’ll use to track this product in your inventory. 
  • Select the Enable stock management at product level checkbox.
Find the Manage stock checkbox and click to select
  • In Stock quantity, enter the number of units that you currently have in stock. 
  • WooCommerce can email you when you’re running low on stock. If you want to receive these low stock notifications, then enter the desired value into Low stock threshold. You’ll now receive an email as soon as your stock reaches this threshold.  
  • In the left-hand menu, select Shipping.
  • In Weight, enter this product’s weight. 
  • In Dimensions, enter the product’s length, width and height. 
  • When you’re happy with the information you’ve entered, click Publish.

To see the product you’ve just created, select View Product.

Ive created a simple WooCommerce product using the Single Product settings

Rinse and repeat to create multiple products. To really put your layouts to the test, you should try to create a variety of products, spanning multiple categories. 

Organize Your Store With Product Categories

After creating all your products, it’s worth taking a few minutes to review your product categories.

By taking stock of all the categories you’ve created, you can identify any categories that need grouping into a parent category, or you might realize that you’ve forgotten to create a few important categories.

To review your categories, select Product > Categories from WordPress’ left-hand menu.

I’ve already created a Kitchen parent category that features my Bar stools, Dining chairs and Kitchen stools child categories, but now I’m going to create some additional parent categories: Office, Bedroom, Living Room and Garden.

To create a parent category:

  • In Add New Category, enter the name of the parent category that you want to create.

At this point you may want to review the parent and child categories that youve created
  • Make sure Parent category is set to None.
  • Click Add new category.
  • Find the first child category that you want to assign to this parent category, and then select the child’s accompanying Edit link.
  • Open the Parent category dropdown and select the parent category that you just created.
You can assign any WooCommerce child category to a parent category
  • Click Update.

Rinse and repeat for every child category that you want to assign, and every parent category that you want to create. 

Creating an Amazon-Style Product Menu

Next, I’m going to give customers the ability to filter products based on product category. In this section, we’ll build a dropdown menu, where selecting a parent category displays all the child categories associated with that parent.

Help visitors explore your online store with an Amazon-style dropdown menu

This kind of parent/child product menu is a staple of many eCommerce sites, including heavyweights such as Amazon and eBay. By adding this kind of product menu to your eCommerce site, you can give visitors a familiar way to explore everything that your store has to offer. 

By default, it’s not possible to add product categories to a WordPress menu. Before building our menu, we need to edit these default settings: 

  • In WordPress’ left-hand menu, select Appearance > Menus.
  • Towards the top of the screen, find the Screen options section, and click to expand.  
  • Find Product categories, and select it.

You can now add product categories to your menus, so let’s create our menu:

  • Give your menu a name, and then click Create new menu.
  • Click to expand the Product categories section.
You can add product categories to your WordPress dropdown menu
  • Select all the product categories that you want to add to your menu.
  • Click Add to menu. All of the selected parent and child categories will now be added to the Menu structure section. 
  • Since we’re creating a dropdown menu, you need to grab each child category and drop it beneath its associated parent category.
  • Next, grab each child category and drag it slightly to the right, so that it appears indented beneath its parent. Release the child category, and it should now be permanently indented.
  • Repeat this indenting process for every child category. 
Drag categories to the right to create an indented effect
  • If you want to change where an item appears in your menu, then grab it in Menu structure and drop it into a new location. 
  • When you’re happy with how your menu is setup, click Save Menu.
  • To place this menu on your website, click the Manage Locations tab. 
  • Assuming that you want this menu to appear across your entire website, open the Top Menu dropdown and select the menu that you just created.
  • Click Save Changes.

This parent/child menu will now appear across your eCommerce store, making it easy for customers to explore your product categories. 

Designing a WooCommerce Store With Elementor Pro

At this point, you have all the elements that you need for a successful eCommerce store: a WooCommerce installation, some products, and a menu that visitors can use to explore your store.

However, there’s one final piece of setup that we need to perform. By default, you can only use Elementor to design posts and pages, and not products. 

Before we move onto the next section, we need to extend Elementor’s capabilities to include WooCommerce products: 

  • In WordPress’ left-hand menu, select Elementor > Settings.
  • In Post Types, select Products.
Give Elementor access to your Products post types
  • Select Save Changes.

You can now use Elementor to design customized product pages—so let’s get started! 

Using Elementor Pro’s Ready-Made Templates

Elementor provides a range of templates that can give your website a completely new look and feel, and sometimes even add extra functionality. These professionally-designed templates can take much of the work out of building an eCommerce store, so let’s start by exploring these pre-built templates. 

In this section, I’ll show you how to customize two pages that WooCommerce creates automatically: your product archive and product pages. 

Redesigning WooCommerce’s Single Product Page

Product pages are how visitors view and ultimately purchase your products, so it’s vital they look good and provide all the functionality your customers need. 

Elementor Pro has a range of product page templates, so let’s put these templates to good use:

  • In WordPress’ left-hand menu, select Templates > Theme Builder.
  • Select the Add New button.
  • Open the Template type dropdown and select Single Product.
  • Give your template a name, and then click Create Template.
  • Elementor Pro will now display all the available Single Product templates; select the template that you want to use.
Elementor Pro provides a range of professionally-designed single product pages that you can use in your WooCommerce store

This template will now open in the Elementor editor. At this point, you can make changes to your chosen template, but for now we’ll just go ahead and publish our chosen template: 

  • In the Elementor Panel, select Publish.
  • In the subsequent popup, open the Include dropdown and make sure Products is selected. 
Youll need to apply your chosen single product template to all of your Product pages
  • Click Save & Close.

This template will now be rolled out across all your product pages. 

Building a Custom WooCommerce Product Archive

The product archive is a list containing all your products in a single location. When you setup WooCommerce, this plugin added a product archive to your website automatically, although the archive’s look and feel will vary depending on your WordPress theme. 

You can also use Elementor to re-design your Product Archive page which WooCommerce creates automatically

Not a fan of this automatically-generated product archive? You can quickly and easily give it a makeover, using any of Elementor’s product archive templates:

  • In WordPress’ left-hand menu, select Templates > Theme Builder.
  • Select the Add New button.
  • Open the Template type dropdown and select Product Archive.
  • Give your template a name, and then click Create Template.

Elementor Pro will now display all the available Product Archive templates; select the template that you want to use.

If youre using Elementor Pro then youll have access to a range of professionally-designed Product Archive templates
  • Your chosen template will now open in the Elementor editor.
  • If you’re happy with your chosen template, then you can publish it by clicking the green Publish button. 
  • In the subsequent popup, open the Include dropdown and select All Product Archives
  • Click Save and close.

This updated product archive will now appear on your website. 

Conclusion 

In post, we created a complete online store. This WooCommerce site has everything you need to start selling products, all wrapped up in your choice of Elementor Pro’s professionally-designed templates. 

If you’re not entirely happy with your site’s look and feel, then why not try a different Elementor Pro template? Or, you could check out our follow-up post, where I’ll show you how to use Elementor Template Kits, and how to create your own template from scratch. 

from Envato Tuts+ Code – WordPress https://ift.tt/36ebYjx