WooBuilder is a great update on Woostify. It allows online store owners to customize shop page, product page, cart page, checkout page, and empty cart page as they desire with Elementor, which makes a huge attribution to the look and functionality of your store.
Step 1: Go to Woostify Option in the Dashboard, then activate WooBuilder.
Step 2: Now, you can build the page as you desire by clicking in Add New
Step 3: Choose the page you want to create. Woobuilder supports you to build shop page, product page, cart page, or checkout page, and customize the cart empty page.
Build shop page with WooBuilder
If you want to build a shop page, after activating WooBuilder, creating a new template and choose to create a new shop page. Then, name the shop page you are creating.
The next step is to drag the features you want and drop them on the page you are designing.
Once you finish customizing your shop page, you can navigate to “Display conditions” to choose the page you want to apply for.
In this section, you can choose to apply your template for all product archives, only shop page, product category, or product page based on tag.
After choosing the page you to apply for, click “Save and close” then “update” to save all changes you’ve done.
Build Single Product Page with WooBuilder
The first step is to choose to create and name your WooCommerce single product page.
The next step is to add elements you want to show on your page using Elementor easily with some drag and drop.
Here, users can choose to assign their template for all products, or the products based on category or tag.
Before saving all things, you are allowed to select the page you want to apply for. Moreover, you can apply the layout for other products and preview it directly from the customizing page.
The last step is hitting “Update” to save everything.
Create checkout page, cart page, and empty cart with WooBuilder
In addition to product single page, and shop page, WooBuilder lets you to design and customize cart page, checkout and cart empty page. The processes to creating such pages are similar to the way you build a shop page or single product page. So you can follow those steps to create checkout page, cart page, or cart empty page as you desire.
Build Thank You page with WooBuilder
Step 1: Create a Thank You page
First of all, you create the Thank You page. This step is just like the way to create any other pages with WooBuilder. In the dropdown menu, you select “Thankyou Page,” then enter the page name.
Step 2: Customize the Thank You page with Elementor
Once the Thank You page appears, you scroll down to find the section of Woostify Thankyou on the sidebar.
Then, you add basic elements to the page, including “order overview,” “order details,” “shipping address,” and “billing address”.
- Thankyou order overview: shows the customer the order number, order date, total price, and payment method.
- Thankyou order details: includes the product name, the specific price of every product, shipping fee, payment method, and total price.
- Thankyou shipping address: displays the customer’s address where the products will be delivered.
- Thankyou billing address: displays the payment address of the customer.
To complete this step, you just drop and drag these elements to the page.
Here is dropping and dragging Order Overview.
In the same way, you can drop and drag “order details,” “shipping address,” “billing address”, or any other elements you want.
Finally, click on the button Publish at the bottom of the page, then you will have the Thank You Page with WooBuilder.
Customize My account page with WooBuilder
Before create and customize My account page, there must be at least an order on the shop.
If there is nothing in the order, it’s hard for you to build and customize the My account page.
To create a new virtual order on the shop, you just need to go to the shop page and choose any item you want and put it in the cart page, and then proceed to place an order. Here are some virtual orders I’ve made for my shop.
The next step you need to do before creating My account page is to set up the default page. In the dashboard, going to Settings under WooCommerce section, then select “My account” for the My Account page as below:
Now let’s get started to create a My account page. Follow the common steps I mentioned earlier until you see the screen as below, choose My account page type, and then give it a name as you want. After that click into CREATE TEMPLATE to start designing the My account page.
A new screen appears, navigate to Edit with Elementor to build the page with Elementor page builder integrated into Woostify.
You are then driven to the friendly Elementor’s interface, and easily create the My account page with some drag and drop:
With this widget, you are allowed to customize the default options as follow:
- Dashboard: enables you to view recent orders, manage shipping and billing addresses, and edit password, account details.
- Orders: are the total bill of an order
- Download: displays the number of downloads
- Address: the address of the receiver
- Account Details: the private information of the customer
- Logout: Allows you to log out of the shop.
The outstanding feature is that WooBuilder enables users to add more items and options to the My Account page as they want. Specifically, you can include more options by clicking in “Add” another field and giving it a name, then you can customize it as expected. You can select a pre-made template in your site, or navigate visitors to another page by typing in with an URL.
Here is how the My Account page performs in front end.
