Menu
  • FEATURED SERVICES
    • ONLINE STORES
    • WEBSITES
    • APPS
    • WPS
  • ACADEMY
  • REQUEST A QUOTE
  • LOGIN

Getting Started with WooCommerce

October 4, 2018Blog, Editorialadmin

To sell products on your WordPress website, you’ll need a stable, dependable e-commerce plugin. WooCommerce has dominated the field, and understandably so. With its powerful built-in features and range of optional extensions, it offers plenty to all would-be online store owners. Combine this plugin with the power of Divi, and you can build an incredible, scalable e-commerce site that attracts customers and helps makes sales.

In this post, we’ll go into detail about why we love WooCommerce, and why it’s integrated with Divi. We’ll also show you how to set it up and walk you through publishing your first product using the Divi Shop module. Let’s get started!

 

Why We Recommend WooCommerce

 

WooCommerce homepage

 

WooCommerce is a highly customizable e-commerce plugin that powers 42% of all online stores. Its flexibility makes it the perfect fit for virtually any e-commerce setting. The plugin enables you to sell physical or digital goods (along with multiple shipping and payment options), and you can even use it to sell affiliate items.

It boasts an excellent set of features, an intuitive interface, and an incredible range of extensions. What’s more, the basic plugin is completely free, making it a viable option for everyone looking to set up an online store. It also integrates seamlessly with many WordPress themes, including (of course) Divi.

With over 20 million downloads, WooCommerce’s popularity speaks for itself. However, there are other options when it comes to e-commerce plugins, including eCommerce Product Catalog and Ecwid Ecommerce Shopping Cart. Even so, given WooCommerce’s combination of functionality and cost, it’s still the number one choice for many online sellers.

Given this, we’ve ensured that Divi is fully WooCommerce compatible, right out out of the box. By utilizing the Shop module in conjunction with WooCommerce, you can yield some dazzling results. Furthermore, by choosing the right extensions, you can create an amazing, unique store that could be hard to achieve with other solutions.

How to Set Up WooCommerce

Even though WooCommerce comes with a myriad of options as standard, the setup is actually very straightforward thanks to its ‘onboarding wizard’. This tool walks you through setting up the required pages, as well as configuring store, shipping, tax, and payment information.

Once you’ve installed and activated the plugin, you’ll automatically be taken to the setup wizard. If you happen to miss it (or aren’t ready to run it yet), you can access it later by hitting Help in the upper left hand corner of the screen, then navigating to Setup Wizard > Setup Wizard:

 

WooCommerce Setup Wizard button

 

Once you’re in the wizard, hit Let’s Go! to get started:

 

The first page of the WooCommerce setup wizard

 

The Page Setup section is for informational purposes, and lets you know that several essential shop pages will be created automatically:

 

The Page Setup Page

 

Moving on, the Store Locale page has fields for you to specify your store location, currency, and preferred weight and dimension units:

 

The Store Locale page

 

Next, you need to decide if you’ll be shipping physical products and charging sales tax:

 

The Shipping & Tax page

 

Finally, we get to the crucial Payments page. Here you can decide exactly how you’re going to accept your hard-earned money:

 

The Payments page

 

Now that all of your settings have been entered, you’ll see the Ready! page, which lets you know you’re ready to start creating your first product:

 

The final page

 

Although using the wizard is quick and simple, you can instead choose to manually alter the settings by selecting WooCommerce > Settings from your dashboard.

In any case, at this point you’ll be ready to create your first product – let’s find out how to do it.

How to Publish Your First Product Using the Divi Shop Module (in 4 Steps)

There are several ways you can use WooCommerce within Divi. For example, you can use it without accessing the Divi Builder, or by using shortcodes in a Text module. However, we recommend using it with the Shop module, which is what we’ll focus on here.

This module syncs with your product categories so you can easily arrange, organize, and adjust your storefront. It also comes with a plethora of customization options so you can create visually stunning shop pages to attract visitors. Let’s begin by adding a product.

Step #1: Add a Product

Once you’ve completed the setup wizard, it will prompt you to create your first product – simply click on the Create your first product! button. However, you can choose to skip it, creating your products later by navigating to Products > Add Product in your WordPress dashboard. Either way, you’ll use a new blank page to create your product entry. Here, enter your product name in the title box, and its description in the main content area:

 

The product editor screen

 

Moving down to the Product Data section, you’ll see multiple tabs including General (which is where you enter your price), Inventory, and Shipping. Complete each field within these tabs as necessary:

 

The Product Data section

 

Directly below this you’ll find the Product Short Description section. This works similarly to an excerpt for a regular WordPress post, and will display alongside the product on listing pages.

Moving over to the right-hand side of the screen, we have the option to add images. In the Product Imagesection, click on Set product image and upload the main image for your product. You can add any further images to the Product Gallery section:

 

Product image sections

 

Finally, you’ll need to assign your product a category in the Product Category section (also on the right-hand-side of the editor). This is an important step as this tells the Shop module which products to display:

 

The Prodcut Categories section

 

Finally, click Publish, and you’ve created your first product! Next up is creating a dedicated page to display your products.

Step #2: Create a New Page

Given that you’ll be inserting your products using a Shop module, you’ll need a page to add them to. If you went through the setup wizard, WooCommerce would have automatically created a blank page named Shop. If you don’t yet have a shop page (or you’d like to create a new one), navigate to Pages > Add New in your WordPress dashboard, then select the Use The Divi Builder button to begin creating your layout:

 

The Use The Divi Builder button

 

How you design your page is completely up to you – for example, you might want to match the layout of the rest your site, or use any layouts you already have saved. Of course, there’s nothing to stop you creating a completely different look for your shop pages too – perhaps with a completely contrasting style to help showcase the products.

If you’re new to using the Divi Builder, you can check out our documentation for getting started. Divi also comes with two pre-built shop layouts, one of which might be just what you’re looking for. To access these, first click on Load From Library:

 

The Load From Library button highllighted

 

From here, scroll down to the two shop layouts and choose whichever you like:

 

Two shop layout options

 

If you do choose a predefined layout, the Shop module will be already inserted for you. However, for custom designs, you’ll want to add the module yourself.

Step #3: Insert Your Shop Module

Next we want to add products to our pages. For those creating a custom shop page layout, click on Insert Module(s) wherever you’d like your product to appear:

 

The Insert Module(s) button

 

Next, scroll down and select Shop:

 

The Insert Module screen with the Shop module highlighted

 

You’ll come to the General Settings tab, where you can customize the layout of the module. Firstly, you can decide which type of products you want to display, including your most recent, best selling, or simply a single category:

 

The General Settings tab

Once you’ve selected a product type, enter how many products you’d like to display, before checking which categories to include, and specifying how many columns to display:

 

The category and column number fields

 

Finally, there’s also an Order by section to tinker with, which enables you to choose how you products are ordered – by rating, date, or price, for example.

The final step is to style your module appropriately.

Step #4: Style Your Module

Once your layout is sorted, you can get to styling it. Head on over to the Advanced Design Settings tab, where you’ll be greeted with a whole host of options:

 

The Advanced Design Settings tab

 

Here, you’re given a comprehensive set of options for styling your Shop module to appear exactly as you want it. For example, you can customize the colors of the sale badge, hover, hover overlay – and fonts – so they blend perfectly with your color scheme. You can also choose from hundreds of hover icons, change the title and price fonts, and more.

For those of you willing to get your hands dirty with code, you can use the Custom CSS tab to tailor the module elements even further. In any case, if you’re looking for some inspiration, you can check out our list of incredible Divi e-commerce sites, along with our shop styling tutorial, which offers handy tips for achieving some unique styles.

Conclusion

In order to stand out, it’s important that your site is attractive and functional. To showcase your products, you’ll want a quick and simple to use solution, that also delivers stunning and practical results.

: ecommerce, tips & tricks
Previous Post Multi-Function Kangaroo Hoodie Next Post Beer Cooler Bottle

Related Posts

A Beginner’s Guide To The WordPress Dashboard

September 17, 2016

WordPress.org vs. WordPress.com: What Features Are You Missing?

February 3, 2017

How To Add A Feedback Form To WordPress

March 3, 2017

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Search Our Blog

Recent Posts

  • Frameless Dinosaurs Wall Clock
  • Thrills and Chills Hip Hop Hoodies
  • Pikachu Cosplay Plush Toy
  • Floral Maxi Dress – Mommy and Daughter
  • Portable air humidifier

Categories

  • Arts & Crafts
  • Backyard
  • Bathroom
  • Beauty & Health
  • Bedroom
  • Blog
  • Bracelets & Bangles
  • Camping
  • Cars
  • Collections
  • Commerce
  • Consumer Electronics
  • Cycling
  • Decoration
  • Dinosaurs
  • Earrings
  • Editorial
  • Family
  • Fantasy Creatures
  • Featured
  • Fishing
  • Gift Ideas
  • Golf
  • Hair Care
  • Health Care
  • Hiking
  • Hobbies
  • Home & Garden
  • Home Improvement
  • Household Pets
  • Hunting
  • Kids
  • Kitchen
  • Latest
  • Makeup
  • Men's Clothing & Accessories
  • Men's Grooming
  • Movies
  • Nails & Tools
  • Necklaces & Pendants
  • Necklaces & Pendants
  • Outdoors
  • Party Accessories
  • Passion Animals
  • Pet Accessories
  • Phone Accessories
  • Phone Bags & Cases
  • Popular
  • Premium
  • Rings
  • Running
  • SmartWatches
  • Standard
  • Star Wars
  • Toys
  • Unicorn
  • Vehicles
  • Women's Clothing & Accessories

Recent Comments

  • Cristina on Top 6 Booking Plugins For WordPress
  • How to Convert Wix to WordPress: A Complete Guide to All Your Options - AboveCMS on WordPress vs. Wix – Which is Right for You?
  • Sarah Kelly on How To Create And Configure Your Robots.txt File
  • Mark Henry on Top 6 Booking Plugins For WordPress
  • dpowell on How To Add A Feedback Form To WordPress
Facebook
Twitter
Google+
Instagram

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok