How To Easily Customize WooCommerce Shop Page Easily without Coding
In this tutorial, I will show you how to customize WooCommerce Shop Page easily without even touching line of code.
Yes Guys, you heard me right.
Customising WooCommerce Shop Page is really tough and if you want to do all by yourself without using some premium themes than you need to learn how to code for that.
But several of our readers have requested a tutorial on how you can easily edit the Shop Page and Customise it the way you want without coding. So in this guide we will use Elementor plugin as Visual Drag and Drop Editor and an Extra Plugin for WooCommerce functions, and that plugin is known as JetWooBuilder.
Elementor is currently the #1 WordPress Drag and Drop Page Builder and is the best voted by the user. It provides the user with a drag and drop visual editor by using which you can easily customise the layout of your theme without coding.
Elementor also provides you with pre-made templates and add-ons and also makes importing demo of websites easily.
To Know more about elementor premium themes check our latest post on best elementor themes for WordPress.
So this are the list of features the plugin offers.
- Product Tab
- Universal Product
- Add Banner
- Product Archive
- Product Title
- Related Product
- Add To Cart Button
- Additional Information
- Product data Tab
- Product Description
- My Account Order
- Thankyou Order
- Thankyou Customer Address
- Product Social Share
- Product Short Description
- Product Price
- Product Rating
- Product Reviews
- Product Image
- Product Upsell
- Product Stock Status
- Product Meta Info
- Product Archive Layout
- Product Cart Table
- Register Form
- My Account Logout
- Thankyou Order Details
- Available Stock Progress BarNew
- Product Cart Total
- Product Cross Sell
- Checkout Additional Information
- Checkout Billing Form
- Checkout Shipping Form
- Checkout Payment
- Checkout Order Review
- My Account Dashboard
- My Account Download
- My Account
- My Account Address
- Login Form
- Advance Product Image
As you can see this plugins provides a ton of features that you can’t even think of and all of these can be achieved without even writing a piece of code.
This plugin provides 40 types of customisation that works with elementor but in order to use this plugin you need to have WooCommerce and Elementor pre install.
Once you have downloaded the plugin, you need to install it.
Go To Plugins > Add New > Upload JetwooBuilder & Activate it.
Disclosure: I may receive affiliate compensation for some of the links below at no cost to you if you decide to purchase a paid plan. You can read our affiliate disclosure in our privacy policy.
Steps To Customize WooCommerce Shop Page
So inorder to customise the shop page, you need to create a new Shop Page, Go to Pages > Add New and create A Shop Page named ” Shop Elementor”.
Now edit the page with Elementor, as you click on edit the page with elementor the elementor visual editor will load up with the JetwooBuilder functions.
Now create a new layout as you want or import a template, drag the JetwooBuilder elements on the desired locations. Once you are satisfied with customising the layout of the WooCommerce Shop Page, click on update and publish.
Before Publishing, Click on Display Condition and Choose as Shop Archive.
That’s it you are done with the customising the WooCommerce page. Now go to WooCommerce > Settings > > And choose the shop page as ” Shop Elementor”.
Also don’t forget to update your menu, change the old WooCommerce Shop page to the new one.
Conclusion
JetwooBuilder has made the difficult task so easy that even a newbie can make and design their WooCommerce store. Elementor + JetwooBuilder is the best combination right now for creating a customised WooCommerce store.
Premium themes provides pre-built WooCommerce store design, but now they are also starting to use the Elementor page builder to design the themes and bundle it together.
If you have any doubt in this tutorial you can contact us through the comment or through our contact us page.
Or if you are still unable to Customise your WooCommerce page as your want, you can hire WordPress customising team from GloriousThemes.com and pay whatever the price you want just don’t forget to use the coupon code “bloggersproutFan“.
That’s it for this tutorial I hope this tutorial was useful and if you have any other comment regarding WooCommerce or Elementor, leave a comment below. If this article has helped you don’t forget to share this with your friends.
