What is Shop Customizer

Last Updated on

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)

In this article, we will go through the options and settings of Shop Customizer and let you know how you can set up the same settings for your other e-commerce websites.

x
Beware! In Jupiter 6 we also have another Shop Customizer. Jupiter X shop customizer is the same as Jupiter 6 shop customizer, but has more options and templates.
x
Note: To be able to work with the shop customizer, WooCommerce plugin needs to be installed and activated. To learn how to activate it, check out this article.

All of the settings below can be found in WordPress left dashboard, Appearance > Customize.

In this article


Product List

The shop customizer provides an option to customize the product list. The product list is a shop page with a product loop that displays your products.

x
Note: You can check out the demo of a product list here.

To customize the product list:

1
From the customizer left dashboard, click on Shop > Product List.

2
A new window will open with all the available options to customize and style the product list.

3
After you’ve configured the settings, click on the Close button.
4
Click on the Publish button. The changes you have made will be applied to the front-end of your website.

For more information about the Product List options, please check this article.


Product Page

The shop customizer provides an option to customize the product pages. The product page is a single shop page where the customer is able to check out the product in detail and add it to their cart.

x
Note: You can check out the demo of a product page here.

To customize the product page:

1
From the customizer left dashboard, click on Shop > Product Page.

2
A new window will open with all the available options to customize and style the product page.

3
After you’ve configured the settings, click on the Close button.
4
Click on the Publish button. The changes you have made will be applied to the front-end of your website.

To find more information about the Product Page options, please check this article.


Checkout & Cart Pages

The shop customizer provides an option to customize the checkout & cart pages. The checkout & cart pages are shop pages where the customer can manage the items that they have decided to purchase.

To customize the checkout & cart pages:

1
From the customizer left dashboard, click on Shop > Checkout & Cart.

2
A new window will open with all the available options to style the checkout & cart pages.

3
After you’ve configured the settings, click on the Close button.
4
Click on the Publish button. The changes you have made will be applied to the front-end of your website.

To find more about the Checkout and Cart options please check this article.


Archive Pages

This part is still under development and will be updated as soon as developed.


Things to consider while using the Shop Customizer

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.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket