How To Create Woocommerce Shop Page

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

1. Install WooCommerce.
Woocommerce plugin is bundled in Jupiter X and you can install it viaJupiter X > Control Panel > Plugins and click onActivate button forWoocommerce.

After activating the plugin, you'll be shown the set up wizard to configure the settings and install default pages likeShop, 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 inWoocommerce > 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 toWordPress 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 accessingWordPress 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 forProducts post type inElementor > Settings as described in this article.

Also you can adjust the styling of a single product page using Shop Customizer inAppearance > 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 toWordPress 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 toWordPress Admin Menu > WooCommerce > Settings and click onProductsTab. On that tab you will see a sub tab link calledGeneral. Click on that sub tab to show the set of options to select the main shop page. Use theShop 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 RavenProducts 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 inAppearance > 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 toProducts > Categories > Add New Category.

2. Fill in the fields and inLayout setting choose the layout for this new category. You can have a layout with sidebar or without sidebar. If you set it toGlobal, the setting will be applied fromAppearance > 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 Layout option to the needed setting.

Also, you can set a global layout for all category pages.

1.Go toAppearance > Customize > Sidebar.

2. Under theSettings tab inExceptions section click onAdd New Exception.

3. SelectArchive item and setLayout 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 thePage Attributes. The Page Template field should be selected to theDefault.

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 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:

            [woocommerce_cart]

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.