Note: In order for the Shop Customizer to work, WooCommerce plugin must be installed and activated. To learn how to activate it, check out this article.
WooCommerce has lots of features that help you run an E-Commerce website the easiest way possible. However, some users may need to customize their shop look even more. It is possible to customize the woocommerce templates in any WordPress theme and then start coding to have a proper look. It’s the classic way to customize your shop.
However, Jupiter X Shop Customizer introduces a new way of customizing anything in your shop, the easiest way possible without any line of code. It has premade templates, a set of option to customize the paddings, margins, backgrounds, alignments, colors, typography settings, pagination and anything else you can imagine. The good thing about the Shop Customizer is that you can see what you are editing because all the edits are live and available through Shop Customizer.
To make it more classified, we divided the options into 4 main categories:
- Product Archive (contains options to customize the WooCommerce archive pages)
- Product List (contains options to customize the list of products anywhere in the archive or single woocommerce pages)
- Product Page (contains options to customize the WooCommerce Single product pages)
- Checkout and Cart (contains options to customize the WooCommerce Cart and Checkout pages)
All of the settings can be found in WordPress left dashboard, Appearance > Customize.
There are a couple of points you need to know if you are going to use the Shop Customizer alongside with the main page builder Elementor:
1. Make sure that your default shop pages don’t have any Page Template in the Page Attribute section.
2. You can not edit the default WooCommerce pages with Elementor.
3. There is also a Product element which you can use to create your own product list, but you should put differences between the default Shop Pages and the pages you created with this element. To find out about the Products element, please check this article.
Note: Your Shop, Checkout and Cart pages should not be edited by Elementor. In case you have edited them with Elementor, you will lose them and won’t be able even to edit them by Elementor. Simply switch to the text editor in those pages and use these page shortcodes inside them:
This shortcode will be used for Cart page.
Then make sure they are set correctly inside the WooCommerce settings as described in the Woocommerce article.