Connect with us

WORDPRESS

How to Show Product Recommendations in WordPress (7 Easy Ways)

Published

on

How to Show Product Recommendations in WordPress (7 Easy Ways)

Do you want to show product recommendations in WordPress?

Displaying product recommendations can encourage users to make additional purchases, boosting your sales and revenue. It can also improve user engagement by convincing visitors to stay longer on your site.

In this article, we will show you how to easily show product recommendations in WordPress, step by step.

Show Product Recommendations in WordPress

Why Show Product Recommendations in WordPress?

If you have an online store, then showing product recommendations on the cart or checkout page can increase the average order value on your site.

By suggesting relevant products, you can help customers discover items they might be interested in, leading to a more satisfying shopping experience.

For instance, if a customer purchases a hat in your clothing store, you can recommend sunglasses because both these options protect from the sun and are often bought together.

You can show these recommendations as a slide-in cart, order bump, upsell, or cross-sell products, and even send automated emails to users upon purchase to gain traction.

Having said that, let’s take a look at how to easily show product recommendations in WordPress.

For this tutorial, we will be using multiple methods, so you can use the links below to jump to the one of your choice:

Method 1: Show Product Recommendations on the Products Page

If you want to show relevant recommendations on the products page, then this method is for you.

You can easily do this using the default upsell feature in WooCommerce, so you won’t need any other plugin for this method.

Upsells basically means recommending a more premium version of the product the user is purchasing. However, you can also add other relevant products in this section.

First, you must visit the Products » Add New page from the WordPress dashboard to create a new product. You can also edit an existing one if you want.

How to add a new product in WooCommerceHow to add a new product in WooCommerce

Once you have added the details, scroll down to the ‘Product Data’ section and switch to the ‘Linked Products’ tab from the left column.

Here, you can add different products to your WooCommerce store in the ‘Upsell’ section. To do this, just enter the name of the product, and you will be shown the search results from which you can choose a product to add.

Add products in the Upsell sectionAdd products in the Upsell section

After that, scroll back to the top and click the ‘Publish’ button to store your settings and make your product live.

Now, visit your WooCommerce store to view the upsell products under the ‘You may also like’ section.

View upsell productsView upsell products

For more details, see our tutorial on how to upsell products in WooCommerce.

Method 2: Show Product Recommendations on the Cart Page

If you want to display product recommendations on the cart page just as the customer is moving to the checkout, then this is the method to use.

WooCommerce offers the default cross-sell option that allows you to show relevant and complementary products without using any plugin.

First, open the product of your choice in the WooCommerce editor and scroll down to the ‘Product Data’ section.

Here, switch to the ‘Linked Products’ tab where you can add relevant products to be displayed on the carts page in the ‘Cross-sells’ section.

Add products in the cross sell sectionAdd products in the cross sell section

Once you are done, just click the ‘Publish’ or ‘Update’ button at the top to store your settings.

Now, visit your store and add a product in the cart to head over to the Cart page. Here, you will notice that the product recommendations are displayed in the ‘You may be interested in…’ section.

Cross sell product recommendations previewCross sell product recommendations preview

Method 3: Show Product Recommendations as a Sliding Cart

You can use this method if you want to show product recommendations in a sliding cart.

FunnelKit is a popular WooCommerce plugin that lets you add a sliding cart to your store and also show relevant recommendations within this cart to encourage users to make more purchases.

First, you need to install and activate the Sliding WooCommerce Cart by FunnelKit plugin. For details, see our tutorial on how to install a WordPress plugin.

Upon activation, head to the FunnelKit » Cart page and toggle the ‘Enable Cart’ switch to ‘On.’

Enable sliding cartEnable sliding cart

After that, you can select the sliding cart visibility, icon position, coupon field, summary, and checkout settings from the section below. For more details on this, see our tutorial on how to easily add a sliding cart in WooCommerce.

Once satisfied, you must switch to the ‘Upsells’ column from the left and toggle the ‘Enable Cart Upsells’ switch to ‘On.’

Note: Keep in mind that you will need the pro version of the plugin to unlock the upsells feature.

How to add upsells and cross-sells to WooCommerceHow to add upsells and cross-sells to WooCommerce

This will open new settings on the page from where you can configure the display layout for product recommendations. You will be able to see a preview for each layout style on the right corner of the screen.

After that, you must select if you want to show cross-sell or upsell products as recommendations. You can also choose the ‘Both’ option.

Then, you can add a heading to be displayed at the top of product recommendations and choose the number of recommendations to be displayed.

Configure upsell and cross sell settingsConfigure upsell and cross sell settings

Once that is done, scroll down to the ‘Upsells and Cross-Sells’ section to view the list of all the products on your online store.

From here, expand a product’s tab and click the ‘Add Upsell’ or ‘Add Cross Sell’ button to add recommendations.

Remember that upsell products are like the premium version of the product that the customer has added to the cart, while cross-sell products are the ones that are related to the product the user is purchasing.

FunnelKit's advanced conversion featuresFunnelKit's advanced conversion features

Upon clicking on one of the buttons, a popup will open on the screen from where you can search and add the product that you want to be displayed in the recommendations.

You can follow the same process for all the products on your online store.

Adding a linked product on your online storeAdding a linked product on your online store

Once you are done, just click the ‘Save’ button at the top to store your settings.

You can now visit your WooCommerce to view the sliding cart with product recommendations.

An example of a cross-sell promotion, created using FunnelKit Funnel BuilderAn example of a cross-sell promotion, created using FunnelKit Funnel Builder

Method 4: Show Product Recommendations as Order Bumps

Use this method to display relevant product recommendations as an order bump, which is a technique used on the checkout page to show relevant products to customers at a lower price point.

This can often convince them to buy it right before finishing the checkout process.

To create order bumps, you will need to install and activate the Funnelkit Builder. For details, see our step-by-step guide on how to install a WordPress plugin.

Note: FunnelKit Builder has a free plan, but you will need the pro version to unlock the order bumps feature.

Upon activation, visit the FunnelKit » Settings page from the admin sidebar and switch to the ‘License’ tab in the left column.

Then, enter your license key and click the ‘Activate’ and ‘Save Changes’ button to store your settings. You can get this information from your account on the FunnelKit website.

Activating the FunnelKit license keyActivating the FunnelKit license key

Next, you will need to create a checkout page on your WooCommerce store using FunnelKit. For more information on this, see our tutorial on how to customize your WooCommerce checkout page.

Once that is done, go to the FunnelKit » Store Checkout page from the WordPress dashboard and click the ‘Add Order Bump’ button.

Clicking the Add Order Bump button on FunnelKitClicking the Add Order Bump button on FunnelKit

This will open a popup where you must add a name for the order bump that you are creating and click the ‘Add’ button.

The plugin will now add the order bump to your checkout funnel. Here, click the ‘Edit’ button to start the process.

Clicking the Edit button on an order bump in FunnelKitClicking the Edit button on an order bump in FunnelKit

This will take you to a new screen where you must click the ‘Add Product’ button to open a popup.

Here, just type and add the products that you think will complement the buyers’ purchase and then click the ‘Add Product’ button.

Adding products to a FunnelKit order bumpAdding products to a FunnelKit order bump

Next, you can select a discount type for the products that you chose from the dropdown menu and can even offer more than one quantity for each item to customers.

Once you have done that, just click the ‘Save Changes’ button to store your settings.

Configuring the product offer's discount type in FunnelKitConfiguring the product offer's discount type in FunnelKit

Then, scroll down to the ‘Order Bump Settings’ section, where you can select the order bump’s behavior and display position during checkout.

For instance, if you select the  ‘Add Order Bumps to Cart Items’ option as the bump behavior, then customers will be suggested these products to add as an extra purchase.

However, when choosing ‘Replace Order Bumps with a Cart Item (used for upgrades)’, you give customers the option to replace their purchase by upgrading to a higher-end version of the product.

FunnelKit's Order Bump Settings sectionFunnelKit's Order Bump Settings section

After that, switch to the ‘Design’ tab from the top. Here, you can configure how the order bump offer will look to customers.

You can add a title and description and change the text colors, background color, toggle color, border, font size, price display, and box padding and width. Once you are satisfied, just click the ‘Save’ button to store your settings.

Clicking Choose Skin in the FunnelKit Order Bump Design tabClicking Choose Skin in the FunnelKit Order Bump Design tab

Now, it is time for you to switch to the ‘Rules’ tab, where you have to click the ‘Add Rules’ button.

This will display some new settings on the screen that you can use to display the order bump for specific products. The rules can be based on the cart, customer, geography, or date and time.

For example, if you want to display the order bump on the checkout for a specific product, then you must choose the ‘Customer Product Purchased’ option from the dropdown menu on the right.

After that, just add the product name in the text field on the right and click the ‘Save Changes’ button to store your settings.

An example of the order bump trigger rules in FunnelKit using the AND buttonAn example of the order bump trigger rules in FunnelKit using the AND button

Now, visit your WooCommerce to view the order bump on the checkout page of a specific product.

If you want to know more about trigger rules for order bumps, then you can see our beginner’s guide on how to create an order bump in WooCommerce.

What FunnelKit's order bump looks like in checkoutWhat FunnelKit's order bump looks like in checkout

Method 5: Offer Post-Purchase Recommendations With Emails

If you want to send a post-purchase recommendation email to customers, then this method is for you. For this, you will need FunnelKit Automations, which is a powerful automation plugin.

You can create a workflow with it that will automatically send a recommendation email to users sometime after their purchase.

First, you need to install and activate the FunnelKit Automations plugin. For instructions, see our tutorial on how to install a WordPress plugin.

Note: You can sign up for the FunnelKit free plan to do this.

Upon activation, visit the FunnelKit Automations » Automations page from the WordPress dashboard and click the ‘Create Automation’ button.

Click the Create Automation buttonClick the Create Automation button

This will take you to the ‘Add Automations’ page, where you will see a list of premade templates offered by the plugin.

From here, switch to the ‘WooCommerce’ tab and select the ‘Post Purchase Sequence’ template.

Select post purchase sequence templateSelect post purchase sequence template

Doing that will open a preview of the automated workflow in a new tab from where you must click the ‘Import Recipe’ button.

This will open a new prompt. Here, add the name for the workflow that you are making and click the ‘Create’ button.

Import a recipe and add a name for itImport a recipe and add a name for it

The FunnelKit Automation editor will now be launched on the screen. You can start by clicking on the ‘Order Created’ tab. This is the trigger that will start the workflow.

A popup will appear on your screen, where you will have to select the order status. For instance, if you select the ‘Processing’ option, then the email will be sent to users after they place their order.

However, when choosing the ‘Completed’ option, customers will receive an email after they get the order at their address. Just configure these settings and click the ‘Save’ button.

Select the order statusSelect the order status

Once you do that, click the ‘Delay’ tab.

This will open the prompt on the screen where you can choose how long after the purchase the email should be sent to users. For example, you can choose 1 hour from the dropdown menu.

After that, click the ‘Save’ button to store your settings.

Choose a delay period for your emailChoose a delay period for your email

Next, click the ‘Action’ tab in the editor to open its settings in the popup. Here, you can start by configuring the subject line of the email.

Then, click the ‘Merge Tags’ option at the top.

Click the Merge tags buttonClick the Merge tags button

On doing that, a popup will open up where you have to switch to the ‘Orders’ tab.

Next, scroll down to the ‘Order Cross Sells’ option and click the copy button next to it.

Click the Copy button next to the Cross Sells optionClick the Copy button next to the Cross Sells option

The prompt will now automatically close, and you can scroll down to the text builder in the ‘Action’ popup.

Here, you can change the email content according to your liking and add the cross-sells tag. Now, users will see a list of relevant products that you added for the purchased product using WooCommerce or FunnelKit.

Once you are done, just click the ‘Save and Close’ button.

Add the merge tag in the text editor and click the 'Save' buttonAdd the merge tag in the text editor and click the 'Save' button

You can now view your automated workflow again to see if you want to make any changes.

After that, toggle the ‘Inactive’ switch at the top to ‘Active’.

Activate the workflowActivate the workflow

Now, your customers will receive an email with product recommendations exactly an hour after purchase.

Recommended products email previewRecommended products email preview

If you want to show product recommendations in popups, then this method is for you.

For this, you will need OptinMonster, which is the best lead generation and conversion optimization tool on the market. It allows you to create popups, gamified spin the wheels, banners, and floating bars using its premade templates and visual editor.

It also has exit intent technology that lets you display product popups to users just as they are planning to leave your store.

To create a product recommendation popup, you will need to create an account on the OptinMonster website.

Click the Get OptinMonster Now buttonClick the Get OptinMonster Now button

Once you do that, open your WordPress dashboard and install the free OptinMonster plugin, which will connect your website with the tool.

Upon activation, the OptinMonster setup wizard will open up, where you must click the ‘Connect Your Existing Account’ button. You can then follow the onscreen instructions to complete the process.

Connect your existing accountConnect your existing account

Next, visit the OptinMonster » Settings page and click the ‘Auto Generate Keys + Connect WooCommerce’ button.

If you don’t do this, then campaigns created with OptinMonster won’t be shown in your store.

Auto generate keys and connect WooCommerceAuto generate keys and connect WooCommerce

Once that is done, head over to the OptinMonster » Templates page from the WordPress dashboard and select ‘ Popup’ as the campaign type.

Next, click the ‘Use Template’ button for a template that you want to use. For this tutorial, we have used the ‘Product Recommendations’ template.

Choose a template for the product recommendation popupChoose a template for the product recommendation popup

This will open a prompt where you can add a name for the campaign that you are creating.

Once you do that, OptinMonster’s drag and drop builder will be launched on the screen. Here, you can use different blocks to add an image, details, and CTA for a product. For more instructions, see our tutorial on how to create a WooCommerce popup to increase sales.

Then, click the ‘Product Details’ button in the popup preview to open its settings in the left column. You can now add the URL for the product’s page in the ‘Redirect URL’ field.

Add product URL in the popupAdd product URL in the popup

Now, switch to the ‘Display Rules’ tab from the top. Here, you will be setting conditions for the product recommendation popup appearance.

To do this, open the ‘Time on Page’ dropdown menu and choose the ‘Page Targeting’ option.

This will allow you to show your popup to users on a specific product’s page, letting you cross-sell or upsell the product.

Upon choosing this option, select ‘contains’ from the dropdown menu in the middle and then add the URL of the product page where you want to display the specific recommendation popup.

Choose page targeting for product recommendation popupChoose page targeting for product recommendation popup

You can also choose the ‘Exit Intent’ option to display the popup as the user is about to leave your store.

If you want, you can change the feature’s intensity to show it to more customers.

Use exit intent technology for popupsUse exit intent technology for popups

Finally, switch to the ‘Publish’ tab from the top.

Here, click the ‘Publish’ button to make your popup live. Then, click the ‘Save’ button to store your settings.

Publish the product recommendations popupPublish the product recommendations popup

You can now visit your online store to view the product recommendations popup in action.

If you selected a specific page for the popup, then you must head to that page to view the results.

Product recommendations popup previewProduct recommendations popup preview

Method 7: Display Product Recommendations in Easy Digital Downloads

If you sell digital downloads on your online store, then the above methods may not be suitable for you.

In that case, you can use Easy Digital Downloads, which is the best plugin for selling digital goods, to show product recommendations.

First, you need to install and activate Easy Digital Downloads. For details, see our guide on how to install a WordPress plugin.

Note: EDD has a free plan, but you will need the pro version to unlock the Cross-sell and Upsell add-on.

Upon activation, visit the Downloads » Settings page from the WordPress admin sidebar to enter your license key. You can get information from under your account on the EDD website.

Then, click the ‘Activate’ button.

Add a license key for your easy digital downloads pluginAdd a license key for your easy digital downloads plugin

Once you have done that, you must set up your store to start selling products. For instructions, see our beginner’s guide on how to sell digital downloads in WordPress.

Next, head over to the Downloads » Extensions page and locate the ‘EDD Cross-sell and Upsell’ addon, and click the ‘Install’ button under it.

Once the addon is installed, it will automatically show an activated toggle like this:

Activate the EDD Cross-sell Upsell addonActivate the EDD Cross-sell Upsell addon

Now, it’s time for you to visit the Downloads » Settings page and switch to the ‘Extensions’ tab.

From here, you can configure the heading for upsell and cross-sell products. Remember that the upsell products are like a premium version of the product the user is purchasing, while cross-sell products are the ones that are related to the purchased products.

You can add your headings according to your liking and also adjust the number of product recommendations to be shown from the dropdown menus.

After that, just click the ‘Save Changes’ button to store your settings.

Add headings for cross sell and upsell sectionsAdd headings for cross sell and upsell sections

Now, open the digital product where you want to add product recommendations.

Once the block editor appears, simply scroll down to the ‘Cross-sell and Upsell’ section, where you can add custom headings for each section.

If you don’t add a heading, then the default headings you configured will be added to the page.

After that, select the upsell product recommendations from the dropdown menu. You can follow the same process for cross-sell products as well.

Add upsell and cross-sell productsAdd upsell and cross-sell products

Once you are done, just click the ‘Update’ or ‘Publish’ button to store your settings.

Now open the product page on the website front-end, and you will see that the upsell product will be recommended on the product page.

Upsell product recommendation previewUpsell product recommendation preview

On the other hand, the cross-sell products will be recommended to users when they are on the checkout page.

This is how the cross-sell products looked on our demo website.

Cross-sell product recommendation previewCross-sell product recommendation preview

Bonus: Properly Set Up eCommerce Tracking In WordPress

Once you have added product recommendations, it is time for you to set tracking for your online store to find your top-selling products, see which campaigns perform the best, and understand how people find and use your website.

This will help you find what kind of products customers are likely to buy along with others in your store. For example, you may notice that anyone who is buying sunscreen is also purchasing a hat.

With this information, you can show relevant product recommendations to customers and boost your conversions.

To do this, you will need MonsterInsights, which is the best Google Analytics solution on the market.

MonsterInsights WebsiteMonsterInsights Website

Upon plugin activation, simply connect your website with Google Analytics. For details, see our tutorial on how to install Google Analytics in WordPress.

Then, head over to the Insights » Addons page from the WordPress dashboard and install the eCommerce addon.

Enable eCommerce trackingEnable eCommerce tracking

Now visit the Insights » Settings page and switch to the ‘eCommerce’ tab. Here, you must toggle the ‘Use Enhanced eCommerce’ switch to ‘On.’

Once you do that, MonsterInsights will start recording analytics and find the data you need, including conversion rate, transactions, revenue, average order value, and top products.

Use enhanced ecommerce optionUse enhanced ecommerce option

For details, see our tutorial on how to properly set up eCommerce tracking in WordPress.

We hope this article helped you learn how to show product recommendations in WordPress. You may also like to see our beginner’s guide on how to pass payment processing fees to customers in WordPress and our top picks for the best email marketing services to grow your email list.

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



Source link

Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address

WORDPRESS

Making a WordPress plugin extensible with PHP classes

Published

on

By

Making a WordPress plugin extensible with PHP classes

WordPress plugins can be extended with additional functionality, as demonstrated by popular plugins like WooCommerce and Gravity Forms. In the article “Architecting a WordPress plugin to support extensions,” we learn there are two primary ways to make a WordPress plugin extensible:

  1. By setting up hooks (actions and filters) for extension plugins to inject their own functionality
  2. By providing PHP classes that extension plugins can inherit

The first method relies more on documentation, detailing available hooks and their usage. The second method, by contrast, offers ready-to-use code for extensions, reducing the need for extensive documentation. This is advantageous because creating documentation alongside code can complicate the plugin’s management and release.

Providing PHP classes directly effectively replaces documentation with code. Instead of teaching how to implement a feature, the plugin supplies the necessary PHP code, simplifying the task for third-party developers.

Let’s explore some techniques for achieving this, with the ultimate goal of fostering an ecosystem of integrations around our WordPress plugin.

Defining base PHP classes in the WordPress plugin

The WordPress plugin will include PHP classes intended for use by extension plugins. These PHP classes might not be used by the main plugin itself but are provided specifically for others to use.

Let’s see how this is implemented in the open-source Gato GraphQL plugin.

AbstractPlugin class:

AbstractPlugin represents a plugin, both for the main Gato GraphQL plugin and its extensions:

abstract class AbstractPlugin implements PluginInterface
{
  protected string $pluginBaseName;
  protected string $pluginSlug;
  protected string $pluginName;

  public function __construct(
    protected string $pluginFile,
    protected string $pluginVersion,
    ?string $pluginName,
  ) {
    $this->pluginBaseName = plugin_basename($pluginFile);
    $this->pluginSlug = dirname($this->pluginBaseName);
    $this->pluginName = $pluginName ?? $this->pluginBaseName;
  }

  public function getPluginName(): string
  {
    return $this->pluginName;
  }

  public function getPluginBaseName(): string
  {
    return $this->pluginBaseName;
  }

  public function getPluginSlug(): string
  {
    return $this->pluginSlug;
  }

  public function getPluginFile(): string
  {
    return $this->pluginFile;
  }

  public function getPluginVersion(): string
  {
    return $this->pluginVersion;
  }

  public function getPluginDir(): string
  {
    return dirname($this->pluginFile);
  }

  public function getPluginURL(): string
  {
    return plugin_dir_url($this->pluginFile);
  }

  // ...
}

AbstractMainPlugin class:

AbstractMainPlugin extends AbstractPlugin to represent the main plugin:

abstract class AbstractMainPlugin extends AbstractPlugin implements MainPluginInterface
{
  public function __construct(
    string $pluginFile,
    string $pluginVersion,
    ?string $pluginName,
    protected MainPluginInitializationConfigurationInterface $pluginInitializationConfiguration,
  ) {
    parent::__construct(
      $pluginFile,
      $pluginVersion,
      $pluginName,
    );
  }

  // ...
}

AbstractExtension class:

Similarly, AbstractExtension extends AbstractPlugin to represent an extension plugin:

abstract class AbstractExtension extends AbstractPlugin implements ExtensionInterface
{
  public function __construct(
    string $pluginFile,
    string $pluginVersion,
    ?string $pluginName,
    protected ?ExtensionInitializationConfigurationInterface $extensionInitializationConfiguration,
  ) {
    parent::__construct(
      $pluginFile,
      $pluginVersion,
      $pluginName,
    );
  }

  // ...
}

Notice that AbstractExtension is included within the main plugin, providing functionality to register and initialize an extension. However, it is only used by extensions, not by the main plugin itself.

The AbstractPlugin class contains shared initialization code invoked at different times. These methods are defined at the ancestor level but are invoked by the inheriting classes according to their lifecycles.

The main plugin and extensions are initialized by executing the setup method on the corresponding class, invoked from within the main WordPress plugin file.

For instance, in Gato GraphQL, this is done in gatographql.php:

$pluginFile = __FILE__;
$pluginVersion = '2.4.0';
$pluginName = __('Gato GraphQL', 'gatographql');
PluginApp::getMainPluginManager()->register(new Plugin(
  $pluginFile,
  $pluginVersion,
  $pluginName
))->setup();

setup method:

At the ancestor level, setup contains the common logic between the plugin and its extensions, such as unregistering them when the plugin is deactivated. This method is not final; It can be overridden by the inheriting classes to add their functionality:

abstract class AbstractPlugin implements PluginInterface
{
  // ...

  public function setup(): void
  {
    register_deactivation_hook(
      $this->getPluginFile(),
      $this->deactivate(...)
    );
  }

  public function deactivate(): void
  {
    $this->removePluginVersion();
  }

  private function removePluginVersion(): void
  {
    $pluginVersions = get_option('gatographql-plugin-versions', []);
    unset($pluginVersions[$this->pluginBaseName]);
    update_option('gatographql-plugin-versions', $pluginVersions);
  }
}

Main plugin’s setup method:

The main plugin’s setup method initializes the application’s lifecycle. It executes the main plugin’s functionality through methods like initialize, configureComponents, configure, and boot, and triggers corresponding action hooks for extensions:

abstract class AbstractMainPlugin extends AbstractPlugin implements MainPluginInterface
{
  public function setup(): void
  {
    parent::setup();

    add_action('plugins_loaded', function (): void
    {
      // 1. Initialize main plugin
      $this->initialize();

      // 2. Initialize extensions
      do_action('gatographql:initializeExtension');

      // 3. Configure main plugin components
      $this->configureComponents();

      // 4. Configure extension components
      do_action('gatographql:configureExtensionComponents');

      // 5. Configure main plugin
      $this->configure();

      // 6. Configure extension
      do_action('gatographql:configureExtension');

      // 7. Boot main plugin
      $this->boot();

      // 8. Boot extension
      do_action('gatographql:bootExtension');
    }

    // ...
  }
  
  // ...
}



Source link

Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address
Continue Reading

WORDPRESS

A Small Business Guide to Building An E-Commerce Website | CO

Published

on

By

A Small Business Guide to Building An E-Commerce Website | CO

Besides costs, consider other equally significant elements, like integrations with other tech, payment acceptance, the level of skill required to use the software, and security. — Getty Images/Valeriy G

Creating an e-commerce website is a daunting task. Yet, it’s a project you can tackle with a solid strategy, an understanding of the best practices, and a step-by-step guide. More importantly, starting with the right online site builder and e-commerce platform prevents future obstacles, like realizing the software is above your skill level or isn’t built for your revenue model.

We put together a comprehensive guide that walks you through building an e-commerce website from scratch, starting with selecting hosting or e-commerce providers. Then, we will dive into the user experience (UX) and the nitty-gritty details of site navigation, product pages, and related features. Let’s begin with the basics and go from there.

Registering a domain and choosing a hosting provider

You need a domain and web hosting to build an e-commerce site. Each component (the domain, web hosting, and e-commerce functionality) can be purchased through different vendors or a single provider. You should decide whether to bundle or keep these services separate.

Just like brick-and-mortar stores have a physical address, e-commerce shops have domains. You essentially rent an “address” for one to 10 years at a time. Some e-commerce and web hosting services provide a complimentary domain name for the first year when you buy an annual subscription and pay upfront. The renewal fees may be higher, though, than going through a third party.

Free e-commerce stores include a subdomain that isn’t search engine optimized or user-friendly. The URL looks like this: myshop.providername.com. While the URL may not be your first preference, it’ll do for side hustles and startups testing the market or a vendor’s e-commerce platform.

Hosting services power your site and store files, images, and information. Most also offer website builders and themes or templates. Select a provider to meet your security and performance specifications, then add your preferred e-commerce plug-ins, such as WooCommerce.

Alternatively, a web host like Bluehost has an online store package. It comes with the content management system (CMS) WordPress and the e-commerce plug-in WooCommerce preinstalled.

E-commerce platforms like Wix and Shopify supply web hosting with all the subscriptions. These all-in-one systems include site-building tools, page templates, storage, payment processing, and everything needed to start an online shop.

[Read more: Setting Up an E-Commerce Business: A Comprehensive Guide]

Key takeaways for selecting an e-commerce platform

Every experience hinges on your initial technology decision, from how you build your e-commerce website to what credit card processing fees you pay. Not all vendors make it easy to migrate to a new service if you’re unsatisfied, and it’s a resource-intensive job.

Review our guide to choosing the best e-commerce platform and consider the following tips when picking services:

  • Functionality: Ensure the software meets each business requirement by testing its capabilities fully.
  • Integrations: Check for customer relationship management, email marketing, and business phone integrations to see how they work.
  • Skill level: Decide who will access the e-commerce site to build pages, add blog posts, or update pricing. Consider the administrative user interface and site tools.
  • Payment acceptance: Weigh the pros and cons of using an all-in-one service with integrated flat-rate fees versus connecting a gateway from a processing provider.
  • Scalability: Compare step-up plans to understand the value for the money and estimate when you’d need that level. Think in terms of site traffic, storage, and team size.
  • Costs: Besides monthly or annual subscription fees, account for overlooked e-commerce business expenses, like hidden fees for domain privacy or email accounts.
  • Security: Learn how the e-commerce provider protects customer privacy and your online shop from threats. If the vendor manages payment processing, inquire about payment card industry compliance.

Many excellent options exist, so narrowing down your choices is challenging. Fortunately, most vendors offer demos or free trials.

E-commerce software providers

Many excellent options exist, so narrowing down your choices is challenging. Fortunately, most vendors offer demos or free trials.

Here are five web hosting and e-commerce solutions:

  • Wix: This versatile all-in-one platform supports multiple revenue models and industries. Wix provides a complete e-commerce store with abandoned cart recovery and shipping tools. It also includes online booking, ticketing, and virtual services capabilities.
  • Bluehost: A fast-growing business wanting managed WordPress and WooCommerce hosting might consider Bluehost. It could be cheaper to scale for higher traffic and storage needs.
  • Square Online: This solution is for brick-and-mortar businesses that are adding an online store. It connects to other free and paid products, like its point-of-sale system, and it has native payment processing. Square Online caters to the restaurant, retail, and service sectors.
  • WordPress.com: If your e-commerce revenue model prioritizes digital content, subscriptions, or memberships but also wants online store functionality, WordPress.com could be suitable. It’s a fantastic blogging space and ideal for those monetizing their blog.
  • IONOS: This vendor offers online store and website builders for retailers, digital content marketers, and wholesalers. Alternatively, you can configure IONOS servers for Magento, WooCommerce, or PrestaShop hosting.

[Read more: Top Retail and Commerce Trends for 2024 and Beyond]

Choose your e-commerce website builder

Depending on your platform, you will have several options when building your e-commerce site. Generally speaking, most web hosts and e-commerce vendors provide no-code website builders. You drag and drop design elements onto page templates, and the system’s limitations prevent you from making errors that could break the site.

Conversely, artificial intelligence (AI) can handle some or most of the process. After you answer a few questions, an AI site builder creates a multipage e-commerce site. Then, you can customize it and use AI for additional assistance.

Lastly, web developers and designers may prefer to customize elements or create an e-commerce site from scratch using code. This functionality varies by vendor and subscription tier.

E-commerce website design considerations

Have your e-commerce brand elements and assets ready before starting your site build. Decide on a site color scheme, choose a few fonts, and design your logo. When choosing prebuilt templates and themes, look closely at how layouts differ for visual elements. Imagine your buyer’s journey when clicking through the pages.

[Read more: How to Improve the User Experience]

Online store site structure checklist

Use your time efficiently by planning your site on paper. This step helps you avoid site structure and navigation errors that damage user experiences and search engine optimization (SEO). It’s much easier to erase and rework a penciled plan than it is to rename URLs and change menus. Compile tasks into stages, starting with must-have website pages.

Here’s an example of various e-commerce website elements:

  • A homepage welcoming visitors to your e-commerce site.
  • Clearly defined and labeled product categories and subgroups.
  • About and contact pages to earn customer trust.
  • An online store page with a search bar and filter options.
  • Individual product or service pages with images and descriptions.
  • Menu and navigation bars for accessing site content.
  • A footer section to house additional information, like your privacy policy.
  • Frequently-asked-question pages for site visitors and SEO.
  • An email sign-up form for email marketing lists.
  • Testimonials or case studies to demonstrate social proof.
  • Customer account portals for viewing order information.
  • Industry-related features for subscriptions, online bookings, or e-courses.

Best practices for making an e-commerce website

E-commerce site design affects UX and sales. The best thing you can do is learn how to use your CMS or online store platform inside and out. Watch videos, read tutorials, and devise a high-converting website strategy.

When crafting your online store, consider these tips:

  • Stick with your font and color palette throughout your site. Buttons shouldn’t look different on every page, and text shouldn’t resemble cheesy third-party ads.
  • In a world of AI-generated stock images, differentiate your company by producing great product photos. Keep them consistent and show various angles of items.
  • Allow shoppers to check out as guests. Forcing humans to give you personal data isn’t a great way to start a relationship.
  • Enable item previews, save to a wishlist, and product recommendations functionalities when possible. These features are simple ways to increase conversions.
  • Review every page, delete placeholder text, and test all links and forms. Don’t forget to check how the online store functions on all devices.
  • Add meta descriptions to pages and images. Write alt text for photos and only include keywords when doing so improves the user experience.

Shipping products

Order management, inventory tools, and shipping integrations streamline e-commerce operations. Many online platforms centralize administration through dashboards. You can configure shipping rules before or after publishing your site. These let you pick shipping regions, offer local pick up, or apply discounts or free shipping coupons.

[Read more: AI and E-commerce: Simplifying the Sales Process]

Choosing a payment gateway

E-commerce services like Wix and Shopify have built-in payment acceptance capabilities powered by Stripe, a company known for its fraud detection and prevention tools. However, companies with a large global customer base may want to add PayPal, as it works well worldwide for consumers without credit cards.

Buy now, pay later and gift card options appeal to shoppers around the holidays. The former has steep fees, whereas the latter may be an add-on service. Regardless of your chosen methods, the checkout flow must remain frictionless. Limit the number of clicks and keep it to a single page when possible.

Once you connect to a payment processor, your e-commerce website is ready. Then, you can begin the forever process of refining your masterpiece.

CO— aims to bring you inspiration from leading respected experts. However, before making any business decision, you should consult a professional who can advise you based on your individual situation.

Applications are open for the CO—100! Now is your chance to join an exclusive group of outstanding small businesses. Share your story with us — apply today.

CO—is committed to helping you start, run and grow your small business. Learn more about the benefits of small business membership in the U.S. Chamber of Commerce, here.

Apply for the CO—100!

The CO—100 is an exclusive list of the 100 best and brightest small and mid-sized businesses in America. Enter today to share your story and get recognized.

Published



Source link

Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address
Continue Reading

WORDPRESS

Say Hello to the Hosting Dashboard – WordPress.com News

Published

on

By

Say Hello to the Hosting Dashboard – WordPress.com News

One dashboard for managing all your sites and domains.

At WordPress.com, we’re always striving to make your web management experience as seamless as possible. Our latest update marks another significant step in that direction. Today, we’re happy to share a new unified dashboard where you can manage and view your sites and domains. 

Whether you’re a blogger, a small business owner, or a developer, this interface was designed with your needs in mind.

Let’s explore! And if you want to try it out yourself before getting a tour, simply head to WordPress.com/sites.

Navigate multiple sites with ease 

Getting a bird’s-eye view of your WordPress.com sites has never been easier. With our new site management panel, your admin tools have been brought into one place. In addition to finding a comprehensive summary of your site’s plan and storage usage, you also have access to “Quick actions” like “Write post,” “See Jetpack Stats,” and more. 

If your site is on a plugin-enabled Creator or Entrepreneur plan, there are tabs for developer-friendly tools like the latest GitHub deployments, server logs, staging sites, and additional server configuration settings.  

This intuitive new dashboard serves as a convenient bridge between the global view of all your sites and individual site management within wp-admin.

Centralized domain management 

When you reach the Domains page, you’ll see a list of all your domains that are registered with us, regardless of whether they’re connected to a WordPress.com site. In addition to quickly seeing each domain’s expiration date and status (“Active,” “Expiring soon,” etc.), you can easily access DNS records, contact information, and other settings. 

Install and update plugins, too  

WordPress.com's plugin marketplace, shown from within the new hosting dashboard.

When you land on the Plugins page, you’ll immediately find yourself at the built-in marketplace. From here, you can search for new plugins and then add them to one of your sites with ease. You can also manage and create schedules for updating your plugins rather than relying on manual updates.  

One more thing: wp-admin at your fingertips 

For those of you with websites on plugin-enabled plans (Creator and Entrepreneur), you now have the option of seeing the classic wp-admin dashboard instead of the WordPress.com “My Home” page. This is especially useful for folks who utilize multiple WordPress hosts, often on behalf of clients, and want to have the same visual experience between every site. Or, perhaps you learned the ropes with that classic WordPress dashboard and don’t want to leave it behind.  

To enable the wp-admin interface, visit “Settings” → “General” and then scroll down to the “Admin interface style” section. From there you can select “Classic” (wp-admin) or “Default.”  

We’re just getting started

At WordPress.com, we’re continuously refining and improving our platform based on your feedback. This streamlined dashboard is just one step along the bigger journey. We want to hear from you—your insights drive our innovation. So, dive in, explore the new features, and let us know what you think!


Join 111.2M other subscribers

Source link

Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address
Continue Reading

Trending