Crafting a Custom Single Product Page in JupiterX
Crafting an engaging and detailed single product page is a crucial part of providing a seamless shopping experience for your customers. JupiterX offers you complete control over the presentation of your products, ensuring that each element aligns perfectly with your store's style. This guide walks you through the process of creating and personalizing a Single Product page in JupiterX for your WooCommerce store.
Starting with the Layout Builder
- Go to JupiterX > Layout Builder from your WordPress admin dashboard.
- In the Layout Builder's left panel, select 'Product Single' (ensure WooCommerce is activated).
- Click 'Add New', enter a name for your template like "Single Product", and proceed to the Elementor editing area.
Single Product Template Creation Process
Selection of a Template: Decide whether to use one of the pre-designed single product templates from JupiterX or to start from scratch and design your own.
Using Specialized Widgets: JupiterX comes with an array of widgets purpose-built for single product pages, such as:
- Product Title
- Product Meta
- Product Price
- Add To Cart button
- Product Additional Information
- Product Content
- Product Data Tabs
- Product Gallery
- Product Rating
- Product Reviews
- Product Short Description
- Products Carousel
- WooCommerce Breadcrumbs
Previewing Your Product:
- Click the settings gear icon in the Elementor editor's top center.
- Navigate to 'Preview Settings' in the 'Post Options' panel.
- Choose a product to preview by selecting 'Products', searching, and applying the preview.
Finalizing and Applying Your Template
Setting Display Conditions:
- After completing the design of your single product template, it's time to determine where it will be displayed. You can set up display conditions directly within the Elementor editor. Click the downward arrow next to the "Publish" button to access "Display Conditions," or you can find the display conditions within the layout builder. The process is illustrated in the animated image below. From the conditions dropdown, select 'WooCommerce' and then 'Products'.
- If you wish the template to be specific to certain products, use the provided multi-select option to make your selections.
- Testing Your New Template: Once you've saved your conditions, navigate to a product page to verify that your single product template has been correctly implemented.
Creating Multiple Single Product Templates JupiterX facilitates the creation of varied templates for different needs:
- You can tailor multiple single product templates according to various criteria such as product ID, categories, tags, authors, and more by setting the accurate display conditions for each scenario.
By following these steps, you can transform your product pages into captivating, informative, and buyer-friendly showcases that align perfectly with your brand's ethos and style. With JupiterX's limitless customization options, you'll empower your customers with all the information they need to make informed purchasing decisions.
We hope this guide has provided you with the clear steps to bring your single product pages to life. Remember, our team is at your service should you need any support or have queries as you create a stunning and effective online store with JupiterX.