Is your default WooCommerce product page looking a little... plain? A generic layout can hurt customer trust and lower your conversion rates. You might think you need an expensive premium theme or a suite of paid plugins to create a professional, high-converting product page. But what if we told you that you could achieve a stunning, custom design—similar to what you see on major e-commerce sites—using only free tools?
In this guide, we’ll walk you through the exact steps to transform your standard product page into a dynamic and engaging layout using the power of Elementor. We will build a feature-rich page from scratch without spending a single penny.
What You’ll Need
Before we start, make sure you have the following installed and activated on your WordPress website:
WooCommerce: The core e-commerce plugin.
Elementor: The free version of the popular page builder.
Pro Elements (or similar free add-on): A free plugin that unlocks many of Elementor Pro's features, including the Theme Builder, which is essential for this tutorial.
A lightweight free theme: We recommend Astra or Hello Elementor as they provide a perfect blank canvas.
Step 1: Setting Up Your Product Template
The first step is to create a new template that will override the default WooCommerce product page design.
In your WordPress dashboard, navigate to Templates > Theme Builder.
Click on "Single Product" and then "Add New".
Give your template a name (e.g., "Custom Product Page") and click "Create Template".
You can close the default library of pre-made blocks. We're building this from scratch!
Step 2: Building the Main Layout
A classic and effective product page layout uses two columns: one for the product images and one for the product information and purchase options.
Click the '+' icon to add a new section and choose the two-column structure.
Adjust the column width to your preference. A 50/50 or a 40/60 split often works well.
Step 3: Adding and Customizing Product Images
The left column will house your product gallery.
In the widgets panel, search for the "Product Images" widget and drag it into the left column.
Elementor will automatically pull in the featured image and gallery images for your products.
In the Style tab for the widget, you can customize everything:
Border Radius: Add a slight curve to the corners of your main image and thumbnails for a modern look.
Spacing: Adjust the space between the main image and the thumbnails below.
Border Type and Color: Add a subtle border to make the images pop.
Step 4: Displaying Product Title, Price, and Key Details
Now, let's populate the right column with the essential product information. Drag and drop the following widgets one by one.
Product Title: Place this at the top of the right column. Customize the typography (font, size, weight) in the Style tab to match your brand.
Product Price: Place this right below the title. You can style the regular price and the sale price differently to make promotions stand out.
Short Description: Use the "Product Short Description" widget to show the concise, catchy summary of your product.
Product Rating: If your products have reviews, drag the "Product Rating" widget to display star ratings, which helps build social proof.
Step 5: Designing a High-Conversion "Add to Cart" Section
This is the most important part of your page. We're going to make it clear, compelling, and easy to use.
Add to Cart Widget: Drag the "Add to Cart" widget into the right column.
Customize the Button: Go to the Style tab and transform the button. Change its background color to something bold, adjust the typography, and increase the padding to make it larger and more clickable.
Add Trust-Building Information: Use "Icon Box" or "Icon List" widgets to add small sections around your "Add to Cart" button. This is perfect for highlighting key benefits like:
Free Shipping (with a truck icon)
Easy Returns (with a refresh icon)
Secure Checkout (with a lock icon)
This breaks up the text and quickly communicates value to the customer.
Step 6: Adding Full Product Details with Tabs
For more detailed information, we'll use the tabs widget to keep the page clean and organized.
Below your two-column section, add a new, full-width section.
Drag the "Product Data Tabs" widget into this section.
This widget automatically creates tabs for the Full Description, Additional Information (like weight and dimensions), and Reviews.
You can style the tabs' colors, fonts, and borders to ensure they match the rest of your page design.
Step 7: Mobile Responsiveness
A significant portion of your traffic will come from mobile devices. It's crucial that your new design looks great on all screen sizes.
Click on the "Responsive Mode" icon at the bottom of the Elementor panel.
Switch to the Tablet and Mobile views.
Elementor will automatically stack your columns. Review the layout and adjust font sizes, padding, and margins for each element to ensure everything is readable and easy to tap. For example, you might need to make the product title or price smaller on mobile screens.
Step 8: Publish Your Template
Once you are happy with the design on all devices, it's time to go live!
Click the "Publish" button.
Elementor will ask you to set "Display Conditions". Click "Add Condition", ensure it's set to "Include: Products", and click "Save & Close".
That's it! Your new custom-designed product page template is now live and will be used for all the products in your store.
Conclusion
You have successfully replaced the generic WooCommerce product page with a professional, custom-built design that can build trust and boost sales. By leveraging the power of Elementor and free add-on plugins, you’ve achieved a premium look without the premium price tag.
Go ahead and apply these techniques to your e-commerce store and let us know in the comments how it works for you!
Product mein HSN Code Add Karein:
Ab jab aap kisi bhi product ko edit karenge (Products > All Products > Edit), toh Product Data section ke General tab mein aapko ek naya field HSN Code ke naam se dikhega.
Apne product ka 8-digit HSN code is field mein enter karein aur Update par click karein.
Invoice Check Karein:
Jab koi customer order place karega, toh uske order se generate hone waale PDF invoice mein ab HSN Code bhi dikhayi dega.
Apne Business ko Promote Karein!
Agar aap apne ghar ya business ke liye unique aur high-quality metal flower vases dhoondh rahe hain, toh humari website youngsera.com par zaroor visit karein! Wahan aapko metal decor items ka behtareen collection milega.
Aur agar aapko apne WordPress ya WooCommerce store ko design karne ya customize karne mein madad chahiye, toh humari team Webaro.in par aapki seva mein haazir hai. Hum aapko professional web designing services provide karte hain.
Conclusion
Toh dosto, yeh tha WooCommerce mein GST ko manually setup karne aur free plugin aur code ki madad se HSN code ko invoice mein add karne ka aasan tareeka. Ummid hai yeh guide aapke liye helpful hogi.
Agar aapko yeh blog post pasand aaya ho, toh ise apne dosto aur colleagues ke saath share karna na bhoolें! Aur agar aapke koi sawaal hain, toh comment section mein zaroor bataiye.
Webaro par aane ke liye dhanyavaad! Milte hain agle informative post mein.
Mujhe ummeed hai yeh blog post aapko pasand aayega aur aapke video ke saath bahut achhi tarah se jayega!
Buy Now Button and Add to Cart Button CSS Code
.woocommerce div.product form.cart .button.single_add_to_cart_button {
width: 100%;
height: 40px;
}
button.wsb-button.js-wsb-add-to-cart {
width: 100%;
}