WooCommerce Tutorial

WooCommerce Tutorials

— A Must-Read WooCommerce Beginner Tutorial for Newcomers

Naiba has encountered many times that netizens usingWordPress Website Buildinghave stumbled in WooCommerce design, so this WooCommerce tutorial has been updated, hoping to help beginners avoid detours.

First, it needs to be clear that using WooCommerce can build a B2C online store, and it can also be used for a B2B ordinary product inquiry website.

Correction of Common Misunderstandings for Beginners

Misunderstanding 1

B2B websites cannot use WooCommerce because it is for online stores.

This understanding is inaccurate. WooCommerce is indeed for online stores, but in fact, after removing its sales functions, it can also be used purely for product management and display, and applied to B2B websites.

Misunderstanding 2

Using WooCommerce necessarily requires using Elementor Pro to design the product page layout yourself, otherwise it won't meet your needs.

Actually, for many beginners, using Elementor Pro to create WooCommerce layouts themselves is much more difficult than adjusting the default layouts. A normal B2B website can be implemented directly with WooCommerce's default template. We often encounter situations where users have problems creating product layouts with Elementor Pro and then ask Naiba how to solve them.

WooCommerce Installation Tutorial

WooCommerce is a plugin under the WordPress platform, so the installation method is the same as other plugins. You just need to search and install it in the Plugins section of your WordPress admin dashboard.

WooCommerce安装教程

Activate the plugin after installation.

Woocommerce教程

After installing WooCommerce for the first time and activating it, you will be redirected to the setup wizard interface. If you have B2C needs, just follow the wizard to complete the setup. If you are a B2B user, you can skip it directly.

WooCommerce Product Categories

After installing WooCommerce, we need to go to the Products menu in the admin dashboard to create product categories, as shown in the figure below:

When creating a product category, fill in the Name, select whether a Parent category is needed, and then add it.

WooCommerce Add Product

After creating product categories, we can upload the first product. Click Add New under Products.

Then fill in the product's title, description, category, and images, and publish it.

Refer to the annotations in the two figures above and below for specific fields to fill in.B2B clients will not see the shopping cart button as long as they do not fill in the product price.If the shopping cart button still appears with your theme, please refer to this article:Several ways to delete and hide the WooCommerce Add to Cart button

After publishing, you can visit the product's front-end page to see the effect.

WooCommerce B2B Product Customization

1. How to remove the Add to Cart button?

Normally, not filling in the product price in the backend should prevent the shopping cart button from displaying. If your theme doesn't respect this, you can trySeveral ways to delete and hide the WooCommerce Add to Cart button

2. How to add an inquiry button in place of the shopping cart?

ReferenceHow to add an inquiry button below the WooCommerce shopping button?

3. How to remove the Reviews tab?

Woocommerce教程

In WooCommerce settings, find Products, then uncheck the option for reviews, and it will be gone.

4. How to insert a table on the details page?

Copying and pasting directly from Excel is the most convenient, or you can refer to6 Methods to Add Tables to WordPress

5. How to add a few more tabs on the details page to separately display parameters or download resources?

Search in the backend plugins forCustom Product Tabs for WooCommerceThen install it. After that, when creating a new product, you will see the new tab options in the Product Data section. You can add as many tabs as you want.

How to view the product summary page on the website front-end?

Many people simply don't know how to bring up the default product archive page, so they wonder if they need to use Elementor Pro to create a product template page. Actually, you just need to do this.

WooCommerce商城页面

By default, after installing the WooCommerce plugin, a shop page named 'shop' is automatically generated and set.

At this point, you just need to add the link of this page to your navigation menu, and you can view the shop page by visiting this URL.

In the backend Pages section, create a new page, name it 'Products' or any other name you prefer, and publish it directly.
In the WooCommerce settings, find Products, then select the page you just created as the Shop page and save.

woocommerce商店页

How to create a product archive page for a specific category?

You also don't need to create a separate product category archive page using the page editor. Simply go to the backend Product Categories section, hover your mouse over the category name, and there will be a 'View' link. Copy that link.