Would you like to deeply customize WooCommerce shop page layout?
The WooCommerce product page is one of the most vital pages in your WooCommerce store, but by default, you have very little control over the design. Hence, almost all WooCommerce shop page templates tend to look exactly the same. But not all products are the same, some require different product page layouts to really sell them.
By creating better shop page layouts, you can get a breakthrough over your competitors to really show off your products in the best way possible. In the past, editing WooCommerce product page templates involved dozens of lines of code. In this article, we will guide you on how to customize WooCommerce product page within 2 ways: via Elementor pro and via Woostify Elementor WooCommerce theme pro, both of which require almost no programming skills.
How to customize WooCommerce product page with Elementor Pro?
The WooCommerce shop archive page and WooCommerce single product page are the default WooCommerce template. Therefore, it’s very limited to edit WooCommerce shop page layout. Luckily, thanks to Elementor WooCommerce Builder, we can totally edit WooCommerce product page layout.
What’s the Elementor Theme Builder?
Theme Builder is an advanced function of Elementor Pro. This feature helps visually customize WooCommerce Elementor product page elements, including headers, footers, archive pages, single post pages, and other shop pages. Basically, you can build these pages by using the pro version of Elementor page builder.
Can we use Elementor with WooCommerce in Woostify?
Woostify was integrated with Elementor and WooCommerce. Therefore, you can use Elementor to build any parts of eCommerce sites when using Woostify free WooCommerce theme.
Below is how we can use Elementor to customize WooCommerce product page:
Step 1: To build a product single page, you can go to Templates -> Theme builder -> Add new and select Product single template
Step 2: Just drag and drop widget to build this page
Note: Product image widget default doesn’t work. You must choose Woostify – Product images widget that requires Elementor bundle add-on of Woostify Pro
For this tutorial, you can build an Elementor Woocommerce single product page by using the following widgets:
- Product Title widget
- Woo Breadcrumbs widget
- Woostify – Product image widget
- Product rating widget
- Short description widget
- Product price widget
- Add to cart widget
- Product meta widget
- Product data tabs
- Product related
- Upsells widget
Step 3: Click to Publish button and set the condition where you want to apply this page. You can set it for all product pages or by category and tag.
If you want to build a custom Elementor WooCommerce product archive page, you only need to create a new page and set it for the Product Archive template and follow all the steps above.
With this feature, you can build and customize Elementor WooCommerce product page visually without any coding knowledge. This feature helps save a ton of time and brings flexibility to build a fully-functional online store.
How to customize WooCommerce shop page with Woostify Pro?
Why we can use Woostify Pro instead of Elementor pro to build WooCommerce shop page?
Woostify has recently released a unique and useful Elementor WooCommerce addon, WooBuilder that allow store owners to build their desired shop page, single product page, cart page, and checkout page. This feature is built with the aim to increase conversion rates, which has a big contribution to the sale improvement of their eCommerce websites.
With WooBuilder, you don’t need to get Elementor Pro to build your shop pages. The Woostify theme has already been integrated with Elementor Free, so you don’t need to install Elementor any more. Particularly, Woostify offers separate bundles of useful Elementor WooCommerce widgets for shop owners to have completely full control over the WooCommerce shop pages. They can fully customize any part of their product pages without any code experiences.
Below is how to design and customize WooCommerce single product page with WooBuidler:
Step 1: Go to Woostify Option in the Dashboard, then enable WooBuilder by clicking into Activate.
Step 2: Now, you can build the page as you desire by clicking in Add New:
Step 3: Choose Product page in the scroll-down options to create and customize Elementor WooCommerce single product page.
Step 4: Now, using WooBuilder integrated with WooCommerce and Elementor page builder, you can add elements you want to show on your page easily within the lively drag and drop editor. Some widgets you may need to build a single product page are:
- Product add to cart
- Product meta
- Product navigation
- Product related
- Product ratings
- Countdown urgency
- Much more
After customizing your single product page, you are allowed to apply the page your have created for other products, other pages and preview it.
In addition to the shop page and single product page, you can easily design and customize Elementor WooCommerce checkout page, cart page, and empty cart page using WooBuilder. To get further detail tutorial, you should take a look at this guide on how to build Elementor WooCommerce shop pages with WooBuidler.
In comparison with Elementor Pro, using Woostify Pro to create and customize WooCommerce product pages will definitely bring you more benefits. It is because Woostify Pro gives you more functionalities to edit product page, single product page, cart page, checkout page, and empty cart page, while Elementor pro does not allow users to make any changes in the checkout page, cart page, and empty cart page.