![\"ProductX](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/productx-plugin.png\")
<\/figure>\n\n\n\nIt comes up with a variety of product blocks that allows you to create stunning shop pages without the coding required. Specifically, you can use it to build product grids, product lists, product sliders, product categories, etc. <\/p>\n\n\n\n
Note that, you\u2019ve complete freedom to create your shop pages in the way you like with ProductX. This plugin makes product listing too easy.<\/p>\n\n\n\n
Apart from that, it has WooCommerce-specific features like product comparison, quick view, wishlist, and product image flip. With ProductX, you can display new products, best-selling products, featured products, on-sale products, etc.<\/p>\n\n\n\n
To sum up, ProductX is an all-in-one solution that every store owners need to create a well-maintained and conversion-focused eCommerce store. <\/p>\n\n\n\n
Want to read a full review of the ProductX WooCommerce blocks plugin? If yes, then check out this blog<\/a>. <\/p>\n\n\n\n Here, we\u2019ll be showing you how to use ProductX to create WooCommerce shop layouts. So, follow along with us as we guide you into this.<\/p>\n\n\n\n First and foremost, let\u2019s see how we can install the free version of the ProductX. To install the free version<\/strong> of the ProductX plugin, you\u2019ve to log into your WordPress dashboard. Only from there, we\u2019ll be able to install this plugin.<\/p>\n\n\n\n Once you reach there, head into Plugins > Add New<\/strong>. With that, you\u2019ll be redirected to another page. Now, on the top right corner of the screen, you\u2019ll see a search box. There you\u2019ve to type \u2018ProductX\u2019<\/strong>. The moment it appears, you\u2019ve to click on the Install Now<\/strong> button to start the installation of the plugin. <\/p>\n\n\n\n After waiting for a few seconds, Activate<\/strong> button will pop up. You need to click on it to get the ProductX plugin activated on your site.<\/p>\n\n\n\n You need to buy the premium version in order to use it. So, let\u2019s check out all the steps needed to purchase ProductX Pro.<\/p>\n\n\n\n To purchase ProductX Pro, you must visit WPXPO\u2019s landing page<\/a>.<\/p>\n\n\n\n On the navigation menu, you\u2019ll see a Buy Now<\/strong> button. Click on it, and with that, you\u2019ll be redirected to the ProductX pricing page. <\/p>\n\n\n\n There you\u2019ll see 3 different pricing options, select the best plan for you and click on the Get Started<\/strong> button. <\/p>\n\n\n\n After that, the checkout page will open up. <\/p>\n\n\n\n Now, you\u2019ve to provide all the required information and create an account. You can also insert a discount code if you have any.<\/p>\n\n\n\n Once you fill up all the info, click on the Purchase<\/strong> button, which is at the bottom.<\/p>\n\n\n\n By following these steps, you can purchase the plugin and download the zip file on your local PC.<\/p>\n\n\n\n To install the ProductX Pro plugin on your website, you\u2019ve to upload the downloaded zip file. To do so, you\u2019ve to go to your WordPress dashboard. <\/p>\n\n\n\n From there, navigate to Plugins > Add New<\/strong>. Afterward, click on Upload Plugin<\/strong> and then Choose File<\/strong>. Now, you\u2019ve to select and upload the previously downloaded zip file. Lastly, you\u2019ve to click on the Install Now<\/strong> button. <\/p>\n\n\n\n And after that Activate<\/strong> the plugin on your site.<\/p>\n\n\n\n Not to mention, you\u2019ll see a license key page where you need to insert the license key and save it. That will activate your license key.<\/p>\n\n\n\n Note: ProductX is a plugin that extends the WooCommerce functionalities by providing essential blocks. Thereby, you must install the WooCommerce plugin. And only then you\u2019ll be able to use the ProductX plugin.<\/strong><\/p>\n\n\n\n Once you activate the plugin successfully, the ProductX<\/strong> menu will show up on your dashboard. Also, there are other sub-menus in this ProductX<\/strong> menu. <\/p>\n\n\n\n Right there you\u2019ll discover the Settings<\/strong> section, and inside there is the General Settings<\/strong> option. Now, from there, you can make the changes that you want on your site. <\/p>\n\n\n\n Lastly, don\u2019t forget to click the Save Changes <\/strong>button to save the changes if you\u2019ve made any. <\/p>\n\n\n\n In this section, we\u2019ll be demonstrating to you how to use ProductX to build a shop page layout. To do that, we\u2019ll be taking the help of the ProductX\u2019s WooCommerce Builder addon.<\/p>\n\n\n\n Note: ProductX WooCommerce Builder is a pro feature of the ProductX plugin. So, make sure you have the pro version of the ProductX to utilize the builder\u2019s features.<\/strong> <\/p>\n\n\n\n With the help of this addon, you can create a shop page layout effortlessly. <\/p>\n\n\n\n P.S. For your shop page layout, firstly, you have to create and publish your products in different categories. Thereafter, you\u2019re ready to follow the below-mentioned steps<\/em> precisely. <\/em><\/p>\n\n\n\n We\u2019ve imported WooCommerce demo products<\/a> for the upcoming demonstration.<\/p>\n\n\n\n Alright then, let\u2019s check out how to create a shop page layout in detail.<\/p>\n\n\n\n First and foremost, you\u2019ve to activate the Builder addon. For that, go to ProductX > Addons<\/strong> on your WordPress dashboard. <\/p>\n\n\n\n From there, turn \u2018On\u2019 the Builder addon<\/strong>. <\/p>\n\n\n\n With that, you\u2019ll see a \u2018Builder\u2019<\/strong> option inside the ProductX<\/strong> menu. Click on it. Now, for creating a new template, you must click on the Add New<\/strong> button. <\/p>\n\n\n\n Afterward, you\u2019ll see a page that tells you to fill in the key information of the template. <\/p>\n\n\n\n For instance, you\u2019ve to enter the name of your template and select the template type. Here, we\u2019ll provide the template name as \u2018Shop Page Layout Demo\u2019<\/strong>. <\/p>\n\n\n\n Likewise, on the Select Template Type<\/strong> field, you\u2019ll discover 3 options. These are Single Product<\/strong>, Product Archive<\/strong>, and Shop<\/strong>. Now, as per your necessity, you can choose one option among them.<\/p>\n\n\n\n In this article, we\u2019re focusing on the shop layout. So, we\u2019ll pick Shop<\/strong>. <\/p>\n\n\n\n Similarly, on the right-hand side, you\u2019ll see one more option, i.e. where you want your template to be displayed. <\/p>\n\n\n\n Based on the template you\u2019ve chosen you\u2019ll see different settings there. For example, if you\u2019ve chosen Single Product<\/strong>, then you\u2019ll see:<\/p>\n\n\n\n On the Product Archive<\/strong> template type, you\u2019ll get settings like: <\/p>\n\n\n\n Meanwhile, there are no settings available in the Shop<\/strong> Template type. So, we\u2019ll move forward by clicking on the Create Template<\/strong> button. <\/p>\n\n\n\n After waiting for a few seconds, Save & Edit Template<\/strong> button will show up, you\u2019ve to click on it. <\/p>\n\n\n\n With that, you\u2019ll be redirected to the Gutenberg Block Editor. Now, there are two methods to create the desired shop page layout of your own. The first method is to design it from the scratch with the help of the ready-made block designs.<\/p>\n\n\n\n And the other is with the use of the ProductX\u2019s starter pack. So, let\u2019s see both of these methods. <\/p>\n\n\n\n To display products in style, the ProductX plugin offers tons of Gutenberg<\/a> WooCommerce blocks. <\/p>\n\n\n\n These are:<\/p>\n\n\n\n To get access to these product blocks, you\u2019ve to click on the \u2018+\u2019<\/strong> icon on the WordPress Gutenberg editor. Following that, you\u2019ll discover all the WooCommerce blocks offered by the ProductX plugin.<\/p>\n\n\n\n So, all you have to do is select the type of WooCommerce block that you want on your shop page. Here, we\u2019ve picked the \u2018ProductGrid#1\u2019 <\/em>option. By clicking on your favorite block type, you\u2019ll see a preview of it on the right-hand side.<\/p>\n\n\n\n After choosing a block, you\u2019ll get options to change the block type, move the block up\/down, change alignment, and more.<\/p>\n\n\n\n Moreover, you can add a new block or remove the existing one, as per your needs.<\/p>\n\n\n\n Also, you can further customize the block in the way you like. For that, you must select the block and click on the Settings<\/strong> option on the right side of the navigation area. <\/p>\n\n\n\n Following that, you\u2019ll see a Block<\/strong> section. There are a few options and settings offered by ProductX for the purpose of customizing the product blocks.<\/p>\n\n\n\n Mainly, there are 3 customization options available; Design<\/strong>, Settings<\/strong>, and Advanced<\/strong>. These options allow you to customize every aspect of your shop page easily.<\/p>\n\n\n\n We\u2019ll dig deep into these customization options later on in the other section of the review. <\/p>\n\n\n\n ProductX\u2019s block library has a total of 6 pre-designed free and premium starter packs. Before choosing one for your shop page, you can have a live preview of each of them. <\/p>\n\n\n\n After that, you might have a clear idea about which template to import. Once the template is imported, you can customize it as per your will to make your WooCommerce store unique.<\/p>\n\n\n\n Moreover, it features 20+ ready-made block designs. This means you can insert only the needed sections for your shop page instead of the whole page.<\/p>\n\n\n\n There, you\u2019ll discover the Block Library<\/strong> option at the top right side of the menu bar, you need to click on it. In the library, you\u2019ll see amazing starter packs and ready-made block designs. <\/p>\n\n\n\n Each of these starter packs and ready-made block designs is arranged into free and premium options.<\/p>\n\n\n\n At this moment, we\u2019ll be discovering only the Starter Packs<\/strong> section. Now, choose a template that you found attractive for your shop page. To have a preview of the template, you must click on the Live Preview<\/strong> option. <\/p>\n\n\n\n Once you decide the one for your WooCommerce store, click on the Import<\/strong> button. <\/p>\n\n\n\n After waiting for a few seconds, the template will appear in the editor. You can save your work up to this moment by clicking the Save draft<\/strong> option. You can click on the Preview<\/strong> option to see how your shop page looks. <\/p>\n\n\n\n Lastly, you can publish your shop page by clicking the Publish<\/strong> button.<\/p>\n\n\n\n Note: By following the same process, you can import ready-made section blocks. The steps are the same for adding the templates and ready-made section blocks.<\/em><\/p>\n\n\n\n To get access to customization possibilities, you\u2019ve to click the block. On the top, you\u2019ll discover the name of the block style that you\u2019ve chosen. Below that, there are 3 different customization options. These are:<\/p>\n\n\n\n Design option has 3 different elements:<\/p>\n\n\n\n Here, you\u2019ll discover several settings for customizing each part of your product block. And these settings may vary according to the type of block you choose. Some of the common settings that you\u2019ll get here are Image, Title, Category, Filter, etc. <\/p>\n\n\n\n Besides that, let\u2019s get to know a few other important settings:<\/p>\n\n\n\n Based on the design you\u2019re using for your shop page, there are a few advanced settings available. And these are: <\/p>\n\n\n\n Lastly, you can see the image of the shop page that we\u2019ve created using the ProductX plugin. You\u2019ll be glad to know that it took not more than a few minutes, and it\u2019s ready to use. <\/p>\n\n\n\n That\u2019s it! By following the above-mentioned steps, you can effortlessly create the shop page layout with the WooCommerce builder addon of the ProductX plugin.<\/p>\n\n\n\n In this tutorial, we showed how with the use of the ProductX plugin, we can make custom WooCommerce shop layouts. We revealed there are two different methods for creating a shop page layout and showed the processes in depth. <\/p>\n\n\n\n We believe now you can create your own stunning and attractive shop page layout for your eCommerce store. Give it a try if you haven\u2019t yet. Following that, we hope you\u2019ll be able to receive all the goodies from your store.<\/p>\n\n\n\n If you\u2019ve any doubts or queries, then let us know in the comments section. And then, we\u2019ll reach out to you. <\/p>\n\n\n\n Also, check out how to create a gallery in WordPress<\/a> and how to add email subscriptions in WordPress<\/a>. Are you wondering how to create a WooCommerce custom product layout with ProductX? If your answer is yes, then you\u2019ve landed in the right place. Your online store\u2019s shop page has all the fancy products that you want to sell. Customers interact with the WooCommerce shop page most, that\u2019s why it needs special attention. Sadly, […]<\/p>\n","protected":false},"author":2,"featured_media":1752,"comment_status":"open","ping_status":"open","sticky":false,"template":"post-templates\/post-middle-column.php","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[6],"tags":[],"class_list":["post-1676","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-and-tutorials"],"blocksy_meta":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/productx-featured-image.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9LLEg-r2","_links":{"self":[{"href":"https:\/\/templatesell.com\/blog\/wp-json\/wp\/v2\/posts\/1676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/templatesell.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/templatesell.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/templatesell.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/templatesell.com\/blog\/wp-json\/wp\/v2\/comments?post=1676"}],"version-history":[{"count":48,"href":"https:\/\/templatesell.com\/blog\/wp-json\/wp\/v2\/posts\/1676\/revisions"}],"predecessor-version":[{"id":1755,"href":"https:\/\/templatesell.com\/blog\/wp-json\/wp\/v2\/posts\/1676\/revisions\/1755"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/templatesell.com\/blog\/wp-json\/wp\/v2\/media\/1752"}],"wp:attachment":[{"href":"https:\/\/templatesell.com\/blog\/wp-json\/wp\/v2\/media?parent=1676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/templatesell.com\/blog\/wp-json\/wp\/v2\/categories?post=1676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/templatesell.com\/blog\/wp-json\/wp\/v2\/tags?post=1676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\n\n\nHow to Make WooCommerce Custom Product Layouts with ProductX?<\/h2>\n\n\n\n
1. Installing the ProductX Plugin (Free Version)<\/h3>\n\n\n\n
![\"Install](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/install-productx-plugin.png\")
<\/figure>\n\n\n\n
\n\n\n\n2. Installing the ProductX Plugin (Premium Version)<\/h3>\n\n\n\n
![\"Click](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/click-on-buy-now-button.png\")
<\/figure>\n\n\n\n![\"Choose](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/choose-the-suitable-productx-plan.png\")
<\/figure>\n\n\n\n![\"Fill](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/fill-in-the-required-details-and-create-account.png\")
<\/figure>\n\n\n\n![\"Click](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/click-on-purchase-button.png\")
<\/figure>\n\n\n\n
\n\n\n\n3. Uploading, Installing & Activating ProductX Pro<\/h3>\n\n\n\n
![\"Upload](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/upload-and-install-premium-productx-plugin.png\")
<\/figure>\n\n\n\n![\"Click](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/click-on-activate-plugin-option.png\")
<\/figure>\n\n\n\n![\"Enter](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/enter-your-license-key-and-save-it.png\")
<\/figure>\n\n\n\n
\n\n\n\n4. Setting Up the ProductX Plugin<\/h3>\n\n\n\n
![\"Setting](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/setting-up-productx-plugin.png\")
<\/figure>\n\n\n\n
\n\n\n\n5. Creating a New Shop Page Layout with ProductX<\/h3>\n\n\n\n
Step 1: Activate the Builder Addon<\/h4>\n\n\n\n
![\"Go](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/go-to-productx-addon-and-enable-builder-addon.png\")
<\/figure>\n\n\n\nStep 2: Create a New Template Layout<\/h4>\n\n\n\n
![\"Go](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/go-to-productx-builder-and-click-on-add-new-button.png\")
<\/figure>\n\n\n\n![\"Choose](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/choose-a-shop-template-and-click-on-create-template.png\")
<\/figure>\n\n\n\n![\"Click](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/click-on-save-and-edit-template-button.png\")
<\/figure>\n\n\n\nMethod 1: Starting from the Scratch with the Help of Block Designs<\/h4>\n\n\n\n
![\"ProductX](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/productx-woocommerce-blocks.png\")
<\/figure>\n\n\n\n![\"Access](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/access-to-the-productx-woocommerce-blocks.png\")
<\/figure>\n\n\n\n![\"Insert](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/insert-the-productx-product-blocks.png\")
<\/figure>\n\n\n\n![\"Product](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/product-grid-settings-option.png\")
<\/figure>\n\n\n\n![\"ProductX](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/productx-block-customization-options.png\")
<\/figure>\n\n\n\nMethod 2: Using the Starter Pack Template to Create a Shop Page<\/h4>\n\n\n\n
![\"ProductX](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/productx-starter-packs-and-readymade-block-design.png\")
<\/figure>\n\n\n\n![\"Exploring](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/exploring-block-library-option-of-productx.png\")
<\/figure>\n\n\n\n![\"Importing](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/importing-a-starter-pack-option.png\")
<\/figure>\n\n\n\n![\"Saving](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/saving-and-previewing-a-template-option.png\")
<\/figure>\n\n\n\n![\"Publish](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/publish-the-shop-page.png\")
<\/figure>\n\n\n\n
\n\n\n\n6. Customizing the Shop Page using ProductX Blocks<\/h3>\n\n\n\n
I) Design <\/h4>\n\n\n\n
![\"ProductX](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/productx-block-design-customization.png\")
<\/figure>\n\n\n\nII) Settings <\/h4>\n\n\n\n
![\"ProductX](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/productx-block-settings-customization.png\")
<\/figure>\n\n\n\nIII) Advanced<\/h4>\n\n\n\n
![\"ProductX](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/productx-block-advanced-customization.png\")
<\/figure>\n\n\n\n
\n\n\n\n7. Preview the Shop Page<\/h3>\n\n\n\n
![\"Shop](\"https:\/\/www.templatesell.com\/blog\/wp-content\/uploads\/2022\/05\/shop-page-preview.png\")
<\/figure>\n\n\n\n
\n\n\n\nConclusion<\/h2>\n\n\n\n
Follow us on Facebook<\/a> and Twitter<\/a> to keep an eye on such other interesting articles.<\/p>\n","protected":false},"excerpt":{"rendered":"