How to customize Shop pages by using Woocommerce Elementor?

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 the 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 the 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 elementor product page:

Step 1: To build a product single page, you can go to Templates -> Theme builder -> Add new and select Product single template

woocommerce-elementor

Step 2: Just drag and drop widget to build this page

woocommerce-elementor

Note: Product image widget default doesn’t work. You must choose Woostify – Product images widget that requires Elementor bundle add-on of Woostify Pro

elementor-woocommerce

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.

elementor-woocommerce

If you want to build a custom 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 the shop page visually without any coding knowledge. This feature helps save a ton of time and brings flexibility to build a fully-functional online store.

Above is the way to customize the Shop page with WooCommerce Elementor. Hopefully, this tutorial will be helpful for you.

Leave a Reply

avatar
  Subscribe  
Notify of

Download Woostify Now

Enter your email address and be the first to learn about updates and new features.

stay informed!

Subscribe to receive exclusive content and notifications