Webflow to WooCommerce Overview

You are here:

Step 1

INSTALL WORDPRESS

You need to have WordPress already installed on your hosting. Here you can find the official WordPress installation guide. These are the minimum requirement you need to start.

Step 2

INSTALL WOOCOMMERCE

You need to have WooCommerce plugin installed. You can download and install it from WordPress plugin library. Go to “plugins” tab and click on “Add New” button and look for the plugin in this. Once the plugin has been installed, activate it.

Step 3

GENERATE THE LICENSE CODE

Go to your account page to generate the license code you need to activate the application.

Step 4

DOWNLOAD THE APP

Download the app and plugins from this page.

Step 5

INSTALL ON MAC OS

After you double click on the .dmg file you need to drag&drop the Udesly App in your Application folder

INSTALL ON WINDOWS

Double click on the .exe file to launch the App.

Step 6

EXPORT THE WEBFLOW TEMPLATE

Before you start using the App remember to export your Webflow template with the elements included.

Step 7

ACTIVATE THE APP

Insert your email and the license code you’ve generated from your account page.

Step 8

UPLOAD THE TEMPLATE

Upload the exported Webflow template you have created with the Udesly Elements.

Step 9

INSERT YOUR TEMPLATE DATA

Insert your template name, the author name and a template description. If you want, you can also choose the featured image of your theme (that you can find in your WordPress admin panel after the conversion).

Step 10

SET THE PAGE OF YOUR TEMPLATE

This is the most important step. Here you need to set up all the WooCommerce pages of your Webflow template to make them ready to use in WordPress.

Here is the list of the page types you can assign to each page of your Webflow project:

WooCommerce Pages:

– Shop (this is the Shop page in which you can manage all the products included in your storage);
– Single Product (this page illustrates the card of the single product and all its specifications);
– Category (Used to style a specific category archive page of your shop, the page must be named as the slug of the category);
– Tag (Used to style a specific tag archive page of your shop, the page must be named as the slug of the tag);
– Single Product Template (pre-styled page that can be choosen to style a product of your shop differently);
– Search Results (page used to show the search results of a specific query within WooCommerce, it must contain the element “Search Results”).

If your site includes the blog as well, you must set the appropriate pages. Take a look here.


Step 11

OPTIONAL SETTINGS

In this step you can choose if you want to manage your website SEO from Webflow or from the WordPress admin panel directly. We suggest to not uncheck the “Remove Webflow jQuery” to make it work correctly.

Step 12

STRART THE CONVERSION

You’re finally ready to convert your template. Just click on the “convert” button and the conversion will start.

Step 13

DOWNLOAD OR UPLOAD

Once the conversion is ended you can choose to download the converted template in a zip file and upload it with an external FTP client or upload it through the Udesly integrated FTP System directly.

UPLOAD WITH UDESLY FTP SYSTEM

If you choose our FTP System you only need to fill the fields below and click on the Upload button.

Step 14

ACTIVATE THE WORDPRESS THEME

At this point you only have to jump to your WordPress admin panel and activate the theme following the path Appearance -> Themes.

Step 15

SETTING THE PAGES

Remember to set the homepage and the Posts page (if your site includes a Blog system) of your site following this path: Settings -> Reading -> Your homepage display section.

Step 16

INSTALL THE UDESLY CUSTOMIZER PLUGIN

Use this free WordPress plugin to customize the WooCommerce default pages (Cart, Checkout and My Account) and elements style. Thanks to the Udesly customizer you can control many elements you can’t change in your Webflow design, directly from the frontend of your site. You can find the Customizer documentation following this link.

 

 

Related documentation: