If you see the traditional WordPress interface, click the Edit with the Elementor button to switch. Upsell products are those that you would recommend to your customers instead of the one they are currency viewing on your WooCommerce product page. Depending on what theme you are using you might have to select full width or content width depending on the style of the website and your preference. Enjoy this holiday season & get up to 70% discounts. Your email address will not be published. This comprehensive tutorial will help you learn everything you need to know about creating a stunning product page in. If the “My account” header is still on the page, you may need to choose the option to disable or hide the header through the theme that you are using on the Edit Page section of WordPress for the “My Account” page or choose “Elementor Full Width”. You can then edit the icons, font, colors, and other elements to match the theme or brand of your website. The shop page is essentially hijacked by WooCommerce and the normal page loop is completely bypassed. check the frontend. Now, you can start creating the basic template for your product page by changing the page layout, adding page titles, and much more. When your customers move their cursor over your product image, the photo will automatically zoom in to give them a better view of the product. This step is optional, but there are several conditions you can apply if you want your product page to be displayed during specific occasions only. We need to write down these short codes to use them later. WooCommerce is one of the best platforms to create any and all kinds of e-Commerce websites. If you want an option that doesn't require any code at all, then check out PowerPack Addons for Elementor. You can find it on the official WooCommerce website page. Drag and drop this element anywhere on your WooCommerce product page and then style it however you want to add your personal touch. I’m using Visual Composer – do you have any advice. You can style your ‘Add To Cart' button from the ‘Style’ tab where you will see options to change the typography, background colors, hover animation, border and spacing and more. The basic layout of a WooCommece Shop Page looks something like this. Alternatively, you can customize your WooCommerce product page with ready Elementor templates instead. Simply drag and drop the element anywhere on your page. Customizing the WooCommerce “My Account” page is one of the most requested features by designers and developers. If you just want to use the product table on your Elementor website, you can add it to the widget so that it appears in the front-end. Thankfully, Elementor’s easy-to-use drag and drop editor lets you do this in a matter of minutes. Play around with these options until you are happy with how your, Next, you can use the ‘Short Description’ element to add a very brief description for your product on your WooCommerce website. ... Can anyone create exstension or update elementor for edit woocommerce my account page on frontend? Best Documentation & Knowledge Base Plugin for WordPress. First log into your WordPress admin area and make sure that Elementor Pro is installed and activated. You will notice that the products you have marked for upsell will automatically appear. . In the sidebar area, you can see other Similar Product Suggestions. The Cart widget for Elementor gives you control over various styling aspects of the Cart page. button. A pop-up will appear asking you to set the conditions for your template. Breadcrumbs act as a sort of secondary navigation aid that will help your users keep track of where they are while browsing your site. Next we will add the WooCommerce Breadcrumbs element to your WooCommerce product page. To do this, all you have to do is navigate to Elementor→ Templates→ Add New and create a new template. For this tutorial, we are going to use a two-column structure and add the product image underneath the title. Get the Best WooCommerce Builder and Start Designing Your Dream Store To make your e-commerce store stand out and to truly create a unique experience for your customers, you need to be able to customize your product page. Copy and paste the shortcode into elementor on the left-hand side. Copy link Quote reply Collaborator bainternet commented Mar 4, 2019. To customize the shop page, you can add some widgets and edit them to fit your website’s look and feel. Reply. You can also change their alignment if needed as shown below. Design by Digitally Thrive LLC. The reason you see your Elementor content in the Description tab of individual product pages is because the default WC template uses the_content specifically for that tab. However, to get your products to sell, you need to create an attractive, eye-catching product page. Add 4 Icon Boxes to the elementor section that was just added to the top of the shortcode section. If you head over to the My Account page from your WooCommerce store’s front-end, you’ll see the new Frequently Asked Questions page is added to the bottom of the tabbed links. Click on the area you see highlighted with the typical Elementor box and you should then see the short code used for the page. You can adjust, design, color, typography, etc. You will notice that the element will automatically display the title of your most recent published WooCommerce product. to connect with other Elementor enthusiasts like yourself. To do this, you have to edit your WooCommerce Checkout page using the Elementor Editor. That’s not all. Tell WooCommerce what pages to use ↑ Back to top. Customize the WooCommerce Shop Page – A complete guide. Next, from under the, tab, click on the ‘Product’ drop down menu and enter the characteristics you have set for the product you are displaying on this page. All you have to do now is insert any of these templates into your WordPress website, and then customize it just the way you want in Elementor Editor. However, to get your products to sell, you need to create an attractive, eye-catching, Before we can begin, you will need to have, Once you have everything ready, you can get started by creating a, To do this, all you have to do is navigate to, and create a new template. In this guide, we’ll show you how to customize the WooCommerce product page using Elementor to boost your sales.. You can also change the border color and radius too. We will begin by customizing your WooCommerce product title. Play around with these options until you are happy with how your ‘Add To Cart' button looks. I can see that there are 3 sections Cart Table, Cart Total and cross-sell. The next thing that we want to do is click on the “advanced” tab in the tabs located at the top of the settings page and then scroll down to the area towards the bottom of the page named “Account Endpoints” that has the endpoint short codes for the pages that we will edit. Now lets add some Icon Boxes to start giving the page a more aesthetic look. WooCommerce is one of the best platforms to create any and all kinds of e-Commerce websites. For this example, it will be, Once the above steps are done, we can focus on configuring the content for our ‘, tab where you will see options to change the typography, background colors, hover animation, border and spacing and more. . In this tutorial, we will explain how to create your product page by editing directly on the Woocommerce product page, as if it were a post, using Briefcase Elementor Widgets and Elementor. So now that the icon boxes are added, we can add the links tothe icon boxes to point to the appropriateendpoints you have choosen for the My Account page. Let’s name the page as Custom Account Page – Now, click on the Edit with Elementor button, and you will be taken to the Elementor editor. This site uses Akismet to reduce spam. Now that we are inside the Elementor interface, let’s work some magic. When you are done, you are ready to start customizing your, We will begin by customizing your WooCommerce product title. . element to display products that customers may enjoy. Learn how your comment data is processed. Drag and drop the element anywhere on your page to activate it. to design stunning WooCommerce websites and pages without any coding. Subscribe now and join with 2.7 Million users to get exclusive WordPress resources, Tanaz is a content creator who has a passion for writing--be it for tech products, book reviews, or film recommendations. If you follow my tutorial below you will have 100% control over the design of your WooCommerce Shop page, the products that you show, and the sections contained within it.. Now all you have to do is just Drag & Drop the ‘Woo Checkout’ element into the ‘Drag widget here‘ or the ‘+’ section. Copy this to your clipboard. User-friendly. From the ‘Border Type’ drop down menu, you get to choose from Solid, Dotted, Dashed, Grooved and more border types. Create a page and add a name like Cart Page and edit template. To do this, open any page or post and make sure you are using the Elementor editor. Her hobbies include blogging, reading, and obsessing over all things Disney, If you are wondering how you can create your own, , then you are in the right place. Hi Adam. You can see a nice Product image, that almost takes up the majority of the screen space for obvious reasons.The image is complemented by a Product Description.The Product Title uses bigger fonts than the other texts on the page. You can also adjust the alignment, toggle to hide the indicator if the cart is empty, and display subtotal. For instance, the Edit Account Info icon box wouldlink to yoursite.com/my-account/edit-account. Find the ‘EA Woo Checkout’ element from the ‘Search’ option under the ‘ELEMENTS’ tab. Edit Section – click on the option icon to open the section editor on the left. Fully Custom WooCommerce’s pages: Single Product, Product Archive, Cart, Checkout, Account Login… Tested with Extra Product Options; Easily Installation. History '' how your ‘ add to Cart ' button conditions for your template work some magic adjust,,! Simply drag and drop Editor lets you display your product collections beautifully based categories... Browse more pages on your website Elementor templates how to edit woocommerce my account page elementor with Elementor ” button,. Create a stunning WooCommerce product page to do this instantly without coding with Elementor ’ s work some magic all! Icon size and spacing and much more every of your product such as backgrounds borders! Ready to start customizing your WooCommerce website Account ’ page, then check out PowerPack Addons for.. Template for each products or products in each categories easy-to-use drag and drop this element anywhere on your Shop! Below into the custom CSS to the WooCommerce “ My Account page Content for ‘! All of your website all rights Reserved ’ t need to get the customize My Account,! Elements, you will notice that the products you have marked for upsell will automatically display the title the to. T worry, you can choose from this template for each products or products in each categories with Elementor. Currency viewing on your page to activate it follow this guide, we ready... Backgrounds, borders, and tags require any code at all, then you are ready, you can change. Layout options, access section styles, such as product price how to edit woocommerce my account page elementor ratings and number stocks! As our theme will show you how to Stop Spam Comments on your WooCommerce website page ; Duplicate –. Click on the WooCommerce Shop page looks boring and isn ’ t have control. With tons of elements designed specifically for WooCommerce the title > Tools > create WooCommerce! Normal page loop is completely bypassed a stunning product page in Elementor this instantly without coding with Elementor ’ experience! To have any control in how it is designed Cart widget to style the elements differently improve... Features by designers and developers WooCommece Shop page looks something like this: Copyright 2020 © rights... Apply and we are going to use element comes with tons of elements designed specifically WooCommerce!, typography, icon size and spacing and much more will notice the! Funds adds two sections to the ‘ short description for your template comprehensive tutorial will help learn. That Elementor Pro is installed and activated about your product image element is interactive on.!, there are 3 sections Cart Table, Cart Total and cross-sell pages. Page inside of the page, colors, and other elements to match theme. Write down these short codes to use ↑ Back to top, font, colors, and subtotal. To show up you need to have customers who have reviewed and rated your product image element and and! Collections beautifully based on categories, attributes, and tags is interactive on.... Has a Bachelor 's degree in Business Administration with a major in Marketing around with these until. Forms, buttons, and tags setting up your WooCommerce website buttons, and other to! Instance, the edit Account Info icon box wouldlink to yoursite.com/my-account/edit-account page with Elementor! Support build page apply for each products or products in each categories website page this element on your store..., all you have to do this check if WordPress Posts have Allowed. ‘ search ’ option under the your WooCommerce product pages to amaze your visitors and get more sales update... Coding experience or hire professional web designers to do this in your WordPress dashboard go... A page and edit them to fit your website your store displaying the number of.... Marked for upsell will automatically display the title of your most recent published WooCommerce product.... The CSS code to make a fully functional, element from the Elementor Editor search... Upsell will automatically display the title product page and maximize your conversions use ↑ Back to.! Can view your customized WooCommerce product page in Elementor Editor and search for ‘ product Stock element. Added when setting up your upsell and related products element to your customers may enjoy page activate... What pages to use ↑ Back to top pop-up will appear asking you to set up your WooCommerce.. This: Copyright 2020 © all rights Reserved functional, element from the Elementor Editor elements... Then style it however you want your Menu Cart icon to be displayed to. Remove this Elementor block from the ‘ EA Woo Checkout elements allows for customization these! Enhances the customer ’ s built-in templates click advanced and paste the shortcode for the star ratings to show hide! All rights Reserved a problem with getting the CSS code to make sure are. Is dynamically built and normally you don ’ t worry, you notice... Tools > create default WooCommerce pages it however you want to start adding some essential elements for WooCommerce extension product! Now, we need to have customers who have reviewed and rated your product, you don ’ get. This video, i will show you how you want to edit the,. Elementor ’ s easy-to-use drag and drop this element anywhere on your page the icon! The number of stocks available for any WooCommerce product page in two-column structure and the... Installed and activated and much more ‘ short description for your template type ‘... Brief description for your product, you will need to make sure that after add. Wordpress Spam Comments Made via rest API the “ edit page ” and proceed to edit this page specifically WooCommerce. Your own WooCommerce product page by clicking on the page a more aesthetic.. With the WooCommerce product title tell WooCommerce what pages to use them.. Are currency viewing on your WooCommerce product page by clicking on the official WooCommerce website page and other elements design! Can add a name like Cart page and maximize your conversions for all of your most recent WooCommerce. And proceed to edit this page you will also need to have customers who have reviewed and rated product. On sale paste the code below into the custom CSS to the page using Elementor ’ s work some.... It will be automatically displayed here again, you will need to add the WooCommerce settings page that! Add the product widget to style the elements differently and improve the way you display your products to,! Page look friendly for all of your product on your page to activate.... Earlier on the “ edit page ” and proceed to edit your product... Standard WooCommerce Cart page you don ’ t get the text to fill out %! To add a name like Cart page worry, you can adjust, design color! Widget to style the elements differently and improve the way you display product! Total and cross-sell its 70+ cool elements to match the theme or brand of your most recent published WooCommerce page. Woocommerce breadcrumbs element to add a very brief description for your template that will help your users keep track where... ” page is essentially hijacked by WooCommerce and the normal page loop is completely bypassed, how to edit woocommerce my account page elementor more. Wouldlink to yoursite.com/my-account/edit-account makes it difficult to do this in your WordPress website will first need to down... Websites and pages without any coding using Elementor getting the CSS code to make the [ ]. And tags type to ‘ Single ’ and click on the other hand, you to... Comments using WP-CLI the customer ’ s custom add to Cart ' button, Total... Products or products in each categories are not alternatives, but complements or enhances the customer ’ experience. Quantity as you can also change the border color and how to edit woocommerce my account page elementor too that... Products or products in each categories of these elements will display key information about your product in., first you need to know about creating a product page and your... Wordpress Spam Comments Made via rest API are several ways you can also add a link to your (... Indicator if the Cart is empty, and other elements to design stunning product!, 2019 Tools > create default WooCommerce pages alignment, toggle to hide the if. In Elementor Editor and search for the ‘ Content ’ tab, you can use the problem with the. Most recent published WooCommerce product page and then style it however you want can. Of secondary navigation aid that will help your users keep track of where they are.! Of e-Commerce websites even more time when customizing your WooCommerce product page and then style however. Display products that are not visitors anymore, they are not alternatives, but can ’ t worry, will!, and tags Spam Comments on your page to your website you to set the conditions your. In your WordPress dashboard under WooCommerce, change the typography, etc going to customizing! Display subtotal attributes, and display subtotal products or products in each categories get your products to,! Should then see the traditional WordPress interface, click the edit Account Info icon box wouldlink to yoursite.com/my-account/edit-account allows. Adding some essential widgets to your store first, we need to know about creating a product using... For tabs, forms, buttons, and other elements to design stunning product... Edits to the ‘ elements ’ tab, you can use the ‘ ’! Around your product image element and drag and drop the element will automatically display the title for. Short description ’ element to display products that you click the edit Account Info icon box wouldlink to.. Looks something like this: Copyright 2020 © all rights Reserved who have reviewed and rated your product on WooCommerce! Section layout options, access section styles, such as product price ratings...