WordPress

How to Build an Awesome WooCommerce Store with OceanWP

Written by Ellice

Eye appeal is buy appeal. This is an old adage that rings just as true for online stores as it does for physical ones. In order to remain competitive, it’s crucial that your site displays your products in a gorgeous, well-structured fashion on every device. Equally important is ensuring that you can easily manage customer information and payments on the back end.

Building a website with the OceanWP WooCommerce theme is a perfect way to achieve both of these goals in WordPress. Whatever the nature of your online business, OceanWP will take the guesswork and hassle out of showcasing your products for maximum effect. Better still, since OceanWP offers full integration with the WooCommerce plugin, you can configure, manage, and promote your e-commerce site with ease.

In this article, we’ll introduce WooCommerce, and discuss why it’s the perfect option for your online store. Then we’ll walk you through how to create a WooCommerce-powered website using OceanWP, and show you a few extensions you can implement to make your store even better. Let’s dive in!

An Introduction to WooCommerce

WooCommerce makes setting up your online store a quick, easy, and efficient process.

WooCommerce is a highly customizable plugin that enables you to turn your WordPress website into an online storefront. It helps you quickly and easily create a catalog of your products, comprised of product descriptions with accompanying images and information. After that, you can let visitors make purchases using several popular payment gateways, including Stripe and PayPal.

Whether you wish to sell physical products, digital items, services, or some combination of the three, WooCommerce can accommodate your specific needs. It is extremely versatile and makes the process of organizing products, managing payments, and gathering reports easy (even for e-commerce beginners). There’s a reason why this is the number one e-commerce plugin for WordPress.

Some of the other key features of WooCommerce include:

  • The ability to display product variations (i.e. different clothing sizes and colors, various software packages, etc.).
  • Automatic tax calculations based on country and state rates.
  • Options to display customer ratings and reviews.
  • Functionality that aids in affiliate product promotion.

Although WooCommerce contains all the back-end functionality you will need to build and run your e-commerce store, you’ll still need a way to showcase your products for maximum effect. That’s where the OceanWP WooCommerce theme comes into play. By combining this versatile theme with WooCommerce, you can drastically improve your chances of making your online business a resounding success.

How to Build an Awesome WooCommerce-Powered Store with OceanWP (In 6 Steps)

OceanWP is a fast, responsive, and highly-customizable WordPress theme. What’s more, it contains numerous templates to help you design a unique e-commerce site. Let’s talk about how to get started!

Step 1: Install OceanWP and Import Your Chosen Demo

OceanWP offers a wide array of free and premium demos to choose from.

The first thing you’ll need to do is install and activate the OceanWP theme. It includes a number of demos you can use as the basis for your store. You can pick out one of the e-commerce demos, import it, and then customize it to suit your exact needs.

To do this, you will first need to download the Ocean Demo Import Plugin. This will enable you to rapidly search for and install the demo of your choice, as well as peruse some premium options.

Step 2: Download and Install WooCommerce

The WooCommerce setup wizard helps you lay the groundwork for your e-commerce site in minutes.

Once your theme is activated, you’ll need to set up the WooCommerce plugin if you haven’t already done so.

You will be directed to the WooCommerce setup wizard, which we recommend going through. It will help you set up all the basic details of your e-commerce business, including your store’s address, the currency you’ll use, and the kinds of products you’ll be selling. You also have the option to choose the units that will be used to measure your products, and to determine how shipping will work. Finally, you also have the choice to integrate WooCommerce with the Jetpack plugin, giving you access to a variety of useful features.

Once you’ve completed the wizard, you should see a WooCommerce option in the main menu of your WordPress dashboard. You’re now ready to start adding products!

Step 3: Add Your Products Using WooCommerce 

The OceanWP theme harmonizes perfectly with WooCommerce, letting you build informative and attractive product descriptions.

By navigating to Products > Add New, you can now start adding wares to your e-commerce store. This intuitive process involves naming the item, writing up a product description, and uploading the corresponding image for the product. You also have the option to add an image gallery to each product. This can be particularly useful if you offer variations on a single item (i.e. a shirt with the same design that’s available in different colors).

After you’ve input the basic elements above, you can use the WooCommerce Product Data window below the WordPress editor to add in the crucial e-commerce details. This includes the product’s price and tax status, as well as the shipping details (weight, dimensions, post class, etc).

In addition, you have the option to link additional products to the product description (for upselling or cross-selling applications), and to specify customizable attributes (such as clothing sizes and colors).

Once you have finished adding and customizing your product pages, you can further enhance them with some of the extra features offered by OceanWP.

Step 4: Optimize Your Products with OceanWP

OceanWP lets you optimize your product galleries to grab visitors’ attention.

At this point, you have a basic but functioning store in place. Now, it’s time to tailor the look and feel of your WooCommerce site to meet your unique needs. When you select a new or existing product, you can scroll down to the OceanWP settings. Here, you can configure everything from the layout of your products, to the color of the link text, to the logo you want featured on the page (which is handy if the product you are uploading is associated with a particularly well-known brand).

OceanWP will also ensure that your product descriptions are optimized for mobile device browsing. Some demos (such as Store) have pre-configured product displays, which you can replace or customize to your liking. More importantly, you can add your product descriptions to your website’s homepage. This can be extremely handy if you want to showcase your latest stock or your most popular products.

Remember to save your product descriptions as drafts, or publish them once you have finished filling in all the necessary sections. Then, you can assign your products to categories in order to keep them organized.

Step 5: Build Item Categories

Categories help customers rapidly find the products they are looking for.

Using the WooCommerce plugin, you can configure the kinds of product categories you wish to add to your store. Simply navigate to Products > Categories, and you will have access to a number of options.

For example, you can decide whether you want to have parent categories that contain various subcategories. For example, one parent category might be Menswear, with Jackets and Pants acting as subcategories. You also have the option to add thumbnail images to go along with each category.

Every category you create will display as a page in OceanWP. If you have chosen an e-commerce demo, you will see that default categories have already been created. You are free to customize those categories as you wish. Visitors will then be able to refine their category searches by filtering results according to price, size, or other parameters you decide to include. This, in turn, will make it easier for them to make purchases.

Step 6: Tweak Your Cart Display and Checkout Settings

OceanWP’s multistage checkout streamlines the customer experience on multiple devices.

OceanWP enables customers to automatically view what’s in their cart whenever a new product is added to it. Better still, the default Mini Cart feature makes it easy for mobile device shoppers to get a clear and concise overview of the products they’ve purchased.

To make things even easier for your customers, OceanWP also helps you implement a streamlined multistage checkout system. This enables buyers to review their purchases, and select payment and shipping details with even greater ease, no matter what device they’re using.

Although these WooCommerce-specific features are included by default, you are given the ability to further tweak their appearance using the Elementor page builder (which is bundled with OceanWP). With a little time and patience, you’ll have your e-commerce store looking great and performing perfectly in no time!

4 OceanWP Extensions to Improve Your WooCommerce Store

The steps outlined above cover all the building blocks necessary to create an awesome WooCommerce site. To help you further improve your store, however, OceanWP also offers several handy extensions. Once you have purchased an extension, you will receive a license key, which you can activate by navigating to Theme Panel > Licenses.

Let’s take a look at how each of these extensions can help your e-commerce business go the extra mile.

1. Woo Popup

This simple yet effective extension displays a pop-up when one of your customers adds an item to a cart. This pop-up displays the price total (and the number of items in the cart), and gives the customer the choice of continuing to shop or moving on to the checkout screen.

Using the Woo Popup extension, you can:

  • Enhance the user experience on all devices, by creating a more streamlined shopping experience.
  • Customize the color, size, and text of the pop-up.
  • Reorganize the elements of the pop-up to better match your branding.

Price: Woo Popup can be used on a single site for $16, up to five sites for $35, and up to 20 sites for $56.

2. Product Sharing

In order to maximize your client base, you need to ensure that your product descriptions are easily shareable on social media. The Product Sharing extension makes this process quick and easy.

Using this extension, you can:

  • Add Facebook, Twitter, Pinterest, and email sharing buttons to each product.
  • Customize these sharing buttons to better match your branding.
  • Use a child theme to edit social sharing capabilities

Price: Product Sharing is free to download and use on your OceanWP site.

3. Portfolio

To help your store stand out from the competition, it’s important to show off your products in the most eye-catching way possible. The Portfolio extension enables you to display your wares prominently on any page of your site. You can customize margins, overlay colors, and description typography to match your desired aesthetic.

Using Portfolio, you can:

  • Effortlessly adjust image and column numbers, enabling you to showcase your products in a way that compliments your aesthetic.
  • Assign categories to your portfolio, which can correspond to your product categories.
  • Create an image portfolio that is 100 percent responsive on virtually any mobile device (you will also have the option to preview what your portfolio will look like on various devices before you publish it).

Price: The Portfolio extension can be implemented on one site for $39, up to five sites for $59, and up to 20 sites for $79.

4. White Label

Whatever the nature of your e-commerce store, proper branding is crucial in order to create a rapport with prospective customers. To that end, the White Label extension lets you replace instances of the OceanWP name on your site with your own brand name. It also offers ways to rename elements of your site so that they’re more optimized for search engines.

Using the White Label extension, you can:

  • Add your brand name to all admin pages.
  • Change the theme name, URL, and description.
  • Replace the theme screenshot with one of your own choosing.

Price: White Label can be added to an OceanWP installation for $29.

Are You Ready to Woo?

Creating a successful e-commerce business requires careful planning, a sound creative vision, and some dedicated work. However, by combining the WooCommerce plugin with the OceanWP WooCommerce theme, you can build a gorgeous online store in no time, and save yourself plenty of hassle and frustration in the process.

About the author

Ellice

Ellice comes to us from House DreamHost, the first of her name, Gatekeeper of All Things Content, Protector of the Brand and Ruler of Social Realms.

tl;dr - Ellice is the Content Marketing Manager at DreamHost and oversees all social media and content efforts.