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, we can totally edit Shop page with the 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 pages by using Elementor page builder.
Does Elementor work with WooCommerce in Woostify?
Woostify was intergraded with the Elementor API of Theme builder function. Therefore, you can use Elementor to build any parts of the site when using Woostify theme.
Below is how we can use WooCommerce Elementor to customize Shop 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 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
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 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.