Shop Setup

Make your website a Shop with Lay Theme's WooCommerce integration.

Introduction

To see what a Lay Theme Shop can look like please find an example Shop at http://sucuxshop.laytheme.com/.

www.sucuxshop.laytheme.com

Take a quick look at WooCommerce's Getting Started Section. This is where most of your questions about how WooCommerce works will be answered and you can go back to that link after you set up the Shop.

If you have any questions please refer to the WooCommerce Docs.

If you cannot find an answer there please post your question in our Shop Forum Section.

These are some points that are still in Development:

Make sure we have sufficient settings to use background colors other than white for Shops
Test digital download products
"My Account" Section where people can register and look at their orders
WooCommerce is a very feature-rich Plugin. So Lay Theme might not support every WooCommerce Feature.
We still need to add some kind of hint about Cookies being used and find out a way to make Shops GDPR compliant.
Test Jetpack compatibility
Style these pages: "My Account", "Orders", "Downloads", "Addresses", "Account details", "Logout", "Lost password"

1. WooCommerce Installation

Go to: Plugins → Add New.
Search for “WooCommerce”.
Click Install Now.
Click Activate Now and you’re ready for the WooCommerce Wizard.

WooCommerce Plugin

When WooCommerce is activated for the first time, the WooCommerce Setup Wizard will be the next screen you see after clicking “Activate”. This helps you set up and configure your site with WooCommerce functionality. You don't need to use Jetpack.

For a full walkthrough of the Setup Wizard (also known as the Onboarding Wizard), please read through the WooCommerce Setup Wizard documentation.

2. SSL

Make sure your website uses SSL/https. This is needed for the payment gateways to work properly.

Here's a WooCommerce Tutorial about SSL.

If your website address does not start with "https://" but with "http://", you need to set your domain to use SSL. This can typically be done in your Webhost Control Panel. If you're unsure of how to do this, please write your webhost support.

After you have activated SSL for your website, you might need to use a Plugin like "Really Simple SSL" to make it work.

3. Sidecart Plugin (optional)

“WooCommerce Side Cart (Ajax)” is a plugin by XootiX, but we have changed its style and added settings to the Customizer for it.

The Sidecart pops up when you add a product to your cart

Please note that if you want to be able to change product quantities in the sidecart, you need to purchase the Sidecart Pro plugin by XootiX for 25$. It is possible to just remove a product in the sidecart though.

When you install the Sidecart Pro Version you get quantity inputs for your sidecart.

If you use the Pro version just make sure to turn off the "Fly to Cart Animation"

This is where to turn off the "Fly to Cart Animation"

This is how you install WooCommerce Side Cart (Ajax) for a flying side cart:

Go to: Plugins → Add New.
Search for “WooCommerce Side Cart (Ajax)” (by XootiX).
Click Install Now.
Click Activate Now.
In case you disable WooCommerce make sure to disable the Sidecart Plugin first or else your site will crash (read below if this happened)

The Sidecart Plugin

Please make sure to NOT turn off the option "Side Cart Header" → "Basket Icon". If you do, the cart menu point will not show the correct amount of items in the cart.

Important if your website crashed: This plugin is the most popular one of its kind. However, currently there is a bug that crashes your site if you deactivate the WooCommerce plugin before you deactivate the Sidecart plugin. Or if you activate the Sidecart plugin without first activating the WooCommerce plugin.

If that happened on your site, follow these steps:

Get your web server's FTP data. You can usually get it through your Webhost Control Panel
Connect to your website's FTP Server using a program like FileZilla
Enter your website folder → "wp-content" → "plugins"
Find the folder "side-cart-woocommerce" and rename it
Now your website works again, you can login to your "/wp-admin/" admin panel and remove the plugin in "Plugins"

Make sure in your Menu in "Appearance" → "Menus" the Cart Menu Point is added.

Cart Menu Point

5. Create Products

Create Products in "Products". You might want to take a look at Managing Products and Adding Product Images and Galleries.

For Product Images Lay Theme works best if all of your product photos are in portrait format instead of landscape and have the same aspect ratio.

For variable Products like T-Shirts with different T-Shirt sizes, please take a look at Variable Product.

If you would like to have an additional info tab for example for "Sizing" like below, please install the plugin "WooCommerce Custom Product Tabs Lite".

An additional info tab called "Sizing"

6. Add a Product Thumbnail Grid

On a page in the Gridder, add the "Product Thumbnail Grid" Element. This is an overview of your Products. Clicking on a Product Thumbnail leads to the Product.

You might want to make this page your frontpage. Set your frontpage in "Customize" → "Front Page".

You can customize the appearance of your product thumbnails in "Customize" → "WooCommerce" → "Product Thumbnails".

The Product Thumbnail Grid Button

The Product Thumbnail Grid Modal

7. Customize the Look of your Shop

Find all Customizer Settings to change the Appearance of your Shop in "Customize" → "WooCommerce".

In "Customize" → "WooCommerce" → "Product Thumbnails" make sure to use a value of 600 or higher for "Thumbnail Resolution".

Many Settings use new predefined Shop Textformats. Find the new Shop Textformats in "Textformats". About Textformats

All new Shop Textformats, like "Shop_Big"

Activate the Footer Feature. Now in the Gridder of your Footer Page, add the "Text Footer" Element.

The "Text Footer" Button

The "Text Footer" Modal

In your footer, you can add links to your shop-related pages like "Privacy Policy", "Terms and Conditions", "Returns", "Contact Us" and more.

9. Privacy Policy, Terms and Conditions, Returns

To find texts for your "Privacy Policy" page go to "Settings" → "Privacy" → "Policy Guide".

Also a plugin like "WP Legal Pages" can help you generate pages like "Privacy Policy", "Terms and Conditions" and "Returns".

10. Do a Test Purchase

Do a Test Purchase to see how it works.

The easiest way to do a test-purchase is to activate the payment method "Cash after Delivery" in "WooCommerce" → "Settings" → "Payments". Then do a purchase and choose that Payment Method during Checkout.

Or you could just set a very low price for one of your products.

11. Emails

After a test purchase is completed, you'll receive an email about your order to the email address you provided during checkout. You can customize your emails in "WooCommerce" → "Settings" → "Emails". You could for example change the default color which is purple.

If you haven't received an email your webserver might not be configured correctly to send out emails.

In that case you can contact your Webhost Support or read the WooCommerce email FAQ. For us using the plugin "WP Mail SMTP" worked well to fix this.

12. Shipping Labels and Invoices

For generating invoices and packing slips we recommend the Plugin "WooCommerce PDF Invoices, Packing Slips, Delivery Notes and Shipping Labels".

💫 Thanks to @sucukundbratwurst for letting me use their product images for the test shop. 💫

Contents