Are you in search of a option to customise your WooCommerce product pages?
By fine-tuning your WooCommerce product pages, you may get extra gross sales and enhance your retailer’s conversion charges.
On this article, we’ll present you how one can customise WooCommerce product pages with out having to write down any code.
Why Customise WooCommerce Product Pages in WordPress?
Your product pages are a number of the most useful content material in your on-line retailer. The issue is that the default WooCommerce product pages aren’t optimized for conversions.
By creating distinctive product pages you possibly can typically convert guests into paying prospects at a a lot increased fee. This implies you possibly can earn more cash with no need to draw extra guests to your web site or enhance your WooCommerce search engine optimization.
Earlier than you begin customizing your WooCommerce product pages, you could be sure you have the quickest WooCommerce internet hosting to assist your on-line retailer as a result of velocity additionally has a huge impact on conversion charges.
When you’ve accomplished that, let’s check out how one can customise your WooCommerce product pages with no code.
How one can Customise Your WooCommerce Product Pages in WordPress
The simplest option to create a customized WooCommerce product web page is through the use of SeedProd.
SeedProd is the perfect drag-and-drop WordPress web page builder and comes with over 180 professionally-designed templates.
Even higher, you need to use SeedProd’s superior theme builder to create a customized WordPress theme with out having to write down a single line of code.
You need to use this drag-and-drop theme builder to customise each a part of your on-line retailer, together with your product pages.
SeedProd even has ready-made WooCommerce templates and eCommerce blocks that assist you to create a high-converting on-line retailer, quick.
Simply remember that this technique will exchange your present WooCommerce theme.
Set up and Activate SeedProd
The very first thing you could do is set up and activate the SeedProd plugin. For extra particulars, see our step-by-step information on how one can set up a WordPress plugin.
Word: There’s a free model of SeedProd that permits you to create beautiful designs it doesn’t matter what your funds. Nevertheless, for this information, we’ll use the premium plugin because it comes with the WooCommerce blocks and theme builder. You’ll want to purchase a Professional subscription or increased with a view to use the theme builder.
Upon activation, go to SeedProd » Settings and enter your license key.
Yow will discover this data beneath your account on the SeedProd web site. After getting into the license key, click on on the ‘Confirm Key’ button.
Select a WooCommerce Template Equipment
With that accomplished, it’s time to decide on the WooCommerce template equipment that you just’ll use to your on-line retailer. Merely head over to SeedProd » Theme Builder after which click on the ‘Theme Template Kits’ button.
Since we’re making a customized WooCommerce theme, click on on the ‘WooCommerce’ tab to see all of the completely different eCommerce kits.
To preview a design, merely hover your mouse over it after which click on on the magnifying glass.
This opens the template equipment in a brand new tab.
It is a stay preview, so you possibly can see different designs within the equipment by clicking on the hyperlinks, navigation menus, buttons, and different interactive content material.
Because you’re making a customized WooCommerce product web page, be sure to take a look at the product web page design.
While you discover a template equipment you need to use, hover over it after which click on on the checkmark when it seems. On this information, we’re utilizing the WooCommerce Starter Theme however you need to use any template you need.
Customise the WooCommerce Product Web page Template
SeedProd will import the entire equipment into your WordPress web site, so you need to use the equipment to create a customized product archive, store web page, weblog index, and extra.
To see all these templates, head over to SeedProd » Theme Builder.
After putting in your template, you’re prepared to begin customizing the product web page.
To get began, hover over the Product Web page template after which click on on the ‘Edit Design’ hyperlink when it seems.
It will open the template in SeedProd’s drag-and-drop editor, with a preview of your WooCommerce template to the precise and a few block settings on the left.
SeedProd will present an instance of how the product web page will look, utilizing content material from considered one of your WooCommerce merchandise.
All of the WooCommerce templates include built-in blocks, that are a core element of all SeedProd’s designs.
To customise a block, merely click on to pick out it within the web page preview after which make any adjustments within the left-hand menu.
For instance, the template comes with a built-in Featured Product block you could customise in a number of other ways.
To start out, it’s possible you’ll need to change the block’s measurement and alignment utilizing the settings within the left-hand menu.
You’ll discover extra settings within the ‘Superior’ tab. Right here, you can also make the picture actually stand out by including a border or shadow, including a CSS animation, and extra.
As you make adjustments, the stay preview will replace robotically so you possibly can attempt completely different settings to see what seems the perfect in your on-line retailer.
The WooCommerce template additionally has an Add To Cart name to motion button. This enables buyers to purchase your merchandise, so that you’ll need to make the button stand out.
To start out, you possibly can exchange Add To Cart with your individual customized messaging, similar to Purchase Now or Get Yours At present. To make this variation, merely choose the Add To Cart button after which kind the brand new textual content into the ‘Button Textual content’ discipline.
You may additionally need to add an icon font to the button, to assist guests perceive what this button does at a look.
SeedProd comes with a built-in library of greater than 1400 Font Superior icons that you need to use in your product pages. Within the left-hand menu, click on to broaden the ‘Icons’ part.
Now you can select whether or not to point out the icon earlier than or after the button textual content.
Merely make your resolution after which click on on the ‘Select Icon’ button.
You’ll now see all of the completely different Font Superior icons that you need to use. While you discover an icon you want, give it a click on.
While you’re proud of the button’s messaging, you possibly can change the way it seems by clicking on the ‘Templates’ tab. Right here, you’ll discover completely different button templates that you need to use.
To make use of any of those designs, merely click on on the one you need.
After selecting a template, you possibly can fine-tune how the button seems by clicking on the ‘Superior’ tab. Right here, you possibly can change the spacing between the button and the amount field, enhance the border radius to create curved corners, and extra.
Another choice is to open the ‘Button Fashion’ dropdown and select a brand new model from the listing.
A lot of the settings are self-explanatory so it’s price going via them to see what completely different sorts of results you possibly can create.
One other essential part is the Product Information Tabs block. This exhibits buyers detailed data, similar to product tags, attributes, and classes.
With that in thoughts, it’s price clicking to pick out the block after which seeing what adjustments you can also make within the left-hand menu. For instance, you possibly can change the background colour, textual content colour, enhance the padding, and extra.
To take away any of the default blocks, merely hover your mouse over that block.
Then, click on on the Trash can icon when it seems.
You can too transfer blocks across the web page utilizing drag and drop.
Get Extra Gross sales with a Customized WooCommerce Product Web page
The template’s built-in blocks are an awesome begin, however it’s possible you’ll need to add your individual content material.
SeedProd has a number of WooCommerce blocks that you need to use to create a high-converting on-line market or retailer. That can assist you out, listed below are some blocks it’s possible you’ll need to add to your WooCommerce product web page.
Present Associated WooCommerce Merchandise
You might be able to get extra gross sales and enhance the common order worth by exhibiting associated gadgets in your product pages. These is perhaps merchandise that buyers steadily purchase collectively or gadgets that complement each other.
For instance, if a buyer buys a laptop computer then they could even be taken with a laptop computer bag.
SeedProd comes with a ready-made Associated Merchandise block. Nevertheless, to get essentially the most out of this block you’ll must arrange linked merchandise within the WooCommerce plugin, as you possibly can see within the following picture.
For step-by-step directions on how one can add linked merchandise, please see our information on how one can upsell merchandise in WooCommerce.
With that accomplished, merely discover the Merchandise Associated block within the SeedProd editor after which drag it onto your structure.
By default, the block exhibits one associated product in a single column.
You’ll be able to present extra merchandise by typing new numbers into the ‘Columns’ and ‘Posts Per Web page’ packing containers or by clicking the arrow buttons.
When you show a number of merchandise, then you possibly can change how these things are organized utilizing the ‘Order By’ field. For instance, you may present the highest-rated merchandise first, since prospects appear to get pleasure from these things essentially the most.
You can too open the ‘Order’ dropdown and select whether or not to show the associated gadgets in ascending (ASC) or descending (DESC) order.
Add a Star Ranking
Displaying a star score for every product may help reassure buyers that your gadgets are good high quality. That stated, it’s possible you’ll need to drag the Star Ranking block onto your design.
For the perfect outcomes, we advocate exhibiting the star score in direction of the highest of the display screen, the place it’s simple for purchasers to identify. This may help buyers make buying selections quicker since they will instantly see whether or not different buyers advocate a product.
Use FOMO by Displaying the Product Inventory
FOMO, or ‘concern of lacking out,’ encourages buyers to take motion now.
When you promote restricted version gadgets or often have a small quantity of inventory, then it’s possible you’ll need to present the variety of merchandise remaining. This may persuade buyers to purchase now, somewhat than wait and threat the product promoting out.
To indicate this data, drag the Product Inventory block onto your design.
By default, the block shows the variety of gadgets remaining, adopted by ‘in inventory.’ It’s possible you’ll need to add your individual messaging to this default textual content.
To do that, merely kind into the small textual content editor within the left-hand menu. When you do add some textual content, then watch out to not edit the ‘[sp_product_stock]’ tag as this permits SeedProd to point out the full variety of gadgets remaining.
Exchange the Featured Picture with a Product
A featured product picture lets buyers see what they’re shopping for in an internet retailer.
Nevertheless, typically it’s possible you’ll need to exchange a single featured picture with a product galley. For instance, you may present the identical product from completely different angles. Some shops even use interactive 360-degree photos so buyers can discover a product in additional element.
When you’ve added a gallery to your WooCommerce merchandise, then it is sensible to exchange the default Product Featured Picture block with a gallery block.
To do that, merely hover over the Featured Product block after which click on on the trash can icon when it seems.
You’ll be able to then discover the Product Gallery Picture block within the left-hand menu and drag it onto your web page structure.
We advocate including this block towards the highest of the web page, so guests can instantly see what they’re shopping for.
Customers can zoom into the picture by hovering their mouse over the product gallery.
By default, the zoom icon seems within the upper-right nook of the present featured picture, however you possibly can change this utilizing the ‘Place Prime’ and ‘Place Proper’ sliders.
You can too make the magnifying glass icon larger or smaller utilizing the ‘Font Dimension’ slider or change its icon colour and background colour.
You can too add borders across the completely different photos, utilizing the ‘Picture Border’ and ‘Thumbnails’ border settings.
Create a Buzz on Social Media with Sharing Buttons
If a consumer shares your product on social media, then it might drive extra individuals to your on-line retailer. With that in thoughts, it’s a good suggestion so as to add social share buttons to your product pages.
SeedProd has a Social Sharing block that helps Fb, Twitter, LinkedIn, and Pinterest. Merely drag and drop this block onto your web page and it’ll add the Fb and Twitter sharing buttons robotically.
So as to add extra social networks, merely click on on the ‘Add New Share’ button.
You’ll be able to then select a social media web site from the dropdown menu.
After including all of the networks you need to use, you possibly can change the scale of the sharing buttons utilizing the ‘Dimension’ dropdown.
Larger social sharing buttons will stand out extra, though it might distract from the web page’s different content material together with the Add To Cart name to motion.
Present Buyer Testimonials and Enterprise Evaluations
WooCommerce lets prospects evaluate your particular person merchandise, however you may additionally need to present buyer testimonials. These is perhaps quotes out of your greatest opinions, feedback about your wonderful customer support, or another content material that you just need to spotlight.
SeedProd’s Testimonials block allows you to create rotating testimonials, which is a good way to point out a number of data in a small quantity of area.
For extra data, please see our information on how one can add rotating testimonials in WordPress.
Spotlight Not too long ago Seen Merchandise in WooCommerce
A ‘just lately considered’ part encourages prospects to revisit merchandise they just lately noticed, however didn’t add to their cart. This helps prospects examine merchandise and discover the merchandise that’s proper for them. It additionally provides them an opportunity to vary their thoughts, and purchase a product they just lately visited however didn’t add to their buying basket.
With that being stated, it’s possible you’ll need to add SeedProd’s Current Merchandise block to your design.
After including the block, you possibly can change the variety of columns utilizing the settings within the left-hand menu.
If you wish to present a number of completely different merchandise, then you possibly can add pagination by activating the ‘Pagination’ toggle.
When you do allow ‘Pagination,’ then you definately’ll get entry to some further settings.
To start out, you possibly can present the full variety of outcomes on the prime of the Current Merchandise block, by enabling the ‘Present Gadgets Depend’ toggle.
You may additionally need to allow the ‘Present Order By’ slider, as this permits guests to type via the latest merchandise.
As you possibly can see within the following picture, this provides a ‘Default Sorting’ dropdown to the world.
Present Your Most Well-liked WooCommerce Merchandise
It’s possible you’ll need to present the best-selling or top-rated merchandise in your product pages. Since these things are already performing properly, exhibiting them to extra individuals might be a straightforward option to get extra gross sales.
Another choice is to point out merchandise which can be presently on sale. This may encourage buyers to purchase these things now, with a view to get the perfect deal.
SeedProd has a number of blocks that may fetch these merchandise robotically. If you wish to present your largest sellers, then add the Finest Promoting Merchandise block to your design.
For extra data, please see our information on how one can show fashionable merchandise on WooCommerce product pages.
If you wish to present merchandise which have the very best star score, then you possibly can drag the Prime Rated Merchandise block onto the web page.
Lastly, there’s a Sale Merchandise block that exhibits all of the gadgets which can be presently on sale.
It doesn’t matter what block you add, click on to pick out it after which check out the settings within the left-hand menu. All of those settings are simple, so it’s price going via them to see what completely different results you possibly can create.
How one can Publish Your Customized WooCommerce Product Web page
While you’re proud of how the product web page seems, it’s time to avoid wasting your adjustments. Merely go forward and click on the dropdown arrow subsequent to ‘Save’ after which choose the ‘Publish’ possibility.
The customized product web page received’t seem in your on-line retailer till you activate your complete customized WooCommerce theme. This offers you the possibility to look via the opposite designs in your theme equipment, after which make any adjustments utilizing SeedProd’s drag-and-drop builder.
For instance, you’ll usually need to edit the header and footer templates to function your individual navigation menus, your retailer’s customized brand, and different content material. For inspiration, please see our guidelines of issues so as to add to the footer of your WordPress web site.
To edit another template, head over to SeedProd » Theme Builder. Then, hover over the template you need to customise.
You’ll be able to then click on on the ‘Edit Design’ hyperlink when it seems.
Now, merely change the design by including extra blocks after which customizing them utilizing the settings within the left-hand menu.
Simply preserve repeating these steps till you’re proud of how all of the templates are arrange.
While you’re able to make the customized WooCommerce theme stay, go to SeedProd » Theme Builder. You’ll be able to then click on on the ‘Allow SeedProd Theme’ toggle so it exhibits ‘Sure.’
Now, for those who go to your on-line retailer you’ll see the customized WooCommerce product web page stay.
We hoped this text helped you customise your WooCommerce product pages with out coding. It’s possible you’ll need to see our information on how one can enhance your weblog site visitors or our professional choose of the perfect WooCommerce plugins to your retailer.
When you appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You can too discover us on Twitter and Fb.
The publish How one can Customise WooCommerce Product Pages (No Code Technique) first appeared on WPBeginner.
