But what if you’re running a WordPress website? Can you create an eCommerce store on WordPress? Is there an eCommerce solution that’s native to WordPress?

Yes! It’s called WooCommerce.

What Is WooCommerce?

WooCommerce has a funny name, but it’s one of the world’s most popular eCommerce platforms, powering about 40% of all online stores. It was originally developed by WooThemes and was acquired in 2015 by Automattic, the developer of WordPress itself.

WooCommerce is an open-source platform, like WordPress. It’s a free WordPress plugin that helps you create a fully-functional eCommerce store on your WordPress website.

It also has a massive marketplace of extensions, some free and some paid. You can find just about anything you need to set up your eCommerce store and start earning cash. There are also extensions for marketing, payments, shipping, customer service, and more.

Creating an eCommerce Store on WordPress with WooCommerce

To get started with WooCommerce, download and install the plugin like you would any other WordPress plugin.

When you activate the plugin, it will walk you through some initial steps for setting up your store. This will include basics like your location, the types of products you’ll be selling, and other simple configuration options.

Selling Physical Products

WooCommerce allows store owners to sell both physical and digital products. For physical products, you can manage important details like inventory and shipping.

The inventory settings let you set the product’s SKU, stock quantity, backorder options, and how many of each item can be purchased per order.

Out of the box, WooCommerce offers limited shipping options, which include weight, dimensions, and shipping classes for products.

Most eCommerce stores that ship physical products use extensions that let them extend these capabilities, such as bulk stock management and “back in stock” notifications. More importantly, you can get extensions that integrate with popular shipping solutions like Shippo, ShipStation, USPS, UPS, FedEx, and many more.

These shipping extensions provide options that are used by the shipping service. For example, the UPS Shipping Method extension can calculate domestic and international shipping costs for a variety of shipping methods, such as Next Day Air, Ground, or Worldwide Express. It also provides measurement and weight options that UPS uses to calculate shipping prices for packages.

Many store owners are interested in selling customizable products or collections of products in bundles. Check out extensions like Product Bundles and Product Add-Ons, and there are lots of other extensions available to suit your needs.

Selling Digital, Virtual, and Downloadable Products

It’s easy to sell digital, virtual, or downloadable products with WooCommerce. When setting up a product, all you have to do is check the boxes for “Virtual” and/or “Downloadable.”

The “Virtual” checkbox removes the shipping option, and the “Downloadable” checkbox adds a downloadable file setting so that you can select a file for your customer to download. You get the ability to limit the number of times a customer can download the file, and you can set the download ability to expire after a certain number of days.

Another use for virtual products is when you need to sell nontangible items, like access to events. It’s possible to combine WooCommerce and a plugin like The Events Calendar to sell tickets for events that are in-person or online, such as webinars.

If you need to sell access to something else, you can use WooCommerce with an extension like WooCommerce Memberships to sell association memberships, subscriptions to online magazines, or memberships to eLearning sites.

Taking Payments

In order to sell products, you’ll need a payment gateway. Payment gateways process credit card payments for you.

To set up a payment gateway, navigate to WooCommerce > Settings > Payments. When you installed WooCommerce, it came with a few starter payment gateways: WooCommerce Payments, direct bank transfer, check payments, and cash on delivery. These are less frequently used than payment gateways that process credit cards, but you can set them up if they work for your business needs.

Common payment gateways are PayPal, Stripe, Authorize.net, Affirm Payments, and Klarna Payments, and there are extensions available for all of these.

Before you take a customer’s credit card, you might want to offer a coupon or a discount. WooCommerce has a built-in coupon section where you can create coupon codes. For each coupon code, you have the ability to set the type of discount, the coupon amount, an expiration date, and other usage restrictions.

And, of course, WooCommerce makes it easy to offer even more coupon options with extensions. You can create coupons for groups of people, free gift coupons, store credits, and more.

Customizing Your eCommerce Store’s Design

What about your store’s design?

WooCommerce works with your current WordPress theme, so you can set up your store without changing your website’s design. There are also WooCommerce themes that work especially well if your entire site is dedicated to a store.

It’s also common for theme developers to override aspects of the design of WooCommerce by making copies of the plugin’s template files and changing them. This is developer-level work and involves changing HTML, CSS, and PHP.

This can be a good investment because it will allow you to change the design of WooCommerce elements like the shopping cart, the order confirmation page, or the automated order confirmation emails. Get started with this documentation.

Marketing Your eCommerce Store

Marketing is a big topic in the world of eCommerce. After all, what’s the use of having an eCommerce store if nobody shows up?

Installing WooCommerce will give you a “Marketing” tab on the sidebar in WordPress. Open that and you’ll find a list of recommended marketing extensions.

Email is a long-standing part of marketing, and WooCommerce recommends MailPoet as the official solution. MailPoet lets you create newsletters, promotional campaigns, automated follow-up emails, and cart abandonment recovery emails.

There are social media extensions for Facebook, Pinterest, and TikTok that will help you promote your store on those platforms. There are also extensions for services like MailChimp, Trustpilot, Zapier, Google Ads, and many more.

Conclusion

If you want to create an eCommerce store on WordPress, WooCommerce is the way to go. It provides a comprehensive solution for selling physical products and downloadable products. Plus, WooCommerce simplifies taking payments, creating a store design, and marketing your shop.

WebDevStudios is well-experienced with eCommerce projects. We would love to hear about your WooCommerce store. Reach out to us and tell us how we can help you.

The post Creating an eCommerce Store on WordPress appeared first on WebDevStudios.

Previously, this series covered WP Search with Algolia settings and index management (Part 1) and template customization (Part 2). If you haven’t read either, it’s worth going back to them since today’s blog post builds on the code provided in those.

Let’s begin.

Facet(s) configuration

Algolia comes with many useful widgets and facets for integrating InstantSearch with your business or website, allowing you to create robust UI for your users. Find quick demos of all of them over at their Algolia Showcase.

By default, WP Search with Algolia (WPSwA) makes use of the following widgets:

• Searchbox: The user types in a query
• Stats: General statistics regarding the current query
• Hits: The results for the current query
• Pagination: Navigation to move through any paged results
• Menu: General list menu
• Hierarchical menu: Menu that will nest items based on parent/child hierarchy
• Refinement list: List of content types that can further refine results
• poweredBy: A touch of branding when applicable

You could also add some extra useful widgets like a “sort by” dropdown, a “clear all” toggle to clear currently applied refinements, numeric menus, range inputs or sliders if you have some number-based attributes, a rating menu, and various other types. There is plenty to work with to fit your needs.

For the purposes of our integration with WooCommerce, we will focus primarily on the refinement list widget for finding just the products we want.

One of the WooCommerce attribute types I have in my demo site is “color.” This has resulted in a product attribute of pa_color and right now it has three terms in it.

To get this added as a widget we can further refine results with, we need to get some markup in our instantsearch.php file to render the widget. To start, we will add this below the Users section of the sidebar area. For our example, we’re using facet-color for our ID which we will need in a moment. You can use whatever ID value you want though.

<div>
	<h3 class="widgettitle"><?php esc_html_e( 'Users', 'wp-search-with-algolia' ); ?></h3>
	<section class="ais-facets" id="facet-users"></section>
</div>
<div>
	<h3 class="widgettitle"><?php esc_html_e( 'Color', 'wp-search-with-algolia' ); ?></h3>
	<section class="ais-facets" id="facet-color"></section>
</div>

Next, we need to configure the widget itself. This will go in the search.addWidgets([ ... ]) block of our template file.

search.addWidgets([

	...
	/* Search powered-by widget */
	instantsearch.widgets.poweredBy({
		container: '#algolia-powered-by'
	}),
	
	instantsearch.widgets.refinementList({
		container : '#facet-color',
		attribute : 'taxonomies.pa_color',
		operator  : 'or',
		limit     : 5,
		sortBy    : ['isRefined:desc', 'count:desc', 'name:asc'],
		showMore  : true,
	}),
]);

Here we will need the ID that you used with the widget above. We want to specify it in the container property, so that Algolia can find the div and render the refinement list widget.

Next, we need to tell the widget which indexed attribute we want to reference here. That is where taxonomies.pa_color comes in. Specifying this attribute informs Algolia to fetch all the indexed terms from the pa_color attribute, that match the determined results for a given search.

By default, WPSwA will include WooCommerce’s product_cat, product_tag, and various created attributes assigned to your products, so these should be available as soon as you index the product WooCommerce post type.

The operator property can be used to indicate which attributes should be associated with an item to be listed when refining. In this case, we use “or” to say “the product must have this attribute OR this attribute,” meaning any of the checked attributes.

If you set this value to “and,” then it turns to “the product must have this attribute AND this attribute” to be shown, meaning all of the checked attributes.

The sortBy tells in which order the refinement list items should be listed. By default, WPSwA puts “isRefined” items first, which would be if an item is checked, that item moves to the top of the list.

Next, it orders them by item with the most results available first, and then any with matching amounts shown alphabetically. Toy around with the sort order and see which display type you prefer most.

Lastly is the limit and showMore properties. If you specify a limit without showMore or showMore set to false, then Algolia will only return the amount specified by limit.

However, if you set showMore to be true, then the limit will be how many it shows before offering a button to select to show the rest of the found attribute items. You can read about all the refinementList properties in the refinementList documentation.

With these settings in place for the widget, we should see something like this below.

Most of the default widget sections in the WPSwA template and instantsearch.php don’t make sense for our purposes. You can keep them if you want, but I’m going to remove them for the rest of this article.

This will result in our facets <aside> looking like this below (about lines 27 through 32), ready for more additions as needed for widgets that make sense.

<aside id="ais-facets">
	<div>
		<h3 class="widgettitle"><?php esc_html_e( 'Color', 'wp-search-with-algolia' ); ?></h3>
		<section class="ais-facets" id="facet-color"></section>
	</div>
</aside>

This will also result in a reduction of our search.addWidgets([ ... ]) section as below. I have concatenated some parts within longer widget sections for brevity.

search.addWidgets([
	/* Search box widget */
	instantsearch.widgets.searchBox({
		container: '#algolia-search-box',
		placeholder: 'Search for...',
		showReset: false,
		showSubmit: false,
		showLoadingIndicator: false,
	}),

	/* Stats widget */
	instantsearch.widgets.stats({
		container: '#algolia-stats'
	}),

	/* Hits widget */
	instantsearch.widgets.hits({
		container: '#algolia-hits',
		hitsPerPage: 10,
		templates: {
			empty: 'No results were found for "<strong>{{query}}</strong>".',
			item: wp.template('instantsearch-hit')
		},
		transformData: {
			item: function (hit) {
				...
			}
		}
	}),

	/* Pagination widget */
	instantsearch.widgets.pagination({
		container: '#algolia-pagination'
	}),

	/* Search powered-by widget */
	instantsearch.widgets.poweredBy({
		container: '#algolia-powered-by'
	}),

	instantsearch.widgets.refinementList({
		container : '#facet-color',
		attribute : 'taxonomies.pa_color',
		operator  : 'or',
		limit     : 5,
		sortBy    : ['isRefined:desc', 'count:desc', 'name:asc'],
		showMore  : true,
	}),
]);

You can add as few or as many extra widgets as you want to be based on the needs of your store. Just make sure to remember to create the container markup so that Algolia can render the widget, and accurately specify the attribute to use for the given facet.

For a quick extra attribute demo, I’m going to add one more named “Size,” using the same steps above, resulting in these two additions. This time though, I have changed the sortBy to have just “isRefined” first, followed by the name in ascending order. I have removed the sort by count.

<aside id="ais-facets">
	<div>
		<h3 class="widgettitle"><?php esc_html_e( 'Color', 'wp-search-with-algolia' ); ?></h3>
		<section class="ais-facets" id="facet-color"></section>
	</div>

	<div>
		<h3 class="widgettitle"><?php esc_html_e( 'Size', 'wp-search-with-algolia' ); ?></h3>
		<section class="ais-facets" id="facet-size"></section>
	</div>
</aside>

instantsearch.widgets.refinementList({
	container : '#facet-color',
	attribute : 'taxonomies.pa_color',
	operator  : 'or',
	limit     : 5,
	sortBy    : ['isRefined:desc', 'count:desc', 'name:asc'],
	showMore  : true,
}),

instantsearch.widgets.refinementList({
	container: '#facet-size',
	attribute: 'taxonomies.pa_size',
	operator : 'or',
	limit    : 5,
	sortBy   : ['isRefined:desc', 'name:asc'],
	showMore : true,
}),

Replacing Shop and Product Category Archives with Algolia

This section of this tutorial on WP Search with Algolia InstantSearch widget and facet customization may be our greatest trick! Ready?

We are going to replace both the shop page as well as product category archives, i.e. /product-category/inflatable-toys/, with our overall Algolia Instantsearch UI.

With the shop landing page, we will present everything as if no specific query has been made yet, while with the product category archive will be limited to the products that would be originally listed there.

Loading Necessary Scripts and Styles

To accomplish this, we must first create a couple of template files and also enqueue some assets. First, we will get our assets loaded. This will help make sure we have the scripts and styles needed.

function woo_product_cat_algolia_assets() {
	if ( ! is_product_category() && ! is_shop() ) {
		return;
	}

	wp_enqueue_script( 'algolia-instantsearch' );
	wp_enqueue_style( 'algolia-autocomplete' );
	wp_enqueue_style( 'algolia-instantsearch' );
}
add_action( 'wp_enqueue_scripts', 'woo_product_cat_algolia_assets' );

Here we’re checking if we’re on a product category or the shop page, and if not, just return early. If we are, then we enqueue our InstantSearch JavaScript and CSS, as well as our autocomplete CSS.

Template Overrides

Next, we need to create the following files in our theme:

• archive-product.php
• taxonomy-product-cat.php

Since these file names follow the WordPress template hierarchy, they can be dropped directly into the theme folder.

For my example, they will be twentytwenty/archive-product.php and twentytwenty/taxonomy-product-cat.php. Inside both files, we just need to load our instantsearch.php file instead of what would be loaded by WooCommerce.

Below should be the complete template files needed to work for both.

<?php

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

require_once Algolia_Template_Utils::locate_template( 'instantsearch.php' );

If all went well, then visiting your shop landing page and any product category should now be showing Algolia-based listings.

Product category customization.

Before we can call ourselves done, we need to configure the product categories just a little bit. We want these to be limited to just products within that category.

To accomplish this part, we need to get some WordPress query details added to our inline scripts. We are going to add to our woo_product_cat_algolia_assets callback function and determine the current product category.

function woo_product_cat_algolia_assets() {
	if ( ! is_product_category() && ! is_shop() ) {
		return;
	}

	wp_enqueue_script( 'algolia-instantsearch' );
	wp_enqueue_style( 'algolia-autocomplete' );
	wp_enqueue_style( 'algolia-instantsearch' );
	
	global $wp_query;
	
	if ( empty( $wp_query->query['product_cat'] ) ) {
		return;
	}

	$term_parts = explode( '/', $wp_query->query['product_cat'] );
	$results['terms'] = [];
	foreach( $term_parts as $part ) {
		$term = get_term_by( 'slug', $part, 'product_cat' );
		$results['terms'][] = $term->name;
	}
	wp_add_inline_script( 'algolia-instantsearch', 'const woo_algolia_queried_terms = '' . json_encode( $results ) . ''; ' );
}
add_action( 'wp_enqueue_scripts', 'woo_product_cat_algolia_assets' );

With this added code, we are grabbing the current global $wp_query object and using PHP’s explode function on the product_cat portion of the query arguments.

This will get us an array of product categories for the current query. We then iterate over those categories and get term objects for each, before storing the term name values as part of our $results array.

Finally, we store that $results variable as JSON on a JavaScript constant to be used in a moment. This way we can access the product category information in our InstantSearch configuration code.

Back in our instantsearch.php file, we need to add this alongside our widgets configuration. We are grabbing that available woo_algolia_queried_terms constant that we just created, and parsing it as JSON data.

Once we have the identified terms from the current query, we add it to the Algolia configured widget and specify it as a default for the filters. This way it’s only showing items from the chosen category.

<?php if ( is_product_category() ) { ?>
	let woo_term_data = JSON.parse( woo_algolia_queried_terms );
	let item_parts = [];
	for (const item of woo_term_data.terms) {
		item_parts.push('taxonomies.product_cat:"' + item + '"');
	}
	
	let woo_query = item_parts.join(' AND ');
	search.addWidgets([
		instantsearch.widgets.configure({
			filters: woo_query,
		}),
	]);
<?php } ?>

You can read more about the configure widget over at Algolia Configure widget documentation.

Conclusion

This completes this tutorial on WP Search with Algolia InstantSearch widget and facet customization. We’ve covered a lot over these past few posts.

Hopefully, these tutorials give you a good idea of what is capable with WP Search with Algolia and WooCommerce, out of the box and with a touch of configuration and customization.

This is definitely not the end-all-be-all of the capabilities, and there is plenty of room for more. It’s all a matter of what data you put in your Algolia indexes, and how you want to make use of it.

When you need a team to integrate the power of Algolia search with your WordPress website, contact WebDevStudios.

Complete Code

As promised, below you can download a zip file that has the final code for our WP Search with Algolia InstantSearch widget and facet customizations, as well as all the topics covered in the previous posts. These are ready to install as a plugin.

You will need to copy the two template files into your active theme and place them in a folder named “algolia” for those to be detected. The rest of the code will work as a plugin named “WooCommerce Algolia.”

WooCommerce-Algolia.zip

The post Integrating WP Search with Algolia: InstantSearch Widget and Facet Customization appeared first on WebDevStudios.

I also covered the results to be shown for both autocomplete suggestions and instant search, among some other elements. It’s worth reading if you haven’t yet.

Today, however, we are going to focus on template customization for WooCommerce. Specifically, I am referring to the display of your Algolia data on your WordPress website and how to customize the display of returned results.

We will be using the product data discussed in part one of this series.

WP Search with Algolia: Autocomplete and Instantsearch Template Files

When you download WP Search with Algolia, it comes with a couple of template files for both autocomplete and instantsearch. These make for solid defaults with minimal display, but we need to make them more robust and fit our needs.

In order to customize these files safely, we need to copy the autocomplete.php and instantsearch.php files out of /plugins/wp-search-with-algolia/templates/ and into a folder named algolia in your currently active theme.

The plugin will automatically detect their existence from the theme and use those copies instead of the prepackaged versions. This allows you to customize and still update the plugin without losing customization.

Autocomplete

Below is a screenshot of the default autocomplete search when using the TwentyTwenty theme. Here, we can see a heading mentioning the content types being shown, followed by five different products matching our search term.

Each result includes a thumbnail for their product image, product name, and product description.

We are going to change the listings to include both the price and SKU number next to the product name, and use the short description if available, or else the current description.

For this, we need to edit the autocomplete.php template file, specifically, the section found at Autocomplete.php line 21-33.

Here, we will have a JavaScript variable data that will hold information for each suggestion hit, meaning an individual product. Now, we start making use of all that information we indexed.

The bundled template files make use of the wp.template functionality that ships with WordPress. It uses underscore.js for its templating, and has a mustache-like syntax. Luke Woodward has a great general tutorial for making use of this on your own.

<div class="suggestion-post-attributes">
	<span class="suggestion-post-title">{{{ data._highlightResult.post_title.value }}} - {{ data.sku }} - {{ data.price }}</span>
	<# if ( data.short_desc ) { #>
		<span class="suggestion-post-content">{{ data.short_desc }}</span>
	<# } else if ( data._snippetResult['content'] ) { #>
		<span class="suggestion-post-content">{{{ data._snippetResult['content'].value }}}</span>
	<# } #>
</div>

In the snippet above, I have amended the markup for the “suggestion-post-attributes” wrapper div, starting on line 26, to include a few more things. These values are all on the top level of your product index when looking at the item in the Algolia dashboard.

First, we output the SKU property, followed by the price property. Both are included in the span wrapping of the original post title value, which is getting some extra highlighting from Algolia.

Next, we can use some standard “if statement” logic on the properties to check if we have a value before acting. Here, I have checked to see if we have a short description to show, otherwise it falls back to the original snippet version coming from the full product description.

Below is a screenshot of the final result.

Other areas of the autocomplete.php template file has spots for customizing details like the autocomplete header, term suggestions, user suggestions, autocomplete footer, and no results template. We are not going to worry about those at the moment.

Towards the very bottom is the JavaScript that is powering everything. For the sake of this post, I won’t be going into details there. What we’ve been concerned about is the display of data coming back from a given query.

Instantsearch

Now that we’ve added some content to the autocomplete suggestions, we will add the same information to our Algolia hits output before we click into a specific result.

For this portion, we need to edit the instantsearch.php template file.

The section for this one can be found at Instantsearch.php line 48-68. We are going to insert a new paragraph tag above the excerpt, to conditionally show both the SKU and the current price if we have a value.

<h2><a class="ais-hits--title-link" title="{{ data.post_title }}" href="{{ data.permalink }}">{{{ data._highlightResult.post_title.value }}}</a></h2>
<# if ( data.sku || data.price ) { #>
	<# if ( data.sku ) { #>
		<span class="is-hit-sku">SKU: {{data.sku}}</span> |
	<# } #>

	<# if ( data.price ) { #>
		<span class="is-hit-price">Price: {{data.price}}</span>
	<# } #>
<# } #>

<# if ( data.taxonomies.product_cat ) { #>
	{{{data.taxonomies.product_cat}}}
<# } #>
<div class="excerpt">

To help keep our markup clean, we are only going to output anything if we have either a SKU or a price value. Once we know we have something, we output some span markup for each data item we have.

For easier styling, we have included some custom classes. To top off our instantsearch customizations, we’re going to output the product category for each.

Template Summary

These template edit examples are definitely minor but show how to take a given Algolia hit and modify the output for each. The data object variable is going to be the key here.

As a reminder, when viewing your index in the Algolia Dashboard and index explorer, each part of a given object is available via that data variable. Some parts may be top level like data.post_title, while others may be a bit more nested like you see in the images. For example, data.images.thumbnail found in use in the template files, but not as part of our code examples above.

Our journey through integrating WP Search with Algolia is not complete. Coming up next in this series, I’ll discuss facet widget customization. Be sure to come back to this blog.

The post Integrating WP Search with Algolia: Autocomplete and Instantsearch Customization appeared first on WebDevStudios.

However, our stance has been that due to complexities with WooCommerce, we are not planning to add any official support to the free plugin WP Search with Algolia. That does not mean there is zero ability for the plugins to work together; it’s just that integration is up to individual site owners to adjust to their own needs.

This has left a proverbial hole in our free Algolia support. Going into the end of 2021 and the beginning of 2022, I was assigned tasks regarding integrating WPSwA with a WooCommerce-based website.

At the time, I was still saying, “We don’t have official support for WooCommerce.” Yet, I was chomping at the bit for this opportunity and hands-on experience.

There were definitely hiccups and interesting challenges along the way, but I feel the gained knowledge has proved invaluable. I want to discuss with you here how I handled various parts of what I learned, including WP Search with Algolia’s settings and configurations for WooCommerce.

At the time of this writing, we are using version 2.2.0 of the plugin, available on both WordPress.org and GitHub. Also, for these examples, we are focused on simple products in WooCommerce. Other product types will need more exploration and work.

I am covering our overall setup in three parts:

1. Settings and index management with WPSwA
2. Template customization
3. Facet widget customization

Today’s post covers part one only—WP Search with Algolia settings and configurations with WooCommerce.

After all three parts are addressed, we will provide a plugin version holding all the code presented in these blog posts. We encourage modifying this plugin version to meet your own fine-tuned needs For the sake of brevity, I assume you already have an Algolia account and WPSwA setup, including Application IDs and various API keys.

WP Search with Algolia Settings and Index Management for WooCommerce

Settings Management

It is definitely possible to control and manage indices configuration in the Algolia.com dashboard. Those settings are reflected on your website when using search.

WPSwA, on the other hand, is also set up to manage these settings. This is done via code rather than UI, using WordPress’ extensive hooks API. Whenever you see UI or instructions to “Push Settings,” the settings provided via custom code are pushed to your Algolia instance.

Controlling the settings via custom code may sound odd, but it is actually extremely handy. It allows not only version control of the configurations, but also allows for consistently deploying those settings across various indices and between development sites. All you need to do is trigger some UI and everything is configured for you.

We are providing configuration code to help with WooCommerce integration, but if you prefer managing it via the dashboard, remove that code and avoid the “Push Settings” UI.

Index Management

When I say index management, what I mean is managing what information gets pushed when a given product object is updated or removed. Some parts are already handled for you, while others will need manually added and a re-index run.

Not every change around index management requires settings deployment, but does need a re-index of the content. We let you know when each is needed.

For index management, we’re focusing on two indexes specifically. The first one is the posts_product index and the second is the searchable_posts index.

When you enable individual content types on the Autocomplete settings page and click to index that content type, a corresponding table is added to your Algolia instance. In the case of our WooCommerce intent, we want the “Products” row which creates the index of “posts_product.”

The searchable_posts index is a bit more encompassing with less to click. It indexes all of the content types that are considered searchable by WordPress.

If you have registered your own post type before, you may recall the “Show In Search” option. This is the same.

Any time that we’re adding information to the products in our indexes, we use the following two filters available to us in the WPSwA plugin:

algolia_post_product_shared_attributes
algolia_searchable_post_product_shared_attributes

Meanwhile, whenever we’re modifying the settings for the related indices, we use the following filters (also available in the WPSwA plugin):

algolia_posts_product_index_settings
algolia_searchable_posts_index_settings

Note: the final version of supplied code is different compared to isolated snippets, but should have all parts covered by the post in the end.

SKUs

We’re starting with one of the most common questions I’ve seen regarding WooCommerce integration. How do we get a product’s SKU value indexed?

function add_product_data_to_autocomplete_and_instantsearch( $shared_attributes, $post ) {
	$product = wc_get_product( $post );

	if ( ! $product ) {
		return $shared_attributes;
	}

	// We need to make sure the SKU is a part of each index, in order to search by it.
	$shared_attributes['sku'] = $product->get_sku();

	return $shared_attributes;
}
add_filter( 'algolia_post_product_shared_attributes', __NAMESPACE__ . 'add_product_data_to_autocomplete_and_instantsearch', 10, 2 );
add_filter( 'algolia_searchable_post_product_shared_attributes', __NAMESPACE__ . 'add_product_data_to_autocomplete_and_instantsearch', 10, 2 );

First, we hook into the shared attributes data where the attributes to be indexed are set and data included. This hooks in before the final data is sent to Algolia, and is a perfect spot for us to include extra information.

In the code above, we are utilizing the passed-in $post object to retrieve a WooCommerce product object. If we have a found product, we use the get_sku() method to retrieve and set the value in a new “sku” index. Once done, we return the updated $shared_attributes array.

Since we changed what gets indexed on product objects, we need to run a sync on both the Autocomplete and Search pages. Having the SKU on both will be important in a moment.

Adding the Ability to Search by SKU

Next, we need to amend the settings for our posts_product and searchable_posts configurations.

function amend_posts_products_and_searchable_settings( $settings ) {

	$settings['searchableAttributes'] = 'unordered(sku)';

	$settings['disableTypoToleranceOnAttributes'][] = 'sku';
	$settings['disablePrefixOnAttributes'][] = 'sku';

	return $settings;
}
add_filter( 'algolia_posts_product_index_settings', __NAMESPACE__ . 'amend_posts_products_and_searchable_settings' );
add_filter( 'algolia_searchable_posts_index_settings', __NAMESPACE__ . 'amend_posts_products_and_searchable_settings' );

Here, we are adding the “sku” attribute into our list of attributes considered searchable, and telling Algolia they should be unordered.

We are also disabling typo tolerance for the “sku” attribute. This means that a sku of “40025” won’t be included when you typed “40026.”

Lastly, we are also adding the “sku” attribute to the list to disable prefix searching on. That means if you were to type “400,” neither “40025” nor “40026” are considered as a result.

All of this helps ensure that SKUs can be searched exactly, both when showing suggestions in the search bar, as well as with the final results themselves.

Product visibility and availability

Product visibility

Let’s say you’ve gone through the effort to manage your merchandise. Sometimes, you want to remove a product’s catalog visibility on the frontend.

For this, we’re going to mark the product as should NOT be indexed, if its WooCommerce visibility is marked as “hidden” or “catalog” only. We will be making use of these available filters to achieve this.

The filters are passed a boolean value for the current determined status of if it should be indexed or not, and then a post object itself.

algolia_should_index_post
algolia_should_index_searchable_post

function exclude_visibility_and_outofstock_products( $should_index, $post ) {

	if ( false === $should_index ) {
		return $should_index;
	}

	$product = wc_get_product( $post->ID );
	if ( ! $product ) {
		return $should_index;
	}

	$product_visibility = $product->get_catalog_visibility();
	if ( in_array( $product_visibility, [ 'catalog', 'hidden' ] ) ) {
		$should_index = false;
	}

	return $should_index;
}

Here, we return early if it’s already been determined elsewhere that it should not be indexed. Why do extra work?

If the product is still considered indexable, we move to retrieve a product object and check its current visibility value. If that visibility is “hidden” or “catalog,” then we set $should_index to false and return our filtered value.

This post would not be indexed and WPSwA would move on to the next item.

Product Availability

Perhaps you don’t want to show products that are presently out of stock or are on backorder. Users should only see what they can buy now. Using the same function above, we can add a few more checks to potentially prevent the indexing of a given product.

function exclude_visibility_and_outofstock_products( $should_index, $post ) {

...

	$product_visibility = $product->get_catalog_visibility();
	if ( in_array( $product_visibility, [ 'catalog', 'hidden' ] ) ) {
		$should_index = false;
	}

	$stock_status = $product->get_stock_status();
	$statuses_to_retain_indexability = [ 'instock' ];
	if ( ! in_array( $stock_status, $statuses_to_retain_indexability ) ) {
		$should_index = false;
	}

	return $should_index;
}

In this amended code, we are utilizing the $product object to get the stock status. By default, WooCommerce stores either “in stock,” “outofstock,” or “onbackorder.”

For our purposes here, we only want to show items in stock. If the found status is not in our array, set $should_index to false and return the final value.

Bonus points: How could this information be used in conjunction with Yoast SEO content settings?

Extra product information

When it comes to your products, the SKUs don’t have to be the only thing you index. Any detail about the product that you can fetch can be included as part of it’s indexed object.

For the sake of the rest of this post, I’m going to add both the price (with currency symbol) and short description to my products. Don’t forget to re-index!

$product = wc_get_product( $post );

if ( ! $product ) {
return $shared_attributes;
}

...

$currency_symbol = html_entity_decode( get_woocommerce_currency_symbol() );
$shared_attributes['price'] = $currency_symbol . $product->get_price();
$shared_attributes['short_desc'] = $product->get_short_description();

return $shared_attributes;

Conclusion

Whew, we have accomplished a fair amount here. We have successfully integrated WP Search with Algolia’s settings and configurations for WooCommerce. Additionally, we marked some of our attributes as being searchable and added a fair bit of product information to our products in Algolia.

Lastly, we also configured our install to control whether or not a product should even get indexed, based on catalog visibility or current availability. Next time, we will get into how to make use of this information when performing a search and how to customize the display of everything.

If you’re ready to have WP Search with Algolia integrated with specialized settings on your WooCommerce website, contact WebDevStudios.

The post Integrating WP Search with Algolia: Settings and Configurations for WooCommerce appeared first on WebDevStudios.

As the popular quote by Orvel Ray Wilson goes,

Customers buy for their reasons, not yours.

You should try to understand your eCommerce customers well enough to gain more sales. This article discusses how to delight your customers with your WooCommerce store.

Why WooCommerce?

It powers 26% of all online stores, is open-source, and it’s easy to customize and maintain. At WebDevStudios, we build and maintain some popular WooCommerce stores.

Below os my list of recommendations. Many store owners often miss these, and that affects sales. So, let’s get started.

Target Audience

Defining your target audience is a crucial factor in your marketing efforts. As Seth Godin says, “Everyone is not your customer.” So, you have to niche down and identify your target eCommerce customers.

There is a popular marketing term called “buyer persona,” which means identifying the buyers to a deeper level. If you have buyer personas, pat yourself on your back. If you don’t, here is a simple approach in two steps.

1. Start with the demographics of your customers by including age, gender, location, occupation, income level, etc.
2. Then, proceed with psychographics, like interests, lifestyle, behavior, attitude, etc.

This gives you a better picture of your target audience. Do you need a buyer persona? The short answer is yes.

Many store owners and agencies know how the sales funnel works, but only a few of them target the right target audience and convert visitors to customers.

Whether it is social media advertisements, email campaigns, or SEO, the wrong target market won’t convert into sales. Here are some tools to help.

• HubSpot Make My Persona
• Xtensio
• Upclose and persona
• UXpressia Personas Tool

Competitor Analysis

Every business has a unique selling proposition, but that doesn’t mean they don’t have competitors. A business or person that offers the same services or products as yours to your target audience is competition. Instead of competing with them, you could learn from them.

1. Identify gaps. By curating a list of your competitors and what they offer, you can find the gaps in the market. Find the blue ocean where you can make a difference and dominate the market.
2. Find what is trending. Spy on your competitors on their social media pages, email campaigns, webinars, and other all possible outlets. Research and use the data you discover to guide you. See what is trending and add to your brand’s identity, core values, and invent your own trend.
3. Pay attention to social signals. Find out what the customers talk about your competitors’ customer service by reading testimonials, tweets, and whatnot.
4. Analyze their strategies. Observe competitors’ pricing, shipping, refund, returns, and other strategies and policies. You can learn from these and avoid their mistakes. Keep it DRY. That means, don’t repeat yourself.

These tools help with competitor analysis.

• Spyfu – Check paid traffic.
• Brand24 – Manage social media engagement, brand mentions, and voice.
• BuzzSumo – Find what content performs well and discover influencers.

Store Features

The experience of your eCommerce customers matters. From header navigation to search filters, every feature of your online store is important. These are the minimum required ones:

• Navigation – Keep your menus, categories organized. This may look so obvious, yet many sites don’t have proper navigation.
• Accessibility – Making the site more accessible is a necessity now. With Core Web Vitals on the ranking factors, you will get better SEO results and also happy customers by following accessibility standards. The trick is to choose a theme that supports this out of the box, like wd_s, storefront, and others.
• Security – Self-signed SSL certificates may throw security warnings, which in turn result in customers leaving the store and bad SEO scores. Start with a free SSL and Web Application Firewall (WAF) by Cloudflare or others. Enabling multi-factor authentication and CAPTCHAs adds another layer of security.
• Updates – Keeping your store’s plugins and themes updated is crucial. Security patches should be installed as soon as possible to avoid security issues. The latest versions of extensions will have improvements and new features. So, keep up with the updates.

Did you know that 88% of the online carts are abandoned worldwide? Understanding your eCommerce customers and providing a good user experience will help in reducing abandonment rates. The following tools help.

• Cloudflare
• Accessibility tools

Pricing

Who doesn’t want discounts? Pricing can often make or break the deal.

As we discussed earlier, analyze your competitors’ strategies, including pricing. Find inspiration in their examples and formulate a pricing strategy that works for you.

• Set up upsell and cross-sell opportunities. Create discount coupons and offers. Make them prominent throughout your online store.
• Showcase discounts. Make it obvious how much a customer will save on their purchase. This encourages people to buy while the offer lasts. Declutter the checkout page, and do not ask for unnecessary details during the checkout process.
• Rely on referrals. Having a referral or reward program boosts sales. You might be spending more on acquiring a new customer via promotions, so inspire your eCommerce customers to return with a tempting rewards program.
• Simplify pricing. Don’t leave the customers puzzled with the sale prices. Keep it simple. Consider adding the shipping cost to the product base price and make shipping free. There is no definitive guide for pricing. Try different pricing models and find out what works for you.

One tool I highly recommend is WooCommerce Points and Rewards. This product allows you to reward your customers for their purchases and referrals.

Customer Service

Others can copy your strategies, get supplies from the same supplier as yours, use the same theme and plugins, but they can’t match your customer service.

Every brand has its own core values, and it reflects in customer service. WooCommerce makes it easy to add and view order notes for both store owners and customers.

Make sure you are providing excellent eCommerce customer support before, during, and after the purchase to stay on top of the market. Adding these elements to your WooCommerce shop will help.

• Chatbots – Use a chatbot to respond to any queries quickly. This also helps you to save your manpower and time.
• Chat – You might have noticed “chat with a human” chat boxes on many websites. This helps to talk directly to customers and receive feedback in real-time. You can configure the chatbots to redirect to the support team, if necessary.
• Email – Not all questions can be answered immediately. Use a support ticket system to track the status of customer messages.

You may not be able to control the market, but you can control the way you serve your eCommerce customers. Good customer service also brings you positive feedback. Additionally, positive ratings from your customers increases brand awareness

For assistance with your customer service, keep these tools in mind.

• Facebook messenger chat – This chat box comes with basic and free automated questions. You can extend it with third-party apps.
• MailChimp for WooCommerce – Connect your WooCommerce store with MailChimp services.
• Newsletter Glue – Compose emails with Gutenberg block editor and send them directly from your WordPress dashboard.

Communities

This is a commonly known yet ignored piece of advice. Be a part of the community related to your industry and grow your own community around your eCommerce brand. Here are two ideas.

• WordPress Community – Get help from WooCommerce experts and users by participating in local WordPress and WooCommerce meetups, WordCamps, and other similar events near you.
• Social Media – Facebook groups, Subreddits, Slack, Twitter—you have ample social media choices to receive help.

Communities foster a sense of belonging. You learn more by listening to others’ experiences.

At first, you can start by becoming a member of various communities. Then, you should create a community with your customers as you grow.

As the Pareto principle advises: 80% of sales come from 20% of the customers. When you have a community of loyal eCommerce customers, marketing and sales become easy.

Need some help with building or scaling your WooCommerce store? Let the experts handle it. Contact us now.

The post Wooing Your eCommerce Customers Is Easier Than You Think appeared first on WebDevStudios.

If you’re a data nerd, you won’t be disappointed with today’s options for processing payments. Dashboards give online store owners insights into customer data in new and exciting ways. Do you have an idea for a product you’d like to sell or a side-hustle you know would take off? Then you should definitely keep reading for some eCommerce tips and information on processing payments.

Payment Gateway vs Payment Service Provider

When most people think of PayPal, they may not consider how many steps go into a successful online transaction. Many verifications need to take place before money changes hands, and that’s a good thing for everyone. Those who run an online store want to be certain all transactions are secure and encrypted, and that’s where payment gateways come in.

A payment gateway is a service that handles the authorization of payments for online merchants. This is typically done through a third-party company, who specializes in these types of transactions.

In this article, we’ll mostly discuss payment service providers (PSP). PSPs utilize payment gateways, but often add a layer of useful services for the merchant site owner. Services can include fraud protection, credit card processing, label printing, data analytics, invoicing and more.

Stripe, PayPal, and Authorize.net are but a few of the dozens of PSPs to chose from. You’ll really want to dig in and see what fits your company’s business model best. Forms of payment range from credit/debit cards to bank transfers and even Bitcoin.

It goes without saying that when it comes to your company’s reputation, it’s critical that you minimize your exposure to financial liability when processing payments. There’s probably nothing that will enrage a customer more quickly than the loss, or perceived loss, of money. If, for some reason, there are problems in a transaction (and lots of things can go wrong), you can turn to your trusty dashboard and root out the problem. Personally, I believe having that level of control and peace of mind is worth the service fee alone.

How are Payments Accepted Through a Payment Gateway?

This is a general overview, but when a customer is ready to place an order, their data is encrypted and sent. Data is usually sent directly to the PSP, altogether bypassing the merchant’s site. Once the customer’s order data is received, an authorization process is carried out with the relevant credit card company or bank. After the financial institution has authorized the purchase to the payment gateway provider, your online store portal will receive an update letting you know that the payment has been authorized.

The merchant (you in this case), will then complete any remaining requirements including preparation of goods for shipment or delivery of the product if it’s a digital item. After all of this has taken place, your PSP will confirm that the required steps have been verified. You can then mark the transaction for completion. Behind the scenes, final steps are taken to exchange funds, and the whole process is usually completed within three days. Rinse and repeat.

How Much Are Service Fees?

The rates are competitive, but service providers will often charge a percentage and a set transaction fee. At the time of publishing this, Stripe, for example, charges 2.9% plus $0.30 per successful transaction. PayPal’s fee is similar. International rates will vary and may increase considerably in cost.

Do You Have a WordPress site?

There’s a reason why WordPress sites account for 33% of the internet. WordPress has a loyal following, to say the least. It’s easy, powerful, and highly customizable. WordPress plugins are famous because they’re easy to install and they’re usually kept up-to-date by their developers. Updating your plugins is as easy as pressing a button, and can be scheduled for automatic updates. And, if you don’t want to handle updates yourself, you can always turn to our maintenance and support team at Maintainn. Want to get your online store off the ground fast with the payment service provider that’s perfect for you? We think WordPress is the way to go.

Is Your Product Digital or Physical?

Digital Products

Easy Digital Downloads (EDD) is a great way to manage your sales. Whether you’re a writer, musician or videographer, Easy Digital Downloads has you covered. Almost any digital file type or format can be sold through EDD, but generally speaking, if you can upload it to WordPress’ Media Library, you can sell it through this plugin. If WordPress restricts your file type, there are third-party hosting options available via Amazon S3 and Dropbox. Here’s a list of file types that WordPress supports. As you can see, the options are almost limitless.

Physical Products

If you’re offering physical products at your eCommerce, then you may want to consider WooCommerce. “Woo” is the go-to WordPress plugin for physical sales. It integrates with many major players in the payment service provider space and can be quickly configured to your needs. Highly customizable, it will be there for you as you scale up your company and rake in the big bucks.

Let’s Do This Together

Have big eCommerce plans but think you’re going to need some expert help? As you may know, at WebDevStudios, we’re huge fans of WordPress and eCommerce. Our clients love them, too. WebDevStudios provides end-to-end WordPress opportunities from strategy and planning to website design and development, as well as full data migration, extensive API integrations, scalability, performance, and long-term guidance and maintenance.  Contact us and let’s discuss your eCommerce project and which payment processing solution is best for your business.

The post Take My Money! eCommerce Tips for Processing Payments appeared first on WebDevStudios.

When I’m not slinging code for WordPress here at WebDevStudios (WDS) and Maintainn, my wife and I run a small online store where we sell our handmade leather goods. We’ve been at if for just over three years now, and social media drives 70%-80% of our sales. We rank pretty well for some key search terms in our niche, but even with Google’s domination of the search market, it doesn’t send us anywhere near the sales that social media does. That’s not to say you should ignore trying to rank well in search engines, just that you should definitely put some energy into social media, as well.

I’m going to share some of what works well for our shop and hope it can help you get more sales from social media. A lot of this is going to seem obvious once you read it. Most good advice is, but sometimes you just need to hear someone else say it. It’s just like when you ask someone how they lost weight. You already know the answer is that they ate better and exercised. There is no magic method to losing weight. It’s like that with social media, too. The things you need to do are simple, and you probably already have a pretty good idea of what you should be doing. The biggest challenge is sticking with it. Don’t get discouraged if a social media post doesn’t do well. Just keep at it and put in the work. That’s what will set you apart from everyone else.

Be visual.

Social media is a very visual medium. You are competing with not only people in your niche but with every other social media post in your potential customer’s feed. They are seeing memes, family photos, videos, ads, and more. Having great images or video to share will give you an instant advantage over someone else in your niche who’s not taking the time to get great content to share. Everything you do to market your shop starts here. Not only does it help you stand out in your customers’ feeds, it also tells them a lot about what you have to offer with just a quick glance of the product. Modern smart phones can take great pictures; you don’t need an expensive camera. Instead, take time to plan out your shots, develop a style to suit your brand, and make sure you have great lighting. Tell a story with your pictures. Your customers will engage with you more, and you’ll increase your sales.

Be seen.

Even with the great products and photos you still need to make sure your posts get seen. There’s no simple algorithm to this. Sometimes a post will be popular, and other times people won’t notice it at all. Some of this is just random luck.

You have more control over being seen than you might think. You need to consider when you post. Most people are online during the day throughout the week. On nights and weekends, people get away from their computers more. You also need to know your customers and what works for them. Start with posting during the day, Mondays through Fridays. But experiment with posting during other times, too.

For our site, I do most of our stuff during the day, but I like post a couple at night and on weekends, too. With our customers, we pick up a lot of extra sales and engagement this way because not all of our competitors post after normal business hours. You also need to go where your customers are. For us, that’s Instagram and Pinterest, with a little bit of Facebook. Look at where your potential customers spend their time and be active on those social media websites.

Use hashtags.

You also have to hashtag your posts on most social media services, especially Instagram and Twitter. Think of hashtags as adding keywords that your customers might use in a search. Users click on these hashtags and browse similar posts. When they do, this click may lead to your posts on the “Discover” or “Trending” pages related to these hashtags. I can’t stress how important adding those hashtags are. Hashtags let your social media posts be seen by people who aren’t on your feed and increases your potential reach.

Here is an example of what an Instagram page for the hashtag #leatherwork looks like. Using a hashtag like this can land my Instagram post on this page, which is then seen by potential customers.

Pro Tip: Keep a note of hashtags on your phone so that you can just copy and paste them. This will save you tons of time. I have several sets of hashtags for each of our products. Copying and pasting streamlines my efforts. Work smarter, not harder.

Be efficient.

Running a business means that you have lots to get done. While marketing through social media should be a high priority, it does take time. Here are two tips that help me:

Recycle images and content.

When you take photos, create a batch of photos in a single session so you can use them over the next couple of weeks or even months. Reuse and re-purpose images or content you’ve created in the past in new ways.

Schedule in advance.

Take advantage of scheduling social media whenever possible. For example, Twitter and Instagram both allow you to save drafts so you could create several posts, save them, and publish later. But I like to go a step further and queue up posts with a tool like HootSuite. It’s a paid service, but it saves you a lot of time sharing your work on Facebook, Twitter, Instagram, Pinterest, etc. At WDS, we currently use Buffer but also recommend Social Web Suite.

If you are a little more tech savvy you could save some money and use a service like IFTTT (If This Then That), which has applets to auto share your posts from one social media service to all the others. I use this personally and for our shop.

Make a plan.

Even if you end up scheduling your posts in advance, you need to also consider how often you post. Like most suggestions, this is going to depend on your customers and the niche you are in. For ours, I post one to two times a day when we are at our most active. Eventually, I’m planning on posting a little bit more frequently. Our audience is hungry for this kind of content and the more we post the more sales we make, but you can’t just spam the feed all day long. It’s a big turn off for me, personally, as a consumer. I want to avoid doing that to our customers.

I suggest picking a social media schedule that you can maintain. Repetition is also key. Your customers will learn your social media schedule, and they’ll be on the lookout for your next post. If you want to test out posting more often, just start with a slight increase and add more posts slowly and test the reaction. If you keep getting positive results, then keep it up. If not, slow down a bit. It’s pretty simple.

You can’t automate engagement. That’s a good thing.

One of the hardest parts about marketing your brand with social media is engaging with your customers, even though it’s very rewarding. There’s no easy way to automate engagement; and even if you could, I wouldn’t recommend it.

We’ve gotten tremendous benefit from talking to our customers through our social media channels. It’s a great way to provide customer support and generate sales leads. People love that they can reach out to us and they’ll get a real person to interact with.

I’ve had chats with our customers about the most random topics. This helps build customers for life. You’ll only get out of social media what you put into it. Don’t be afraid to share your personal side. Our customers love seeing behind-the-scenes stuff, such as our day-to-day life and other non-product related photos.

In our case, we, ourselves, are our brand, but even if you are a big eCommerce brand, make sure to show off the human side of your business. Customers connect with people and stories. Making those personal connections can build life-long fans. You can’t buy that with marketing dollars. You have to earn that. And anyone who’s run a any kind of business for long knows that it’s easier to keep customers than it is to get new ones. Sharing your brand’s journey through social media lets you connect with them on a personal level and grow that relationship over the course of months or even years.

Email marketing still works!

Email marketing has been around forever. It doesn’t seem as sexy as social media. However, it’s still around because it works!

While it’s not social media, I wanted to include it in this article because email marketing drives a lot of sales for us, and we use it to drive our customers to our social media profiles. So if you are on the fence, make sure you have an email list for your shop. Just don’t abuse it. We only send out mailings six-eight times per year. You should do what makes sense for your business, but don’t ignore email marketing or you’ll be missing out on sales.

You don’t have to just sell products with your list. We use it to promote giveaways, social media accounts, highlight work we’ve done, and share content that we put out there on social media or our site. Try it out and see what works for your customers.

I hope this gives you a good starting point for using social media in your digital marketing efforts. If you have any questions or suggestions of things you’ve tried, feel free to leave them in the comments below.

The post Using Social Media Marketing for eCommerce appeared first on WebDevStudios.

In this post, we’ll be highlighting the top 10 plugins that add useful functionality and features to WooCommerce. Since we’re limiting ourselves to 10, this is far from a thorough list. For instance, if your store only sells digital products instead of physical products, your plugin needs will likely be different. (Also, note that this list is not presented in a particular order.)

1. WooCommerce Subscriptions (Premium)

With WooCommerce Subscriptions you can equip your store to earn recurring revenue. For example, you can use it to create subscriptions for monthly or weekly services or software subscriptions.

Some of the features include: free trials and sign-up fees, variable subscriptions for creating a single product with different pricing levels, and subscription switching allowing a customer to upgrade or downgrade an existing subscription.

If your store has a need for subscriptions, WooCommerce Subscriptions is the best around and is built by the makers of WooCommerce so it has to be good.

2. WooCommerce Memberships (Premium)

Membership sites are a great way to keep visitors on your site and earn recurring revenue. With WooCommerce Memberships, you can sell memberships that seamlessly connect to your WooCommerce store and the rest of your site. You can sell memberships as a standalone product, or grant a membership after a purchase of another product.

For example, say you want to offer free written content, but also have content that requires a paid subscription to view. With a combination of WooCommerce Memberships and Subscriptions, you can do just that.

3. Mailchimp for WooCommerce (Free)

Mailchimp is the largest email marketing platform in the world with over 17 million users. Use their platform with your store and customer data using the Mailchimp for WooCommerce plugin to increase sales.

You’ll be able to add customers to an email list after purchase, and send cart abandonment reminders and targeted product recommendations based on a customer’s purchase history.

4. WooCommerce PDF Invoices & Packing Slips (Free)

If your store is more geared for B2B, then the businesses you sell to will often require an invoice for bookkeeping. Using the WooCommerce PDF Invoices & Packing Slips plugin, a PDF invoice will be attached to each order confirmation email.

Users can also download invoices manually by visiting the My Account page in WooCommerce. In addition, if you are shipping products, a packing slip can be generated by the store owner from the order admin page.

5. Beeketing (Free)

The Beeketing plugin is a unique one on this list, as it’s the only one that is Software-as-a-Service (SaaS), but it’s also one of the most full-featured. The plugin offers many free features, with the more advanced features requiring a paid subscription, but it comes with a 15-day free trial. Among the many features, one of the more useful features is automated or manual up-sells and cross-sells.

Another useful feature is the social proof pop-up notifications that notifies visitors others are purchasing items to create the sense of a busy store. The plugin has so many other features, I won’t name them all, but a few of them include: Sales Gamification, Sale Countdown clock, and Facebook Messenger integration.

6. YITH WooCommerce Wishlist (Free)

With the holidays approaching, many people will be doing the majority of their shopping online. Using the YITH WooCommerce Wishlist plugin, you can help increase indirect sales.

The plugin enables your customers to create lists of products from your store and easily share them with friends and family, Amazon-style.

7. YITH WooCommerce Ajax Search (Free)

Search is an important tool for any eCommerce website. Customers need to be able to quickly and easily find your products or they’ll leave just as quickly.

Add the YITH WooCommerce Ajax Search plugin to your site to instantly enable search with predictive autocomplete capabilities.

8. Waitlist for WooCommerce (Free)

Occasionally your store will run out of stock of a particular product, but unfortunately not having a product your customer wants available to purchase can lead to lost sales.

With Waitlist for WooCommerce, you can immediately email customers that have indicated interest in a product as soon as it is back in stock. In addition, you can use the plugin to create hype around a new product by promoting it before it’s available and have customers sign up for the waitlist.

9. YITH WooCommerce Zoom Magnifier (Free)

As we’ve mentioned before, good images sell products! The YITH WooCommerce Zoom Magnifier adds a zoom window to your product image when a customer mouses over the image to see more detail.

In addition to that useful feature, if you have variations of a product or a gallery of images, it will add a slider below the primary image to show and quickly change to another image.

10. WooCommerce Order Tracker (Premium)

If you sell and ship physical products, give your customers a way to track their shipment using the WooCommerce Order Tracker plugin.

The plugin integrates with several shipping platforms including FedEx, USPS, and Canada Post and will display order tracking information on the order page and My Account page. Email notifications can also be sent to the customer after the item has shipped and been delivered.

Conclusion

No matter your eCommerce needs, the combination of WooCommerce and the plugins in this article or elsewhere can help to improve your sales, marketing, and customer satisfaction. Contact WebDevStudios to get started on your eCommerce project today!

The post Top 10 WooCommerce Plugins appeared first on WebDevStudios.

At WebDevStudios, we decided to create a child theme for a recent client project. Customizing Storefront directly would make it impossible to upgrade for new features and bug fixes. Any changes would be overwritten during the upgrade process. By creating a child theme, we have the ability to upgrade the parent theme (Storefront) for access to new features and bug fixes.

Throughout the article, when I refer to parent theme, it’s Storefront.

Folder Structure

A child theme is basically a blank WordPress theme—it becomes a child theme when you define the parent theme in the “Template” param in the header block of a child theme’s style.css file.

For example:

View the code on Gist.

Notice how we have defined “storefront” in the template param of the style.css header block. The template param should equal the folder name of the parent theme. In this case, our parent theme’s folder name is storefront.

This flexibility of a blank WordPress theme allows us to set up this project similar to the starter theme that we use for all our internal projects.

The following folder structure is inspired by our starter theme wd_s. For this project, I have simplified the folder structure, especially the sass folder, since we will be mainly using Storefront’s styles and doing little customizations to it.

Folder Structure:

• assets
  • images
    • sprites
    • svg
    • svg-icons
  • sass
    • style.scss
  • scripts
    • concat (individual JavaScript files in this folder are compiled into project.js file).
• inc
• languages
• template-parts

Build Tools

We will be using Gulp setup from our starter theme wd_s. Gulp will will perform the following tasks:

• Compiles Sass files into CSS (from sass folder)
• Vendor prefixes CSS automatically
• Minifies JS files (from scripts folder)
• Compiles JS files from concat folder
• Minifies images inside images folder
• Generates sprite file & Sass mixins automatically from images dropped in sprites folder
• Compiles and minifies SVG icons dropped into svg and svg-icons folder
• Generates .pot file for il8n strings based on theme’s text-domain
• Automatically runs the build process on file changes
• Immediately preview changes in the browser using BrowserSync
• Runs Sass and JavaScript lint in a task to help identify coding errors

To get started, install Gulp globally:

npm install -g gulp

Create a package.json file in the root folder of your theme with the following contents: the package.json file is used to define npm packages that are used by Gulp to execute the build process.

View the code on Gist.

Run npm install to install all the packages defined in the package.json folder.

Make sure to add thenode_modules folder to the .gitignore file. We don’t want to version control node_modules.

Next, we need to define the Gulp tasks and how to run each of them. Create a gulpfile.js file in the root folder of the child theme:

View the code on Gist.

1. Edit _s on line 292, 293 and 295 with your theme’s text-domain. This will be used to generate the il8n pot file.
2. To setup BrowserSync, edit _s.test on line 361 with your local development URL. Access BrowserSync by adding port 3000 to the end of the development URL.

After the above setup is complete:

Running gulp in the terminal after the setup is complete will generate sprites and pot file. Compile and minify icons. Minify images. Compile and minify stylesheet and JavaScript.

Running gulp watch in the terminal will continuously look for changes in the PHP files and files in the assets directory. Any changes that you make to those files will not require a browser refresh on the development URL. Gulp will live stream the changes to the development URL with the help of BrowserSync.

During the development process, it is highly recommended to run gulp watch.

Running gulp lint will run JavaScript and Sass lint.

Coding Standards

PHP Coding Standards

For PHP code, we use our own set of coding standards extended from WordPress Coding Standards. PHPCS is the tool used to run against these rules. You can configure your editor to run through these rules.

WordPress Coding Standards

WDS Coding Standards

JavaScript Coding Standards

We use WordPress JavaScript coding standards and extend it to adapt to our way of writing code. These rules will be tested against whenever you run gulp lint. You can configure your editor to run ESLint tests, which is recommended and makes it easy to see errors and warnings as you write code.

WordPress ESLint Coding Standards

WebDevStudios ESLint Coding Standards

Sass Lint

We use Sass to write all CSS. Like ESLint, the rules are defined in a sass-lint file and will be tested against whenever you run gulp lint. Just like ESLint, you can configure your editor to run sass-lint which is recommended and makes it easy to see errors and warnings as you write code.

WebDevStudios Sass Lint Rules

This ends a quick rundown on how we set up Storefront for our client projects. Having build tools and coding standards added to our projects help us write clean and maintainable code. How do you setup your Storefront projects?

The post Modern Theme Development with Storefront appeared first on WebDevStudios.

Design, SEO, and Sitemaps… Oh, my!

“Shopping online is a visual experience for your customer. Sure, they want to read about your product details and specifications, but they also want to SEE it. Make sure your product is presented in its best light possible. This is especially true for design-centric markets such as fashion, jewelry, interior design, artwork and so on. The more likely a customer is to buy your product, especially in those niches, is based, largely, on how it looks.

Are you leveraging image SEO as much as you possibly can through the use of keywords, alternative text, descriptions and file names? Also, many people don’t take this step, but consider submitting an Image Sitemap to Google Search that includes image metadata to help search engines understand your product images better.”

Images & Shipping Info

“Good images sell products! Bad images make me think the site is not reputable. And, make sure your shipping information is current and updated so people purchasing gifts can feel confident things will arrive in time for the holidays.”
 
 
 
 
 
 

Security & Safety

“Security for your website and customer data should always be a top priority. Especially during the holiday season as eCommerce traffic increases. Maintainn can help ensure your website is safe and secure through continuous security monitoring and diligent updates performed for WordPress core, themes and plugins. Maintainn can also help protect your customer data by implementing SSL for your website.”
 
 
 

Get Sticky & Be Clear

“Make the site stickier with related content and products. Product pages should have nice photos and blog posts should have catchy headlines. Plus, make the next steps for the customer easy. If the next steps are clearly called out, the user will not be confused on what to do next. For example, a consultant’s site should have a path from a blog post to services, get in touch, etc. Whatever the end result action is, it needs to be clearly laid out for the user.”
 
 

Keep It Smooth

“Provide a smooth checkout process with no delays during the purchase. And, make sure that the customer knows their information is safe and secure.”
 
 
 
 
 
 
 

Don’t Bury Important Links

“Important links, such as options or refunds or anything like that, should not be buried under a subnavigation. Make sure important links are prominent and easy to find or you’ll get tons of questions.”
 
 
 
 
 

Pay Attention to Performance

“Performance is crucial, especially during the holidays when site traffic will be at the highest that most eCommerce sites will ever see. Comparing last year’s traffic, we can expect more than 50% of all holiday sales to happen online. Poor site performance will cause visitors to find another place to make their purchase.”
 
 
 
 
 
So don’t be ill-prepared this holiday season. Tackle these tips and you’ll find your eCommerce website enjoying some merry sales and profits. For more information and guidance, read the blog post “Preparing Your eCommerce Store for the Holidays,” by Chris Lema.

Need assistance with your eCommerce website? Contact us today.

The post eCommerce Tips for a Successful Holiday Season appeared first on WebDevStudios.