Shop Setup

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 a black background color 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

1. WooCommerce Installation

Please install WooCommerce.

  • 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

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"

4. Cart Menu Point

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

The Textformats Button

All new Shop Textformats, like "Shop_Big"

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. Invoices

For generating invoices and packing slips, the Plugin "WooCommerce PDF Invoices & Packing Slips" has worked very well for us so far.

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