{"id":6398,"date":"2024-03-10T11:19:21","date_gmt":"2024-03-10T05:19:21","guid":{"rendered":"https:\/\/codexpert.io\/?p=6398"},"modified":"2026-05-14T15:32:52","modified_gmt":"2026-05-14T09:32:52","slug":"customize-woocommerce-my-account-page","status":"publish","type":"post","link":"https:\/\/codexpert.io\/blog\/customize-woocommerce-my-account-page\/","title":{"rendered":"Customize WooCommerce My Account Page with Elementor &#8211; Step by Step Guide"},"content":{"rendered":"<div class='cx-content-before'><\/div>\n<p class=\"wp-block-paragraph\">A well-designed My Account page is an essential part of any WooCommerce site. It lets customers access their orders, downloads, and account information, all from one convenient page. It also helps repeat customers quickly feel more connected to your shop or brand.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sticking to the default layout of the WooCommerce My Account page might challenge your ability to keep customers satisfied. Customizer plugins like <a href=\"https:\/\/codexpert.io\/codesigner\/\">CoDesigner<\/a> and <a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noopener\">Elementor<\/a> can help you add extra functions to personalize the page with subscriptions, bookings, course enrollments, and many more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this article, we will show you how to create and customize My Account page in WooCommerce with Elementor to drive more sales and traffic to your business.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cx-heading-1\"><strong>Create And Customize WooCommerce My Account Page in 6 Simple Steps<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Making a personalized WooCommerce My Account page is a simple process with CoDesigner and Elementor. You don\u2019t need any coding skills, follow the steps below to get your custom My Account page up and running.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cx-heading-2\"><strong>Step 1: Install &amp; Activate Plugins<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure you have the following WordPress plugins installed on your site &#8211;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener\">WooCommerce<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/codexpert.io\/codesigner\/\">CoDesigner<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noopener\">Elementor<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cx-heading-3\"><strong>Step 2: Create or Edit My Account Page<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Once you delete the WooCommerce My Account shortcode, create a new My Account page or edit the existing My Account page.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/QnALjPF9qfe_aTlD8Tb4jmTY53lNq8ocIxXESAWQXi8oqdVRtAgQ3W3TD7QasMMyNnVyhg38lIIo2P8QsTZflG4-mQmPSHnjVgWPNMfMxOSrpiAjiRWJ2dCuu8WTqrWo_btwUoCNk1eNwsOPLqYqid0\" alt=\"Create or Edit My Account Page\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cx-heading-4\"><strong>Step 3: Add My Account Widget<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Click on \u2018Edit with Elementor\u2019 and search for the My Account widget in the \u2018Search\u2019 bar under the \u2018Elements\u2019 tab. Then simply drag and drop the widget in a new section of the page.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/EP7NS4m4a5ewyuvDFpQjdx8ivo6sHn_hzjsj_C_oQ8s5KPVSPu0uaq32Y5mS3tsgagjz3Gb5u5sWtw5DgSwU_S718ddEQgsXtJDBuGxoIu7Xfa7hEgjpyjtan4n24LmatmrFBkYEFzlIjllf76pD6bY\" alt=\"Add My Account Widget\" style=\"width:388px;height:auto\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cx-heading-5\"><strong>Step 4: Style Tab with CoDesigner<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Add a custom tab on the My Account page using CoDesigner. CoDesigner has two basic tab styling options \u2013 Tab Design and Active Tab Design.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/BIyCeKS8lzA61UVcS7-ROxjra_IJ2QZ0HcoAmw4cOwbRemOA7CzuBSp2WsWRbY1F1D-cEC0NDCiNsS3UcrJf_UOWnZgm-AjnfH_EQO-E2xqZRCQm0MO4PTb5Jhfp79M6syAY6aN9II08g1VknVTp518\" alt=\"Style Tab with CoDesigner\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">&#8220;Tab design&#8221; includes the overall visual and interactive elements of all tabs in their default state, while &#8220;active tab design&#8221; specifically refers to the visual changes applied to a tab to show it is currently selected or in use.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cx-heading-6\"><strong>Step 5: Edit Tab and Active Tab Design&nbsp;<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">With Tab Design and Active Tab Design, you can change Tab Position, Typography, Text Color Type, Background Type, Margin, Padding, Border Type, and Border Radius.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/6hLudBVb5BTB8PS4EISqPo4EUWSTlW6SjceA-LLkenS9v4ezM9IS-ZVCmJDDu1oV29NalmgFUeyS-elldouQ_A-PcZrPh83aUT45R-6naNKU8yJSiZetNe0B65UCAw5GIQPyXwAUimWCDVRBu-fpmvQ\" alt=\"Edit Tab and Active Tab Design\u00a0\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cx-heading-7\"><strong>Step 6: Advanced Customizations<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you want advanced settings to further customize then you can click the Advanced tab to apply motion effects, mask, positioning, and many more.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/uRYq_EjO-85B3kfwlT0gP3E9R8auLKBj-Iv1u47EqKCEMqe6RLR0OFYrZtHB0CsrrJ78uz7YnwBzTsPIdX8a1VXO-HccTuPwM75gzXTZNEnRqqtEja3bKc7IithlNkcNkHixH3dfaS4E3vWNLkmnI3Q\" alt=\"Advanced Customizations\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cx-heading-8\"><strong>Final Words<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Having a custom My Accounts page on your website helps encourage customers to make repeated purchases from your shop. Giving a central hub for users to manage their profiles, orders, wishlists, and addresses, not only helps improve user experience but also streamlines customer support and increases trust in your platform.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, if you want to give your users a personalized user experience, and build trust and loyalty for your brand; create a personalized My Account page with <a href=\"https:\/\/codexpert.io\/codesigner\/\">CoDesigner<\/a>&#8216;s ready-made widgets and modules today!&nbsp;<\/p>\n<div class='cx-content-after'><\/div>","protected":false},"excerpt":{"rendered":"<p>A well-designed My Account page is an essential part of any WooCommerce site. It lets customers access their orders, downloads, and account information, all from one convenient page. It also helps repeat customers quickly feel more connected to your shop or brand.&nbsp; Sticking to the default layout of the WooCommerce My Account page might challenge [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":25733,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","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":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","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":""}},"footnotes":""},"categories":[14],"tags":[26],"class_list":["post-6398","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce","tag-woolementor"],"_links":{"self":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/6398","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/comments?post=6398"}],"version-history":[{"count":1,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/6398\/revisions"}],"predecessor-version":[{"id":33263,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/posts\/6398\/revisions\/33263"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/media\/25733"}],"wp:attachment":[{"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/media?parent=6398"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/categories?post=6398"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codexpert.io\/blog\/wp-json\/wp\/v2\/tags?post=6398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}