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.

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.

CPTUI News

WDS’ WordPress plugin, Custom Post Type UI (CPTUI) remains a favorite among WordPress developers and users. That’s not just a boisterous statement. We have just been informed that CPTUI is about to hit a milestone with 1,000,000 active installations.

You read that right. This is a big deal. When we do hit that magic number, we’ll be sure to tweet it from both the WDS Twitter account and Pluginize, too. Be sure you’re following us.

But, the CPTUI news doesn’t end there. Late last month, WDS took official ownership over GraphQL integration. This news is important, too, because Headless WordPress has emerged as a viable solution for many needs, and WPGraphQL has been one of the leaders in helping spearhead those efforts.

“With WebDevStudios emerging as the agency to go to for any business’ Headless WordPress needs, it felt only right that we also bring in ownership of the WPGraphQL integration with our popular Custom Post Type UI plugin,” explains Michael Beckwith, Support Engineer and the developer in charge of maintaining and developing CPTUI. “If you’re wanting to explore Headless WordPress and are already using Custom Post Type UI, you no longer need to install an extra plugin from WPGraphQL to integrate with CPTUI. It’s all built in now. If you are not needing WPGraphQL integration, then Custom Post Type UI remains the same solid plugin you’ve grown to love and rely on.”

Chats, Podcasts, and Vlogs

EXPAND 2021 Twitter Chat

As part of its two-day virtual event, EXPAND 2021, which is happening today and tomorrow, GoDaddy Pro hosted a Twitter chat on April 14th, with various web designers and developers offering words of wisdom.

Participants included our own Support Technician, Christina Workman, who offered a multitude of tips and insights, such as, “Having and sticking to well established processes at every stage of a project minimizes a variety of risks. Automate tasks like document templates, canned emails, automatically triggered invoices, etc., so you can spend more time on the more fulfilling work.”

Sounds like great advice!

WooCommerce Builder Community Events

Director of Business Development, Jodie Fiorenza, took part of a helpful discussion on how to connect product builders with developers and agencies for a WooCommerce Builder Community Event on BobWP’s “Do the Woo.” A trio of pros discussed partnership creation, how to write an email pitch that captures the attention of a developer or agency, and how staying on top of a hot topic, such as Headless WordPress, can make all the difference between a builder who is ignored and one who is relevant.

If you missed this podcast episode, you can watch it below.

Underrepresented in Tech

Marketing Specialist, Laura Coronado (yes, that’s me), joined the vlog, “Underrepresented in Tech,” to talk about how to be a podcast guest, especially for those who are among the underrepresented. If you have some technical insight and experience to share on podcasts, but don’t know how to go about earning a spot as a guest, watch this vlog episode now for some clear guidance from seasoned podcast hosts.

Join Our Team!

We have some fantastic career opportunities for you to consider, including:

• Business Development Associate
• Support Engineer
• Lead Engineer
• Backend Engineer
• Frontend Engineer

Check out these job openings today and submit your online application ASAP.

The post Company News – April 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.

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.

• WooCommerce stores are growing and there doesn’t seem to be a decline in that growth.
• Users are from all over the world, with most coming from Europe and the second most coming from North America.
• Established business owners are the most common WooCommerce users. New business owners are the second most common.
• Chris Lema, Vice President of Product at Liquid Web, advises that before a host, developer, or agency provides a quote for a WooCommerce build or redesign, they should first “marinate in the problem” of the business. Apply psychology and project management techniques during the discovery phase. Scope creep happens when you are not clear with a WooCommece client. Don’t just focus on what you WILL do for them but also clarify and define what you WILL NOT do for them (such as shipping products on their behalf).
• The cost of downtime for an enterprise level eCommece site for one hour is approximately $686,000. This is why it’s so important to keep a WooCommerce healthy and well-maintained.
• When planning for SEO, keep in mind that nowadays, 50% of consumer searches consist of four words or more. Think outside the box. Research the best keyword and phrases for your WooCommerce website. Presenter Rebecca Gill recommended the tool KWFinder to assist with your research. Rebecca also says that your category pages should have actual content on them. Set a description for your category pages so search engines better understand what products and content can be found at your WooCommerce store. One more tip from her: “Internal links are the super hero of SEO.”
• Product descriptions are important. Address the five Ws and H in each description and optimize for readability. Reading experience is a part of overall user experience. Don’t neglect it. Make it easy for your WooCommerce customers to find the information they seek.
• Speed matters. Consumers expect a page to load within two seconds. Anything slower than that will cause them to experience frustration and make them bounce.
• Never underestimate the power of testing. Test your coupon codes. Test the checkout process. Test EVERYTHING!
• WooCommerce subscription websites are recurring magic. Automatic billing benefits you and your customer.
• One way to build a better user experience that is often overlooked is to customize your error messages. It better indicates to your user what went wrong and strengthens your brand voice and personality.

It’s clear. WooCommerce is a huge asset to both WordPress and the eCommerce industry. There is still so much potential for growth and success. Are you thinking about launching a WooCommerce website? Contact us for assistance. We would love to partner with you and make great things happen.

The post WooCommerce Lessons and Tips from WooSesh appeared first on WebDevStudios.

The idea of connecting all people to knowledge and each other is enduring.

-Bran Ferren

Connecting and sharing knowledge are a huge part of our culture at WebDevStudios (WDS). So when opportunities to do exactly that arise, we’re excited to get involved. This weekend, find us connecting at WordCamp Baltimore. And mid-October, join us live at the virtual conference WooSesh as we share expert advice on how to maintain an eCommerce website. As always, visit our WDS Gives Back page to keep up with all of our upcoming events.

WordCamp Baltimore, October 6-7

When it originally began, WordCamp Baltimore was WordCamp MidAtlantic, and WDS CEO, Brad Williams, was among the attendees. In fact, it was the first WordCamp ever where WDS had a presence and where Brad spoke. Needless to say, WordCamp Baltimore has a special place in the heart of WDS.

This year, we are a proud Community Sponsor of WordCamp Baltimore, and WDS COO, Lisa Sabin-Wilson, will be there. She’s looking forward to catching up with Matt Danner and listening to Cory Miller’s talk “Living Life Like an Iceberg or a Ship,” where he will share his personal experiences of learning how to switch from living a solitary life to one that is richer and fuller.

Other notable presentations include “Making Security Make Sense to Clients,” by Adam Warner, “Launching Your Very First WordPress Website,” by Neha G. Goyal, and “How to Write Winning Website Copy,” by Gayle Williams. With two days of education and riveting panel sessions, WordCamp Baltimore attendees will never be bored. See the complete WordCamp schedule here. If you are missing out on the excitement in Baltimore, follow the event on Twitter: @wordcampbalt and #wcbalt.

WooSesh, October 18-19

Are you looking to level up your WooCommerce skills? Or, are you in need of eCommerce inspiration? Then the virtual conference WooSesh is for you. And… registration is FREE! Register at WooSesh.com now.

Created by Brian Richards, the organizer behind WordSesh, and Patrick Rauland, eCommerce and WooCommerce Consultant, WooSesh promises two days of insightful and helpful education for both WooCommerce store builders and developers alike. Whether you code multiple languages or run your own online business, there will be topics and subjects for you.

WDS Director of Marketing, Shayda Torabi, will be on hand to speak on maintaining a WooCommerce website on the 18th at 11:00 a.m. Eastern.

“We wanted to participate because from our experience supporting eCommerce sites of all sizes, we’ve learned a thing or two about the right and wrong ways to maintain those sites,” she says. “eCommerce sites generally are made to transact, so when a site is offline for maintenance or worse because you broke something on your site, that downtime can cost you not only time, but money. It’s an important conversation to have.”

Shayda says that WooSesh particpants can expect to walk away from her talk with a better understanding of not only what site maintenance actually entails, but why it should be a priority for them to properly maintain.

“Usually people don’t realize there’s a problem till it’s too late,” she explains, “So this talk will point out some preliminary checkpoints that can hopefully help WooCommerce store owners avoid pitfalls in the future!”

Visit the WooSesh website to see the impressive lineup of speakers, including popular experts like Chris Lema, Lindsey Miller, Cody Landefeld, and Maddy Osman, plus a complete schedule of events. WooSesh is a session you won’t want to miss!

The post Upcoming Events: WordCamp Baltimore and WooSesh appeared first on WebDevStudios.