Steps to set up WooCommerce for the first time

Hey @ecnalg – It can seem like a look to take in at first, however after the initial learning curve most things are actually pretty simple and straight forward ??

For the setup wizard you can re-run that by going to WooCommerce > Settings. Then click on the little ‘help’ tab shown here:

Image link: https://d.pr/i/5bAc1z

As for WooCommerce > Settings > Advanced, most users don’t need to touch anything on this page. The setup wizard will automatically create the My Account, Shop, Cart, and Checkout pages. All of those (except “Shop”). Will have a shortcode added to them. You do not need to add anything else to these pages. That shortcode tells WooCommerce to replace the content of that page with the appropriate WooCommerce content.

If these pages aren’t already created or they are missing the shortcode, you can run the setup wizard. Or you can go to WooCommerce > Status > Tools. On that page you’ll see an option to Create default WooCommerce pages. Click that and WooCommerce will do everything that needs to be done for you.

As for guides/tutorials, since WooCommerce is the most popular e-commerce platform in the world there pretty much endless training tools and tutorials.

We have an entire guided series on our site which you can find here:
https://docs.woocommerce.com/documentation/plugins/woocommerce/getting-started/

Additionally, you can check YouTube or Google for videos and guides from third-parties as well. Though if you do that, just check the date on them to ensure their instructions are up to date with the latest version of WooCommerce.

I already know that my biggest problem will be linking my order page to a cart page to a checkout page. And maybe there are more I haven’t thought of yet.

The product/purchase/checkout flow is all handles automatically by WooCommerce. All you do is add your products under the Products tab. Then if you have the pages we discussed above properly set up, WooCommerce will handle everything else for you. The customer can add an item to their cart, review it, then checkout.

Phil, thanks, this helped big time.

I was hoping to put my 3 virtual courses on one page but it pushed me into making 3 product pages, and that’s ok now that I see it.

I decided to make a little image for each course, and I put one onto each page, but there’s still a placeholder image on the left, and my image is on the right under the description/price. How do I move my image to the left?

How do I get the 3 product pages onto my menu? Since they aren’t officially ‘pages’, they aren’t listed anywhere except under ‘products’ so far.

And hopefully last, what is the purpose of the ‘shop’ page? Ahhh… is that where the products go? How?

Thanks again.

I see the shop and product pages – that worked well!

I’m using SnapPay for payment from China; is there a way to also use a processor (like Stripe) that takes Visa/MC, and put both processors on the checkout page?

You can offer as many payment gateways at checkout as you’d like.

After adding the appropriate plugin you should see that as an option on the WooCommerce > Settings > Payments page.

On that page, you can enable or disable all of the payment methods that are available on your site.

You can download and install the official Stripe plugin here:
https://woocommerce.com/products/stripe/

If you want to add rules to your site that determine what payment methods are show, you can use the Conditional Shipping & Payments extension. This would allow you to, for example, hide “SnapPay” if the customer isn’t located in China.

Thanks again, Phil.

‘Hopefully’ my last two questions… if I delete the placeholder image from the product page, will the image I’ve added go automatically into the left side of the product page where the placeholder was? With the placeholder still there now, when I add my image to the top text area of the product page right under the title, my image gets placed below the placeholder. When I add it to the bottom text area, in the box called product short description, it gets placed on the right where the text is.

And when someone tried ordering from my site using his phone, he got the following error on the checkout page. Do you know what/where that might have been, and how to fix it?
“Payment error: Parameter cannot be empty:app_id”

if I delete the placeholder image from the product page, will the image I’ve added go automatically into the left side of the product page where the placeholder was? With the placeholder still there now,

This would be a question for your theme’s developer or any “page design” plugins you are using.

By default WooCommerce only displays a product image on product pages. There is one image, with others displayed below that. The blank placeholder is only shown if no images are added. So based on what you described it sounds like your theme is overriding that.

Here’s an example of what this looks like by default:

This is what it should look like if you’ve added an image. You’ll see the main product image, as well as the additional gallery images below.

Image Link: https://d.pr/i/8MoPuA

If you haven’t added an image, then the placeholder will be shown like this:

Image Link: https://d.pr/i/4PrVNa

Since you had mentioned the ‘Product Short Description’ area, please make sure you are adding your images in the proper place:

Image Link: https://d.pr/i/dZeVJR

>Do you know what/where that might have been, and how to fix it?
“Payment error: Parameter cannot be empty:app_id”

I couldn’t say without knowing specifics about your site, however I would start by contacting the developer of whatever payment gateway plugin you are using.

Hope that helps!

This helps a lot. Again!

I want my product page to look like your Image Link: https://d.pr/i/8MoPuA.

However, it looks mostly like your Image Link: https://d.pr/i/4PrVNa with the placeholder on the left, except my image is added on the right, in the middle between the price and the Add to cart button.

Each product page has two areas to add an image and text, the top and the bottom, separated by the Product data section in the middle. I can’t tell from your Image Link: https://d.pr/i/dZeVJR whether you added your image in the top area under the page title or in the bottom area under the Product short description. Where should it be?

And after more work, I agree that the payment error is a function of the payment gateway.

Thanks again.

Since I’ll always use my own image, what would happen if I delete the placeholder from the image library?

However, it looks mostly like your Image Link: https://d.pr/i/4PrVNa with the placeholder on the left, except my image is added on the right, in the middle between the price and the Add to cart button.

This means that either your third-party theme or page designer plugin is changing the page layout. Or that you are adding the image in the wrong place.

Are you adding the image in the section I showed in my earlier screenshot?
Image Link: https://d.pr/i/dZeVJR

Images should not be inserted in the description or short description fields. I think that’s what you are doing and that’s what is causing you trouble.

I can’t tell from your Image Link: https://d.pr/i/dZeVJR whether you added your image in the top area under the page title or in the bottom area under the Product short description. Where should it be?

By default WooCommerce has a place for the product image, then a Product Description field and Short Product Description field. So I’m not sure what you are seeing when you mention adding images above/below the product area.

This is what a product looks like in WooCommerce by default:

Back end: https://d.pr/i/rjCQGS

Front end: https://d.pr/i/mPjTdy

If you aren’t seeing that, I’d recommend switching to the default Storefront or Twenty Twenty. Otherwise you’ll want to contact your theme’s developer for help.

Deleting the WooCommerce placeholder image from your site’s Media library won’t change the layout of what you describe.

If you shared a link to a page on your site where I can see this, that would give me a much better idea of what you have done so far. As it’s hard to know based purely on what you described.

Thanks, Phil, I’ve got the most important stuff figured out now, and my image is in the correct place.

I seem to have the phrase “Related products” there by default since I didn’t write it. I notice your image doesn’t have it. I wouldn’t mind it if it were closer to the other 2 choices, but I could do without it too..

This is my practice website: https://healthhunt.org/product/one-1-hour-class/

The “Related Products” is a default feature in WooCommerce. My screenshot was simply cropped, so it didn’t show that section.

Your theme may have an option to turn that section on/off. If not, you’ll need to use some custom code to hide this.

There is a good third-party guide on how to do this here:
https://passwordprotectwp.com/remove-woocommerce-related-products/

The second option they list is the easiest.