Getting started

At our company, we understand the importance of having a seamless and visually appealing online shopping experience. That’s why we’ve delved into the realm of full site editing themes to explore how to enhance WooCommerce, a leading e-commerce platform, within this context. In this article, we’ll guide you through the process of setting up your WooCommerce store, adding carts, and checkouts in a full site editing theme. With our expert insights, you can customize your online store, create visually stunning product pages, and even incorporate your brand’s unique style through drag-and-drop functionality. Let’s get started!

Is WooCommerce Compatible with Full Site Editing?

Before we dive into the details, let’s address an important question: is WooCommerce fully compatible with full site editing? While WooCommerce has made significant strides in supporting this new paradigm, it’s essential to understand that not all template functions and actions have a block or block setting equivalent. This means that the customization options for block templates in WooCommerce are currently limited compared to classic templates.

Is WooCommerce Free to Use?

WooCommerce is available free of charge as an open-source plugin for WordPress. You can simply download and install it on your self-hosted WordPress website without incurring any licensing fees. The core plugin provides the necessary e-commerce features to set up a basic online store. However, some advanced features or unique design elements may require additional paid extensions or themes. It’s also important to factor in expenses such as hosting, domain registration, and payment gateway fees when planning your budget for your WooCommerce store.

Support and Resources

WooCommerce offers a wealth of support and resources to assist you in running your online store effectively:

Set up your site for free with are WordPress Theme

No Risk to get started building your Woocommerce store for free.

Get Otterwp+

• Documentation: Access comprehensive documentation on the official WooCommerce website. The documentation provides detailed guides, tutorials, and troubleshooting information to help you navigate various aspects of setting up and managing your store.
• Community Forums: Join the WooCommerce community Facebook group to connect with other users, ask for advice, and interact with fellow members. This lively community is a great place to discover solutions to common issues and learn from experienced users.
• WooCommerce Support: If you require direct support from the WooCommerce team, they offer a support ticket system for paid customers. This allows you to receive personalized assistance for your specific queries or challenges.
• Third-Party Extensions and Themes: Explore the wide range of third-party WooCommerce extensions and themes available, both free and paid. These extensions and themes can extend the functionality of your store and offer diverse design options.

1. How to Install and Set Up WooCommerce with full site editing (In 7 Steps)

To begin, you’ll need to install and activate the WooCommerce plugin. You can do this on a new or existing WordPress site. Follow these steps to set up the plugin and configure its settings:

Step 1: Install the Plugin To install WooCommerce, you can either download it for free from the WordPress repository and upload it to your site, or install it directly through your WordPress dashboard. Access your WordPress site, navigate to Plugins > Add New, search for “woocommerce,” and click on “Install Now.” Activate the plugin, and it will be up and running on your website.

Step 2: Access the Setup Wizard After installing WooCommerce, you’ll be prompted to walk through a setup wizard. Although optional, we recommend going through it to configure some key settings. The setup wizard will ask for basic information about your store, such as its address, currency, and whether you plan to sell digital or physical products. You can always change these settings later.

Step 3: Choose Your Payment Processors On the next page of the setup wizard, you can select the payment processors you want to enable for your online store. By default, you can use Stripe and/or PayPal, along with offline payment options like checks and cash. Simply choose the options you prefer, and WooCommerce will set them up for you.

Step 4: Configure Your Shipping Options In the shipping configuration screen, you can determine the shipping rates for your customers. You can set one rate for your preferred zone and another for customers in other locations. You also have the option to offer free shipping to specific groups. Customize these settings according to your business needs.

Step 5: Review Optional Add-Ons The setup wizard will present you with optional add-ons that can enhance your online store. While not necessary, we recommend checking out Storefront, a WordPress theme designed specifically for WooCommerce, which can streamline the setup process.

Step 6: Install the Jetpack Plugin (Optional) You can choose to install the Jetpack plugin, which offers various features, including security functionality and analytics. It’s not required, but it can be a valuable addition to your WooCommerce store. You can decide whether to install it based on your specific needs.

Step 7: Complete the Setup Process Once you’ve gone through the previous steps, your WooCommerce store is ready to go! The setup wizard will provide you with useful links to import products, return to your WordPress dashboard, or edit the settings you just configured. To continue following our tutorial, select “Create a Product” to start adding and managing your products.

2. Adding and Managing New Products in WooCommerce

After installing WooCommerce, you’ll find two new tabs on your WordPress dashboard: WooCommerce (for general settings) and Products (for product settings). To add new products to your online store, follow these steps; back to user to clarify.

1. On your WordPress dashboard, click on the “Products” tab.
2. Select “Add New” to create a new product.
3. Enter the product title and description.
4. Set the product’s regular price, sale price (if applicable), and tax status.
5. Add product images by clicking on the “Set product image” area.
6. Configure product data, such as SKU (Stock Keeping Unit), stock status, weight, dimensions, etc.
7. Assign the product to a category or create a new one.
8. Add tags to help organize and filter your products.
9. Set product attributes such as size, color, or any other relevant variations.
10. Configure shipping class and dimensions (if applicable).
11. Set up inventory management options, including stock status, backorders, and low stock thresholds.
12. Enable or disable reviews for the product.
13. Add upsells and cross-sells to promote related products.
14. Set a product’s visibility (public, catalog-only, or search-only).
15. Enable or disable the ability to purchase the product individually or only as part of a grouped product.
16. Once you’ve entered all the necessary information, click on “Publish” to make the product live on your website.

To manage existing products, you can go to the “Products” tab and select “All Products.” From there, you can edit any product by clicking on its title. You can also perform bulk actions, such as updating prices or managing stock, by selecting multiple products and choosing the desired action from the “Bulk Actions” dropdown.

Adding Cart to the header

To add a cart icon with the WooCommerce Mini Cart block using a site editor, you can follow these steps:

1. Access your WordPress dashboard and navigate to the Full Site Editing section or the site editor provided by your specific theme.
2. Locate the header block where you want to add the cart icon.
3. Edit the header block and find the appropriate location within the block where you want to display the cart icon.
4. Add a new block to the header block.
5. Search for the “WooCommerce Mini Cart” block in the block library or available blocks.
6. Drag and drop the “WooCommerce Mini Cart” block into the newly added block.
7. Configure the settings of the “WooCommerce Mini Cart” block according to your preferences. This may include options such as the layout, the number of items displayed, and whether to show the cart total.
8. Save the changes to the header block.

By following these steps, you should be able to add a cart icon with the WooCommerce Mini Cart block to the header of your site.