How to Create Beautiful WooCommerce Product Pages With Elementor | Cheema Developers Blog


The usual WooCommerce product pages are fairly purposeful, and good wanting as effectively! However we will do higher, particularly by coupling WooCommerce and Elementor!

On this information, we present you how you can construct customized (and delightful) WooCommerce product pages to “WOW” your clients and generate extra gross sales.

What you want

Aside from what you have already got – a working WordPress installation and WooCommerce added on prime of that – you want the Elementor web page builder plugin.

Elementor is available in two flavors – free and paid. Whereas there are some customizations out there in Elementor free that can be utilized for WooCommerce, to get to the true good things and entry to pre-built Elementor Pro templates, you’ll want to improve to the professional model. That is going to value you $49 for one web site.

Word; Elementor is just not the one web page builder that works with WooCommerce and allows you to construct customized WooCommerce product pages. Here are some alternatives in case you’d prefer to discover what else is on the market. That mentioned, Elementor is our favourite answer for WooCommerce customizations.

Earlier than you may get to work, you have to install each the Elementor free and Elementor professional plugins in your web site:

  • Putting in Elementor free is straightforward. Simply go to Plugins → Add New and enter Elementor into the search field. Set up and activate.
  • To put in Elementor professional, you first have to finish your buy on Elementor.com. You’ll have the ability to obtain the Elementor professional bundle out of your consumer profile – it’s a ZIP file. Go to Plugins → Add New and click on on the Add Plugin button. Choose the Elementor ZIP out of your desktop and add it to your web site. Activate the plugin.

Elementor will ask you to validate your license at the beginning turns into operational.

Create a brand new WooCommerce product web page with Elementor

To start, go to Templates and click on on Add New.

Elementor templates for WooCommerce product pages

From the listing, choose Single Product.

Single Product

Elementor will present some ready-made WooCommerce product pages templates which you can begin with. Choosing one that appears the closest to what you need is the perfect path to take for many customers. Making a product template from scratch will usually take much more time. It’s simply simpler to switch an current template. Click on on Insert to get the template fetched.

Elementor product templates

You’ll see your template added onto the Elementor canvas. Now you can customise the template nevertheless you see match – add new components to the web page, customise the present ones, take away the stuff you don’t want, and so forth.

Elementor WooCommerce dashboard

Within the left sidebar, you’ll discover a variety of WooCommerce components, similar to Product Title, Product Photographs, Product Worth, and each different piece of knowledge that WooCommerce shows about your merchandise.

You possibly can take every of those components and drag them onto the canvas within the actual spot the place you want them.

Listed below are some customizations you are able to do first:

Add your branding and colours

The inventory Elementor product templates look good, however they in all probability don’t match your model completely. One fast change we will do to repair that’s to regulate the background colours, font colours, and numerous typography settings on the whole.

To regulate any block that’s on the web page, click on on the pencil icon within the prime proper nook of the block.

pencil

Then, within the left sidebar, change to the Fashion tab. That is the place you possibly can carry out all styling- and looks-related customizations. For instance, for the Product Title block, you possibly can change the colour of the textual content, the typography, and the shadows.

Style tab for your WooCommerce product pages

Let’s click on on Typography. This may present one other field the place you possibly can change the font and all of the parameters of it.

Proceed via all of the texts one after the other and edit them till they seem like you need them to. Pay particular consideration to what the worth block appears to be like like – it must be clearly seen in order that it doesn’t confuse the client.

change typography on your WooCommerce product pages

Realign/transfer the product description

WooCommerce shows your product descriptions in a handful of locations. We don’t have to get into all of the specifics proper now, however let’s simply deal with two issues:

  • the quick description
  • your product knowledge tabs

The quick description is simply what it sounds. WooCommerce takes this textual content from the Quick Description field (one of many fields you fill out when creating a brand new product). It’s a good suggestion to have the quick description displayed someplace close to the highest of the product web page.

You possibly can take Elementor’s Quick Description block and drag and drop it the place you want it.

Short Description to be displayed on WooCommerce product pages

The product knowledge tabs is successfully the block that homes the principle details about the product. Ensure it’s in a visual spot in your new WooCommerce product web page template.

data tabs for WooCommerce product pages

Don’t overlook to fashion the colours and typography of these blocks as effectively.

Tweak your “add to cart” button

The “add to cart” button is the only most necessary button on any eCommerce web site. You really need it to face out and catch the attention of your buyer.

You need to use two totally different block varieties for the “add to cart” button in Elementor. There’s the Add to Cart block, and the Customized Add to Cart block.

Custom Add to Cart

Experiment with each of them to see which is best in your case. Click on on the pencil icon and see what’s out there within the sidebar in terms of the given block’s settings.

add to cart options

With a few clicks, you may get your button wanting a lot better.

final button

Add/take away product scores

Displaying product scores will be a good way to present your clients that remaining nudge to purchase your stuff. The one downside is that you’ll want to have some scores within the first place. 🤷‍♂️

When your retailer is model new, and also you don’t have any scores but, it’s higher to not have the scores block on the web page. Proper click on on the Product Score aspect and delete it.

delete ratings from WooCommerce product pages

In a while, you possibly can add that block again in and even customise the way it appears to be like. Among the issues you possibly can change are the colours of the celebs and the spacing of issues.

ratings style

Tweak the cellular and pill views

Lately, extra individuals entry the net from their smartphones than from desktop computers and laptops. For that motive, your retailer should be optimized for cellular viewing, or you’ll lose gross sales!

WooCommerce is already mobile-optimized out the gate, however since we’re making a customized product web page, we have to guarantee that your new product template appears to be like good as effectively.

Within the backside left nook of the Elementor interface there’s a button labeled Responsive Mode.

responsive mode for WooCommerce product pages

Whenever you click on on it, it is possible for you to to modify between the Desktop, Pill, and Cellular views. Decide considered one of them and tweak the design if wanted.

What’s cool right here is which you can change the show settings of your blocks in a method that they take impact solely on cellular or pill. For instance, in case you suppose that the worth ought to be larger on cellular, click on on the pencil icon within the worth block, then click on to edit the typography, and lastly change to Cellular subsequent to font measurement:

mobile fonts

In the event you change the font measurement now, solely the cellular view will probably be affected.

Undergo your template aspect by aspect till you’ve got the entire thing configured for cellular and pill viewers.

Publish customized WooCommerce product pages

When your new product template is prepared, click on on the Publish button within the backside left nook of the Elementor interface.

Elementor will ask you so as to add a situation for when the template ought to be used.

display condition

To have the template used for all merchandise, merely choose “Merchandise” from the listing, like so:

enable for products

Click on on SAVE & CLOSE to finalize every thing.

That’s it! 🍾 With this performed, your customized WooCommerce product web page has been saved and changed the default product web page.

You possibly can see your product web page in motion once you go to any of the merchandise in your retailer.

final custom WooCommerce product pages with Elementor
Free information

5 Important Tricks to Velocity Up
Your WordPress Website

Cut back your loading time by even 50-80%
simply by following easy ideas.



#Create #Lovely #WooCommerce #Product #Pages #Elementor