How to create Shop page with Jupiter X
Jupiter X theme is compatible with WooCommerce plugin, the de facto solution for E-Commerce in WordPress. Take the steps below to install and set up shop.
Setting up Shop
After activating the plugin, you’ll be shown the set up wizard to configure the settings and install default pages like Shop, Cart, Checkout, My Account. But you can skip this and configure the settings later. Also default pages can be installed from the left WordPress dashboard menu in Woocommerce > Status > Tools tab > Create default Woocommerce pages.
3. Set the Shop Settings.
Set your shop details regarding the location, currency, measure units, tax information, checkout process, shipping and more in WooCommerce settings. You can access this section by going to WordPress Admin Menu > WooCommerce > Settings. For more detailed information regarding WooCommerce settings click here.
4. Add Products.
The next step will be adding products to your shop. You can add products by accessing WordPress Admin Menu > Products > Add Product. You can add Product Title, Description, Short Description, Categories, Tags and many more details on this page. For more information click here.
You can add description using Elementor page builder and add Elementor widgets to the content, but make sure you enabled Elementor for Products post type in Elementor > Settings as described in this article.
Also you can adjust the styling of a single product page using Shop Customizer in Appearance > Customize > Shop > Product Page. Read the article Product Page in Shop Customizer for the detailed information.
6. Add the Main Shop Page.
Create a new page by going to WordPress Admin Menu > Pages > Add New. Add proper Title and other information which you would do for any normal WordPress page. You can skip this step if you used Woocommerce set up wizard and default Woocommerce pages were created in that wizard.
7. Set the Main Shop Page.
Go to WordPress Admin Menu > WooCommerce > Settings and click on ProductsTab. On that tab you will see a sub tab link called General. Click on that sub tab to show the set of options to select the main shop page. Use the Shop Page option to select the page you just created in the previous step.
Now you have a working shop for your website. For more detailed information about WooCommerce plugin usage, click here.
Warning! If you set the main Shop page via Woocommerce settings, it can’t be edited with Elementor page builder. You can use Elementor only for a custom page that is not assigned to Main Shop Page and other default Woocommerce pages in Woocommerce settings.
Alternative Product Loops
Jupiter X provides a set of widgets in Elementor to add a product list on your website other than the main shop page. To do that, add a page and use the Elementor editor to add the Raven Products element to the page. In this case Shop Page in Woocommerce settings must be blank! Also there are a few other elements provided by default in Elementor and WooCommerce that you can take advantage of. The elements are listed below:
- Products from WordPress
- Woocommerce Recent Products
- Product Categories
- Woocommerce Product
- Woocommerce Featured Products
- Woocommerce Top Rated Products
- Woocommerce Sale Products
If you’d like to customize the styling for product archive pages, like product categories, you can do this via Shop Customizer in Appearance > Customize > Shop > Product List. Refer to this article for more information. It will also style the content for Raven Products element if you added it to your custom Shop page.
Setting Layout for Product Archive pages
When creating a custom page you have a possibility to set its layout to Full Width or Default (with sidebar). But what about archive pages, for example category pages to which you assign the products? What if you want to set sidebar for one category, but have full width page for another? You’ve got such opportunity when creating a category or edit a category after its creation.
1. Go to Products > Categories > Add New Category.
2. Fill in the fields and in Layout setting choose the layout for this new category. You can have a layout with sidebar or without sidebar. If you set it to Global, the setting will be applied from Appearance > Customize > Sidebar.
Note: If you forgot to select the layout while creating a category, you can change it in the category editor. Edit a category in Products > Categories and set the Layoutoption to the needed setting.
Also you can set global layout for all category pages.
1. Go to Appearance > Customize > Sidebar.
2. Under the Settings tab in Exceptions section click on Add New Exception.
3. Select Archive item and set Layout setting to the desired layout.
Note: Archive settings are applied to Blog and Portfolio archive pages as well. Shop exception is related to Main Shop Page in this setting.
Setting up Cart and Checkout pages
The point here is to make sure the Checkout and Cart pages do not have any selected page template from the Page Attributes. The Page Template field should be selected to the Default.
Also, please note that your Shop, Checkout and Cart pages should not be edited by Elementor. In case you have edited them with Elementor, you will loose 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.