Styling the Products on Shop Pages Using Jupiter X

Описание: In this tutorial, you’ll learn how to style and customize WooCommerce products on your shop pages using Jupiter X. 🛍️

We’ll walk through editing product grids, adjusting layouts, and refining typography, spacing, and hover effects — all within the Elementor editor. Whether you’re looking to align your products with your brand or create a cleaner, more engaging shopping experience, this video has you covered.

In this video we will cover:
✔ Customizing WooCommerce product layouts with Jupiter X
✔ Adjusting product grid columns and spacing
✔ Editing typography and colors for product titles and prices
✔ Applying hover and image effects
✔ Creating consistent, on-brand shop page designs

Chapters
00:00:45 Start customizing WooCommerce Shop page
00:00:58 Open Layout Builder
00:01:26 Edit product archive with Elementor
00:01:57 Edit Products widget
00:02:23 Source → Custom (if Simplicity Mode off)
00:02:34 Set product columns
00:02:50 Set content layout (details beside image)
00:03:13 Open Style tab
00:03:31 Adjust gaps (column & row)
00:03:43 Add border and radius
00:04:11 Set border color
00:04:22 Configure hover styles (shadow/border)
00:05:01 Fix padding and center content
00:05:21 Adjust image top spacing
00:05:48 Style product title typography
00:07:22 Style Add to Cart button

Related Resources
📘 How to Display WooCommerce Products Using Jupiter X → https://help.jupiterx.com/article/234...

🔔 Don’t forget to subscribe to our channel!
🚀 Get Jupiter X: https://jupiterx.com
⚡ See How Jupiter X Eliminates the Need for Elementor Pro Completely: https://jupiterx.com/jupiter-x-versus...
📚 Help Center: https://help.jupiterx.com

This video tutorial was crafted with Artbees’ Clevera AI
👉 Try Free Now: https://clevera.ai