{"id":3967,"date":"2020-12-10T09:05:04","date_gmt":"2020-12-10T09:05:04","guid":{"rendered":"https:\/\/www.futurestatemedia.com\/?p=3967"},"modified":"2021-07-27T04:33:59","modified_gmt":"2021-07-27T04:33:59","slug":"woocommerce-product-page-customization-plugins-themes","status":"publish","type":"post","link":"https:\/\/www.futurestatemedia.com\/en\/woocommerce-product-page-customization-plugins-themes\/","title":{"rendered":"WooCommerce Product Page Customization Plugins &#038; Themes"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Customizing the WooCommerce Product Page design, in any theme is an essential step to conversion rate optimisation of your online store. At the end of the day the themes and the <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-create-a-site-wide-woo-product-page-template-with-divis-theme-builder\" target=\"_blank\" rel=\"noopener\">WooCommerce specific templates<\/a> they create within the themes are generic, designed for highest levels of compatibility and are typically uninspiring.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Editing the default WooCommerce product page layout is top of the list in terms of conversion rate optimisation of your WooCommerce site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So you&#8217;re left with the question&#8230;<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_To_Customize_The_Default_WooCommerce_Product_Page\"><\/span>How To Customize The Default WooCommerce Product Page<span class=\"ez-toc-section-end\"><\/span><\/h2><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a835b667433d\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a835b667433d\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.futurestatemedia.com\/en\/woocommerce-product-page-customization-plugins-themes\/#How_To_Customize_The_Default_WooCommerce_Product_Page\" >How To Customize The Default WooCommerce Product Page<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.futurestatemedia.com\/en\/woocommerce-product-page-customization-plugins-themes\/#How_to_create_custom_single_product_page_in_WooCommerce\" >How to create custom single product page in WooCommerce?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.futurestatemedia.com\/en\/woocommerce-product-page-customization-plugins-themes\/#Using_a_Page_Builder_Plugin_to_Customize_the_WooCommerce_Product_Page_Layout\" >Using a Page Builder Plugin to Customize the WooCommerce Product Page Layout<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.futurestatemedia.com\/en\/woocommerce-product-page-customization-plugins-themes\/#Using_Divi_Page_Builder_Plugin_to_Customize_WooCommerce_Product_Page_Designs\" >Using Divi Page Builder Plugin to Customize WooCommerce Product Page Designs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.futurestatemedia.com\/en\/woocommerce-product-page-customization-plugins-themes\/#Using_Elementor_Page_Builder_Plugin_to_Customize_WooCommerce_Product_Pages\" >Using Elementor Page Builder Plugin to Customize WooCommerce Product Pages<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.futurestatemedia.com\/en\/woocommerce-product-page-customization-plugins-themes\/#Using_Gutenberg_Editor_to_Customize_Product_Pages_%E2%80%93_WooCommerce_Product_Page_Layout_Plugin\" >Using Gutenberg Editor to Customize Product Pages &#8211; WooCommerce Product Page Layout Plugin<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.futurestatemedia.com\/en\/woocommerce-product-page-customization-plugins-themes\/#What_about_making_minor_WooCommerce_Product_Page_Edits\" >What about making minor WooCommerce Product Page Edits?<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.futurestatemedia.com\/en\/woocommerce-product-page-customization-plugins-themes\/#You_Searched_for\" >You Searched for:<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\n\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_create_custom_single_product_page_in_WooCommerce\"><\/span>How to create custom single product page in WooCommerce?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Customizing the WooCommerce Product Page with a plugin that enables you to build an entirely new looking page (or a page with just some essential design tweaks!) is a great idea &#8211; regardless of what theme you&#8217;re using.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Of course, with an advanced theme like Divi from elegant themes you have the ability to create an entirely new product page template WITHOUT needing to write a single piece of code. You just head over to the Theme Builder from inside the WordPress dashboard and start creating an entirely new product page template (you can even be selective about which product pages use the template and which don&#8217;t). The flexibility is awesome, especially the ability to create several product page templates and use different designs for different styles of product in your WooCommerce catalogue.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Anyway, enough gushing over Divi (it is awesome though).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Rule number 1 in all of this &#8220;Product Page Customization&#8221; talk is that you DON&#8217;T need to hire a developer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Yes a developer could develop you a whole new PHP product page template and edit some <a href=\"https:\/\/www.w3schools.com\/css\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS<\/a>. This then needs to be maintained and updated as WooCommerce and WordPress update their code &#8211; so this isn&#8217;t a &#8220;one hit&#8221; activity. This is why using the Theme Product Page template for WooCommerce is so easy &#8211; the theme providers are left with the job of updating the page templates every time there&#8217;s a core update to WooCommerce or WordPress. You may have seen the message:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>Your theme contains outdated copies of some WooCommerce template files<\/em><\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">If you see this message, and you&#8217;ve had a developer &#8220;customize&#8221; your product page template &#8211; this is now YOUR responsibility to fix &#8211; and this will happen several times a year.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There is a better way to customize the WooCommerce single product template&#8230;<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_a_Page_Builder_Plugin_to_Customize_the_WooCommerce_Product_Page_Layout\"><\/span>Using a Page Builder Plugin to Customize the WooCommerce Product Page Layout<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;ve read any of my other articles, you&#8217;ll know by now our recommended page builder is Divi. Divi Builder can be used as a standalone plugin with ANY theme &#8211; or you can use the Divi theme which has the Divi Builder plugin built in and extract the full benefits of Divi.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_Divi_Page_Builder_Plugin_to_Customize_WooCommerce_Product_Page_Designs\"><\/span>Using Divi Page Builder Plugin to Customize WooCommerce Product Page Designs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">There are two routes to Product Page Customization in WooCommerce using Divi:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Customize each product page &#8211; page by page using the page builder (not writing a single line of code!) all drag and drop<\/li><li>Create a &#8220;Product Page Template&#8221; in the Theme Builder which you can them apply to each product page, replacing the default WooCommerce product page template provided by your theme. (Again, not writing a single line of code!) all drag and drop design<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">We use both approaches interchangeably<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s fair to say, with Divi&#8217;s ability to also &#8220;clone an existing page&#8221; or &#8220;use an existing page as a template&#8221; means that you can quickly customize your entire product catalog of product pages using Divi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For longevity and future proofing &#8211; using the Theme Builder makes a lot of sense. Essentially if you make a single edit to the Theme Builder Product Page Template &#8211; that edit gets rolled out in every page that uses THAT template in one fell swoop.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That&#8217;s just awesome &#8211; and takes ZERO code!<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_Elementor_Page_Builder_Plugin_to_Customize_WooCommerce_Product_Pages\"><\/span>Using Elementor Page Builder Plugin to Customize WooCommerce Product Pages<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">We like Elementor, it&#8217;s no Divi! But as page builders go, we&#8217;re on board with this WordPress page builder software.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Elementor hasn&#8217;t got a &#8220;theme&#8221; so to speak &#8211; like Divi which is both a WooCommerce theme and a Page Builder.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Elementor is designed for good compatibility with well built WordPress and WooCommerce themes &#8211; but fundamentally because the builder isn&#8217;t tied into a theme you don&#8217;t have as much deep integration between theme and page builder. This makes sense. They&#8217;re the swiss army knife of page builders, handy in a lot of situations.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Of course you can cut down a tree with a Swiss Army knife (a skinny one) but Divi is the equivalent of a Chain Saw for the same job in comparison.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can build yourself a new WooCommerce product page design with Elementor from the ground up.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To get access to the WooCommerce modules within Elementor that you&#8217;ll need to build a decent replacement product page, you&#8217;ll need Elementor Pro &#8211; but it&#8217;s a low cost builder so not really that big a deal.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Pro Version is very much like the free version of Elementor &#8211; you basically get access to a lot more modules for designing pages with dynamic content &#8211; so essentially the same page design can be &#8220;copied and pasted&#8221; from one product page onto another and the content, such as the product price or product title that&#8217;s applicable to THAT product get pulled through into the page design on the front end.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_Gutenberg_Editor_to_Customize_Product_Pages_%E2%80%93_WooCommerce_Product_Page_Layout_Plugin\"><\/span>Using Gutenberg Editor to Customize Product Pages &#8211; WooCommerce Product Page Layout Plugin<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Gutenberg is NOT a page builder.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It may be one day &#8211; but right now, it&#8217;s an advanced post editor at best.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By default you CANNOT use the Gutenberg editor on Product Pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So why am I mentioning it?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Well, we looked at whether using Gutenberg to customize the WooCommerce Product Page design was a viable option &#8211; and we looked at a WooCommerce product page layout plugin from PootlePress that enables Gutenberg editor on Product Pages so you can at least try this approach.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Check out the detailed article here &#8211; explaining how to <a href=\"https:\/\/www.futurestatemedia.com\/en\/customising-woocommerce-product-page-with-gutenberg-editor\/\">customize the WooCommerce Product Page with Gutenberg Editor.<\/a><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_about_making_minor_WooCommerce_Product_Page_Edits\"><\/span>What about making minor WooCommerce Product Page Edits?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You might just be looking at making minor edits to the Default WooCommerce Product Page layout &#8211; and we&#8217;ve covered some very specific edits you can make in a few other articles such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.futurestatemedia.com\/en\/remove-additional-information-tab-woocommerce\/\">How to Remove Additional Information Tab on the WooCommerce Product Page<\/a><\/li><li><a href=\"https:\/\/www.futurestatemedia.com\/en\/woocommerce-hide-category-sku-on-product-page\/\">How to Hide WooCommerce Category &amp; SKU on Product Page<\/a><\/li><li><a href=\"https:\/\/www.futurestatemedia.com\/en\/how-to-remove-woocommerce-breadcrumbs-from-woo-product-page\/\">How To Remove WooCommerce Breadcrumbs From WooCommerce Product Page<\/a><\/li><li><a href=\"https:\/\/www.futurestatemedia.com\/en\/remove-related-products-in-woocommerce\/\">Disable &amp; Remove Related Products on WooCommerce Product Page<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"You_Searched_for\"><\/span>You Searched for:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">woocommerce product page plugin<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">avada woocommerce product page<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">elementor woocommerce product page<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">extra theme woocommerce product page<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">beaver builder woocommerce product page<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">how to create custom single product page in woocommerce<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span class=\"\">woocommerce product page customization plugin<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span class=\"\">woocommerce single product page layout plugin<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span class=\"\">woocommerce single product page plugin<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span class=\"\">woocommerce custom product page plugin<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span class=\"\">woocommerce single product page customizer<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><span class=\"\">woocommerce single product page builder<\/span><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">woocommerce single product page plugin<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">woocommerce single product template<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">woocommerce product description<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">woocommerce page templates<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">woocommerce page template<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">woocommerce additional information<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">woocommerce tabs<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">woocommerce product short description<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">woocommerce custom product builder<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">woocommerce product builder<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">woocommerce get product description<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">woocommerce single product page customizer<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">product page woocommerce<\/p>","protected":false},"excerpt":{"rendered":"<p>Customizing the WooCommerce Product Page design, in any theme is an essential step to conversion rate optimisation of your online store. At the end of the day the themes and the WooCommerce specific templates they create within the themes are generic, designed for highest levels of compatibility and are typically uninspiring. Editing the default WooCommerce&hellip; <a class=\"more-link\" href=\"https:\/\/www.futurestatemedia.com\/en\/woocommerce-product-page-customization-plugins-themes\/\">Continue reading <span class=\"screen-reader-text\">WooCommerce Product Page Customization Plugins &#038; Themes<\/span><\/a><\/p>","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[20,30],"tags":[],"class_list":["post-3967","post","type-post","status-publish","format-standard","hentry","category-website-design","category-ecommerce-stores","entry"],"_links":{"self":[{"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/posts\/3967","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/comments?post=3967"}],"version-history":[{"count":0,"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/posts\/3967\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/media?parent=3967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/categories?post=3967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.futurestatemedia.com\/en\/wp-json\/wp\/v2\/tags?post=3967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}