{"id":1181,"date":"2022-04-19T16:03:33","date_gmt":"2022-04-19T16:03:33","guid":{"rendered":"https:\/\/www.candidthemes.com\/blog\/?p=1181"},"modified":"2022-04-19T16:04:22","modified_gmt":"2022-04-19T16:04:22","slug":"woocommerce-custom-product-layout-using-productx","status":"publish","type":"post","link":"https:\/\/www.candidthemes.com\/blog\/woocommerce-custom-product-layout-using-productx\/","title":{"rendered":"How to Create WooCommerce Shop Page Layouts with ProductX?"},"content":{"rendered":"\n<p>Do you want to know how to create a <strong>WooCommerce custom product layout<\/strong> using the ProductX plugin? If yes, then you\u2019ve come to the right place.<\/p>\n\n\n\n<p>These days, one of the most critical needs of WooCommerce websites is to easily create and customize the product page layouts. So that you can display your products in a visually appealing way. Consequently, this grabs the attention of your customers to explore your products.<\/p>\n\n\n\n<p>So, in this post, we\u2019ll show you the detailed steps to create a WooCommerce custom product layout for your WordPress WooCommerce website.<\/p>\n\n\n\n<p>Let\u2019s dive in!<\/p>\n\n\n\n\n\n<h2>What is ProductX Plugin?<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.wpxpo.com\/productx\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">ProductX<\/a> is a Gutenberg product block plugin that provides additional product blocks for sophisticated WooCommerce stores. This plugin enhances the aesthetics of your WooCommerce product pages and ultimately your entire website.&nbsp;<\/p>\n\n\n\n<p>It comes with a variety of product blocks for your WooCommerce product layouts. Such as product listing, slider, category listing, carousel, and so on.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.wpxpo.com\/productx\/\" target=\"_blank\" rel=\"nofollow noopener\"><img loading=\"lazy\" width=\"800\" height=\"461\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/home-page.png\" alt=\"ProductX Plugin\" class=\"wp-image-1182\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/home-page.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/home-page-300x173.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/home-page-768x443.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><figcaption>ProductX Plugin<\/figcaption><\/figure>\n\n\n\n<p>Also, it offers a ton of cool features including a quick view, product comparison, image flipping, wishlist, and many more. You can also show your latest products, best-selling products, on-sale products, featured products, category products, and so on.&nbsp;<\/p>\n\n\n\n<p>Moreover, you\u2019ve complete control over how you create your custom product layout. You can arrange your products in either elegant grids or a list. Also, if you don\u2019t like the plain layout, then you can consider using product sliders. That\u2019s something you can do by simply using the blocks.&nbsp;<\/p>\n\n\n\n<p>Further, it includes ready-to-use pre-made starter templates and blocks. This allows you to quickly create a new product page without having to start from scratch. Or else, you can always start from the ground up and design your own product layout. That you can further save it for later use.&nbsp;<\/p>\n\n\n\n<p>To be familiar with this plugin, let\u2019s take a closer look at the features:<\/p>\n\n\n\n<h3>Key Features of ProductX:<\/h3>\n\n\n\n<ul><li>It comes with an advanced query builder that allows you to display your products in a custom query.&nbsp;<\/li><li>You can use several criteria to display products, such as category, tag, order, exclusion, offset, and so on.&nbsp;<\/li><li>There are a number of grid types and blocks to choose from, as well as lots of customization options for applying your design in the grid blocks.&nbsp;<\/li><li>Use the Ajax filter to quickly view content because it shows multiple products at a time.<\/li><li>The pagination and &#8220;load more&#8221; features of post lists and post grids make it simple to navigate products.<\/li><li>Enable the sales status features that inform customers about the current status of your products.<\/li><li>Allows you to see the current stock status of your products in a grid format.<\/li><\/ul>\n\n\n\n<h3>Pricing:&nbsp;<\/h3>\n\n\n\n<p>ProductX is a freemium plugin. Therefore, you can download the <strong>free <\/strong>version of this plugin directly to your dashboard from the WordPress.org directory. Or, from its <a href=\"https:\/\/www.wpxpo.com\/productx\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">official site<\/a> as well. Also, you can install the plugin right from your WordPress dashboard.<\/p>\n\n\n\n<p>There is also an option to upgrade to its <strong>premium <\/strong>version for additional features where the pricing plans are:<\/p>\n\n\n\n<ul><li><strong>1 Site License Plan:<\/strong> $49\/year. Includes 1 domain license, 1 year of support and updates, and all pro features.<\/li><li><strong>5 Sites License Plan:<\/strong> $79\/year. Includes 5 domain licenses and all features of the 1 Site License Plan.<\/li><li><strong>Unlimited Sites License Plan:<\/strong> $99\/year. Includes unlimited license and all features of the 5 Site License Plan.<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2>Why Would You Want to Create WooCommerce Shop Page Layouts?&nbsp;<\/h2>\n\n\n\n<p>First of all, shop pages are the most significant aspects of your <a href=\"https:\/\/www.candidthemes.com\/blog\/best-ecommerce-platforms\/\">eCommerce<\/a> store. It not only informs your customers about your products but tempts them to buy from you.&nbsp;<\/p>\n\n\n\n<p>A flawless product page provides a plethora of advantages to your store. Therefore, you must be cautious while creating and handling the product page.&nbsp;<\/p>\n\n\n\n<p>So, before getting into the steps to create a WooCommerce custom product layout, let\u2019s discuss the reasons for it.&nbsp;<\/p>\n\n\n\n<ul><li><strong>Attract Customer:<\/strong> Creating a compelling product page makes customers pay close attention to price, description ratings, and reviews of a product. They rely on that information before purchasing. Hence, a stunning product page attracts customers.<\/li><li><strong>Build Your Brand:<\/strong> Undoubtedly, the shop page generates more sales and is the window to your WooCommerce store\u2019s brand value. The way you display products, how it\u2019s the best in the market, etc. Thus, these factors help to strengthen the brand value of your store.<\/li><li><strong>SEO Advantages:<\/strong> WooCommerce site also requires adequate traffic to <a href=\"https:\/\/www.candidthemes.com\/blog\/make-money-with-wordpress-blogging\/\">generate money<\/a>. Thus, the more visitors, the more chances to sell your products. For that, the product pages bring in more customers, which helps with your <a href=\"https:\/\/www.candidthemes.com\/blog\/make-website-seo-friendly\/\">SEO<\/a> and improves rankings.&nbsp;<\/li><\/ul>\n\n\n\n<p>Further, we have already discussed the features of the ProductX plugin. So, let us move forward into the steps to create a WooCommerce custom product layout.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2>How to Create WooCommerce Shop Page Layouts with ProductX?<\/h2>\n\n\n\n<p>You can create a WooCommerce custom product layout with really simple steps. So, let us give you the overview of the steps before moving on to our detailed tutorial session:<\/p>\n\n\n\n<ul><li><strong>Step 1:<\/strong> Install and Activate the ProductX Plugin<\/li><li><strong>Step 2:<\/strong> Creating WooCommerce Shop Page with ProductX<\/li><li><strong>Step 3:<\/strong> Customizing the Shop Page using ProductX Blocks<\/li><li><strong>Step 4:<\/strong> Preview the Shop Page<\/li><\/ul>\n\n\n\n<p>Now, come along with us on this ride.<\/p>\n\n\n\n<h3>Step 1: Install and Activate the ProductX Plugin<\/h3>\n\n\n\n<p>Just like any other WordPress plugins, you can get started with ProductX by simply installing it on WordPress. The installation process is way more simple.&nbsp;<\/p>\n\n\n\n<p>To let you know, you must have installed the free version of ProductX to use its premium version. So, at first, we\u2019ll show you how to install the free version, then we\u2019ll move to the premium version.<\/p>\n\n\n\n<h4>1. Install and Activate the Free Version of the ProductX Plugin<\/h4>\n\n\n\n<p>First, log in to your admin dashboard and navigate the <strong>Plugins <\/strong>and click on<strong> Add New<\/strong> option.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"507\" height=\"246\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/add-new.png\" alt=\"Adding New Plugin\" class=\"wp-image-1183\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/add-new.png 507w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/add-new-300x146.png 300w\" sizes=\"(max-width: 507px) 100vw, 507px\" \/><figcaption>Adding New Plugin<\/figcaption><\/figure>\n\n\n\n<p>Now, you\u2019ll be redirected to the plugins page where you can see a list of plugins, recommended by WordPress. There, search for <strong>ProductX<\/strong> in the search bar.<\/p>\n\n\n\n<p>Once you see the ProdutX plugin, all you need to do is click on the <strong>Install Now<\/strong> button next to it.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"449\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/install.png\" alt=\"Installing ProductX Plugin\" class=\"wp-image-1184\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/install.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/install-300x168.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/install-768x431.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Installing ProductX Plugin<\/figcaption><\/figure>\n\n\n\n<p>After that, make sure to click on the <strong>Activate <\/strong>button as well.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"448\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/activate.png\" alt=\"Activating ProductX Plugin to Create WooCommerce Custom Product Layout\" class=\"wp-image-1185\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/activate.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/activate-300x168.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/activate-768x430.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Activating ProductX Plugin to Create WooCommerce Custom Product Layout<\/figcaption><\/figure>\n\n\n\n<p>Hence, you\u2019ve successfully installed the free version of the ProductX plugin.<\/p>\n\n\n\n<h4>2. Configure the ProductX Plugin<\/h4>\n\n\n\n<p>Here, you can configure some of the settings. There are some <strong>General Settings<\/strong> and other add-on settings like compare, flip image, and so on.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"508\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/settings.png\" alt=\"General Settings to Configure\" class=\"wp-image-1186\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/settings.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/settings-300x191.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/settings-768x488.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>General Settings to Configure<\/figcaption><\/figure>\n\n\n\n<p>However, you can change these elements according to your requirements. Finally after making any changes, just click on the<strong> Save Changes<\/strong> button to save them.<\/p>\n\n\n\n<p>Further, the ProductX plugin is a WooCommerce extension plugin. That is, it extends the functionality of WooCommerce by providing various required blocks. To use the ProductX plugin, make sure you have the <a href=\"https:\/\/www.candidthemes.com\/blog\/best-woocommerce-plugins-extensions\/\">WooCommerce plugins<\/a> installed beforehand.&nbsp;<\/p>\n\n\n\n<p>You might also receive a notification on your dashboard if you haven\u2019t installed it previously. To do so, simply select the &#8216;Install WooCommerce&#8217; option. And, activate and set up your WooCommerce store as well.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"395\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/install-woocommerce.png\" alt=\"Install WooCommerce Beforehand to Use ProductX Plugin\" class=\"wp-image-1187\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/install-woocommerce.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/install-woocommerce-300x148.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/install-woocommerce-768x379.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Installing WooCommerce Beforehand to Use ProductX Plugin<\/figcaption><\/figure>\n\n\n\n<h4>3. Purchase Pro Version of ProductX<\/h4>\n\n\n\n<p>For the pro version, you\u2019ll need to purchase the premium ProductX which is available on the <a href=\"https:\/\/www.wpxpo.com\/productx\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WPXPO\u2019s official website<\/a>.<\/p>\n\n\n\n<p>Then, just click on the <strong>Buy Now<\/strong> button from the navigation bar.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"461\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/buy-now.png\" alt=\"Purchasing the Premium Version of ProductX \" class=\"wp-image-1188\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/buy-now.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/buy-now-300x173.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/buy-now-768x443.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Purchasing the Premium Version of ProductX<\/figcaption><\/figure>\n\n\n\n<p>After that, you can see different <a href=\"https:\/\/www.wpxpo.com\/productx\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">pricing packages<\/a> available. Simply, select the one that suits your need and click on the <strong>Get Started<\/strong> button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.wpxpo.com\/productx\/pricing\/\" target=\"_blank\" rel=\"nofollow noopener\"><img loading=\"lazy\" width=\"800\" height=\"463\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/pricing-page.png\" alt=\"Pricing Plans of ProductX\" class=\"wp-image-1189\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/pricing-page.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/pricing-page-300x174.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/pricing-page-768x444.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><figcaption>Pricing Plans of ProductX<\/figcaption><\/figure>\n\n\n\n<p>Following that, it\u2019ll redirect you to a new checkout page. There, you\u2019ll need to fill in all the details and create an account. You can also use the coupon code if you\u2019ve any for the discount purpose.&nbsp;<\/p>\n\n\n\n<p>Once you\u2019ve filled in all the details, click the <strong>Purchase <\/strong>button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"524\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/checkout-page.png\" alt=\"Fill in the Details to Checkout\" class=\"wp-image-1190\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/checkout-page.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/checkout-page-300x197.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/checkout-page-768x503.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Fill in the Details to Checkout<\/figcaption><\/figure>\n\n\n\n<p>After successfully purchasing the ProductX pro, the download link and license key are sent in your email. From there, you can download the ZIP file of premium ProductX and hold the license key for later use.<\/p>\n\n\n\n<h4>4. Upload, Install and Activate the ProductX Pro Plugin<\/h4>\n\n\n\n<p>The ProductX pro installation process differs slightly from that of the free version. Because premium plugins aren\u2019t accessible from the dashboard as they are not available through the WordPress plugin directory.&nbsp;<\/p>\n\n\n\n<p>Previously, we downloaded the plugin from WPXPO&#8217;s official website. The first few steps are similar to the earlier one.&nbsp;<\/p>\n\n\n\n<p>To begin, log in to your WordPress dashboard. After that, navigate to the <strong>Plugins <\/strong>menu and click on the <strong>Add New<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Next, click on the <strong>Upload Plugin<\/strong> button and then <strong>Choose File<\/strong>. After that, upload the downloaded ZIP ProductX file to this place and click on the<strong> Install Now<\/strong> button next to it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"364\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/install-pro.png\" alt=\"Installing the ProductX Pro \" class=\"wp-image-1191\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/install-pro.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/install-pro-300x137.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/install-pro-768x349.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Installing the ProductX Pro<\/figcaption><\/figure>\n\n\n\n<p>Following that, you can see the <strong>Activate <\/strong>button. Just click on it!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"241\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/activate-pro.png\" alt=\"Activating ProductX Pro to Access Premium Blocks and Product Layouts\" class=\"wp-image-1192\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/activate-pro.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/activate-pro-300x90.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/activate-pro-768x231.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Activating ProductX Pro to Access Premium Blocks and Product Layouts<\/figcaption><\/figure>\n\n\n\n<p>Afterward, you\u2019ll be directed to the license key page. There, you need to enter the license key you\u2019ve previously received in your mail.<\/p>\n\n\n\n<p>Now, enter the license key in the License key box and click on the <strong>Check and Save License<\/strong> button.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"341\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/enter-license.png\" alt=\"Entering the License Key\" class=\"wp-image-1193\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/enter-license.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/enter-license-300x128.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/enter-license-768x327.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Entering the License Key<\/figcaption><\/figure>\n\n\n\n<p>Finally, you\u2019ve successfully installed and activated the ProductX pro.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"354\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/license-activated.png\" alt=\"License is Activated\" class=\"wp-image-1194\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/license-activated.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/license-activated-300x133.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/license-activated-768x340.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>License is Activated<\/figcaption><\/figure>\n\n\n\n<p>Also, don\u2019t forget to configure your settings for your premium version in the same way you did for the free version.<\/p>\n\n\n\n<h3>Step 2: Creating WooCommerce Shop Page with ProductX<\/h3>\n\n\n\n<p>Now, you can use WooCommerce Shop Page with the ProductX plugin to create your custom WooCommerce product layout.<\/p>\n\n\n\n<p>There are 3 approaches to this. The first method is to use the block design to build it from scratch. Whereas the second method is with the help of ProductX\u2019s starter pack and the other way is to use the <strong><a href=\"https:\/\/www.wpxpo.com\/productx\/addons\/woocommerce-builder\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Builder Addon<\/a><\/strong> of ProductX.<\/p>\n\n\n\n<p>Note that, you must first create and publish your products in various categories for your product page. However, there shouldn&#8217;t be a problem if you currently have a WooCommerce store up and running. Simply follow along as we guide you through the process.<\/p>\n\n\n\n<p>Not to mention, you can <a href=\"https:\/\/woocommerce.com\/document\/product-csv-import-suite-importing-products\/?quid=67f12d6eebeef41a29afd4eb2ee59815\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">import the demo products from WooCommerce<\/a> to check out the plugin for the upcoming demonstration.<\/p>\n\n\n\n<p>Let\u2019s take a closer look at the methods!&nbsp;<\/p>\n\n\n\n<h4>Method 1: Create WooCommerce Shop Page from Scratch<\/h4>\n\n\n\n<p>Now, create a new WooCommerce custom product layout for your online store as soon as possible. To do so, go to the dashboard and click on the <strong>Pages&gt;Add New<\/strong> option.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"535\" height=\"287\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/add-new-page.png\" alt=\"Adding New Page\" class=\"wp-image-1195\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/add-new-page.png 535w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/add-new-page-300x161.png 300w\" sizes=\"(max-width: 535px) 100vw, 535px\" \/><figcaption>Adding New Page<\/figcaption><\/figure>\n\n\n\n<p>This will take you to the native Gutenberg editor in WordPress. Now, you need to \u201c<strong>Add Title<\/strong>\u201d to the page. For example, \u201c<em>Shop Page<\/em>\u201d. Then you can add other blocks as needed.&nbsp;<\/p>\n\n\n\n<p>Now, click the <strong>+ <\/strong>icon to access all of its product blocks. Following that, you\u2019ll have access to numerous blocks of the ProductX plugin for the WooCommerce store.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"383\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/plus-icon.png\" alt=\"Add Custom Product Page and Access the ProductX's Blocks\" class=\"wp-image-1196\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/plus-icon.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/plus-icon-300x144.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/plus-icon-768x368.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Add Custom Product Page and Access the ProductX&#8217;s Blocks<\/figcaption><\/figure>\n\n\n\n<p>All you\u2019ve to do is select one of the available block Grid options. We have chosen the <strong>ProductGrid#3<\/strong> option in this case. Now, on the right, you can view the selected product grid.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"454\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/productgrid-block.png\" alt=\"Inserting the ProductGrid Block to Create Custom Product Layout\" class=\"wp-image-1197\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/productgrid-block.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/productgrid-block-300x170.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/productgrid-block-768x436.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Inserting the ProductGrid Block to Create Custom Product Layout<\/figcaption><\/figure>\n\n\n\n<p>In addition, you can now change the block\u2019s other settings. To do so, first, choose the block you want to customize. Now, go to the upper right corner and click the <strong>Settings <\/strong>icon.&nbsp;<\/p>\n\n\n\n<p>There are three customization options: <strong>Design<\/strong>, <strong>Settings<\/strong>, and <strong>Advanced<\/strong>. We can then twist and change every element of your product page to your choice.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"438\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/customization-options.png\" alt=\"Customization Options\" class=\"wp-image-1198\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/customization-options.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/customization-options-300x164.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/customization-options-768x420.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Customization Options<\/figcaption><\/figure>\n\n\n\n<p>We\u2019ll go over the customization options in more detail in the upcoming steps.&nbsp;<\/p>\n\n\n\n<h4>Method 2: Import the Starter Pack Template to Create WooCommerce Shop Page<\/h4>\n\n\n\n<p>As previously stated, ProductX offers a variety of starter pack templates for a new shop page layout. You won\u2019t have to start from scratch this way, and you\u2019ll save a lot of time.&nbsp;<\/p>\n\n\n\n<p>Just like before, create a new WooCommerce custom product layout by exploring the <strong>Pages&gt;Add New<\/strong>.<\/p>\n\n\n\n<p>Simply, give a suitable title. And, at the top, you can find the <strong>Block Library<\/strong> option. Select it by clicking on it.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"214\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/block-library.png\" alt=\"Access the Block Library to Import Layout\" class=\"wp-image-1199\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/block-library.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/block-library-300x80.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/block-library-768x205.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Access the Block Library to Import Layout<\/figcaption><\/figure>\n\n\n\n<p>Then, there opens up stunning starter packs and ready-made block designs. This is further divided into two categories: free and premium.&nbsp;<\/p>\n\n\n\n<p>For the time being, we\u2019ll solely focus on the <strong>Starter Packs <\/strong>section. You\u2019ve complete control over which one you use for your shop page.&nbsp;<\/p>\n\n\n\n<p>Just select the<strong> Live Preview<\/strong> button of the chosen template. Then, you can click on the <strong>Import <\/strong>button to import the template.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"396\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/templates-and-import.png\" alt=\"Live Preview Templates and Import It\" class=\"wp-image-1200\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/templates-and-import.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/templates-and-import-300x149.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/templates-and-import-768x380.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Live Preview Templates and Import It<\/figcaption><\/figure>\n\n\n\n<p>After that, your selected template will appear in the editor within a few moments.<\/p>\n\n\n\n<p>Now, you can quickly make all of the necessary changes to the imported layout from the block editor on the left side. After that, select the <strong>Preview <\/strong>button to have a better sense of how your shop page will appear.<\/p>\n\n\n\n<p>That concludes our discussion. By selecting the <strong>Save draft<\/strong> button, you can now save your work up to this point.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"149\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/save-preview-publish.png\" alt=\"Customize Templates, Save Draft, Preview and Publish the Layout\" class=\"wp-image-1201\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/save-preview-publish.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/save-preview-publish-300x56.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/save-preview-publish-768x143.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Customize Templates, Save Draft, Preview, and Publish the Layout<\/figcaption><\/figure>\n\n\n\n<p>Finally, to publish your shop page, click on the <strong>Publish <\/strong>button.<\/p>\n\n\n\n<h4>Method 3: Use Builder Addon to Create WooCommerce Shop Page<\/h4>\n\n\n\n<p>You can use the ProductX Page Builder Addon to generate single product pages or product archive pages based on your need. Also, after creating a single product page template, you can use it across several pages, and even define conditions for use.&nbsp;<\/p>\n\n\n\n<p>Now, let\u2019s jump into the steps to create a single product page with the Builder addon.<\/p>\n\n\n\n<p>Bear in mind that the Builder addon feature is only available for the ProductX Pro users. So make sure to have a pro license. And, follow the steps we\u2019ve mentioned earlier to activate your pro version.&nbsp;<\/p>\n\n\n\n<p>At this moment, go to the WordPress dashboard, and click on the <strong>ProductX&gt;Addons<\/strong>. Then, you\u2019ll find several addons from which you need to look for Builder Addon. Once you\u2019ve found the Builder addon, <strong>enable <\/strong>that addon.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"420\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/enable-builder.png\" alt=\"Enable Builder Addon\" class=\"wp-image-1222\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/enable-builder.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/enable-builder-300x158.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/enable-builder-768x403.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Enabling Builder Addon<\/figcaption><\/figure>\n\n\n\n<p>After that, you can see a <strong>Builder <\/strong>option under the <strong>ProductX <\/strong>menu. Now, click on the <strong>Builder <\/strong>menu and go to the <strong>Add New<\/strong> button to create a new template layout.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"440\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/add-new-builder.png\" alt=\"Add New Template Using Builder Menu\" class=\"wp-image-1223\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/add-new-builder.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/add-new-builder-300x165.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/add-new-builder-768x422.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Add New Template Using Builder Menu<\/figcaption><\/figure>\n\n\n\n<p>Then, you\u2019ll need to fill in the details of the <strong>Name of Your Template<\/strong> and <strong>Select Template Type<\/strong>. Currently, it offers 3 templates: single product, product archive, or shop. You can select any of them as per your need.&nbsp;<\/p>\n\n\n\n<p>Next, you must decide where you want to display your template. On the right side, you can see different options:<\/p>\n\n\n\n<ul><li>All Product Single Pages<\/li><li>Based on Specific Product<\/li><li>Based on Specific product_cart<\/li><li>Based on Specific product_tag<\/li><\/ul>\n\n\n\n<p>Also, these options may vary on the basis of the template type you\u2019ve selected.<\/p>\n\n\n\n<p>So here, we\u2019ll <strong>enable <\/strong>the <strong>All Product Single Pages<\/strong> option. After that, click on the <strong>Create Template<\/strong> button. Once you\u2019re done, you\u2019ll be prompted to the <strong>Save &amp; Edit Template<\/strong> button. So, simply click on it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"472\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/create-template.png\" alt=\"Create Template after Filling in the Details\" class=\"wp-image-1224\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/create-template.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/create-template-300x177.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/create-template-768x453.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Create Template after Filling in the Details<\/figcaption><\/figure>\n\n\n\n<p>Now, you\u2019ll be redirected to the page editor. Once you\u2019re on the page editor, click on the <strong>+ <\/strong>icon which is located on the left side. There, you need to scroll down and browse the <strong>Single Product<\/strong>. After that, you can find the 14 Single Product blocks.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"445\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/plus-icon-and-single-product.png\" alt=\"Exploring Single Product Blocks\" class=\"wp-image-1225\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/plus-icon-and-single-product.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/plus-icon-and-single-product-300x167.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/plus-icon-and-single-product-768x427.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Exploring Single Product Blocks<\/figcaption><\/figure>\n\n\n\n<p>Further, you can use the blocks for products like Title, Short Description, Stock, Price, Product Review, Add to Cart, etc.&nbsp;<\/p>\n\n\n\n<p>Along with that, you can customize the design for each block. And, the design of each block comes with Style and Advanced design elements. However, the options to customize each design elements differ according to the block selected.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"271\" height=\"550\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/design-elements.png\" alt=\"Design Elements for Customization \" class=\"wp-image-1226\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/design-elements.png 271w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/design-elements-148x300.png 148w\" sizes=\"(max-width: 271px) 100vw, 271px\" \/><figcaption>Design Elements for Customization<\/figcaption><\/figure>\n\n\n\n<p>So, this is how simply you can create your product layout using the Builder Addon.<\/p>\n\n\n\n<h3>Step 3: Customizing the Shop Page using ProductX Blocks<\/h3>\n\n\n\n<p>In this round, let\u2019s take a closer look at the customization options of the shop page we just created.&nbsp;<\/p>\n\n\n\n<p>For that, select a block you want to customize. And, on the left side, you\u2019ll see 3 different customization options: Design, Settings, and Advanced. We\u2019ll explore these options individually for you.<\/p>\n\n\n\n<h4>1. Design<\/h4>\n\n\n\n<p>In this section, you\u2019ll get 3 different elements to customize: Layout, Design, and Advanced.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"450\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/design-customization-option.png\" alt=\"Elements of Design Customization Option\" class=\"wp-image-1210\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/design-customization-option.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/design-customization-option-300x169.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/design-customization-option-768x432.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Elements of Design Customization Option<\/figcaption><\/figure>\n\n\n\n<ul><li><strong>Layout:<\/strong> It comes with several layouts for the block design that you can easily change for the selected block. Here, we\u2019ve selected the second layout as you can see in the editor section. Also, you can select anyone and see the changes to your product block.<\/li><li><strong>Design: <\/strong>This section includes a few of the block design options that you might want to import. All you need to do is hover on the design and click on the <strong>Import <\/strong>option. You can just explore them or leave them simply if you are fine with the current design.<\/li><li><strong>Advanced:<\/strong> This option is basically for tech-friendly users where you can add additional CSS for product design.&nbsp;<\/li><\/ul>\n\n\n\n<h4>2. Settings<\/h4>\n\n\n\n<p>This customization option comes with a huge number of elements that you can twist and tweak for your product block.&nbsp;<\/p>\n\n\n\n<p>Some of its common elements that you can customize are heading, title, meta, category, image, cart, sales, and more.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"443\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/settings-customization-option.png\" alt=\"Elements of Settings Customization Option\" class=\"wp-image-1211\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/settings-customization-option.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/settings-customization-option-300x166.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/settings-customization-option-768x425.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Elements of Settings Customization Option<\/figcaption><\/figure>\n\n\n\n<p>Besides that, let\u2019s look at a few crucial options:<\/p>\n\n\n\n<h5>General<\/h5>\n\n\n\n<p>It comes with the general settings of the product layout such as selecting the option for Product View and adjusting the Column, Column Grid Gap, and Row gap. Also, enable\/disable different elements of Content Layout like show cart, wish list, quick view, compare, sale, etc.&nbsp;<\/p>\n\n\n\n<h5>Query<\/h5>\n\n\n\n<p>It allows you to showcase your products based on specific parameters. Here, you can select options for Quick Query, Number of Post, Product Status, Category, Order By. Also, you can enable\/disable Exclude Out of Stock, and Include Product or Exclude Product.&nbsp;<\/p>\n\n\n\n<h5>Overlay Meta Elements<\/h5>\n\n\n\n<p>This field helps to improve the looks and appearance of your product blocks. Here, you can customize the color, background color, border, border radius, box-shadow, spacer, padding, and so on.<\/p>\n\n\n\n<h4>3. Advanced<\/h4>\n\n\n\n<p>This section comes with 4 different elements to customize: General, Responsive, Custom CSS, and Advanced.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"444\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/advanced-customization-option.png\" alt=\"Elements of Advanced Customization Option\" class=\"wp-image-1212\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/advanced-customization-option.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/advanced-customization-option-300x167.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/advanced-customization-option-768x426.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Elements of Advanced Customization Option<\/figcaption><\/figure>\n\n\n\n<ul><li><strong>General:<\/strong> You can enter ID, z-index, and customize the margin, and padding. Also, you can change the background, border, boxshadow, border radius, and so on.<\/li><li><strong>Responsive: <\/strong>Here,<strong> <\/strong>you can choose how to display the product blocks in different screen widths. Such as on desktop, tablet, and mobile devices.&nbsp;<\/li><li><strong>Custom CSS: <\/strong>Also<strong>, <\/strong>you can enter your own custom CSS in this text field.<\/li><li><strong>Advanced: <\/strong>This option lets add the additional CSS classes for your product block.&nbsp;<\/li><\/ul>\n\n\n\n<p>That\u2019s all there is to customize your product block.&nbsp;<\/p>\n\n\n\n<h3>Step 4: Preview the Shop Page<\/h3>\n\n\n\n<p>Lastly, we have attached a snapshot of the <strong>Shop Page <\/strong>that we created using the ProductX plugin.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"518\" src=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/preview-shop-page.png\" alt=\"Preview WooCommerce Custom Product Layout\" class=\"wp-image-1205\" srcset=\"https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/preview-shop-page.png 800w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/preview-shop-page-300x194.png 300w, https:\/\/www.candidthemes.com\/blog\/wp-content\/uploads\/2022\/04\/preview-shop-page-768x497.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><figcaption>Preview WooCommerce Custom Product Layout<\/figcaption><\/figure>\n\n\n\n<p>Isn&#8217;t it amazing how quickly your product layout is up and running?<\/p>\n\n\n\n<p>Therefore, you can swiftly comprehend and construct your product page by following these simple steps.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2>Conclusion<\/h2>\n\n\n\n<p>Hence, this is all about a tutorial session that helps to create your own awesome and beautiful product layout.<\/p>\n\n\n\n<p>We hope you found this article helpful in creating a <strong>WooCommerce custom product layout<\/strong> on your WordPress website. If you haven&#8217;t tried it yet, then you definitely should!&nbsp;<\/p>\n\n\n\n<p>With such simple steps, you can instantly understand and create your custom WooCommerce product layouts using the ProductX plugin.<\/p>\n\n\n\n<p>Do you need any help regarding this post? If yes, then feel free to drop your comments below. And, we\u2019ll guide you with easy steps.&nbsp;<\/p>\n\n\n\n<p>If you like this article, then don\u2019t forget to check our recent articles on the <a href=\"https:\/\/www.candidthemes.com\/blog\/best-wordpress-login-customizer-plugins\/\">best WordPress login customizer plugin you should try<\/a> &amp; <a href=\"https:\/\/www.candidthemes.com\/blog\/postx-review\/\">PostX review<\/a>.<\/p>\n\n\n\n<p>Also, follow us on <a href=\"https:\/\/www.facebook.com\/candidthemes\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Facebook<\/a> and <a href=\"https:\/\/twitter.com\/candidthemes\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Twitter<\/a> for similar types of content.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want to know how to create a WooCommerce custom product layout using the ProductX plugin? If yes, then you\u2019ve come to the right place. These days, one of the most critical needs of WooCommerce websites is to easily create and customize the product page layouts. So that you<\/p>\n","protected":false},"author":1,"featured_media":1217,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"_links":{"self":[{"href":"https:\/\/www.candidthemes.com\/blog\/wp-json\/wp\/v2\/posts\/1181"}],"collection":[{"href":"https:\/\/www.candidthemes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.candidthemes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.candidthemes.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.candidthemes.com\/blog\/wp-json\/wp\/v2\/comments?post=1181"}],"version-history":[{"count":11,"href":"https:\/\/www.candidthemes.com\/blog\/wp-json\/wp\/v2\/posts\/1181\/revisions"}],"predecessor-version":[{"id":1229,"href":"https:\/\/www.candidthemes.com\/blog\/wp-json\/wp\/v2\/posts\/1181\/revisions\/1229"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.candidthemes.com\/blog\/wp-json\/wp\/v2\/media\/1217"}],"wp:attachment":[{"href":"https:\/\/www.candidthemes.com\/blog\/wp-json\/wp\/v2\/media?parent=1181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.candidthemes.com\/blog\/wp-json\/wp\/v2\/categories?post=1181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.candidthemes.com\/blog\/wp-json\/wp\/v2\/tags?post=1181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}