The shop archive page and product single page are the default WooCommerce template. Therefore, it’s very limited to customize the layout of these pages. Luckily with the help of theme builder function of Elementor Pro, we can totally edit Shop page with with WooCommerce Elementor.
What’s the Elementor Theme Builder?
Theme Builder is an advanced function of Elementor Pro. This feature helps visually customize headers, footers, archive pages, single post pages and other shop pages. Basically, you can build these page by using Elementor page builder.
Does Elementor Theme Builder work with WooCommerce in Woostify?
We intergraded with Elementor API of Theme builder function. Therefore, you can use Elementor Pro to build any parts of the site when using Woostify theme.
Below is how we can use WooCommerce Elementor to customize Shop page:
To build a product single page, you can go to Templates -> Theme builder -> Add new and select Product single template
Then 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 will use 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
The last step is to 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 product archive page, you only need to create a new page and set it for Product Archive template and follow all the steps above.
With this feature, you can build the shop page visually without any coding knowledge. This feature helps save a ton of time and bring flexibility to build a fully-functional online store.
Above is the way to customize Shop page with WooCommerce Elementor. Hopefully, this tutorial will be helpful for you.