{"id":915,"date":"2025-10-09T10:23:21","date_gmt":"2025-10-09T10:23:21","guid":{"rendered":"https:\/\/easycommerce.dev\/docs\/?post_type=ek_doc&#038;p=915"},"modified":"2026-03-12T06:18:50","modified_gmt":"2026-03-12T06:18:50","slug":"how-to-customize-easycommerce-shop-product-and-checkout-page-with-wp-bakery-builder","status":"publish","type":"ek_doc","link":"https:\/\/easycommerce.dev\/docs\/addons\/how-to-customize-easycommerce-shop-product-and-checkout-page-with-wp-bakery-builder\/","title":{"rendered":"WP Bakery Builder Integration"},"content":{"rendered":"\n<p>You can now easily customize your EasyCommerce shop, single product, and checkout pages using <strong>WPBakery Page Builder<\/strong>. We\u2019ve integrated WPBakery with our AI-powered <strong>EasyCommerce WordPress plugin<\/strong>. You can design your store exactly how you want.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-black-color has-text-color has-link-color wp-elements-f63f27db9228b03f6c6be6a0ffbdbf85\">Required Plugins:<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-black-color has-text-color has-link-color wp-elements-aeb6db439a86ae39cd1abf06883d43d9\">EasyCommerce Plugin<br><\/li>\n\n\n\n<li class=\"has-black-color has-text-color has-link-color wp-elements-3360931b17f40f63402b2eedc5120650\">EasyCommerce WPBakery Addon<br><\/li>\n\n\n\n<li class=\"has-black-color has-text-color has-link-color wp-elements-f14de576cdae07a34e9de218922f6711\">WPBakery Page Builder Plugin<\/li>\n<\/ul>\n\n\n\n<iframe loading=\"lazy\" width=\"800\" height=\"400\" src=\"https:\/\/www.youtube.com\/embed\/GsK8RXrX7vQ?si=maB7QuJsd7pM6G7V\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading has-black-color has-text-color has-link-color wp-elements-e587f6a3e265928a4fc7f80bb3c01942\">Step-by-Step Guide:<\/h3>\n\n\n\n<p class=\"has-black-color has-text-color has-link-color wp-elements-fb931993e35531432fe2e069a4515fae\"><strong>Step 1: Install the Required Plugins<\/strong><strong><br><\/strong><strong><br><\/strong>Head over to your WordPress dashboard and go to: <strong>Plugins &gt; Add New &gt; Upload Plugin<\/strong><\/p>\n\n\n\n<p>Upload, install, and activate all three plugins listed above.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1013\" height=\"671\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/enable_essential_plugins_in_site.png\" alt=\"\" class=\"wp-image-916\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/enable_essential_plugins_in_site.png 1013w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/enable_essential_plugins_in_site-300x199.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/enable_essential_plugins_in_site-768x509.png 768w\" sizes=\"auto, (max-width: 1013px) 100vw, 1013px\" \/><\/figure>\n\n\n\n<p class=\"has-black-color has-text-color has-link-color wp-elements-94fb18f7a36e70c2baed9e0ba6661263\">\ud83d\udca1 <strong>Note:<\/strong> Before you start customizing, make sure you&#8217;ve completed the EasyCommerce setup using the setup wizard.<\/p>\n\n\n\n<h3 class=\"wp-block-heading has-black-color has-text-color has-link-color wp-elements-555ddd8b05d0c52b8414cb1fa048bed1\">Step 2: Turn On the Editing Feature<\/h3>\n\n\n\n<p class=\"has-black-color has-text-color has-link-color wp-elements-9ff9b80438a785c131c5fa1a524f4aac\">To start customizing your site, you need to enable the editing features. Go to <strong>WP Bakery &gt; Role Manager<\/strong> from your website menu.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"275\" height=\"412\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/role_manager_settings.png\" alt=\"\" class=\"wp-image-917\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/role_manager_settings.png 275w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/role_manager_settings-200x300.png 200w\" sizes=\"auto, (max-width: 275px) 100vw, 275px\" \/><\/figure>\n\n\n\n<p>In the dropdown, choose <strong>Custom<\/strong>. Check the boxes for <strong>Product<\/strong>, <strong>Page<\/strong>, and <strong>Post<\/strong>. Click <strong>Save Changes<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"417\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/page_builder_settings-1024x417.png\" alt=\"\" class=\"wp-image-918\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/page_builder_settings-1024x417.png 1024w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/page_builder_settings-300x122.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/page_builder_settings-768x313.png 768w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/page_builder_settings.png 1189w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<h3 class=\"wp-block-heading has-black-color has-text-color has-link-color wp-elements-bb72bdef4d1ce488440563ad1885d335\">Step 3: Create New Pages<\/h3>\n\n\n\n<p>You can edit the pages that are already there, but we recommend creating new pages for your Shop and Checkout. This gives you more control and keeps things clean.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-link-color wp-elements-27baeb95f44a90553b089481c95ef572\"><strong>\ud83d\udca1 Tip:<\/strong> If you choose to edit an existing page, don\u2019t forget to remove any old shortcodes first to avoid layout issues.<\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-link-color wp-elements-bf3c0120543cbdee03f00c53e9dcc945\"><strong>Step 4: Customize the New Pages<\/strong><\/p>\n\n\n\n<p>Once your new pages are ready, it&#8217;s time to make them your own! Start with the Shop page.<\/p>\n\n\n\n<h4 class=\"wp-block-heading has-black-color has-text-color has-link-color wp-elements-b80af251ee287f59b7ef946ca96e47a9\">1. Shop Page<\/h4>\n\n\n\n<p><strong>To customize the Shop page:<\/strong><\/p>\n\n\n\n<p>Go to Pages in your WordPress dashboard. Hover over your Shop page and click<strong> Edit with WP Bakery Page Builder.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"452\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/edit_shop_page-1024x452.png\" alt=\"\" class=\"wp-image-919\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/edit_shop_page-1024x452.png 1024w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/edit_shop_page-300x132.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/edit_shop_page-768x339.png 768w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/edit_shop_page.png 1321w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In the editor, click <strong>Add Element<\/strong>, then choose the EasyCommerce shop element.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"539\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/select_shop_element-1024x539.png\" alt=\"\" class=\"wp-image-920\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/select_shop_element-1024x539.png 1024w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/select_shop_element-300x158.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/select_shop_element-768x404.png 768w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/select_shop_element.png 1143w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Here, you can customize the <strong>Number of products per page, Show\/hide filters, Typography settings for category, title, price,<\/strong> and more.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"735\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/customize_shop_page-1024x735.png\" alt=\"\" class=\"wp-image-921\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/customize_shop_page-1024x735.png 1024w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/customize_shop_page-300x215.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/customize_shop_page-768x552.png 768w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/customize_shop_page.png 1192w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<p>Once you&#8217;re happy with the design, set it as your default shop page: Go to <strong>Store &gt; Settings &gt; General &gt; Store<\/strong>, and select your new Shop page.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/set_shop_page-1024x538.png\" alt=\"\" class=\"wp-image-922\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/set_shop_page-1024x538.png 1024w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/set_shop_page-300x158.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/set_shop_page-768x404.png 768w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/set_shop_page.png 1162w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<p><strong>2. Single Product Page<\/strong><\/p>\n\n\n\n<p>Next one is single product page. Go to <strong>Store &gt; All products<\/strong> from your site dashboard. After that, click on the builder.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"435\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/edit_single_product-1024x435.png\" alt=\"\" class=\"wp-image-923\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/edit_single_product-1024x435.png 1024w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/edit_single_product-300x127.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/edit_single_product-768x326.png 768w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/edit_single_product.png 1319w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<p>Then click <strong>WP Bakery Page Builder<\/strong> to open the editor.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"696\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/click_wpbakery_builder_single_product-1024x696.png\" alt=\"\" class=\"wp-image-924\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/click_wpbakery_builder_single_product-1024x696.png 1024w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/click_wpbakery_builder_single_product-300x204.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/click_wpbakery_builder_single_product-768x522.png 768w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/click_wpbakery_builder_single_product.png 1310w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Here, you can set the number of gallery images, choose to show or hide stock information.<\/p>\n\n\n\n<p>After you&#8217;re done, just save your changes.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"611\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/single_product_settings-1024x611.png\" alt=\"\" class=\"wp-image-925\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/single_product_settings-1024x611.png 1024w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/single_product_settings-300x179.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/single_product_settings-768x458.png 768w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/single_product_settings.png 1156w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Note: <\/strong>Always use the WP Bakery default template for the best customization experience.<strong><br><\/strong><strong><br><\/strong><strong>3. Checkout Page<\/strong><\/p>\n\n\n\n<p>Customizing the Checkout page is just like the Shop page:<\/p>\n\n\n\n<p>Open the page with WP Bakery Page Builder. Choose the <strong>default WP Bakery layout<\/strong>.<br><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"974\" height=\"567\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/default_wp_bakery_layout.png\" alt=\"\" class=\"wp-image-926\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/default_wp_bakery_layout.png 974w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/default_wp_bakery_layout-300x175.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/default_wp_bakery_layout-768x447.png 768w\" sizes=\"auto, (max-width: 974px) 100vw, 974px\" \/><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<p>Click on <strong>Add Element<\/strong> and pick the <strong>Checkout element<\/strong> from the EasyCommerce menu.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"975\" height=\"497\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/checkout_element.png\" alt=\"\" class=\"wp-image-927\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/checkout_element.png 975w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/checkout_element-300x153.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/checkout_element-768x391.png 768w\" sizes=\"auto, (max-width: 975px) 100vw, 975px\" \/><\/figure>\n\n\n\n<p>From the editor, you can easily customize the layout, buttons, sections, and more to match your style.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"740\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/checkout_customization-1024x740.png\" alt=\"\" class=\"wp-image-928\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/checkout_customization-1024x740.png 1024w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/checkout_customization-300x217.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/checkout_customization-768x555.png 768w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/10\/checkout_customization.png 1187w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Once you\u2019re happy with the design, don\u2019t forget to save your changes and click the Update button to make everything live!<\/p>\n\n\n\n<p><strong>Note:<\/strong> Once you&#8217;re done with the customization, set it as your default checkout page<\/p>\n","protected":false},"author":6,"featured_media":0,"template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"easy_topic":[21],"easy_product":[19],"class_list":["post-915","ek_doc","type-ek_doc","status-publish","hentry","easy_topic-addons","easy_product-easycommerce"],"_links":{"self":[{"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/ek_doc\/915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/ek_doc"}],"about":[{"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/types\/ek_doc"}],"author":[{"embeddable":true,"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/users\/6"}],"wp:attachment":[{"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/media?parent=915"}],"wp:term":[{"taxonomy":"easy_topic","embeddable":true,"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/easy_topic?post=915"},{"taxonomy":"easy_product","embeddable":true,"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/easy_product?post=915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}