The plugin follows the WordPress tradition of being extensible. It’s possible to change the look and functionality of the shopping cart. Plus, there’s a massive number of available extensions.

There are pros and cons to this, though. It’s great that you can make WooCommerce your own. But customization comes with risks.

So, how far should you go? Here are some tips for customizing WooCommerce. Along the way, we’ll explore the potential downsides of doing so.

Different Ways to Create a Custom Experience

First, let’s review the different options for customizing WooCommerce. There are three separate approaches, each with their pros and cons.

Think about the future before choosing a method. Be sure that you’ll be able to maintain any customizations you make. Otherwise, things can get messy down the road.

Overwrite the Plugin’s CSS

Style tweaks can be made by overwriting the plugin’s CSS. You can identify specific CSS classes by using your browser’s developer tools. Then, it’s a matter of changing the relevant styles and placing them in your theme.

This method works well for minor changes. For example, changing the color of the “Add to Cart” button.

Want to take things further? You can also disable the default stylesheet. This method is for those who want to rewrite styles from the ground up.

WooCommerce does change its CSS occasionally. Thus, you’ll want to keep up with any changes. You may need to adjust your custom styles accordingly.

Use Hooks & Filters to Modify WooCommerce’s Behavior

WooCommerce includes plenty of hooks and filters for developers. They allow you to modify the plugin output and add custom functions.

Hooks offer several possibilities. You could use them to make small tweaks. Or you might leverage them to create a fully-functioning extension.

This method is also easier to maintain. Updates to WooCommerce don’t impact hooks as often. And you can place code in a custom plugin to keep it organized.

Override the Plugin Templates

There are occasions when overriding a WooCommerce template is unavoidable. The plugin includes templates for every part of the front-end display. And they’re logically organized. It gives you fine-grain control over the process.

But it should probably be a last resort. WooCommerce updates templates frequently. As such, you’ll need to stay on top of changes.

The plugin will warn you if a template is outdated. In this case, you’ll have to grab a fresh copy and make the necessary changes.

Making Smart Woocommerce Design Decisions

Yes, it’s possible to rip apart the look of WooCommerce. But should you? That may be a more difficult decision than you think.

It may not be to everyone’s taste. But there’s nothing inherently wrong with the way WooCommerce looks. And its popularity has benefits.

Users may be familiar with Woo’s established design patterns. That could make the shopping experience more intuitive. There’s some risk in disrupting that flow.

With that, changes to colors, typography, and branding make sense. You’ll have a shopping cart that matches your aesthetic. And you’ll continue to provide customers with a time-tested UX.

It’s possible to create a custom look that maintains Woo’s strength. And it doesn’t have to look like a default installation.

Radical changes can still be a success. But starting from scratch should be carefully considered.

Adding Custom Functionality to Your Cart

There are a myriad of ways to add custom functionality to WooCommerce. An industrious developer can build an extension. Or you can choose from the array of free and commercial products.

This capability is what makes WooCommerce so powerful. It can sell pretty much anything. Expanding its functionality can be done with a few clicks.

It’s worth keeping a few things in mind, though. First and foremost, WooCommerce extensions are WordPress plugins. And they come with the same potential risks.

If a WooCommerce extension is essential to your store, choose wisely. Look for a plugin that is well-maintained and supported. The wrong choice could cost you dearly.

Also, think about why you want a particular extension. Does it provide key functionality? Will it improve the user experience?

Move on if you can’t answer “yes” to either of these questions. No one benefits from more technical debt.

Always Look to the Future

If you take one thing away from this article, let it be this: Keep the future in mind when customizing WooCommerce.

Everyone wants to have a successful online store. It starts with building a website that is stable and secure. From there, it’s about optimizing the user experience.

Therefore, any customizations should fit this mold. And not all tweaks are of equal value. Just because WooCommerce is extensible doesn’t mean you have to max out on changes.

You’ll also need a plan for any additions you make. They all require some level of maintenance. It should be a factor in your decision-making.

WooCommerce is every bit as flexible as WordPress. Make sure that you’re using it to your benefit!

The post The Pros & Cons of Customizing WooCommerce appeared first on Speckyboy Design Magazine.

A very nice aspect of WooCommerce is that you can get all kinds of new functionality through its many available extensions. While most of the official extensions will cost you some money, various free plugins are available to add more features to your store. Here is a collection of free WooCommerce plugins that we think you’ll enjoy.

If you’re new to WooCommerce, we have previously published a guide that will help get you up and running quickly. And if you’re looking for WooCommerce compatible WordPress themes, we have published a collection of those here.

Mailchimp for WooCommerce

Email marketing is such a big part of eCommerce these days, and MailChimp for WooCommerce can help. It populates your Mailchimp audience with purchase data, allows new users to opt into your list, and even sends abandoned cart reminders.

Product Feed PRO for WooCommerce

Drive sales via other essential channels with Product Feed PRO for WooCommerce. The plugin will create product feeds for use with Google Shopping, Facebook, and more. There are no product or feed limits, and you can tweak which attributes are included.

WooCommerce Blocks

WooCommerce Blocks has brought the eCommerce plugin into the Gutenberg era. This makes it super easy to display specific products or categories anywhere on your site with the block editor.

FiboSearch – Ajax Search for WooCommerce

The ability for customers to quickly find what they’re looking for is crucial. FiboSearch adds helpful “live” search capabilities powered by Ajax. Search by product title, description, or SKU. Product images and pricing are included in the results.

Custom Product Tabs for WooCommerce

If you have specialized information that applies to one or more products, Custom Product Tabs for WooCommerce is worth a look. It offers the ability to create new custom content tabs that can be applied on a per-product or multi-product basis.

Customer Reviews for WooCommerce

Positive reviews make a big difference. With Customer Reviews for WooCommerce, enhancing the built-in product review functionality is simple. The plugin will add images, voting, ratings, and send review reminder emails. It also integrates with Google Shopping and enables a question-and-answer section.

Table Rate Shipping Method for WooCommerce

Shipping is always one of the most challenging facets of eCommerce. Table Rate Shipping lets you create a simple shipping formula based on cart total or weight. There’s plenty of flexibility here – putting you in control of shipping costs.

Sequential Order Number for WooCommerce

Getting the WooCommerce order numbering system to play nicely with your internal data can be a pain. Sequential Order Number for WooCommerce lets you customize things with sequential numbering, a custom prefix/suffix, custom lengths, and more. Admin order search functionality makes it a breeze to find a specific order within the back end.

WooCommerce Cart Abandonment Recovery

When a customer abandons their cart, it doesn’t have to be the end of the road. WooCommerce Cart Abandonment Recovery helps by sending an automated, timed sequence of reminders. It can even generate custom coupon codes that provide an incentive for coming back to your shop.

YITH Essential Kit for WooCommerce #1

YITH Essential Kit for WooCommerce #1 is a collection of plugins that add valuable features to your WooCommerce install. There are plugins for AJAX Search/Product Filtering, Comparing Products, Image Zooming, Quick Views of Products, Infinite Scrolling, Wish/Wait Lists, Advanced Reviews, Multi-Vendor Carts, Tab Manager and a whole lot more.

Fast Simon

Fast Simon for WooCommerce Search provides cloud-based auto-complete search functionality to your WooCommerce Store. The free version is suitable for stores with up to 200 sessions.

Smart Manager for WooCommerce

Stores with a lot of products can be a pain to edit. Smart Manager for WooCommerce lets you edit products, variations, customers, coupons, and orders in a fast, easy-to-read table interface.

WooCommerce Checkout Manager

With WooCommerce Checkout Manager, you can add, remove, reorder, and require fields during the checkout process.

WooCommerce Coupon Shortcodes

Encourage your customers to make purchases using coupons with WooCommerce Coupon Shortcodes. The plugin includes shortcodes for conditionally displaying available coupons and other useful coupon-related information.

EU/UK VAT Compliance Assistant for WooCommerce

EU/UK VAT Compliance Assistant for WooCommerce is a set of tools that takes the pain out of complying with the EU’s VAT law.

WooCommerce PDF Invoices & Packing Slips

Enhance your site’s customer service with WooCommerce PDF Invoices & Packing Slips. You have the ability to attach PDF invoices to WooCommerce emails, customers can download their invoice via their account page, and the templates are customizable.

Order Delivery Date for WooCommerce

Some products (like gifts or flowers) may require the customer to pick a desired delivery date. Order Delivery Date for WooCommerce adds a date-picker field to the WooCommerce checkout to allow customers to choose a delivery date.

AfterShip – WooCommerce Tracking

Customers love to receive their order tracking info, and AfterShip – WooCommerce Tracking provides an easy way to add this information.

WooCommerce Digital Signature

If your customers need to provide a signature before purchasing or downloading your product, WooCommerce Digital Signature can add that capability to your site.

WooCommerce Multilingual

WooCommerce Multilingual works in conjunction with WPML to translate your store’s pages to a host of different languages.

The ability to extend WooCommerce means that you can build an online store with just about any functionality you need. Plus, the fact that there are so many great free extensions available means that you can add top-notch features without having to invest a lot of money.

Hopefully, you’ve found at least a few extensions here that will both improve your store’s functionality and boost sales.

The post Top 20 Free WooCommerce Plugins for WordPress appeared first on Speckyboy Design Magazine.

This tug-of-war is most evident when it comes to eCommerce. Yes, it’s now possible to get a basic shopping cart up and running without too much trouble. For instance, entering products into WooCommerce or Shopify is a streamlined process. It’s the rest of the experience that gets messy.

While eCommerce has never been simple, one can argue that it also hasn’t gotten any easier – despite the technological advancements. Several contributing factors have held back progress. Let’s look at a few obstacles that are getting in the way of building a modern eCommerce website more efficiently.

So Many Options – Each with Caveats

Having a choice is usually a good thing. But what to do when there are so many options available?

Between content management systems (CMS), shopping carts, payment gateways, and related plugins – it’s enough to make even a seasoned developer’s head spin. And, in addition to their benefits, each has caveats to consider.

The recommendations we make to clients are crucial. Security, stability, and scalability are all project requirements. If we miss one or more of these aspects, it could mean a lot of headaches down the road.

That’s probably why many of us go with the tools we already know. Even if there are drawbacks, at least we have an idea of what to expect. Still, there’s always the possibility that a better solution exists elsewhere.

More Stringent Privacy and Security Standards

Privacy and security are paramount for all websites. They become even more important when considering the need to keep an online store’s customer and transaction data safe. A significant breach could be disastrous for everyone involved.

Thus, service providers appear to be making changes to tighten up these areas. It’s a positive in that we want the best security possible. But it can also make a web designer’s job more difficult.

Take payment gateways as an example. During the build process, we are often responsible for integrating them into a website. This usually requires login credentials to adjust settings, access API keys, etc.

But it’s not always a simple task. Thanks to the use of two-factor authentication (2FA), logging in means coordinating with clients to receive security codes. And if your client isn’t tech savvy or readily available, it could cause delays.

Similar scenarios play out across providers. That makes setting up analytics, customer relationship managers (CRM), and even Google Maps APIs a messy chore.

In some cases, clients can delegate access to their existing accounts. Then again, you may have to walk them through setting up the services they don’t already use. It has become a routine, yet frustrating part of an eCommerce project.

Data That’s Stored in Different Places, Ways

Data plays a huge role in eCommerce. The right information can help store owners make smart decisions on pricing, inventory, shipping, and more. But all too often, it seems like crucial data is scattered.

This is particularly the case when building with WordPress and WooCommerce. The combo will provide some basics regarding customers and sales. However, the more plugins you add to the mix, the more difficult it is to retrieve the little details that add further context.

While the data may be stored on your website, that doesn’t mean it’s easy to access. Because WordPress plugins can write and store data in various ways, not everything can be wrangled into a single report – at least, not without some serious PHP code to bridge these divides.

And it’s not just a WordPress problem. Service providers such as payment gateways and shipping companies could also have valuable order information. The process for tapping into and unifying it with other site data isn’t always straightforward.

Because eCommerce tends to rely on third parties, data is spread all over the place. Web designers have often been tasked with either building a patchwork system for bringing it together or simply leaving some items out.

eCommerce Is a Different Animal

The reality is that building an eCommerce website is a unique challenge. It’s a puzzle that has multiple pieces – each with varying levels of complexity.

And although the design and build tools may have been improved over the years, other areas have become more difficult to manage. This is due in part to the need for security and our reliance on third-party service providers.

The result is clunky integration processes and disparate data sources. Putting this all together takes time, patience, and expertise. It’s a good reason why web designers should charge significantly more for eCommerce projects.

The finished product can still be outstanding. It’s just that getting there can be a pain!

The post The Challenges of Building a Modern eCommerce Website appeared first on Speckyboy Design Magazine.

eCommerce stores that sell physical products, subscription services, and downloads – they’re all within reach. The WordPress plugin ecosystem provides plenty of options. Want to list your products on a third-party retailer such as Amazon? That’s fair game as well. And there’s an opportunity to enhance things even further through custom code.

However, the sheer number of WordPress eCommerce plugins can make your head spin. Some serve a very niche purpose, while others allow you to pick and choose functionality. We’re here to help provide some clarity.

Today, we’ll introduce you to ten of the best eCommerce plugins on the market. Along the way, we’ll provide some background info on what types of shops they’re best suited for. Let’s get started!

Please note that some product types may require additional add-ons.

The post The 10 Best Plugins for Adding eCommerce to WordPress appeared first on Speckyboy Design Magazine.

The fact that WooCommerce is free (with the option to use free extensions or buy commercial ones) and fairly easy to set up is very attractive to those looking to sell online without breaking their budget.  It’s possible to build an online shop that looks and functions similarly to the upper echelon of online retailers.

But this particular path of eCommerce has its own requirements and challenges. WooCommerce is a different animal than the likes of Shopify, Miva, or other SaaS providers. There are things you need to be aware of to make the most out of your site and maintain security and stability.

Let’s take a look at some of the hidden secrets to winning with Woo:

Test Updates on a Development Site First

Because your WooCommerce shop could also be running alongside different WordPress plugins, updates aren’t always a smooth process. Bugs not only show up in new releases of Woo, but conflicts can arise with any plugin or theme you have installed. It can be a hot mess if not handled properly.

That’s why I always recommend running a development (aka staging) version of your site. Some WordPress specialty hosting companies will provide this for you. If yours doesn’t offer this service, there are plugins that can help. Or you can install a MAMP or WAMP server on your own system.

A staging environment allows you to test out the latest plugin updates without fear of breaking your live site. Install any available updates, click around your site and put through a test order or two. If everything works as expected, you can run the updates on your live site (or push them if you’re running some sort of version control).  If something isn’t working right, you’ll be able to safely troubleshoot without disrupting customers.

This may take you more time, but it gives you some peace of mind. Watching an update break your site is no fun. Take that possibility out of the equation with this extra step.

Don’t Touch Templates (Unless You Have To)

Yes, WooCommerce lets you override specific plugin templates in your own theme. This can be very useful for changing around layout or simply adding some information to a particular area.

The problem is that Woo occasionally updates these templates when new versions of the plugin are released. You’ll often receive a message within the WordPress Dashboard that states that you have one or more outdated templates. You can then see which ones are out of date by visiting WooCommerce > Status.

Running outdated versions of templates may very well work – or not. Your site’s layout can go a bit wacky, or critical functionality may prevent customers from completing orders. To fix an outdated template, you’ll have to grab the latest copy of WooCommerce and re-customize the latest version of the template in question to match what you previously did. If you customize several templates, it can become a real pain.

The best way to prevent all of this trouble is to avoid customizing template files – even if they are in your theme. Instead, take advantage of WooCommerce hooks. These little snippets of code can accomplish the same results as custom templates without worrying about plugin updates breaking something.

Take Security Seriously

Security is one of the top concerns for any site – especially when selling online. If you’re running WooCommerce in particular, take care to:

Run Your Site in SSL

The barriers of price, identity verification, and technical knowledge required to run your site in SSL have been broken down. With providers like Let’s Encrypt offering free certificates, along with hosts that have near-free offerings – there’s no excuse not to use SSL. For these free or cheap certificates, you don’t even need to go through any drawn-out verification process. SSL increases security and consumer confidence – so use it!

Lock Non-Administrators out of the Dashboard

If you’re allowing customers to have their own accounts on your site, it’s a good idea to ensure that they can’t access the WordPress Dashboard.  Even though a customer’s role means that can’t do any damage, it’s still good practice to keep them out. You can accomplish this through a plugin like Remove Dashboard Access or through some simple code.

Assign Shopkeeper Roles Accordingly

It’s always a good idea to provide users with only the level of access they need and nothing more. If one or more non-administrator staff members need to access orders and customer information, assign them the Woo-specific Shop Manager role. This will provide users with the permissions they need to process orders, etc., without giving them full administrator access.

Run Other Plugins Sparingly

While there are currently over 50,000 plugins in the WordPress plugin repository, you should be extra careful about which ones you choose. Each new plugin you install adds another opportunity for something to break or (worse yet) a security hole. Therefore, only run plugins from trusted developers. And only run what you need.

Building a Woonderful Site

My terrible pun aside, WooCommerce allows you to build an online store that looks and functions beautifully. You can use it as a vehicle to make quite a good living – whether you’re running a shop or building them for others. But its general ease of setup belies the fact that there is a whole lot of responsibility in running the plugin.

Things can and do break. That’s just the nature of running a store on an open-source platform that allows for a nearly infinite amount of plugin, theme, and customization combinations (not to mention hosting environments). Neither WooCommerce nor anyone using it can predict that something will go awry with anyone specific setup.

So that puts it upon designers, developers, and store owners to know what they’re getting into. Build processes for testing updates before they go onto your live site. Do what you can to secure the site and don’t run any unnecessary plugins.

Putting a solid strategy in place from the beginning will help you keep WooCommerce (and sales) humming along.

The post How to Run a Stable, Secure and Successful WooCommerce Website appeared first on Speckyboy Design Magazine.

Raking in over $1.2 trillion dollars a year and with over 44% of people globally having made an online purchase just last year, online stores are projected to continue to grow at exponential rates.

If you are looking to open a virtual shop on your WordPress website you should look no further than the free WordPress plugin WooCommerce. Powering over 37% of all online shops, with over 1 million active downloads, and a stellar 4.6 star rating, this freemium WordPress plugin has everything you need to create, manage, measure, and maintain an online store with ease, especially when used with the right WordPress hosting around, using the WooCommerce platform.

Why WooCommerce?

WooCommerce is a full open-source eCommerce plugin built to seamlessly integrate with WordPress powered websites. Developed by the great team over at WooThemes, and offering a stable and secure platform that is fully responsive, WooCommerce makes it easy for you to set up an e-shop.

Securely coded using only the best coding practices, and audited by the industry leaders in plugin security, you can rest assured your store and customer’s information is safe. In addition, WooCommerce is not a third-party plugin hosting your eCommerce store. This means you remain in total control of everything.

• Sell anything. With WooCommerce you can sell both physical and digital products with ease. Offer product variations, multiple configurations, and even instant downloads to your customers. You can even take advantage of WooCommerce’s free extensions and premium extensions to add things such as memberships, bookings, and recurring subscriptions to your website.
• Ship anywhere. Having a global presence is crucial to becoming a successful online business. WooCommerce opens up the possibility for you to ship your products anywhere in the world. You can customize your shipping rates – free shipping, flat rate shipping, or even real-time calculations – and limit your shipments to specific countries.
• Accept Payments. WooCommerce makes accepting payments for your products a cinch. It comes bundled with the ability to accept all major credit cards, PayPal, BACS, and cash on delivery. WooCommerce also includes 140 region–specific gateways such as Stripe, Authoriz.Net, and Amazon Payments that can easily integrate into your e-shop.
• Customize To Your Liking. With hundreds of extensions available and the ability to scale as your business grows, WooCommerce can be designed to encompass your brand’s look and feel with just a few clicks. What’s more, WooCommerce can be used with any number of WooCommerce compatible themes.

Installation and Activation

WP Admin > Plugins > Add New, search for ‘WooCommerce’

To download and install the WooCommerce plugin navigate to Add New in your WordPress dashboard menu and search for the WooCommerce plugin.

Once you have installed and activated the plugin you will notice two new dashboard menus have been added labeled WooCommerce and Products.

You will also be encouraged to run the WooCommerce Setup Wizard. This is especially useful for helping you create the required web pages needed for WooCommerce to operate properly. These include Shop, Cart, Checkout, and My Account. You can change the names of these pages later if you want to.

Configuring WooCommerce

WP Admin > WooCommerce > Settings

Under the settings section of the WooCommerce plugin, you will notice there are several tabs for the initial setup of your plugin. Here you will be able to configure almost every aspect of your e-store.

General

Start by clicking on the General tab to configure things such as:

• Base Location. This is where your online shop’s base country and state is located. It will help determine default tax rates and customer locations.
• Selling Locations. Sell worldwide or limit sales to specific countries.
• Default Customer Address. This option is used for calculating tax and shipping automatically for your customers. Assume they are in the same location as your eCommerce shop, provide no estimated tax or shipping price until the checkout process is near completion, or utilize the geolocation tool to verify your customer’s exact location.

Under the General tab you will also set how your prices will be displayed to customers when making purchases. This includes features such as currency type and position, as well as decimal placement.

Products

Next you will find the Products Tab where you can configure many settings related to your products:

• General. Decide on product weight and dimension units. Configure how you want product ratings to be left for your merchandise.
• Display. Choose your e-shop’s default web page, show products and subcategories, and sort products based on default sorting, popularity, average rating, most recent, or via price. Set dimension sizes for Catalog Images, Single Product Images, and Product Thumbnails.
• Inventory. Here you can configure how you will manage your inventory. Choose to hold products for customers, enable notifications for low or out of stock product, and even set low/out of stock thresholds.
• Downloadable Products. For those selling digital products configure how you will provide such purchases to your customers (Forced Downloads, X-Accel-Redirect/X-Sendfile, or Redirect only). You can also set access restrictions like requiring a login for download or granting access after payment.

Tax

After you have configured your eCommerce shop’s products, you must determine your Tax settings. Here you will define your e-shop’s tax rules with multiple tax classes and local tax rules.

This is important for those who are selling internationally. WooThemes recommends checking out this helpful article if you have questions regarding how to set up the tax rules for your shop.

Checkout

Next up is how your eCommerce shop will handle the checkout process. Select the Checkout tab to get started.

Start by enabling the use of coupons and guest checkouts. Then set the pages your customers will be redirected to when checking out for a purchase they wish to make. Lastly determine which order popular payment gateways will displayed to your customers by using the drag & drop capability.

WooCommerce comes standard with 5 Core Payment Options. However, there are dozens of additional free and premium payment gateway options that can easily be integrated into your e-shop such as Stripe, Authorize.Net, and Amazon Payments.

Shipping

WooCommerce has multiple shipping settings to establish based on your online store’s needs. Things like shipping calculations, destinations, and restrictions are the first settings to configure.

Next you will want to determine your online shop’s shipping methods.

When you click on your preferred shipping method it will bring you to another screen where you can configure that particular method’s settings.

Each shipping method will have a unique set of options to fill in so that your customers will know from the start how much shipping cost their purchase will incur. You also have the ability to disable all shipping methods if you sell only digital products.

Accounts

This section edits all frontend account and registration options. Choose the default Account Page where customers can view their account information. Set endpoints so that when new content is present, your customers can view it. Display order information, account and address information, and provide a Lost Password and Logout option.

You also have the option to require your customers to register and create an account in order to access the Checkout and My Account pages.

Emails

WooCommerce has several email notification options for you to configure. For example, send a notification when a new order has been placed or cancelled, when an order has been completed, or when a new account has been created.

Below these notification options you can customize your email sender information, include a header image and footer text, and even change colors to match your e-shop’s look.

Once you click on the respective notification, you will be brought to a separate screen. From there you can enable or disable that particular notification, choose a recipient email, a subject line, an email heading, and email type.

API

Lastly WooCommerce offers the option to enable the REST API as well as create Keys and Webhooks for your apps.

Final Thoughts

Setting up an eCommerce shop using the ever-popular WooCommerce plugin is relatively easy to do even for new shop owners. As one of the best freeWordPress eCommerce solutions out there, WooCommerce truly delivers. Packed full of all the features needed to get an online shop up and running, as well as being user-friendly on both ends, WooCommerce makes for the perfect eCommerce platform. Plus, WooCommerce provides enough functionality to get most e-shops launched quickly, all for free!

If you are looking for an eCommerce platform that is trusted by millions, has extensions for every type of store imaginable, and is simple and easy to use, give WooCommerce a try. By following the above steps for configuring the plugin, you will be selling products in no time.

Have you ever used WooCommerce for your online business needs? What did you think about its initial setup and configuration process? I would love to hear all about it in the comments below!

The post A Beginner’s Guide to Using WooCommerce appeared first on Speckyboy Design Magazine.

But there are other ways for developers to customize WooCommerce. Using the many available Hooks, you can both add new functionality or change how existing features work. Hooks, which are categorized as either Actions or Filters, are snippets of code that can be placed into your WordPress theme’s functions.php file or even added into a custom plugin. Virtually everything WooCommerce (or WordPress, for that matter) does can be tweaked.

Note that, while WooCommerce does allow you to create custom templates for your site, it’s usually best to avoid this when possible. New versions of various templates are often released along with plugin updates.

That means any templates you have customized may have to be recreated using the latest versions. Therefore, it’s often much more efficient to use Hooks, as they can often help you reach the same desired results without the need to constantly update.

The following are some basic examples of hooks that will demonstrate just a tiny bit of what they’re capable of. Then we’ll share some excellent resources where you can find useful code snippets and advice.

Example 1: Add Credit Card Logos to the WooCommerce Cart Page

 // Add Credit Card Logos to WooCommerce Cart Page
add_action( 'woocommerce_after_cart_totals', 'credit_cards_available' );
function credit_cards_available() {
echo '<div class=”credit-cards”>
<i class="fa fa-cc-visa" aria-hidden="true"></i> <i class="fa fa-cc-mastercard" aria-hidden="true"></i>
</div>
<div class=”credit-cards-message”>We accept VISA and MasterCard</div>';
}

The action 'woocommerce_after_cart_totals' provides a built-in way to easily add content under the Cart Totals area of the WooCommerce Cart page. In this case, we’re using FontAwesome icons to display credit card logos.

Beneath the logos will be some text to give a verbal indication of which credit cards the store accepts. You could, of course, customize the contents and look to whatever suits your needs. Actions such as this are great for times when you just need to add content to a specific spot.

Example 2: Change a Text String

 // Change Shipping to Shipping and Handling
add_filter('gettext', 'translate_text');
add_filter('ngettext', 'translate_text');
function translate_text($translated) {
$translated = str_ireplace('Shipping', 'Shipping & Handling', $translated);
return $translated;
}

In this example, we’re looking to change any instance of the word ‘Shipping’ to instead say ‘Shipping & Handling’.  The 'gettext' and 'ngettext' filters are used to make this happen. The $translated line contains both the text we want to replace (Shipping) and what we want to replace it with (Shipping & Handling). This can be used to change just about any text through your shop.

Just be careful as sometimes you may accidentally replace portions of longer, similar words. For example, swapping the word ‘Shop’ with ‘Order’ may also have an unintended effect on the word ‘Shopping’. That could result in the word being displayed as ‘Orderping’.

WooCommerce Hook Resources

Now that we’ve had just a taste of how hooks can be used to customize WooCommerce, let’s check out some excellent resources for learning more. The sites below will help you discover which hooks are available and provide useful code snippets.

WooCommerce Hook Reference
The official source, with a listing of every single hook available.

Remi Corson
Mr. Corson works for WooThemes and is an expert at customizing WooCommerce. His site includes lots of great code snippets and helpful advice.

Super useful WooCommerce code snippets
This collection of snippets tackles some common customizations.

Business Bloomer’s Visual Hook Series
Want to see exactly where a hook resides on a particular page? This visual resource is great for finding what goes where.

WooCommerce Snippets
60+ snippets you can use to customize Woo, straight from the official codex.

Make Woo Work for You

Part of the beauty of WooCommerce is that there are any number of ways you can shape it to fit your exact needs. This separates it from many SaaS shopping carts out there that essentially are closed systems. But, as the saying goes, with that power comes great responsibility. It’s easy to inadvertently break something while making customizations.

If your store is already live and taking orders, it’s a good idea to try out hook customizations on a separate staging version of the site. Once you’ve got things working properly, you can move the changes over to the live version.

Once you’ve taken the proper precautions, have fun exploring the wide array of available hooks and create a WooCommerce site that sets you apart.

The post How to Use WooCommerce Hooks appeared first on Speckyboy Design Magazine.

There’s a lot you can do in terms of design when it comes to WooCommerce and ecommerce sites in general, but we’re going to cover a modest list of four WooCommerce design tips you need to know when you look for new themes or create your own designs.

1. Compile a List of Designs That Inspire You

You shouldn’t deliberately copy someone else’s design, especially not without asking for permission and disclosing credit to them, but that doesn’t mean you can’t gain inspiration from it.

Examining designs and layouts from other designers is one of the greatest learning techniques you can use. Create a text document using your favorite word processor, and view the WooCommerce showcases listed below.

If you like something about a particular design, add it to your document, and make note of exactly what you like and which elements you think are working best for the shop.

WooCommerce.com

This first showcase was curated by WooCommerce itself. Some of the biggest brands use WooCommerce, and this showcase features over 80 websites using WooCommerce to power their online stores.

Visit WooCommerce.com Showcase →

Built with WooCommerce

This is a simple website featuring blog posts of websites built with WooCommerce. Posts include a screenshot of the shop’s homepage as well as the shop’s individual pages, including category pages, product pages, the cart page, and the checkout page.

Visit Built with WooCommerce →

WinningWP

This showcase is a blog post published by WinningWP, a WordPress publication. It features a simple list of real-world examples of “stunning” websites using WooCommerce. It uses screenshots of the site’s home pages to showcase them.

Visit WinningWP →

Tyche Softwares

Tyche Softwares is a WordPress plugin developer that specializes in WooCommerce plugins. They offer a booking plugin, an abandoned cart plugin, an order delivery date plugin and more, and use this page to showcase which customers are using their plugins with WooCommerce most effectively. This is a good way to see how various features can be implemented within the store system.

View Tyche Softwares’ Showcase →

2. Use a Homepage Layout That Makes Sense

Design is about more than just what styles you use, especially when it comes to ecommerce sites. You need a design that’s easy to consume but also converts. Use a WooCommerce theme that uses a homepage layout that makes sense or design your own WooCommerce site in this way.

What “makes sense” is a homepage layout that showcases your best and most relevant products, which are the types of products customers are most likely coming to your shop for. The layout should feature a hierarchy, especially if you want to display dozens of products throughout the homepage. In general, the hierarchy should look like this:

1. Featured Product – This should be at the very top of the homepage, and it should be the largest section. It should act as a call to action in most cases, and you should save it for your most popular product, especially when it’s on sale, or a new product you want to promote heavily and know will sell well.

2. Popular Products – Some consumers take their time to shop. They analyze every product page carefully. They read every review. Others, however, don’t like wasting time. They just want to know what’s hot and what everyone else is buying. This is why popular products should come after your featured product, particularly in a grid layout or carousel slider.

3. Relevant Products – This one is meant to be used as another timesaver for customers. It’s true, some customers prefer to save time by going for what’s hot, but others save time by shopping at sites that make it easy for them to find what they’re looking for. This is why displaying your shop’s parent categories, and child categories if you can work them into your design elegantly, should be considered on your homepage.

Here’s an interesting way GetBowtied uses this technique for the Collection: Best-Selling demo of their Shopkeeper theme.

It uses a featured collection and displays products in a clean, minimalist fashion. It’s free of distractions and gives the customer a clear indication of where they should focus their attention and what they should shop for.

3. Simplify Your Site’s Navigation

This one piggybacks off of the last tip. A well-designed website should be easy to use. Your visitors shouldn’t have to scroll through several pages to find something nor should you make your site’s navigation and overall structure too complicated.

This tip starts in the backend of your site and involves simplifying the parent product categories, child product categories, product tags and product attributes WooCommerce allows you to create. Creating too many hierarchies can make it difficult for customers to find the products they’re looking for, and when you do use hierarchies, ensure they make sense.

For example, an outdoors shop should have the following parent categories:

• Fishing
• Hunting
• Camping
• Boating
• Apparel

These are broad categories, and they should be the only categories you place in your navigation menu. This shop should not use such parent categories as “fishing reels,” “tents” or “hunting apparel.” These are child categories that belong to the Fishing, Camping ,and Apparel categories, respectively.

If you want to make your child categories easily accessible on the homepage without creating clutter, use a mega menu that allows you to hide your child and grandchild categories behind a drop-down menu. Here’s an example in the XStore theme by 8theme.

Another method would be to only use the parent categories on the homepage and not use a drop-down menu of any kind. Instead, you’ll use a sidebar menu on category shop pages.

This allows you to use child categories, grandchild categories, tags, and attributes without cluttering the homepage.

Lastly, you should make a search function easily accessible to customers in case they’re looking for something specific. You don’t need place an entire search bar across the navigation menu or header. Instead, you can place a search icon or the word “Search” in the navigation menu and have it trigger a search feature once it’s clicked.

Here’s an example from TeslaThemes’ Narcos theme.

4. Use Clean Layouts for Individual Pages

Acquiring customers is important. However, keeping customers should be a priority of yours. In short, it’ll allow you to spend less on marketing and advertising as you’ll have a predictable stream of repeat customers on a regular basis.

There’s a lot that goes into getting a customer to buy and buy again, and you’d be surprised by how much design goes into that equation. For starters, your product pages should use a clean, minimalist design that places its focus on content, not upsells.

You may not have much control over the copy as a designer, but you can create a layout the shop owner can use to display information in a hierarchy. For example, a bulleted list containing the product’s most important features should exist at the very top of the page. A longer description with proper sales copy and a list of FAQs can go beneath that.

These tips also apply to other individual pages on your shop, including the cart, checkout, and payment pages. A clean layout on these pages that isn’t cluttered by filler text or upsells lets the customer see exactly what they’re purchasing, which leads to less confusion, and it lets them know you care more about giving them a positive shopping experience than you do about getting them to add more items to their carts.

Wrapping Up

Though WooCommerce is a popular way to design an online store with WordPress, it does have slightly different design requirements than WordPress alone. The tips we covered today should help you tackle these differences with confidence. Now remember, those tips were:

1. Gain inspiration from the designs of others.
2. Use a clean homepage layout that’s easy to use.
3. Use a simplified navigation system.
4. Use clean page layouts throughout the purchase funnel.

I hope this will serve as a helpful guide when you embark on creating your next WooCommerce site!

The post WooCommerce Design Tips You Need to Know appeared first on Speckyboy Design Magazine.